mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
feat(onboarding/phase-2): settings hub, setup wizard shell, first-run redirect
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:
@@ -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}–{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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user