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

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

@@ -0,0 +1,1062 @@
+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>
+  )
+}