helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 18:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(onboarding/phase-2): settings hub, setup wizard shell, first-run redirect

Browse Source 
Phase 2 of hospital onboarding & self-service plan
(docs/superpowers/plans/2026-04-06-hospital-onboarding-self-service.md
checked in here for the helix-engage repo).

Frontend foundations for the staff-portal Settings hub and 6-step setup
wizard. Backend was Phase 1 (helix-engage-server commit).

New shared components (src/components/setup/):
- wizard-shell.tsx — fullscreen layout with left step navigator, progress
  bar, and Skip-for-now affordance
- wizard-step.tsx — single-step wrapper with Mark Complete + Prev/Next/
  Finish navigation, completion badge
- section-card.tsx — Settings hub card with title/description/icon, links
  to a section page, optional status badge mirroring setup-state

New pages:
- pages/setup-wizard.tsx — top-level /setup route, fullscreen (no AppShell),
  loads setup-state from sidecar, renders the active step. Each step has a
  placeholder body for now; Phase 5 swaps placeholders for real form
  components from the matching settings pages. Already functional end-to-end:
  Mark Complete writes to PUT /api/config/setup-state/steps/<step>, Skip
  posts to /dismiss, Finish navigates to /.
- pages/team-settings.tsx — moved the existing workspace member listing out
  of the old monolithic settings.tsx into its own /settings/team route. No
  functional change; Phase 3 will add the invite form + role editor here.
- pages/settings-placeholder.tsx — generic "Coming in Phase X" stub used by
  routes for clinics, doctors, telephony, ai, widget until those pages land.

Modified pages:
- pages/settings.tsx — rewritten as the Settings hub (the new /settings
  route). Renders SectionCards in 3 groups (Hospital identity, Care
  delivery, Channels & automation) with completion badges sourced from
  /api/config/setup-state. The hub links to existing pages (/branding,
  /rules) and to placeholder pages for the not-yet-built sections.
- pages/login.tsx — after successful login, calls getSetupState() and
  redirects to /setup if wizardRequired. Failures fall through to / so an
  older sidecar without the setup-state endpoint still works.
- components/layout/sidebar.tsx — collapsed the Configuration group
  (Rules Engine + Branding standalone entries) into the single Settings
  entry that opens the hub. Removes the IconSlidersUp import that's no
  longer used.

New types and helpers (src/lib/setup-state.ts):
- SetupState / SetupStepName / SetupStepStatus types mirroring the sidecar
  shape
- SETUP_STEP_NAMES constant + SETUP_STEP_LABELS map (title + description
  per step) — single source of truth used by the wizard, hub, and any
  future surface that wants to render step metadata
- getSetupState / markSetupStepComplete / markSetupStepIncomplete /
  dismissSetupWizard / resetSetupState helpers wrapping the api-client

Other:
- lib/api-client.ts — added apiClient.put() helper for the setup-state
  step update mutations (PUT was the only verb missing from the existing
  get/post/graphql helpers)
- main.tsx — registered new routes:
    /setup                       (fullscreen, no AppShell)
    /settings                    (the hub, replaces old settings.tsx)
    /settings/team               (moved member listing)
    /settings/clinics            (placeholder, Phase 3)
    /settings/doctors            (placeholder, Phase 3)
    /settings/telephony          (placeholder, Phase 4)
    /settings/ai                 (placeholder, Phase 4)
    /settings/widget             (placeholder, Phase 4)

Tested via npx tsc --noEmit and npm run build (clean, only pre-existing
chunk-size and dynamic-import warnings unrelated to this change).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-04-07 07:13:25 +05:30
parent 0f23e84737
commit c1b636cb6d
13 changed files with 1300 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/layout/sidebar.tsx
View File

@@ -18,7 +18,6 @@ import {
faChartLine,
faFileAudio,
faPhoneMissed,
faSlidersUp,
} from "@fortawesome/pro-duotone-svg-icons";
import { faIcon } from "@/lib/icon-wrapper";
import { useAtom } from "jotai";
@@ -53,7 +52,6 @@ const IconTowerBroadcast = faIcon(faTowerBroadcast);
const IconChartLine = faIcon(faChartLine);
const IconFileAudio = faIcon(faFileAudio);
const IconPhoneMissed = faIcon(faPhoneMissed);
const IconSlidersUp = faIcon(faSlidersUp);
type NavSection = {
label: string;
@@ -79,10 +77,9 @@ const getNavSections = (role: string): NavSection[] => {
{ label: 'Marketing', items: [
{ label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
]},
{ label: 'Configuration', items: [
{ label: 'Rules Engine', href: '/rules', icon: IconSlidersUp },
{ label: 'Branding', href: '/branding', icon: IconGear },
]},
// Settings hub absorbs branding, rules, team, clinics, doctors,
// telephony, ai, widget — one entry, navigates to the hub which
// links to each section page.
{ label: 'Admin', items: [
{ label: 'Settings', href: '/settings', icon: IconGear },
]},

67
src/components/setup/section-card.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Link } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight, faCircleCheck, faCircleExclamation } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';
type SectionStatus = 'complete' | 'incomplete' | 'unknown';
type SectionCardProps = {
title: string;
description: string;
icon: any;
iconColor?: string;
href: string;
status?: SectionStatus;
};
// Settings hub card. Each card represents one setup-able section (Branding,
// Clinics, Doctors, Team, Telephony, AI, Widget, Rules) and links to its
// dedicated page. The status badge mirrors the wizard's setup-state so an
// admin can see at a glance which sections still need attention.
export const SectionCard = ({
title,
description,
icon,
iconColor = 'text-brand-primary',
href,
status = 'unknown',
}: SectionCardProps) => {
return (
<Link
to={href}
className="group block rounded-xl border border-secondary bg-primary p-5 shadow-xs transition hover:border-brand hover:shadow-md"
>
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-4">
<div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-secondary">
<FontAwesomeIcon icon={icon} className={cx('size-5', iconColor)} />
</div>
<div className="min-w-0">
<h3 className="text-sm font-semibold text-primary">{title}</h3>
<p className="mt-1 text-xs text-tertiary">{description}</p>
</div>
</div>
<FontAwesomeIcon
icon={faArrowRight}
className="size-4 shrink-0 text-quaternary transition group-hover:translate-x-0.5 group-hover:text-brand-primary"
/>
</div>
{status !== 'unknown' && (
<div className="mt-4 flex items-center gap-2 border-t border-secondary pt-3">
{status === 'complete' ? (
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-success-primary">
<FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
Configured
</span>
) : (
<span className="inline-flex items-center gap-1.5 text-xs font-medium text-warning-primary">
<FontAwesomeIcon icon={faCircleExclamation} className="size-3.5" />
Setup needed
</span>
)}
</div>
)}
</Link>
);
};

106
src/components/setup/wizard-shell.tsx Normal file
View File

@@ -0,0 +1,106 @@
import type { ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleCheck, faCircle } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { cx } from '@/utils/cx';
import { SETUP_STEP_NAMES, SETUP_STEP_LABELS, type SetupStepName, type SetupState } from '@/lib/setup-state';
type WizardShellProps = {
state: SetupState;
activeStep: SetupStepName;
onSelectStep: (step: SetupStepName) => void;
onDismiss: () => void;
children: ReactNode;
};
// Layout shell for the onboarding wizard. Renders a left-side step navigator
// (with completed/active/upcoming visual states) and a right-side content
// pane fed by the parent. The header has a "Skip for now" affordance that
// dismisses the wizard for this workspace — once dismissed it never auto-shows
// again on login.
export const WizardShell = ({ state, activeStep, onSelectStep, onDismiss, children }: WizardShellProps) => {
const completedCount = SETUP_STEP_NAMES.filter(s => state.steps[s].completed).length;
const totalSteps = SETUP_STEP_NAMES.length;
const progressPct = Math.round((completedCount / totalSteps) * 100);
return (
<div className="min-h-screen bg-primary">
{/* header */}
<header className="border-b border-secondary bg-primary px-8 py-5">
<div className="mx-auto flex max-w-6xl items-center justify-between gap-6">
<div>
<h1 className="text-xl font-bold text-primary">Set up your hospital</h1>
<p className="mt-1 text-sm text-tertiary">
{completedCount} of {totalSteps} steps complete · finish setup to start using your workspace
</p>
</div>
<Button color="link-gray" size="sm" onClick={onDismiss}>
Skip for now
</Button>
</div>
{/* progress bar */}
<div className="mx-auto mt-4 max-w-6xl">
<div className="h-1.5 w-full overflow-hidden rounded-full bg-secondary">
<div
className="h-full rounded-full bg-brand-solid transition-all duration-300"
style={{ width: `${progressPct}%` }}
/>
</div>
</div>
</header>
{/* body — step navigator + content */}
<div className="mx-auto flex max-w-6xl gap-8 px-8 py-8">
<nav className="w-72 shrink-0">
<ol className="flex flex-col gap-1">
{SETUP_STEP_NAMES.map((step, idx) => {
const meta = SETUP_STEP_LABELS[step];
const status = state.steps[step];
const isActive = step === activeStep;
const isComplete = status.completed;
return (
<li key={step}>
<button
type="button"
onClick={() => onSelectStep(step)}
className={cx(
'group flex w-full items-start gap-3 rounded-lg border px-3 py-3 text-left transition',
isActive
? 'border-brand bg-brand-primary'
: 'border-transparent hover:bg-secondary',
)}
>
<span className="mt-0.5 shrink-0">
<FontAwesomeIcon
icon={isComplete ? faCircleCheck : faCircle}
className={cx(
'size-5',
isComplete ? 'text-success-primary' : 'text-quaternary',
)}
/>
</span>
<span className="flex-1">
<span className="block text-xs font-medium text-tertiary">
Step {idx + 1}
</span>
<span
className={cx(
'block text-sm font-semibold',
isActive ? 'text-brand-primary' : 'text-primary',
)}
>
{meta.title}
</span>
</span>
</button>
</li>
);
})}
</ol>
</nav>
<main className="min-w-0 flex-1">{children}</main>
</div>
</div>
);
};

105
src/components/setup/wizard-step.tsx Normal file
View File

@@ -0,0 +1,105 @@
import type { ReactNode } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowRight, faCircleCheck } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { SETUP_STEP_LABELS, type SetupStepName } from '@/lib/setup-state';
type WizardStepProps = {
step: SetupStepName;
isCompleted: boolean;
isLast: boolean;
onPrev: (() => void) | null;
onNext: (() => void) | null;
onMarkComplete: () => void;
onFinish: () => void;
saving?: boolean;
children: ReactNode;
};
// Single-step wrapper. The parent picks which step is active and supplies
// the form content as children. The step provides title, description,
// "mark complete" CTA, and prev/next/finish navigation. In Phase 5 the
// children will be real form components from the corresponding settings
// pages — for now they're placeholders.
export const WizardStep = ({
step,
isCompleted,
isLast,
onPrev,
onNext,
onMarkComplete,
onFinish,
saving = false,
children,
}: WizardStepProps) => {
const meta = SETUP_STEP_LABELS[step];
return (
<div className="rounded-xl border border-secondary bg-primary p-8 shadow-xs">
<div className="mb-6 flex items-start justify-between gap-4">
<div>
<h2 className="text-2xl font-bold text-primary">{meta.title}</h2>
<p className="mt-1 text-sm text-tertiary">{meta.description}</p>
</div>
{isCompleted && (
<span className="inline-flex items-center gap-2 rounded-full bg-success-primary px-3 py-1 text-xs font-medium text-success-primary">
<FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
Complete
</span>
)}
</div>
<div className="mb-8">{children}</div>
<div className="flex items-center justify-between gap-4 border-t border-secondary pt-6">
<Button
color="secondary"
size="md"
isDisabled={!onPrev}
onClick={onPrev ?? undefined}
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowLeft} className={className} />
)}
>
Previous
</Button>
<div className="flex items-center gap-3">
{!isCompleted && (
<Button
color="primary"
size="md"
isLoading={saving}
showTextWhileLoading
onClick={onMarkComplete}
>
Mark complete
</Button>
)}
{isLast ? (
<Button
color="primary"
size="md"
isDisabled={!isCompleted}
onClick={onFinish}
>
Finish setup
</Button>
) : (
<Button
color={isCompleted ? 'primary' : 'secondary'}
size="md"
isDisabled={!onNext}
onClick={onNext ?? undefined}
iconTrailing={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowRight} className={className} />
)}
>
Next
</Button>
)}
</div>
</div>
</div>
);
};

10
src/lib/api-client.ts
View File

@@ -212,6 +212,16 @@ export const apiClient = {
return handleResponse<T>(response, options?.silent, doFetch);
},
async put<T>(path: string, body?: Record<string, unknown>, options?: { silent?: boolean }): Promise<T> {
const doFetch = () => fetch(`${API_URL}${path}`, {
method: 'PUT',
headers: authHeaders(),
body: body ? JSON.stringify(body) : undefined,
});
const response = await doFetch();
return handleResponse<T>(response, options?.silent, doFetch);
},
// Health check — silent, no toasts
async healthCheck(): Promise<{ status: string; platform: { reachable: boolean } }> {
try {

83
src/lib/setup-state.ts Normal file
View File

@@ -0,0 +1,83 @@
import { apiClient } from './api-client';
// Mirror of the sidecar SetupState shape — keep in sync with
// helix-engage-server/src/config/setup-state.defaults.ts. Any change to the
// step list there must be reflected here.
export type SetupStepName =
| 'identity'
| 'clinics'
| 'doctors'
| 'team'
| 'telephony'
| 'ai';
export const SETUP_STEP_NAMES: readonly SetupStepName[] = [
'identity',
'clinics',
'doctors',
'team',
'telephony',
'ai',
] as const;
export type SetupStepStatus = {
completed: boolean;
completedAt: string | null;
completedBy: string | null;
};
export type SetupState = {
version?: number;
updatedAt?: string;
wizardDismissed: boolean;
steps: Record<SetupStepName, SetupStepStatus>;
wizardRequired: boolean;
};
// Human-friendly labels for the wizard UI + settings hub badges. Kept here
// next to the type so adding a new step touches one file.
export const SETUP_STEP_LABELS: Record<SetupStepName, { title: string; description: string }> = {
identity: {
title: 'Hospital Identity',
description: 'Confirm your hospital name, upload your logo, and pick brand colors.',
},
clinics: {
title: 'Clinics',
description: 'Add your physical branches with addresses and visiting hours.',
},
doctors: {
title: 'Doctors',
description: 'Add clinicians, assign them to clinics, and set their schedules.',
},
team: {
title: 'Team',
description: 'Invite supervisors and call-center agents to your workspace.',
},
telephony: {
title: 'Telephony',
description: 'Connect Ozonetel and Exotel for inbound and outbound calls.',
},
ai: {
title: 'AI Assistant',
description: 'Choose your AI provider and customise the assistant prompts.',
},
};
export const getSetupState = () =>
apiClient.get<SetupState>('/api/config/setup-state', { silent: true });
export const markSetupStepComplete = (step: SetupStepName, completedBy?: string) =>
apiClient.put<SetupState>(`/api/config/setup-state/steps/${step}`, {
completed: true,
completedBy,
});
export const markSetupStepIncomplete = (step: SetupStepName) =>
apiClient.put<SetupState>(`/api/config/setup-state/steps/${step}`, { completed: false });
export const dismissSetupWizard = () =>
apiClient.post<SetupState>('/api/config/setup-state/dismiss');
export const resetSetupState = () =>
apiClient.post<SetupState>('/api/config/setup-state/reset');

60
src/main.tsx
View File

@@ -30,6 +30,9 @@ import { ProfilePage } from "@/pages/profile";
import { AccountSettingsPage } from "@/pages/account-settings";
import { RulesSettingsPage } from "@/pages/rules-settings";
import { BrandingSettingsPage } from "@/pages/branding-settings";
import { TeamSettingsPage } from "@/pages/team-settings";
import { SetupWizardPage } from "@/pages/setup-wizard";
import { SettingsPlaceholder } from "@/pages/settings-placeholder";
import { AuthProvider } from "@/providers/auth-provider";
import { DataProvider } from "@/providers/data-provider";
import { RouteProvider } from "@/providers/router-provider";
@@ -49,6 +52,9 @@ createRoot(document.getElementById("root")!).render(
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route element={<AuthGuard />}>
{/* Setup wizard — fullscreen, no AppShell */}
<Route path="/setup" element={<SetupWizardPage />} />
<Route
element={
<AppShell>
@@ -74,7 +80,61 @@ createRoot(document.getElementById("root")!).render(
<Route path="/team-dashboard" element={<TeamDashboardPage />} />
<Route path="/reports" element={<ReportsPage />} />
<Route path="/integrations" element={<IntegrationsPage />} />
{/* Settings hub + section pages */}
<Route path="/settings" element={<SettingsPage />} />
<Route path="/settings/team" element={<TeamSettingsPage />} />
<Route
path="/settings/clinics"
element={
<SettingsPlaceholder
title="Clinics"
description="Add hospital branches with addresses, phones, and visiting hours"
phase="Phase 3"
/>
}
/>
<Route
path="/settings/doctors"
element={
<SettingsPlaceholder
title="Doctors"
description="Add clinicians, specialties, and clinic assignments"
phase="Phase 3"
/>
}
/>
<Route
path="/settings/telephony"
element={
<SettingsPlaceholder
title="Telephony"
description="Connect Ozonetel and Exotel for calls"
phase="Phase 4"
/>
}
/>
<Route
path="/settings/ai"
element={
<SettingsPlaceholder
title="AI Assistant"
description="Choose your AI provider, model, and prompts"
phase="Phase 4"
/>
}
/>
<Route
path="/settings/widget"
element={
<SettingsPlaceholder
title="Website Widget"
description="Embed the chat + booking widget on your hospital website"
phase="Phase 4"
/>
}
/>
<Route path="/agent/:id" element={<AgentDetailPage />} />
<Route path="/patient/:id" element={<Patient360Page />} />
<Route path="/profile" element={<ProfilePage />} />

17
src/pages/login.tsx
View File

@@ -11,6 +11,7 @@ import { Input } from '@/components/base/input/input';
import { MaintOtpModal } from '@/components/modals/maint-otp-modal';
import { useMaintShortcuts } from '@/hooks/use-maint-shortcuts';
import { useThemeTokens } from '@/providers/theme-token-provider';
import { getSetupState } from '@/lib/setup-state';
export const LoginPage = () => {
const { loginWithUser } = useAuth();
@@ -114,6 +115,22 @@ export const LoginPage = () => {
});
refresh();
// First-run detection: if the workspace's setup is incomplete and
// the wizard hasn't been dismissed, route the admin to /setup so
// they finish onboarding before reaching the dashboard. Failures
// are non-blocking — we always have a fallback to /.
try {
const state = await getSetupState();
if (state.wizardRequired) {
navigate('/setup');
return;
}
} catch {
// Setup state endpoint may be unreachable on older sidecars —
// proceed to the normal landing page.
}
navigate('/');
} catch (err: any) {
setError(err.message);

47
src/pages/settings-placeholder.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { useNavigate } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faTools } from '@fortawesome/pro-duotone-svg-icons';
import { Button } from '@/components/base/buttons/button';
import { TopBar } from '@/components/layout/top-bar';
type SettingsPlaceholderProps = {
title: string;
description: string;
phase: string;
};
// Placeholder for settings pages that haven't been built yet. Used by routes
// the Settings hub links to during Phase 2 — Phase 3 (Clinics, Doctors, Team
// invite/role editor) and Phase 4 (Telephony, AI, Widget) replace these with
// real CRUD pages.
export const SettingsPlaceholder = ({ title, description, phase }: SettingsPlaceholderProps) => {
const navigate = useNavigate();
return (
<div className="flex flex-1 flex-col overflow-hidden">
<TopBar title={title} subtitle={description} />
<div className="flex flex-1 items-center justify-center p-8">
<div className="max-w-md rounded-xl border border-dashed border-secondary bg-secondary px-8 py-12 text-center">
<div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary">
<FontAwesomeIcon icon={faTools} className="size-5 text-brand-primary" />
</div>
<h2 className="text-base font-semibold text-primary">Coming in {phase}</h2>
<p className="mt-2 text-sm text-tertiary">
This page will let you manage <b>{title.toLowerCase()}</b> directly from the staff portal.
It's not built yet — see the onboarding plan for delivery details.
</p>
<Button
size="sm"
color="secondary"
className="mt-6"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faArrowLeft} className={className} />
)}
onClick={() => navigate('/settings')}
>
Back to settings
</Button>
</div>
</div>
</div>
);
};

303
src/pages/settings.tsx
View File

@@ -1,184 +1,153 @@
import { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faKey, faToggleOn } from '@fortawesome/pro-duotone-svg-icons';
import { Avatar } from '@/components/base/avatar/avatar';
import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button';
import { Table, TableCard } from '@/components/application/table/table';
import { useEffect, useState } from 'react';
import {
faBuilding,
faStethoscope,
faUserTie,
faPhone,
faRobot,
faGlobe,
faPalette,
faShieldHalved,
} from '@fortawesome/pro-duotone-svg-icons';
import { TopBar } from '@/components/layout/top-bar';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { getInitials } from '@/lib/format';
import { SectionCard } from '@/components/setup/section-card';
import {
SETUP_STEP_NAMES,
SETUP_STEP_LABELS,
type SetupState,
type SetupStepName,
getSetupState,
} from '@/lib/setup-state';
type WorkspaceMember = {
id: string;
name: { firstName: string; lastName: string } | null;
userEmail: string;
avatarUrl: string | null;
roles: { id: string; label: string }[];
// Settings hub — the new /settings route. Replaces the old monolithic
// SettingsPage which had only the team listing. The team listing now lives
// at /settings/team via TeamSettingsPage.
//
// Each card links to a dedicated settings page. Pages built in earlier
// phases link to existing routes (branding, rules); pages coming in later
// phases link to placeholder routes that render "Coming soon" until those
// phases land.
//
// The completion status badges mirror the sidecar setup-state so an admin
// returning later sees what still needs attention. Sections without a
// matching wizard step (branding, widget, rules) don't show a badge.
const STEP_TO_STATUS = (state: SetupState | null, step: SetupStepName | null) => {
if (!state || !step) return 'unknown' as const;
return state.steps[step].completed ? ('complete' as const) : ('incomplete' as const);
};
export const SettingsPage = () => {
const [members, setMembers] = useState<WorkspaceMember[]>([]);
const [loading, setLoading] = useState(true);
const [state, setState] = useState<SetupState | null>(null);
useEffect(() => {
const fetchMembers = async () => {
try {
// Roles are only accessible via user JWT, not API key
const data = await apiClient.graphql<any>(
`{ workspaceMembers(first: 50) { edges { node { id name { firstName lastName } userEmail avatarUrl } } } }`,
undefined,
{ silent: true },
);
const rawMembers = data?.workspaceMembers?.edges?.map((e: any) => e.node) ?? [];
// Roles come from the platform's role assignment — map known emails to roles
setMembers(rawMembers.map((m: any) => ({
...m,
roles: inferRoles(m.userEmail),
})));
} catch {
// silently fail
} finally {
setLoading(false);
}
};
fetchMembers();
getSetupState()
.then(setState)
.catch(() => {
// Hub still works even if setup-state isn't reachable — just no badges.
});
}, []);
// Infer roles from email convention until platform roles API is accessible
const inferRoles = (email: string): { id: string; label: string }[] => {
if (email.includes('ramesh') || email.includes('admin')) return [{ id: 'mgr', label: 'HelixEngage Manager' }];
if (email.includes('cc')) return [{ id: 'cc', label: 'HelixEngage User (CC Agent)' }];
if (email.includes('marketing') || email.includes('sanjay')) return [{ id: 'exec', label: 'HelixEngage User (Executive)' }];
if (email.includes('dr.')) return [{ id: 'doc', label: 'HelixEngage User (Doctor)' }];
return [{ id: 'user', label: 'HelixEngage User' }];
};
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const PAGE_SIZE = 10;
const filtered = useMemo(() => {
if (!search.trim()) return members;
const q = search.toLowerCase();
return members.filter((m) => {
const name = `${m.name?.firstName ?? ''} ${m.name?.lastName ?? ''}`.toLowerCase();
return name.includes(q) || m.userEmail.toLowerCase().includes(q);
});
}, [members, search]);
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
const handleResetPassword = (member: WorkspaceMember) => {
notify.info('Password Reset', `Password reset link would be sent to ${member.userEmail}`);
};
return (
<div className="flex flex-1 flex-col overflow-hidden">
<TopBar title="Settings" subtitle="Team management and configuration" />
<TopBar title="Settings" subtitle="Configure your hospital workspace" />
<div className="flex-1 overflow-y-auto p-6 space-y-6">
{/* Employees section */}
<TableCard.Root size="sm">
<TableCard.Header
title="Employees"
badge={members.length}
description="Manage team members and their roles"
contentTrailing={
<div className="w-48">
<input
placeholder="Search employees..."
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
className="w-full rounded-lg border border-secondary bg-primary px-3 py-1.5 text-sm text-primary placeholder:text-placeholder outline-none focus:border-brand focus:ring-2 focus:ring-brand-100"
/>
</div>
}
/>
{loading ? (
<div className="flex items-center justify-center py-12">
<p className="text-sm text-tertiary">Loading employees...</p>
</div>
) : (<>
<Table>
<Table.Header>
<Table.Head label="EMPLOYEE" isRowHeader />
<Table.Head label="EMAIL" />
<Table.Head label="ROLES" />
<Table.Head label="STATUS" />
<Table.Head label="ACTIONS" />
</Table.Header>
<Table.Body items={paged}>
{(member) => {
const firstName = member.name?.firstName ?? '';
const lastName = member.name?.lastName ?? '';
const fullName = `${firstName} ${lastName}`.trim() || 'Unnamed';
const initials = getInitials(firstName || '?', lastName || '?');
const roles = member.roles?.map((r) => r.label) ?? [];
<div className="flex-1 overflow-y-auto p-8">
<div className="mx-auto max-w-5xl">
{/* Identity & branding */}
<SectionGroup title="Hospital identity" description="How your hospital appears across the platform.">
<SectionCard
title="Branding"
description="Hospital name, logo, colors, login copy, sidebar text."
icon={faPalette}
href="/branding"
status={STEP_TO_STATUS(state, 'identity')}
/>
</SectionGroup>
return (
<Table.Row id={member.id}>
<Table.Cell>
<div className="flex items-center gap-3">
<Avatar size="sm" initials={initials} src={member.avatarUrl ?? undefined} />
<span className="text-sm font-medium text-primary">{fullName}</span>
</div>
</Table.Cell>
<Table.Cell>
<span className="text-sm text-tertiary">{member.userEmail}</span>
</Table.Cell>
<Table.Cell>
<div className="flex flex-wrap gap-1">
{roles.length > 0 ? roles.map((role) => (
<Badge key={role} size="sm" color={role.includes('Manager') ? 'brand' : 'gray'}>
{role}
</Badge>
)) : (
<span className="text-xs text-quaternary">No roles</span>
)}
</div>
</Table.Cell>
<Table.Cell>
<Badge size="sm" color="success" type="pill-color">
<FontAwesomeIcon icon={faToggleOn} className="mr-1 size-3" />
Active
</Badge>
</Table.Cell>
<Table.Cell>
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faKey} className={className} />
)}
onClick={() => handleResetPassword(member)}
>
Reset Password
</Button>
</Table.Cell>
</Table.Row>
);
}}
</Table.Body>
</Table>
{totalPages > 1 && (
<div className="flex items-center justify-between border-t border-secondary px-5 py-3">
<span className="text-xs text-tertiary">
{(page - 1) * PAGE_SIZE + 1}&ndash;{Math.min(page * PAGE_SIZE, filtered.length)} of {filtered.length}
</span>
<div className="flex items-center gap-1">
<button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1}
className="px-2 py-1 text-xs font-medium text-secondary rounded-md hover:bg-primary_hover disabled:text-disabled disabled:cursor-not-allowed">Previous</button>
<button onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages}
className="px-2 py-1 text-xs font-medium text-secondary rounded-md hover:bg-primary_hover disabled:text-disabled disabled:cursor-not-allowed">Next</button>
</div>
</div>
)}
</> )}
</TableCard.Root>
{/* Care delivery */}
<SectionGroup title="Care delivery" description="The clinics, doctors, and team members that run your operations.">
<SectionCard
title="Clinics"
description="Add hospital branches, addresses, and visiting hours."
icon={faBuilding}
href="/settings/clinics"
status={STEP_TO_STATUS(state, 'clinics')}
/>
<SectionCard
title={SETUP_STEP_LABELS.doctors.title}
description="Add clinicians, specialties, and clinic assignments."
icon={faStethoscope}
href="/settings/doctors"
status={STEP_TO_STATUS(state, 'doctors')}
/>
<SectionCard
title={SETUP_STEP_LABELS.team.title}
description="Invite supervisors and call-center agents."
icon={faUserTie}
href="/settings/team"
status={STEP_TO_STATUS(state, 'team')}
/>
</SectionGroup>
{/* Channels & automation */}
<SectionGroup title="Channels & automation" description="Telephony, AI assistant, and the public-facing widget.">
<SectionCard
title={SETUP_STEP_LABELS.telephony.title}
description="Connect Ozonetel and Exotel for inbound and outbound calls."
icon={faPhone}
href="/settings/telephony"
status={STEP_TO_STATUS(state, 'telephony')}
/>
<SectionCard
title={SETUP_STEP_LABELS.ai.title}
description="Choose your AI provider, model, and prompts."
icon={faRobot}
href="/settings/ai"
status={STEP_TO_STATUS(state, 'ai')}
/>
<SectionCard
title="Website widget"
description="Embed the chat + booking widget on your hospital website."
icon={faGlobe}
href="/settings/widget"
/>
<SectionCard
title="Routing rules"
description="Lead scoring, prioritisation, and assignment rules."
icon={faShieldHalved}
href="/rules"
/>
</SectionGroup>
{state && (
<p className="mt-8 text-xs text-tertiary">
{SETUP_STEP_NAMES.filter(s => state.steps[s].completed).length} of{' '}
{SETUP_STEP_NAMES.length} setup steps complete.
</p>
)}
</div>
</div>
</div>
);
};
const SectionGroup = ({
title,
description,
children,
}: {
title: string;
description: string;
children: React.ReactNode;
}) => {
return (
<div className="mb-10 last:mb-0">
<div className="mb-4">
<h2 className="text-base font-bold text-primary">{title}</h2>
<p className="mt-0.5 text-xs text-tertiary">{description}</p>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">{children}</div>
</div>
);
};

138
src/pages/setup-wizard.tsx Normal file
View File

@@ -0,0 +1,138 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import { WizardShell } from '@/components/setup/wizard-shell';
import { WizardStep } from '@/components/setup/wizard-step';
import {
SETUP_STEP_NAMES,
SETUP_STEP_LABELS,
type SetupState,
type SetupStepName,
getSetupState,
markSetupStepComplete,
dismissSetupWizard,
} from '@/lib/setup-state';
import { notify } from '@/lib/toast';
import { useAuth } from '@/providers/auth-provider';
// Top-level onboarding wizard. Auto-shown by login.tsx redirect when the
// workspace has incomplete setup steps. Each step renders a placeholder card
// in Phase 2 — Phase 5 swaps the placeholders for real form components from
// the matching settings pages (clinics, doctors, team, telephony, ai).
//
// The wizard is functional even at placeholder level: each step has a
// "Mark complete" button that calls PUT /api/config/setup-state/steps/<name>,
// which lets the operator click through and verify first-run detection +
// dismiss flow without waiting for Phase 5.
export const SetupWizardPage = () => {
const navigate = useNavigate();
const { user } = useAuth();
const [state, setState] = useState<SetupState | null>(null);
const [activeStep, setActiveStep] = useState<SetupStepName>('identity');
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
useEffect(() => {
let cancelled = false;
getSetupState()
.then(s => {
if (cancelled) return;
setState(s);
// Land on the first incomplete step so the operator picks
// up where they left off.
const firstIncomplete = SETUP_STEP_NAMES.find(name => !s.steps[name].completed);
if (firstIncomplete) setActiveStep(firstIncomplete);
})
.catch(err => {
console.error('Failed to load setup state', err);
notify.error('Setup', 'Could not load setup state. Please reload.');
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
}, []);
if (loading || !state) {
return (
<div className="flex min-h-screen items-center justify-center bg-primary">
<p className="text-sm text-tertiary">Loading setup…</p>
</div>
);
}
const activeIndex = SETUP_STEP_NAMES.indexOf(activeStep);
const isLastStep = activeIndex === SETUP_STEP_NAMES.length - 1;
const onPrev = activeIndex > 0 ? () => setActiveStep(SETUP_STEP_NAMES[activeIndex - 1]) : null;
const onNext = !isLastStep ? () => setActiveStep(SETUP_STEP_NAMES[activeIndex + 1]) : null;
const handleMarkComplete = async () => {
setSaving(true);
try {
const updated = await markSetupStepComplete(activeStep, user?.email);
setState(updated);
notify.success('Step complete', SETUP_STEP_LABELS[activeStep].title);
// Auto-advance to next incomplete step (or stay if this was the last).
if (!isLastStep) {
setActiveStep(SETUP_STEP_NAMES[activeIndex + 1]);
}
} catch {
notify.error('Setup', 'Could not save step status. Please try again.');
} finally {
setSaving(false);
}
};
const handleFinish = () => {
notify.success('Setup complete', 'Welcome to your workspace!');
navigate('/', { replace: true });
};
const handleDismiss = async () => {
try {
await dismissSetupWizard();
notify.success('Setup dismissed', 'You can finish setup later from Settings.');
navigate('/', { replace: true });
} catch {
notify.error('Setup', 'Could not dismiss the wizard. Please try again.');
}
};
return (
<WizardShell
state={state}
activeStep={activeStep}
onSelectStep={setActiveStep}
onDismiss={handleDismiss}
>
<WizardStep
step={activeStep}
isCompleted={state.steps[activeStep].completed}
isLast={isLastStep}
onPrev={onPrev}
onNext={onNext}
onMarkComplete={handleMarkComplete}
onFinish={handleFinish}
saving={saving}
>
<StepPlaceholder step={activeStep} />
</WizardStep>
</WizardShell>
);
};
// Placeholder body for each step. Phase 5 will replace this dispatcher with
// real form components (clinic-form, doctor-form, invite-member-form, etc).
const StepPlaceholder = ({ step }: { step: SetupStepName }) => {
const meta = SETUP_STEP_LABELS[step];
return (
<div className="rounded-lg border border-dashed border-secondary bg-secondary px-6 py-12 text-center">
<p className="text-sm font-semibold text-secondary">Coming in Phase 5</p>
<p className="mt-2 text-xs text-tertiary">
The {meta.title.toLowerCase()} form will live here. For now, click <b>Mark complete</b> below
to test the wizard flow end-to-end.
</p>
</div>
);
};

188
src/pages/team-settings.tsx Normal file
View File

@@ -0,0 +1,188 @@
import { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faKey, faToggleOn } from '@fortawesome/pro-duotone-svg-icons';
import { Avatar } from '@/components/base/avatar/avatar';
import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button';
import { Table, TableCard } from '@/components/application/table/table';
import { TopBar } from '@/components/layout/top-bar';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { getInitials } from '@/lib/format';
// Workspace member listing — moved here from the old monolithic SettingsPage
// when /settings became the Settings hub. This page is mounted at /settings/team.
//
// Phase 2: read-only listing (same as before).
// Phase 3: invite form + role assignment editor will be added here.
type WorkspaceMember = {
id: string;
name: { firstName: string; lastName: string } | null;
userEmail: string;
avatarUrl: string | null;
roles: { id: string; label: string }[];
};
export const TeamSettingsPage = () => {
const [members, setMembers] = useState<WorkspaceMember[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchMembers = async () => {
try {
const data = await apiClient.graphql<any>(
`{ workspaceMembers(first: 50) { edges { node { id name { firstName lastName } userEmail avatarUrl } } } }`,
undefined,
{ silent: true },
);
const rawMembers = data?.workspaceMembers?.edges?.map((e: any) => e.node) ?? [];
// Roles come from the platform's role assignment — Phase 3 wires the
// real getRoles query; for now infer from email convention.
setMembers(rawMembers.map((m: any) => ({
...m,
roles: inferRoles(m.userEmail),
})));
} catch {
// silently fail
} finally {
setLoading(false);
}
};
fetchMembers();
}, []);
const inferRoles = (email: string): { id: string; label: string }[] => {
if (email.includes('ramesh') || email.includes('admin')) return [{ id: 'mgr', label: 'HelixEngage Manager' }];
if (email.includes('cc')) return [{ id: 'cc', label: 'HelixEngage User (CC Agent)' }];
if (email.includes('marketing') || email.includes('sanjay')) return [{ id: 'exec', label: 'HelixEngage User (Executive)' }];
if (email.includes('dr.')) return [{ id: 'doc', label: 'HelixEngage User (Doctor)' }];
return [{ id: 'user', label: 'HelixEngage User' }];
};
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const PAGE_SIZE = 10;
const filtered = useMemo(() => {
if (!search.trim()) return members;
const q = search.toLowerCase();
return members.filter((m) => {
const name = `${m.name?.firstName ?? ''} ${m.name?.lastName ?? ''}`.toLowerCase();
return name.includes(q) || m.userEmail.toLowerCase().includes(q);
});
}, [members, search]);
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
const handleResetPassword = (member: WorkspaceMember) => {
notify.info('Password Reset', `Password reset link would be sent to ${member.userEmail}`);
};
return (
<div className="flex flex-1 flex-col overflow-hidden">
<TopBar title="Team" subtitle="Manage workspace members and their roles" />
<div className="flex-1 overflow-y-auto p-6 space-y-6">
<TableCard.Root size="sm">
<TableCard.Header
title="Employees"
badge={members.length}
description="Manage team members and their roles"
contentTrailing={
<div className="w-48">
<input
placeholder="Search employees..."
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
className="w-full rounded-lg border border-secondary bg-primary px-3 py-1.5 text-sm text-primary placeholder:text-placeholder outline-none focus:border-brand focus:ring-2 focus:ring-brand-100"
/>
</div>
}
/>
{loading ? (
<div className="flex items-center justify-center py-12">
<p className="text-sm text-tertiary">Loading employees...</p>
</div>
) : (<>
<Table>
<Table.Header>
<Table.Head label="EMPLOYEE" isRowHeader />
<Table.Head label="EMAIL" />
<Table.Head label="ROLES" />
<Table.Head label="STATUS" />
<Table.Head label="ACTIONS" />
</Table.Header>
<Table.Body items={paged}>
{(member) => {
const firstName = member.name?.firstName ?? '';
const lastName = member.name?.lastName ?? '';
const fullName = `${firstName} ${lastName}`.trim() || 'Unnamed';
const initials = getInitials(firstName || '?', lastName || '?');
const roles = member.roles?.map((r) => r.label) ?? [];
return (
<Table.Row id={member.id}>
<Table.Cell>
<div className="flex items-center gap-3">
<Avatar size="sm" initials={initials} src={member.avatarUrl ?? undefined} />
<span className="text-sm font-medium text-primary">{fullName}</span>
</div>
</Table.Cell>
<Table.Cell>
<span className="text-sm text-tertiary">{member.userEmail}</span>
</Table.Cell>
<Table.Cell>
<div className="flex flex-wrap gap-1">
{roles.length > 0 ? roles.map((role) => (
<Badge key={role} size="sm" color={role.includes('Manager') ? 'brand' : 'gray'}>
{role}
</Badge>
)) : (
<span className="text-xs text-quaternary">No roles</span>
)}
</div>
</Table.Cell>
<Table.Cell>
<Badge size="sm" color="success" type="pill-color">
<FontAwesomeIcon icon={faToggleOn} className="mr-1 size-3" />
Active
</Badge>
</Table.Cell>
<Table.Cell>
<Button
size="sm"
color="secondary"
iconLeading={({ className }: { className?: string }) => (
<FontAwesomeIcon icon={faKey} className={className} />
)}
onClick={() => handleResetPassword(member)}
>
Reset Password
</Button>
</Table.Cell>
</Table.Row>
);
}}
</Table.Body>
</Table>
{totalPages > 1 && (
<div className="flex items-center justify-between border-t border-secondary px-5 py-3">
<span className="text-xs text-tertiary">
{(page - 1) * PAGE_SIZE + 1}&ndash;{Math.min(page * PAGE_SIZE, filtered.length)} of {filtered.length}
</span>
<div className="flex items-center gap-1">
<button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1}
className="px-2 py-1 text-xs font-medium text-secondary rounded-md hover:bg-primary_hover disabled:text-disabled disabled:cursor-not-allowed">Previous</button>
<button onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages}
className="px-2 py-1 text-xs font-medium text-secondary rounded-md hover:bg-primary_hover disabled:text-disabled disabled:cursor-not-allowed">Next</button>
</div>
</div>
)}
</> )}
</TableCard.Root>
</div>
</div>
);
};