Files
helix-engage/src/lib/setup-state.ts
saridsa2 c1b636cb6d 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>
2026-04-07 07:13:25 +05:30

84 lines
2.5 KiB
TypeScript

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