helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38: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

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>
);
};