@licklist/design 0.78.5-dev.88 → 0.78.5-dev.9

package/src/v2/pages/CreateUser/CreateUserPage.tsx

@@ -1,1062 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { Button } from '../../components/Button'
-import { FormField } from '../../components/FormField'
-import { Select } from '../../components/Select'
-import { Checkbox } from '../../components/Checkbox'
-import { UserAvatar } from '../../components/UserAvatar'
-import { ArrowLeftIcon, SearchIcon } from '../../icons'
-import './CreateUserPage.scss'
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export type GlobalRole = 'super_admin' | 'system_admin'
-/** Internal union used for the role-selection step in admin-panel mode */
-type UserTypeSelection = GlobalRole | 'admin'
-export type ProviderRole = 'admin' | 'manager' | 'operations' | 'staff' | 'viewer' | 'desk'
-
-export interface ExistingUser {
-  id: string
-  fullName: string
-  email: string
-  userNumber?: number
-  assignments?: UserAssignment[]
-}
-
-export interface UserAssignment {
-  id: string
-  name: string
-  type: 'company' | 'venue' | 'promoter'
-  avatarUrl?: string
-  role?: string
-  friendlyId: string
-}
-
-export interface EntityResult {
-  id: string
-  name: string
-  type: 'company' | 'venue' | 'promoter'
-  avatarUrl?: string
-  friendlyId: string
-}
-
-export interface VenueAssignment {
-  id: string
-  name: string
-  type: 'venue' | 'promoter'
-  avatarUrl?: string
-  friendlyId: string
-  role: ProviderRole
-  selected: boolean
-}
-
-export interface ProviderAssignment {
-  id: string
-  name: string
-  type: 'company' | 'venue' | 'promoter'
-  avatarUrl?: string
-  friendlyId: string
-  role: ProviderRole
-  parentCompanyId?: string
-}
-
-export interface NestedProvider {
-  id: string
-  name: string
-  type: 'venue' | 'promoter'
-  avatarUrl?: string
-  friendlyId: string
-  selected: boolean
-}
-
-export interface InviteData {
-  firstName: string
-  lastName: string
-  email: string
-  /** Set when mode is admin-panel and role is super_admin or system_admin */
-  globalRole?: GlobalRole
-  /** Set for all provider-scoped invitations */
-  providerRole?: ProviderRole
-  /** Set for admin-panel provider user or company-team modes */
-  providers?: Array<{
-    id: string
-    type: 'company' | 'venue' | 'promoter'
-    role: ProviderRole
-    parentCompanyId?: string
-  }>
-}
-
-export interface CreateUserPageProps {
-  /**
-   * Which context the wizard is opened from:
-   * - `admin-panel`    → /admin/users/add — global user creation, 5-step flow
-   * - `provider-team`  → /venue|promoter/{id}/settings/team-settings/add — 3-step flow
-   * - `company-team`   → /company/{id}/settings/team/add — 4-step flow
-   */
-  mode: 'admin-panel' | 'provider-team' | 'company-team'
-
-  /** Required for provider-team and company-team modes */
-  entityContext?: {
-    id: string
-    name: string
-    type: 'venue' | 'promoter' | 'company'
-    avatarUrl?: string
-  }
-
-  /** Check whether the email belongs to an existing user. Return null if not found. */
-  onCheckEmail: (email: string) => Promise<ExistingUser | null>
-
-  /**
-   * admin-panel only: search for companies / venues / promoters.
-   * Return filtered results (already-added entities may be excluded by the consumer).
-   */
-  onSearchEntities?: (query: string) => Promise<EntityResult[]>
-
-  /** admin-panel only: fetch the nested providers for a selected company */
-  onFetchCompanyProviders?: (companyId: string) => Promise<EntityResult[]>
-
-  /**
-   * company-team only: fetch the list of venues/providers belonging to this company.
-   * Called once on mount.
-   */
-  onFetchCompanyVenues?: () => Promise<VenueAssignment[]>
-
-  /** Called on the final submit with all collected data */
-  onInviteUser: (data: InviteData) => Promise<void>
-
-  /**
-   * admin-panel only: navigate to an existing user's detail page.
-   * The wizard ends here for existing users in admin-panel mode.
-   */
-  onViewUser?: (userId: string) => void
-
-  onCancel: () => void
-  isLoading?: boolean
-  error?: string
-}
-
-// ─── Step type ────────────────────────────────────────────────────────────────
-
-type Step =
-  | 'email'
-  | 'existing-user'   // admin-panel: show card → View User (flow ends)
-  | 'name'            // new user name entry  (provider-team / company-team: existing users also land here with name pre-filled)
-  | 'role'            // admin-panel: global role; provider-team: provider role
-  | 'providers'       // admin-panel, provider-user path: search + select entities
-  | 'set-roles'       // admin-panel, provider-user path: assign role per entity
-  | 'company-access'  // company-team: company toggle + venue selection
-  | 'company-roles'   // company-team: set role per selected entity
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-function formatRole(role: string) {
-  return role.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
-}
-
-function getInitials(name: string) {
-  return name
-    .split(' ')
-    .map((w) => w[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
-}
-
-const PROVIDER_ROLES: ProviderRole[] = ['admin', 'manager', 'operations', 'staff', 'viewer', 'desk']
-
-const PROVIDER_ROLE_DESCRIPTIONS: Record<ProviderRole, string> = {
-  admin: 'Full access to provider settings and team management.',
-  manager: 'Can manage bookings and view reports.',
-  operations: 'Can edit bookings and customer information.',
-  staff: 'Can view and process bookings.',
-  viewer: 'Read-only access to provider data.',
-  desk: 'Front desk access for customer check-in.',
-}
-
-// ─── Sub-components ───────────────────────────────────────────────────────────
-
-function EntityAvatar({ name, avatarUrl }: { name: string; avatarUrl?: string }) {
-  return (
-    <div className="cu-entity-avatar">
-      {avatarUrl ? (
-        <img src={avatarUrl} alt={name} className="cu-entity-avatar__img" />
-      ) : (
-        <span className="cu-entity-avatar__initials">{name.charAt(0).toUpperCase()}</span>
-      )}
-    </div>
-  )
-}
-
-function EntityIdBadge({ type, friendlyId }: { type: string; friendlyId: string }) {
-  const label = type === 'company' ? 'Company' : type === 'venue' ? 'Venue' : 'Promoter'
-  return (
-    <span className="cu-entity-id-badge">
-      {label} ID: {friendlyId}
-    </span>
-  )
-}
-
-function UserCard({ user }: { user: ExistingUser }) {
-  return (
-    <div className="cu-user-card">
-      <UserAvatar initials={getInitials(user.fullName)} size="md" />
-      <div className="cu-user-card__info">
-        <span className="cu-user-card__name">{user.fullName}</span>
-        <span className="cu-user-card__email">{user.email}</span>
-      </div>
-      {user.userNumber && (
-        <span className="cu-user-card__number">User #{user.userNumber}</span>
-      )}
-    </div>
-  )
-}
-
-function ExistingAssignments({ assignments }: { assignments: UserAssignment[] }) {
-  if (!assignments || assignments.length === 0) return null
-  return (
-    <div className="cu-assignments">
-      <span className="cu-assignments__label">Currently assigned to</span>
-      <div className="cu-assignments__list">
-        {assignments.map((a) => (
-          <div key={a.id} className="cu-assignments__item">
-            <EntityAvatar name={a.name} avatarUrl={a.avatarUrl} />
-            <div className="cu-assignments__item-info">
-              <span className="cu-assignments__item-name">{a.name}</span>
-              <EntityIdBadge type={a.type} friendlyId={a.friendlyId} />
-            </div>
-            {a.role && (
-              <span className="cu-assignments__item-role">{formatRole(a.role)}</span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-export const CreateUserPage: React.FC<CreateUserPageProps> = ({
-  mode,
-  entityContext,
-  onCheckEmail,
-  onSearchEntities,
-  onFetchCompanyProviders,
-  onFetchCompanyVenues,
-  onInviteUser,
-  onViewUser,
-  onCancel,
-  isLoading: externalLoading = false,
-  error: externalError,
-}) => {
-  const [step, setStep] = useState<Step>('email')
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | undefined>(externalError)
-
-  // ── Form state ──
-  const [email, setEmail] = useState('')
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [existingUser, setExistingUser] = useState<ExistingUser | null>(null)
-  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
-
-  // ── Role state (admin-panel) ──
-  const [selectedUserType, setSelectedUserType] = useState<UserTypeSelection>('super_admin')
-
-  // ── Role state (provider-team) ──
-  const [providerRole, setProviderRole] = useState<ProviderRole>('admin')
-
-  // ── Entity search state (admin-panel, provider-user path) ──
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResults, setSearchResults] = useState<EntityResult[]>([])
-  const [isSearching, setIsSearching] = useState(false)
-  const [selectedAssignments, setSelectedAssignments] = useState<ProviderAssignment[]>([])
-  const [nestedProviders, setNestedProviders] = useState<Record<string, NestedProvider[]>>({})
-  const [companyAccessStates, setCompanyAccessStates] = useState<Record<string, boolean>>({})
-
-  // ── Company-team venue state ──
-  const [companyAccessEnabled, setCompanyAccessEnabled] = useState(true)
-  const [companyRole, setCompanyRole] = useState<ProviderRole>('admin')
-  const [venues, setVenues] = useState<VenueAssignment[]>([])
-
-  const searchTimeout = useRef<ReturnType<typeof setTimeout>>()
-  const loading = isLoading || externalLoading
-
-  // ── Fetch company venues on mount (company-team mode) ──
-  useEffect(() => {
-    if (mode !== 'company-team' || !onFetchCompanyVenues) return
-    onFetchCompanyVenues().then(setVenues).catch(() => {/* silent */})
-  }, [mode])
-
-  // ── Search debounce (admin-panel providers step) ──
-  useEffect(() => {
-    if (step !== 'providers' || !searchQuery.trim()) {
-      setSearchResults([])
-      return undefined
-    }
-    clearTimeout(searchTimeout.current)
-    searchTimeout.current = setTimeout(() => {
-      if (!onSearchEntities) return
-      setIsSearching(true)
-      onSearchEntities(searchQuery)
-        .then((results) => {
-          const addedCompanyIds = new Set(
-            selectedAssignments.filter((a) => a.type === 'company').map((a) => a.id)
-          )
-          setSearchResults(
-            results.filter((r) => {
-              if (selectedAssignments.some((a) => a.id === r.id && !a.parentCompanyId)) return false
-              if (r.type !== 'company' && addedCompanyIds.has((r as any).parentCompanyId)) return false
-              return true
-            })
-          )
-        })
-        .catch(() => {/* silent */})
-        .finally(() => setIsSearching(false))
-    }, 300)
-    return () => clearTimeout(searchTimeout.current)
-  }, [searchQuery, step])
-
-  // ── Validation ──
-  function validateEmail() {
-    if (!email.trim()) { setFieldErrors({ email: 'Email is required.' }); return false }
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) { setFieldErrors({ email: 'Please enter a valid email address.' }); return false }
-    setFieldErrors({})
-    return true
-  }
-
-  function validateName() {
-    const errs: Record<string, string> = {}
-    if (!firstName.trim()) errs.firstName = 'First name is required.'
-    if (!lastName.trim()) errs.lastName = 'Last name is required.'
-    setFieldErrors(errs)
-    return Object.keys(errs).length === 0
-  }
-
-  // ── Step handlers ──
-  async function handleEmailNext() {
-    if (!validateEmail()) return
-    setIsLoading(true)
-    setError(undefined)
-    try {
-      const found = await onCheckEmail(email.trim())
-      if (found) {
-        setExistingUser(found)
-        // In provider-team / company-team: pre-fill name, go to name/role step
-        // In admin-panel: go to existing-user card (flow ends with View User)
-        if (mode === 'admin-panel') {
-          setStep('existing-user')
-        } else {
-          const nameParts = (found.fullName || '').split(' ')
-          setFirstName(nameParts[0] || '')
-          setLastName(nameParts.slice(1).join(' ') || '')
-          setStep('name')
-        }
-      } else {
-        setExistingUser(null)
-        setStep('name')
-      }
-    } catch (e: any) {
-      setError(e?.message || 'Failed to check email.')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  function handleNameNext() {
-    if (!validateName()) return
-    if (mode === 'company-team') {
-      setStep('company-access')
-    } else {
-      setStep('role')
-    }
-  }
-
-  function handleRoleNext() {
-    // admin-panel: if Provider User selected, go to entity search
-    if (mode === 'admin-panel' && selectedUserType === 'admin') {
-      setStep('providers')
-    } else {
-      handleSubmit()
-    }
-  }
-
-  function handleProvidersNext() {
-    const topLevel = selectedAssignments.filter((a) => !a.parentCompanyId)
-    if (topLevel.length === 0) {
-      setFieldErrors({ providers: 'Please add at least one company or provider.' })
-      return
-    }
-    setFieldErrors({})
-    setStep('set-roles')
-  }
-
-  function handleCompanyAccessNext() {
-    const hasSelection = companyAccessEnabled || venues.some((v) => v.selected)
-    if (!hasSelection) {
-      setFieldErrors({ venues: 'Please select the company or at least one venue.' })
-      return
-    }
-    setFieldErrors({})
-    setStep('company-roles')
-  }
-
-  async function handleSubmit() {
-    setIsLoading(true)
-    setError(undefined)
-    try {
-      const data: InviteData = { firstName, lastName, email: email.trim() }
-
-      if (mode === 'admin-panel') {
-        if (selectedUserType === 'admin') {
-          data.providerRole = 'admin'
-          data.providers = getAdminPermissionItems().map((a) => ({
-            id: a.id,
-            type: a.type,
-            role: a.role,
-            parentCompanyId: a.parentCompanyId,
-          }))
-        } else {
-          data.globalRole = selectedUserType as GlobalRole
-        }
-      } else if (mode === 'provider-team') {
-        data.providerRole = providerRole
-        if (entityContext) {
-          data.providers = [{ id: entityContext.id, type: entityContext.type, role: providerRole }]
-        }
-      } else {
-        // company-team
-        data.providerRole = companyRole
-        const providers: InviteData['providers'] = []
-        if (companyAccessEnabled && entityContext) {
-          providers.push({ id: entityContext.id, type: 'company', role: companyRole })
-        }
-        venues.filter((v) => v.selected).forEach((v) => {
-          providers.push({ id: v.id, type: v.type, role: v.role, parentCompanyId: entityContext?.id })
-        })
-        data.providers = providers
-      }
-
-      await onInviteUser(data)
-    } catch (e: any) {
-      setError(e?.message || 'Failed to invite user.')
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  // ── Entity helpers (admin-panel) ──
-  async function handleSelectEntity(entity: EntityResult) {
-    if (selectedAssignments.some((a) => a.id === entity.id && !a.parentCompanyId)) return
-    setFieldErrors((p) => ({ ...p, providers: '' }))
-
-    setSelectedAssignments((prev) => [
-      ...prev,
-      { id: entity.id, name: entity.name, type: entity.type, avatarUrl: entity.avatarUrl, friendlyId: entity.friendlyId, role: 'admin' },
-    ])
-
-    if (entity.type === 'company') {
-      setCompanyAccessStates((p) => ({ ...p, [entity.id]: true }))
-      if (onFetchCompanyProviders) {
-        const providers = await onFetchCompanyProviders(entity.id)
-        const nested: NestedProvider[] = providers.map((p) => ({
-          id: p.id, name: p.name, type: p.type as 'venue' | 'promoter',
-          avatarUrl: p.avatarUrl, friendlyId: p.friendlyId, selected: true,
-        }))
-        setNestedProviders((p) => ({ ...p, [entity.id]: nested }))
-        setSelectedAssignments((prev) => [
-          ...prev,
-          ...nested.map((p) => ({ id: p.id, name: p.name, type: p.type, avatarUrl: p.avatarUrl, friendlyId: p.friendlyId, role: 'admin' as ProviderRole, parentCompanyId: entity.id })),
-        ])
-      }
-    }
-    setSearchQuery('')
-    setSearchResults([])
-  }
-
-  function handleRemoveAssignment(id: string) {
-    const entity = selectedAssignments.find((a) => a.id === id)
-    if (entity?.type === 'company') {
-      setSelectedAssignments((p) => p.filter((a) => a.id !== id && a.parentCompanyId !== id))
-      setNestedProviders((p) => { const n = { ...p }; delete n[id]; return n })
-      setCompanyAccessStates((p) => { const n = { ...p }; delete n[id]; return n })
-    } else {
-      setSelectedAssignments((p) => p.filter((a) => a.id !== id))
-    }
-  }
-
-  function handleToggleNested(companyId: string, providerId: string) {
-    setNestedProviders((prev) => ({
-      ...prev,
-      [companyId]: (prev[companyId] || []).map((p) =>
-        p.id === providerId ? { ...p, selected: !p.selected } : p
-      ),
-    }))
-    const existing = selectedAssignments.find((a) => a.id === providerId && a.parentCompanyId === companyId)
-    if (existing) {
-      setSelectedAssignments((p) => p.filter((a) => !(a.id === providerId && a.parentCompanyId === companyId)))
-    } else {
-      const nested = nestedProviders[companyId]?.find((p) => p.id === providerId)
-      if (nested) {
-        setSelectedAssignments((p) => [
-          ...p,
-          { id: nested.id, name: nested.name, type: nested.type, avatarUrl: nested.avatarUrl, friendlyId: nested.friendlyId, role: 'admin', parentCompanyId: companyId },
-        ])
-      }
-    }
-  }
-
-  function handleSelectAllNested(companyId: string) {
-    const nested = nestedProviders[companyId] || []
-    setNestedProviders((p) => ({ ...p, [companyId]: nested.map((n) => ({ ...n, selected: true })) }))
-    const toAdd = nested.filter((n) => !selectedAssignments.some((a) => a.id === n.id && a.parentCompanyId === companyId))
-    if (toAdd.length > 0) {
-      setSelectedAssignments((p) => [
-        ...p,
-        ...toAdd.map((n) => ({ id: n.id, name: n.name, type: n.type, avatarUrl: n.avatarUrl, friendlyId: n.friendlyId, role: 'admin' as ProviderRole, parentCompanyId: companyId })),
-      ])
-    }
-  }
-
-  function handleClearAllNested(companyId: string) {
-    setNestedProviders((p) => ({ ...p, [companyId]: (p[companyId] || []).map((n) => ({ ...n, selected: false })) }))
-    setSelectedAssignments((p) => p.filter((a) => a.parentCompanyId !== companyId))
-  }
-
-  function handleAssignmentRoleChange(id: string, role: ProviderRole) {
-    setSelectedAssignments((p) => p.map((a) => (a.id === id ? { ...a, role } : a)))
-  }
-
-  function getAdminPermissionItems(): ProviderAssignment[] {
-    return selectedAssignments.filter((a) => {
-      if (a.type === 'company' && !companyAccessStates[a.id]) return false
-      if (a.parentCompanyId) return nestedProviders[a.parentCompanyId]?.find((n) => n.id === a.id)?.selected ?? false
-      return true
-    })
-  }
-
-  // ── Back map ──
-  function getBackStep(): Step {
-    const backMap: Record<Step, Step> = {
-      email: 'email',
-      'existing-user': 'email',
-      name: 'email',
-      role: 'name',
-      providers: 'role',
-      'set-roles': 'providers',
-      'company-access': 'name',
-      'company-roles': 'company-access',
-    }
-    return backMap[step]
-  }
-
-  const showBack = step !== 'email'
-  const userName = existingUser ? existingUser.fullName.split(' ')[0] : firstName
-
-  // ── Venue helpers (company-team) ──
-  const selectedVenueCount = venues.filter((v) => v.selected).length
-  const allVenuesSelected = venues.length > 0 && selectedVenueCount === venues.length
-
-  return (
-    <div className="create-user-page">
-      <div className="create-user-page__header">
-        <h1 className="create-user-page__title">Add User</h1>
-        <Button variant="destructive-soft" onClick={onCancel} disabled={loading}>
-          Cancel
-        </Button>
-      </div>
-
-      <div className="create-user-page__body">
-        {showBack && (
-          <button
-            className="create-user-page__back"
-            onClick={() => setStep(getBackStep())}
-            disabled={loading}
-            type="button"
-          >
-            <ArrowLeftIcon />
-            Back
-          </button>
-        )}
-
-        {(error || externalError) && (
-          <div className="create-user-page__error-banner">{error || externalError}</div>
-        )}
-
-        {/* ── Email ──────────────────────────────────────────────────────── */}
-        {step === 'email' && (
-          <div className="create-user-page__step">
-            <h2 className="create-user-page__step-title">Enter Email Address</h2>
-            <div className="create-user-page__fields">
-              <FormField
-                label="Email"
-                type="email"
-                value={email}
-                onChange={(e) => { setEmail(e.target.value); if (fieldErrors.email) setFieldErrors({}) }}
-                error={fieldErrors.email}
-                autoComplete="email"
-                disabled={loading}
-                onKeyDown={(e) => e.key === 'Enter' && handleEmailNext()}
-              />
-              <div className="create-user-page__actions">
-                <Button onClick={handleEmailNext} isLoading={loading} disabled={loading}>Next</Button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* ── Existing user (admin-panel only — flow ends here) ──────────── */}
-        {step === 'existing-user' && existingUser && (
-          <div className="create-user-page__step">
-            <div>
-              <h2 className="create-user-page__step-title">Existing User Found</h2>
-              <p className="create-user-page__step-subtitle">
-                A user with this email already exists in the system.
-              </p>
-            </div>
-            <UserCard user={existingUser} />
-            {existingUser.assignments && existingUser.assignments.length > 0 && (
-              <ExistingAssignments assignments={existingUser.assignments} />
-            )}
-            <div className="create-user-page__actions">
-              <Button onClick={() => onViewUser?.(existingUser.id)}>View User</Button>
-            </div>
-          </div>
-        )}
-
-        {/* ── Name (new user) / User card (existing, provider-team / company-team) ─ */}
-        {step === 'name' && (
-          <div className="create-user-page__step">
-            {existingUser ? (
-              <>
-                <div>
-                  <h2 className="create-user-page__step-title">Existing User Found</h2>
-                  <p className="create-user-page__step-subtitle">
-                    This user already exists. You can add them to this{' '}
-                    {mode === 'company-team' ? 'company' : 'team'}.
-                  </p>
-                </div>
-                <UserCard user={existingUser} />
-                {existingUser.assignments && existingUser.assignments.length > 0 && (
-                  <ExistingAssignments assignments={existingUser.assignments} />
-                )}
-                <div className="create-user-page__actions">
-                  <Button onClick={handleNameNext} disabled={loading}>Next</Button>
-                </div>
-              </>
-            ) : (
-              <>
-                <h2 className="create-user-page__step-title">User Details</h2>
-                <div className="create-user-page__fields">
-                  <FormField
-                    label="First Name"
-                    value={firstName}
-                    onChange={(e) => { setFirstName(e.target.value); if (fieldErrors.firstName) setFieldErrors((p) => ({ ...p, firstName: '' })) }}
-                    error={fieldErrors.firstName}
-                    disabled={loading}
-                  />
-                  <FormField
-                    label="Last Name"
-                    value={lastName}
-                    onChange={(e) => { setLastName(e.target.value); if (fieldErrors.lastName) setFieldErrors((p) => ({ ...p, lastName: '' })) }}
-                    error={fieldErrors.lastName}
-                    disabled={loading}
-                  />
-                  <div className="create-user-page__actions">
-                    <Button onClick={handleNameNext} disabled={loading}>Next</Button>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        )}
-
-        {/* ── Role selection ─────────────────────────────────────────────── */}
-        {step === 'role' && (
-          <div className="create-user-page__step">
-            <div>
-              <h2 className="create-user-page__step-title">
-                {mode === 'admin-panel'
-                  ? `What kind of user is ${userName}?`
-                  : `Select a role for ${userName}`}
-              </h2>
-              {mode === 'provider-team' && (
-                <p className="create-user-page__step-subtitle">
-                  Permissions can be customised after the user is created.
-                </p>
-              )}
-            </div>
-
-            {mode === 'admin-panel' ? (
-              // Global role options
-              <div className="create-user-page__role-cards">
-                {([
-                  { value: 'super_admin' as UserTypeSelection, label: 'Super Admin', description: 'Unrestricted permissions across the entire platform.' },
-                  { value: 'system_admin' as UserTypeSelection, label: 'System Admin', description: 'Admin access and full dashboard access for all providers.' },
-                  { value: 'admin' as UserTypeSelection, label: 'Provider User', description: 'Permission levels set per company or provider.' },
-                ]).map((opt) => (
-                  <label
-                    key={opt.value}
-                    className={`create-user-page__role-card ${selectedUserType === opt.value ? 'create-user-page__role-card--selected' : ''}`}
-                  >
-                    <input
-                      type="radio"
-                      name="userType"
-                      value={opt.value}
-                      checked={selectedUserType === opt.value}
-                      onChange={() => setSelectedUserType(opt.value)}
-                      className="create-user-page__radio"
-                    />
-                    <div className="create-user-page__role-card-content">
-                      <span className="create-user-page__role-card-label">{opt.label}</span>
-                      <span className="create-user-page__role-card-desc">{opt.description}</span>
-                    </div>
-                  </label>
-                ))}
-              </div>
-            ) : (
-              // Provider role options (provider-team)
-              <div className="create-user-page__role-cards">
-                {PROVIDER_ROLES.map((role) => (
-                  <label
-                    key={role}
-                    className={`create-user-page__role-card ${providerRole === role ? 'create-user-page__role-card--selected' : ''}`}
-                  >
-                    <input
-                      type="radio"
-                      name="providerRole"
-                      value={role}
-                      checked={providerRole === role}
-                      onChange={() => setProviderRole(role)}
-                      className="create-user-page__radio"
-                    />
-                    <div className="create-user-page__role-card-content">
-                      <span className="create-user-page__role-card-label">{formatRole(role)}</span>
-                      <span className="create-user-page__role-card-desc">{PROVIDER_ROLE_DESCRIPTIONS[role]}</span>
-                    </div>
-                  </label>
-                ))}
-              </div>
-            )}
-
-            <div className="create-user-page__actions">
-              <Button onClick={handleRoleNext} isLoading={loading} disabled={loading}>
-                {mode === 'admin-panel' && selectedUserType === 'admin'
-                  ? 'Next'
-                  : existingUser ? 'Add User' : 'Send Invitation'}
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* ── Providers search (admin-panel, provider-user path) ─────────── */}
-        {step === 'providers' && (
-          <div className="create-user-page__step">
-            <h2 className="create-user-page__step-title">
-              Add {userName} to an existing team?
-            </h2>
-
-            <div className="create-user-page__search-wrapper">
-              <label className="create-user-page__search-label">
-                Search for a Company, Venue or Promoter
-              </label>
-              <div className="create-user-page__search-input-row">
-                <SearchIcon />
-                <input
-                  className="create-user-page__search-input"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder="Search..."
-                  type="text"
-                />
-              </div>
-
-              {searchQuery.trim() && !isSearching && searchResults.length === 0 && (
-                <div className="create-user-page__search-empty">
-                  No company or provider found matching that search.
-                </div>
-              )}
-
-              {searchResults.length > 0 && (
-                <div className="create-user-page__search-results">
-                  {searchResults.map((r) => (
-                    <button
-                      key={r.id}
-                      type="button"
-                      className="create-user-page__search-result"
-                      onClick={() => handleSelectEntity(r)}
-                    >
-                      <EntityAvatar name={r.name} avatarUrl={r.avatarUrl} />
-                      <div>
-                        <span className="create-user-page__search-result-name">{r.name}</span>
-                        <EntityIdBadge type={r.type} friendlyId={r.friendlyId} />
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              )}
-
-              {fieldErrors.providers && (
-                <span className="create-user-page__field-error">{fieldErrors.providers}</span>
-              )}
-            </div>
-
-            {selectedAssignments.filter((a) => !a.parentCompanyId).length > 0 && (
-              <div className="create-user-page__selected">
-                <span className="create-user-page__selected-label">Adding to:</span>
-                {selectedAssignments.filter((a) => !a.parentCompanyId).map((assignment) => (
-                  <div key={assignment.id}>
-                    <div className="create-user-page__selected-item">
-                      {assignment.type === 'company' && (
-                        <Checkbox
-                          checked={companyAccessStates[assignment.id] ?? true}
-                          onChange={() => setCompanyAccessStates((p) => ({ ...p, [assignment.id]: !(p[assignment.id] ?? true) }))}
-                        />
-                      )}
-                      <EntityAvatar name={assignment.name} avatarUrl={assignment.avatarUrl} />
-                      <div className="create-user-page__selected-item-info">
-                        <span className="create-user-page__selected-item-name">{assignment.name}</span>
-                        <EntityIdBadge type={assignment.type} friendlyId={assignment.friendlyId} />
-                      </div>
-                      <button type="button" className="create-user-page__remove-btn" onClick={() => handleRemoveAssignment(assignment.id)}>
-                        Remove
-                      </button>
-                    </div>
-
-                    {assignment.type === 'company' && nestedProviders[assignment.id] && (
-                      <div className="create-user-page__nested">
-                        {(() => {
-                          const nested = nestedProviders[assignment.id] || []
-                          const selCount = nested.filter((n) => n.selected).length
-                          const allSel = nested.length > 0 && selCount === nested.length
-                          return (
-                            <>
-                              <div className="create-user-page__nested-controls">
-                                <button type="button" className="create-user-page__nested-toggle"
-                                  onClick={() => allSel ? handleClearAllNested(assignment.id) : handleSelectAllNested(assignment.id)}>
-                                  {allSel ? 'Clear All' : 'Select All'}
-                                </button>
-                                <span className="create-user-page__nested-count">{selCount} of {nested.length} providers selected</span>
-                              </div>
-                              <div className="create-user-page__nested-grid">
-                                {nested.map((p) => (
-                                  <div key={p.id}
-                                    className={`create-user-page__nested-item ${p.selected ? 'create-user-page__nested-item--selected' : ''}`}
-                                    onClick={() => handleToggleNested(assignment.id, p.id)}
-                                  >
-                                    <Checkbox checked={p.selected} onChange={() => handleToggleNested(assignment.id, p.id)} onClick={(e) => e.stopPropagation()} />
-                                    <EntityAvatar name={p.name} avatarUrl={p.avatarUrl} />
-                                    <div className="create-user-page__nested-item-info">
-                                      <span className="create-user-page__nested-item-name">{p.name}</span>
-                                      <EntityIdBadge type={p.type} friendlyId={p.friendlyId} />
-                                    </div>
-                                  </div>
-                                ))}
-                              </div>
-                            </>
-                          )
-                        })()}
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            <div className="create-user-page__actions">
-              <Button onClick={handleProvidersNext} disabled={loading}>Next</Button>
-            </div>
-          </div>
-        )}
-
-        {/* ── Set roles (admin-panel, provider-user path) ────────────────── */}
-        {step === 'set-roles' && (
-          <div className="create-user-page__step">
-            <h2 className="create-user-page__step-title">Set Roles for {userName}</h2>
-
-            <div className="create-user-page__role-assignments">
-              {(() => {
-                const items = getAdminPermissionItems()
-                const topLevel = selectedAssignments.filter((a) => !a.parentCompanyId)
-
-                const renderCard = (a: ProviderAssignment) => (
-                  <div key={`${a.id}-${a.parentCompanyId || 'standalone'}`} className="create-user-page__role-assignment-card">
-                    <EntityAvatar name={a.name} avatarUrl={a.avatarUrl} />
-                    <div className="create-user-page__role-assignment-info">
-                      <span className="create-user-page__role-assignment-name">{a.name}</span>
-                      <EntityIdBadge type={a.type} friendlyId={a.friendlyId} />
-                    </div>
-                    <div className="create-user-page__role-assignment-select">
-                      <Select value={a.role} onChange={(e) => handleAssignmentRoleChange(a.id, e.target.value as ProviderRole)} disabled={loading}>
-                        {PROVIDER_ROLES.map((r) => <option key={r} value={r}>{formatRole(r)}</option>)}
-                      </Select>
-                    </div>
-                  </div>
-                )
-
-                return topLevel.map((entity) => {
-                  if (entity.type === 'company') {
-                    const nested = items.filter((i) => i.parentCompanyId === entity.id)
-                    return (
-                      <div key={entity.id} className="create-user-page__role-group">
-                        {(companyAccessStates[entity.id] ?? true) && (
-                          <div className="create-user-page__role-assignment-card create-user-page__role-assignment-card--company">
-                            <EntityAvatar name={entity.name} avatarUrl={entity.avatarUrl} />
-                            <div className="create-user-page__role-assignment-info">
-                              <span className="create-user-page__role-assignment-name">{entity.name}</span>
-                              <EntityIdBadge type="company" friendlyId={entity.friendlyId} />
-                            </div>
-                            <div className="create-user-page__role-assignment-select">
-                              <Select value={entity.role} onChange={(e) => handleAssignmentRoleChange(entity.id, e.target.value as ProviderRole)} disabled={loading}>
-                                {PROVIDER_ROLES.map((r) => <option key={r} value={r}>{formatRole(r)}</option>)}
-                              </Select>
-                            </div>
-                          </div>
-                        )}
-                        {nested.map(renderCard)}
-                      </div>
-                    )
-                  }
-                  return renderCard(entity)
-                })
-              })()}
-            </div>
-
-            <div className="create-user-page__actions">
-              <Button onClick={handleSubmit} isLoading={loading} disabled={loading}>Create User</Button>
-            </div>
-          </div>
-        )}
-
-        {/* ── Company access + venue selection (company-team) ────────────── */}
-        {step === 'company-access' && (
-          <div className="create-user-page__step">
-            <h2 className="create-user-page__step-title">
-              Select access for {userName}
-            </h2>
-
-            {entityContext && (
-              <div className="create-user-page__company-access-toggle">
-                <div className="create-user-page__company-access-entity">
-                  <EntityAvatar name={entityContext.name} avatarUrl={entityContext.avatarUrl} />
-                  <div className="create-user-page__company-access-info">
-                    <span className="create-user-page__company-access-name">{entityContext.name}</span>
-                    <EntityIdBadge type={entityContext.type} friendlyId={entityContext.id} />
-                  </div>
-                </div>
-                <label className="create-user-page__toggle-label">
-                  <input
-                    type="checkbox"
-                    checked={companyAccessEnabled}
-                    onChange={(e) => setCompanyAccessEnabled(e.target.checked)}
-                    className="create-user-page__toggle-input"
-                  />
-                  <span className="create-user-page__toggle-track" />
-                  <span className="create-user-page__toggle-text">Company access</span>
-                </label>
-              </div>
-            )}
-
-            {venues.length > 0 && (
-              <div className="create-user-page__venue-section">
-                <div className="create-user-page__nested-controls">
-                  <span className="create-user-page__selected-label">Venues</span>
-                  <div className="create-user-page__nested-controls-right">
-                    <button type="button" className="create-user-page__nested-toggle"
-                      onClick={() => allVenuesSelected
-                        ? setVenues((p) => p.map((v) => ({ ...v, selected: false })))
-                        : setVenues((p) => p.map((v) => ({ ...v, selected: true })))
-                      }
-                    >
-                      {allVenuesSelected ? 'Clear All' : 'Select All'}
-                    </button>
-                    <span className="create-user-page__nested-count">
-                      {selectedVenueCount} of {venues.length} selected
-                    </span>
-                  </div>
-                </div>
-
-                <div className="create-user-page__nested-grid">
-                  {venues.map((venue) => (
-                    <div
-                      key={venue.id}
-                      className={`create-user-page__nested-item ${venue.selected ? 'create-user-page__nested-item--selected' : ''}`}
-                      onClick={() => setVenues((p) => p.map((v) => v.id === venue.id ? { ...v, selected: !v.selected } : v))}
-                    >
-                      <Checkbox
-                        checked={venue.selected}
-                        onChange={() => setVenues((p) => p.map((v) => v.id === venue.id ? { ...v, selected: !v.selected } : v))}
-                        onClick={(e) => e.stopPropagation()}
-                      />
-                      <EntityAvatar name={venue.name} avatarUrl={venue.avatarUrl} />
-                      <div className="create-user-page__nested-item-info">
-                        <span className="create-user-page__nested-item-name">{venue.name}</span>
-                        <EntityIdBadge type={venue.type} friendlyId={venue.friendlyId} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                {fieldErrors.venues && (
-                  <span className="create-user-page__field-error">{fieldErrors.venues}</span>
-                )}
-              </div>
-            )}
-
-            <div className="create-user-page__actions">
-              <Button onClick={handleCompanyAccessNext} disabled={loading}>Next</Button>
-            </div>
-          </div>
-        )}
-
-        {/* ── Company roles (company-team) ───────────────────────────────── */}
-        {step === 'company-roles' && (
-          <div className="create-user-page__step">
-            <h2 className="create-user-page__step-title">Set Roles for {userName}</h2>
-
-            <div className="create-user-page__role-assignments">
-              {companyAccessEnabled && entityContext && (
-                <div className="create-user-page__role-assignment-card create-user-page__role-assignment-card--company">
-                  <EntityAvatar name={entityContext.name} avatarUrl={entityContext.avatarUrl} />
-                  <div className="create-user-page__role-assignment-info">
-                    <span className="create-user-page__role-assignment-name">{entityContext.name}</span>
-                    <EntityIdBadge type={entityContext.type} friendlyId={entityContext.id} />
-                  </div>
-                  <div className="create-user-page__role-assignment-select">
-                    <Select value={companyRole} onChange={(e) => setCompanyRole(e.target.value as ProviderRole)} disabled={loading}>
-                      {PROVIDER_ROLES.map((r) => <option key={r} value={r}>{formatRole(r)}</option>)}
-                    </Select>
-                  </div>
-                </div>
-              )}
-
-              {venues.filter((v) => v.selected).map((venue) => (
-                <div key={venue.id} className="create-user-page__role-assignment-card">
-                  <EntityAvatar name={venue.name} avatarUrl={venue.avatarUrl} />
-                  <div className="create-user-page__role-assignment-info">
-                    <span className="create-user-page__role-assignment-name">{venue.name}</span>
-                    <EntityIdBadge type={venue.type} friendlyId={venue.friendlyId} />
-                  </div>
-                  <div className="create-user-page__role-assignment-select">
-                    <Select
-                      value={venue.role}
-                      onChange={(e) => setVenues((p) => p.map((v) => v.id === venue.id ? { ...v, role: e.target.value as ProviderRole } : v))}
-                      disabled={loading}
-                    >
-                      {PROVIDER_ROLES.map((r) => <option key={r} value={r}>{formatRole(r)}</option>)}
-                    </Select>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div className="create-user-page__actions">
-              <Button onClick={handleSubmit} isLoading={loading} disabled={loading}>
-                {existingUser ? 'Add User' : 'Send Invitation'}
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}