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-5): wire real forms into the setup wizard

Browse Source 
Replaces the Phase 2 StepPlaceholder with six dedicated wizard step
components, each wrapping the corresponding Phase 3/4 form. The parent
setup-wizard.tsx is now a thin dispatcher that owns shell state +
markSetupStepComplete wiring; each step owns its own data load, form
state, validation, and save action.

- src/components/setup/wizard-step-types.ts — shared
  WizardStepComponentProps shape
- src/components/setup/wizard-step-identity.tsx — minimal brand form
  (hospital name + logo URL) hitting /api/config/theme, links out to
  /branding for full customisation
- src/components/setup/wizard-step-clinics.tsx — ClinicForm + createClinic
  mutation, always presents an empty "add new" form
- src/components/setup/wizard-step-doctors.tsx — DoctorForm with clinic
  dropdown, blocks with an inline warning when no clinics exist yet
- src/components/setup/wizard-step-team.tsx — InviteMemberForm with real
  roles fetched from getRoles, sends invitations via sendInvitations
- src/components/setup/wizard-step-telephony.tsx — loads masked config
  from /api/config/telephony, validates required Ozonetel fields on save
- src/components/setup/wizard-step-ai.tsx — loads AI config, clamps
  temperature 0..2, doesn't auto-advance (last step, admin taps Finish)
- src/pages/setup-wizard.tsx — dispatches to the right step component
  based on activeStep, passes a WizardStepComponentProps bundle

Each step calls onComplete(step) after a successful save, which updates
the shared SetupState so the left-nav badges reflect the new status
immediately.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-04-07 07:54:35 +05:30
parent a7b2fd7fbe
commit a287a97fe4
8 changed files with 646 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/setup-wizard.tsx
View File

@@ -1,10 +1,15 @@
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 { WizardStepIdentity } from '@/components/setup/wizard-step-identity';
import { WizardStepClinics } from '@/components/setup/wizard-step-clinics';
import { WizardStepDoctors } from '@/components/setup/wizard-step-doctors';
import { WizardStepTeam } from '@/components/setup/wizard-step-team';
import { WizardStepTelephony } from '@/components/setup/wizard-step-telephony';
import { WizardStepAi } from '@/components/setup/wizard-step-ai';
import type { WizardStepComponentProps } from '@/components/setup/wizard-step-types';
import {
SETUP_STEP_NAMES,
SETUP_STEP_LABELS,
type SetupState,
type SetupStepName,
getSetupState,
@@ -15,34 +20,41 @@ 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).
// workspace has incomplete setup steps.
//
// 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.
// Phase 5: each step is now backed by a real form component. The parent
// owns the shell navigation + per-step completion state, and passes a
// WizardStepComponentProps bundle to the dispatched child so the child
// can trigger save + mark-complete + advance from its own Save action.
const STEP_COMPONENTS: Record<SetupStepName, (p: WizardStepComponentProps) => React.ReactElement> = {
identity: WizardStepIdentity,
clinics: WizardStepClinics,
doctors: WizardStepDoctors,
team: WizardStepTeam,
telephony: WizardStepTelephony,
ai: WizardStepAi,
};
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 => {
.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);
// 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 => {
.catch((err) => {
console.error('Failed to load setup state', err);
notify.error('Setup', 'Could not load setup state. Please reload.');
})
@@ -67,20 +79,20 @@ export const SetupWizardPage = () => {
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);
const handleComplete = async (step: SetupStepName) => {
try {
const updated = await markSetupStepComplete(activeStep, user?.email);
const updated = await markSetupStepComplete(step, 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);
} catch (err) {
console.error('Failed to mark step complete', err);
// Non-fatal — the step's own save already succeeded. We just
// couldn't persist the wizard-state badge.
}
};
const handleAdvance = () => {
if (!isLastStep) {
setActiveStep(SETUP_STEP_NAMES[activeIndex + 1]);
}
};
@@ -99,6 +111,17 @@ export const SetupWizardPage = () => {
}
};
const StepComponent = STEP_COMPONENTS[activeStep];
const stepProps: WizardStepComponentProps = {
isCompleted: state.steps[activeStep].completed,
isLast: isLastStep,
onPrev,
onNext,
onComplete: handleComplete,
onAdvance: handleAdvance,
onFinish: handleFinish,
};
return (
<WizardShell
state={state}
@@ -106,33 +129,7 @@ export const SetupWizardPage = () => {
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>
<StepComponent {...stepProps} />
</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>
);
};