@licklist/design 0.78.5-dev.69 → 0.78.5-dev.70

package/src/v2/pages/CreateUser/index.ts

@@ -0,0 +1,13 @@
+export { CreateUserPage } from './CreateUserPage'
+export type {
+  CreateUserPageProps,
+  ExistingUser,
+  UserAssignment,
+  EntityResult,
+  VenueAssignment,
+  ProviderAssignment,
+  NestedProvider,
+  InviteData,
+  GlobalRole,
+  ProviderRole,
+} from './CreateUserPage'

package/src/v2/pages/RoleSelection/RoleSelectionPage.scss

@@ -0,0 +1,193 @@
+@import '../../styles/index.scss';
+
+.role-selection-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--surface-primary, #ffffff);
+
+  // ── Header ────────────────────────────────────────────────────────────────
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border-primary, #e8e9ef);
+    background: var(--surface-primary, #ffffff);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  &__title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  // ── Body ──────────────────────────────────────────────────────────────────
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+    width: 100%;
+    max-width: 700px;
+    margin: 0 auto;
+  }
+
+  // ── Back button ───────────────────────────────────────────────────────────
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: var(--radius-sm, 4px);
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--label-action, #6200ee);
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: var(--surface-action-soft, #f3e8ff);
+    }
+
+    svg path {
+      stroke: currentColor;
+    }
+  }
+
+  // ── Error banner ──────────────────────────────────────────────────────────
+  &__error-banner {
+    width: 100%;
+    padding: 12px 16px;
+    background: var(--surface-status-error-soft, #fef2f2);
+    border: 1px solid var(--border-status-error, #fecaca);
+    border-radius: var(--radius-md, 8px);
+    font-size: 14px;
+    color: var(--label-status-error, #ef4444);
+  }
+
+  // ── Step header ───────────────────────────────────────────────────────────
+  &__step-header {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__step-title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__step-desc {
+    font-size: 14px;
+    color: var(--label-secondary, #626a90);
+    margin: 0;
+  }
+
+  // ── Role cards ────────────────────────────────────────────────────────────
+  &__roles {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+  }
+
+  &__role-card {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 16px;
+    background: var(--surface-primary, #ffffff);
+    border: 1.5px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-md, 8px);
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+
+    &:hover {
+      border-color: var(--border-selected, #6200ee);
+      background: var(--surface-action-soft, #f3e8ff);
+    }
+
+    &--selected {
+      border-color: var(--border-selected, #6200ee);
+      background: var(--surface-action-soft, #f3e8ff);
+    }
+  }
+
+  &__role-input {
+    // Hidden — visual state driven by the card
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+  }
+
+  &__role-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+  }
+
+  &__role-label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--label-primary, #121e52);
+
+    .role-selection-page__role-card--selected & {
+      color: var(--label-action, #6200ee);
+    }
+  }
+
+  &__role-desc {
+    font-size: 13px;
+    color: var(--label-secondary, #626a90);
+  }
+
+  // Custom radio indicator
+  &__role-radio {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 2px solid var(--border-primary, #e8e9ef);
+    background: var(--surface-primary, #ffffff);
+    transition: border-color 0.15s ease;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 3px;
+      border-radius: 50%;
+      background: transparent;
+      transition: background 0.15s ease;
+    }
+
+    .role-selection-page__role-card--selected & {
+      border-color: var(--border-selected, #6200ee);
+
+      &::after {
+        background: var(--label-action, #6200ee);
+      }
+    }
+  }
+}

package/src/v2/pages/RoleSelection/RoleSelectionPage.stories.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { RoleSelectionPage } from './RoleSelectionPage'
+import type { RoleOption } from './RoleSelectionPage'
+
+// ─── Mock role sets ───────────────────────────────────────────────────────────
+
+/** Admin-panel: choose the user's global role or mark them as a provider user */
+const globalRoles: RoleOption[] = [
+  {
+    value: 'super_admin',
+    label: 'Super Admin',
+    description: 'Full platform access including billing and system settings',
+  },
+  {
+    value: 'system_admin',
+    label: 'System Admin',
+    description: 'Manage users, providers, and platform configuration',
+  },
+  {
+    value: 'admin',
+    label: 'Provider User',
+    description: 'Access scoped to the providers they are assigned to',
+  },
+]
+
+/** Provider / company team: the six provider-level roles */
+const providerRoles: RoleOption[] = [
+  { value: 'admin',      label: 'Admin',      description: 'Full access to provider settings and team management' },
+  { value: 'manager',    label: 'Manager',    description: 'Can manage bookings and view reports' },
+  { value: 'operations', label: 'Operations', description: 'Can edit bookings and customer information' },
+  { value: 'staff',      label: 'Staff',      description: 'Can view and process bookings' },
+  { value: 'viewer',     label: 'Viewer',     description: 'Read-only access to provider data' },
+  { value: 'desk',       label: 'Front Desk', description: 'Front desk access for customer check-in' },
+]
+
+function delay(ms: number) {
+  return new Promise<void>((r) => setTimeout(r, ms))
+}
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof RoleSelectionPage> = {
+  title: 'v2/Pages/RoleSelection',
+  component: RoleSelectionPage,
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj<typeof RoleSelectionPage>
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+/**
+ * **Global Role** — `/admin/users/add` (step 3)
+ *
+ * A super or system admin chooses the platform-level role for the new user:
+ * Super Admin, System Admin, or Provider User (scoped access).
+ */
+export const GlobalRoles: Story = {
+  name: 'Global Roles (Admin Panel)',
+  args: {
+    pageTitle: 'Add User',
+    userName: 'Jane',
+    roles: globalRoles,
+    defaultRole: 'admin',
+    submitLabel: 'Next',
+    onSubmit: (role) => console.log('Selected global role:', role),
+    onBack: () => console.log('Back'),
+    onCancel: () => console.log('Cancel'),
+  },
+}
+
+/**
+ * **Provider Role** — `/venue|promoter/{id}/settings/team-settings/add` (step 3)
+ *
+ * A provider admin assigns one of the six scoped roles to the team member.
+ * The submit label changes to "Send Invitation" for new users.
+ */
+export const ProviderRoles: Story = {
+  name: 'Provider Roles (Provider Team)',
+  args: {
+    pageTitle: 'Add Team Member',
+    userName: 'Tom',
+    roles: providerRoles,
+    defaultRole: 'admin',
+    submitLabel: 'Send Invitation',
+    onSubmit: async (role) => { await delay(1000); console.log('Invited with role:', role) },
+    onBack: () => console.log('Back'),
+    onCancel: () => console.log('Cancel'),
+  },
+}
+
+/**
+ * **Provider Role — Existing User** — same flow, different CTA label.
+ *
+ * When the user already exists the button reads "Add User" instead of
+ * "Send Invitation" since no invite email is needed.
+ */
+export const ProviderRolesExistingUser: Story = {
+  name: 'Provider Roles — Existing User',
+  args: {
+    pageTitle: 'Add Team Member',
+    userName: 'Jane',
+    roles: providerRoles,
+    defaultRole: 'manager',
+    submitLabel: 'Add User',
+    onSubmit: async (role) => { await delay(800); console.log('User added with role:', role) },
+    onBack: () => console.log('Back'),
+    onCancel: () => console.log('Cancel'),
+  },
+}

package/src/v2/pages/RoleSelection/RoleSelectionPage.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+import { Button } from '../../components/Button'
+import { ArrowLeftIcon } from '../../icons'
+import './RoleSelectionPage.scss'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface RoleOption {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface RoleSelectionPageProps {
+  /** Page-level title shown in the sticky header */
+  pageTitle?: string
+  /** First name of the user being added — shown in the step heading */
+  userName?: string
+  /** The role options to display as radio cards */
+  roles: RoleOption[]
+  /** Pre-selected role value */
+  defaultRole?: string
+  /** Label for the submit / CTA button — defaults to "Send Invitation" */
+  submitLabel?: string
+  onSubmit: (role: string) => void
+  onBack?: () => void
+  onCancel?: () => void
+  isLoading?: boolean
+  error?: string
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const RoleSelectionPage: React.FC<RoleSelectionPageProps> = ({
+  pageTitle = 'Add User',
+  userName,
+  roles,
+  defaultRole,
+  submitLabel = 'Send Invitation',
+  onSubmit,
+  onBack,
+  onCancel,
+  isLoading = false,
+  error,
+}) => {
+  const [selectedRole, setSelectedRole] = useState<string>(
+    defaultRole ?? roles[0]?.value ?? ''
+  )
+
+  return (
+    <div className="role-selection-page">
+      {/* ── Header ── */}
+      <header className="role-selection-page__header">
+        <h1 className="role-selection-page__title">{pageTitle}</h1>
+        {onCancel && (
+          <Button variant="secondary-soft" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+      </header>
+
+      {/* ── Body ── */}
+      <div className="role-selection-page__body">
+        {onBack && (
+          <button className="role-selection-page__back" type="button" onClick={onBack}>
+            <ArrowLeftIcon />
+            Back
+          </button>
+        )}
+
+        {error && (
+          <div className="role-selection-page__error-banner" role="alert">
+            {error}
+          </div>
+        )}
+
+        <div className="role-selection-page__step-header">
+          <h2 className="role-selection-page__step-title">
+            What sort of user is {userName ? <strong>{userName}</strong> : 'this user'}?
+          </h2>
+          <p className="role-selection-page__step-desc">
+            Permissions can be customised after the user is created.
+          </p>
+        </div>
+
+        <div className="role-selection-page__roles" role="radiogroup" aria-label="Select role">
+          {roles.map((role) => (
+            <label
+              key={role.value}
+              className={[
+                'role-selection-page__role-card',
+                selectedRole === role.value ? 'role-selection-page__role-card--selected' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              <input
+                className="role-selection-page__role-input"
+                type="radio"
+                name="role"
+                value={role.value}
+                checked={selectedRole === role.value}
+                onChange={() => setSelectedRole(role.value)}
+              />
+              <div className="role-selection-page__role-content">
+                <span className="role-selection-page__role-label">{role.label}</span>
+                {role.description && (
+                  <span className="role-selection-page__role-desc">{role.description}</span>
+                )}
+              </div>
+              <div className="role-selection-page__role-radio" aria-hidden="true" />
+            </label>
+          ))}
+        </div>
+
+        <Button
+          variant="primary"
+          onClick={() => onSubmit(selectedRole)}
+          isLoading={isLoading}
+          disabled={isLoading || !selectedRole}
+        >
+          {submitLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/v2/pages/RoleSelection/index.ts

@@ -0,0 +1,2 @@
+export { RoleSelectionPage } from './RoleSelectionPage'
+export type { RoleSelectionPageProps, RoleOption } from './RoleSelectionPage'

package/src/v2/pages/UserDetails/UserDetailsPage.scss

@@ -0,0 +1,236 @@
+@import '../../styles/index.scss';
+
+.user-details-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--surface-primary, #ffffff);
+
+  // ── Header ────────────────────────────────────────────────────────────────
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border-primary, #e8e9ef);
+    background: var(--surface-primary, #ffffff);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  &__title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  // ── Body ──────────────────────────────────────────────────────────────────
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+    width: 100%;
+    max-width: 700px;
+    margin: 0 auto;
+  }
+
+  // ── Back button ───────────────────────────────────────────────────────────
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: var(--radius-sm, 4px);
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--label-action, #6200ee);
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: var(--surface-action-soft, #f3e8ff);
+    }
+
+    svg path {
+      stroke: currentColor;
+    }
+  }
+
+  // ── Error banner ──────────────────────────────────────────────────────────
+  &__error-banner {
+    width: 100%;
+    padding: 12px 16px;
+    background: var(--surface-status-error-soft, #fef2f2);
+    border: 1px solid var(--border-status-error, #fecaca);
+    border-radius: var(--radius-md, 8px);
+    font-size: 14px;
+    color: var(--label-status-error, #ef4444);
+  }
+
+  // ── Step header ───────────────────────────────────────────────────────────
+  &__step-header {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__step-title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__step-desc {
+    font-size: 14px;
+    color: var(--label-secondary, #626a90);
+    margin: 0;
+  }
+
+  // ── New user form ─────────────────────────────────────────────────────────
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+  }
+
+  // ── Existing user section ─────────────────────────────────────────────────
+  &__existing {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+  }
+
+  &__user-card {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px;
+    background: var(--surface-secondary, #f8f8fa);
+    border: 1px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-lg, 12px);
+  }
+
+  &__user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    flex: 1;
+  }
+
+  &__user-name {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--label-primary, #121e52);
+  }
+
+  &__user-email {
+    font-size: 13px;
+    color: var(--label-secondary, #626a90);
+  }
+
+  &__user-number {
+    font-size: 12px;
+    color: var(--label-tertiary, #9ea4bf);
+  }
+
+  // ── Assignment list ───────────────────────────────────────────────────────
+  &__assignments {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__assignments-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--label-secondary, #626a90);
+    margin: 0;
+  }
+
+  &__assignment-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__assignment-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: var(--surface-primary, #ffffff);
+    border: 1px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-md, 8px);
+  }
+
+  &__assignment-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--label-primary, #121e52);
+    flex: 1;
+  }
+
+  &__assignment-id {
+    font-size: 12px;
+    color: var(--label-tertiary, #9ea4bf);
+  }
+
+  &__assignment-role {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--label-secondary, #626a90);
+    padding: 2px 8px;
+    background: var(--surface-secondary, #f8f8fa);
+    border-radius: var(--radius-sm, 4px);
+  }
+
+  &__entity-badge {
+    flex-shrink: 0;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 2px 6px;
+    border-radius: var(--radius-sm, 4px);
+
+    &--venue {
+      color: var(--label-status-info, #0ea5e9);
+      background: var(--surface-status-info-soft, #e0f2fe);
+    }
+
+    &--company {
+      color: var(--label-status-warning, #f59e0b);
+      background: var(--surface-status-warning-soft, #fef3c7);
+    }
+
+    &--promoter {
+      color: var(--label-status-success, #10b981);
+      background: var(--surface-status-success-soft, #d1fae5);
+    }
+  }
+}