feat(onboarding/phase-6): setup wizard polish, seed script alignment, doctor visit slots

- Setup wizard: 3-pane layout with right-side live previews, resume
  banner, edit/copy icons on team step, AI prompt configuration
- Forms: employee-create replaces invite-member (no email invites),
  clinic form with address/hours/payment, doctor form with visit slots
- Seed script: aligned to current SDK schema — doctors created as
  workspace members (HelixEngage Manager role), visitingHours replaced
  by doctorVisitSlot entity, clinics seeded, portalUserId linked
  dynamically, SUB/ORIGIN/GQL configurable via env vars
- Pages: clinics + doctors CRUD updated for new schema, team settings
  with temp password + role assignment
- New components: time-picker, day-selector, wizard-right-panes,
  wizard-layout-context, resume-setup-banner
- Removed: invite-member-form (replaced by employee-create-form per
  no-email-invites rule)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/forms/clinic-form.tsx

@@ -1,21 +1,92 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faTrash } from '@fortawesome/pro-duotone-svg-icons';
+import { parseDate, getLocalTimeZone, today } from '@internationalized/date';
+import type { DateValue } from 'react-aria-components';
 import { Input } from '@/components/base/input/input';
 import { Select } from '@/components/base/select/select';
-import { TextArea } from '@/components/base/textarea/textarea';
 import { Toggle } from '@/components/base/toggle/toggle';
+import { Button } from '@/components/base/buttons/button';
+import { DatePicker } from '@/components/application/date-picker/date-picker';
+import { TimePicker } from '@/components/application/date-picker/time-picker';
+import {
+    DaySelector,
+    defaultDaySelection,
+    type DaySelection,
+} from '@/components/application/day-selector/day-selector';
 
-// Reusable clinic form used by both the /settings/clinics slideout and the
-// /setup wizard step. The parent owns the form state so it can also own the
-// submit button and the loading/error UI.
+// Reusable clinic form used by /settings/clinics slideout and the /setup
+// wizard step. The parent owns form state + the save flow so it can decide
+// how to orchestrate the multi-step create chain (one createClinic, then one
+// createHoliday per holiday, then one createClinicRequiredDocument per doc).
 //
-// Field shapes mirror the platform's ClinicCreateInput (which uses
-// `addressCustom`, not `address`, and `onlineBooking`, not
-// `onlineBookingEnabled` as the SDK field). See
-// FortyTwoApps/helix-engage/src/objects/clinic.object.ts for the SDK source of
-// truth; GraphQL-level differences are normalised in clinicFormToGraphQLInput.
+// Schema (matches the Clinic entity in
+// FortyTwoApps/helix-engage/src/objects/clinic.object.ts, column names
+// derived from SDK labels — that's why opensAt/closesAt and not openTime/
+// closeTime):
+//   - clinicName (TEXT)
+//   - address (ADDRESS → addressCustomAddress*)
+//   - phone (PHONES)
+//   - email (EMAILS)
+//   - openMonday..openSunday (7 BOOLEANs)
+//   - opensAt / closesAt (TEXT, HH:MM)
+//   - status (SELECT enum)
+//   - walkInAllowed / onlineBooking (BOOLEAN)
+//   - cancellationWindowHours / arriveEarlyMin (NUMBER)
+//
+// Plus two child entities populated separately:
+//   - Holiday (one record per closure date)
+//   - ClinicRequiredDocument (one record per required doc type)
 
 export type ClinicStatus = 'ACTIVE' | 'TEMPORARILY_CLOSED' | 'PERMANENTLY_CLOSED';
 
+// Matches the SELECT enum on ClinicRequiredDocument. Keep in sync with
+// FortyTwoApps/helix-engage/src/objects/clinic-required-document.object.ts.
+export type DocumentType =
+    | 'ID_PROOF'
+    | 'AADHAAR'
+    | 'PAN'
+    | 'REFERRAL_LETTER'
+    | 'PRESCRIPTION'
+    | 'INSURANCE_CARD'
+    | 'PREVIOUS_REPORTS'
+    | 'PHOTO'
+    | 'OTHER';
+
+const DOCUMENT_TYPE_LABELS: Record<DocumentType, string> = {
+    ID_PROOF: 'Government ID',
+    AADHAAR: 'Aadhaar Card',
+    PAN: 'PAN Card',
+    REFERRAL_LETTER: 'Referral Letter',
+    PRESCRIPTION: 'Prescription',
+    INSURANCE_CARD: 'Insurance Card',
+    PREVIOUS_REPORTS: 'Previous Reports',
+    PHOTO: 'Passport Photo',
+    OTHER: 'Other',
+};
+
+const DOCUMENT_TYPE_ORDER: DocumentType[] = [
+    'ID_PROOF',
+    'AADHAAR',
+    'PAN',
+    'REFERRAL_LETTER',
+    'PRESCRIPTION',
+    'INSURANCE_CARD',
+    'PREVIOUS_REPORTS',
+    'PHOTO',
+    'OTHER',
+];
+
+export type ClinicHolidayEntry = {
+    // Populated on the existing record when editing; undefined for freshly
+    // added holidays the user hasn't saved yet. Used by the parent to
+    // decide create vs update vs delete on save.
+    id?: string;
+    date: string; // ISO yyyy-MM-dd
+    label: string;
+};
+
 export type ClinicFormValues = {
+    // Core clinic fields
     clinicName: string;
     addressStreet1: string;
     addressStreet2: string;
@@ -24,15 +95,19 @@ export type ClinicFormValues = {
     addressPostcode: string;
     phone: string;
     email: string;
-    weekdayHours: string;
-    saturdayHours: string;
-    sundayHours: string;
+    // Schedule — simple pattern
+    openDays: DaySelection;
+    opensAt: string | null;
+    closesAt: string | null;
+    // Status + booking policy
     status: ClinicStatus;
     walkInAllowed: boolean;
     onlineBooking: boolean;
     cancellationWindowHours: string;
     arriveEarlyMin: string;
-    requiredDocuments: string;
+    // Children (persisted via separate mutations)
+    requiredDocumentTypes: DocumentType[];
+    holidays: ClinicHolidayEntry[];
 };
 
 export const emptyClinicFormValues = (): ClinicFormValues => ({
@@ -44,15 +119,16 @@ export const emptyClinicFormValues = (): ClinicFormValues => ({
     addressPostcode: '',
     phone: '',
     email: '',
-    weekdayHours: '9:00 AM - 6:00 PM',
-    saturdayHours: '9:00 AM - 2:00 PM',
-    sundayHours: 'Closed',
+    openDays: defaultDaySelection(),
+    opensAt: '09:00',
+    closesAt: '18:00',
     status: 'ACTIVE',
     walkInAllowed: true,
     onlineBooking: true,
     cancellationWindowHours: '24',
     arriveEarlyMin: '15',
-    requiredDocuments: '',
+    requiredDocumentTypes: [],
+    holidays: [],
 });
 
 const STATUS_ITEMS = [
@@ -61,18 +137,32 @@ const STATUS_ITEMS = [
     { id: 'PERMANENTLY_CLOSED', label: 'Permanently closed' },
 ];
 
-// Convert form state into the shape the platform's createClinic / updateClinic
-// mutations expect. Only non-empty fields are included so the platform can
-// apply its own defaults for the rest.
-export const clinicFormToGraphQLInput = (v: ClinicFormValues): Record<string, unknown> => {
+// Build the payload for `createClinic` / `updateClinic`. Holidays and
+// required-documents are NOT included here — they're child records with
+// their own mutations, orchestrated by the parent component after the
+// clinic itself has been created and its id is known.
+export const clinicCoreToGraphQLInput = (v: ClinicFormValues): Record<string, unknown> => {
     const input: Record<string, unknown> = {
         clinicName: v.clinicName.trim(),
         status: v.status,
         walkInAllowed: v.walkInAllowed,
         onlineBooking: v.onlineBooking,
+        openMonday: v.openDays.monday,
+        openTuesday: v.openDays.tuesday,
+        openWednesday: v.openDays.wednesday,
+        openThursday: v.openDays.thursday,
+        openFriday: v.openDays.friday,
+        openSaturday: v.openDays.saturday,
+        openSunday: v.openDays.sunday,
     };
 
-    const hasAddress = v.addressStreet1 || v.addressCity || v.addressState || v.addressPostcode;
+    // Column names on the platform come from the SDK `label`, not
+    // `name`. "Opens At" → opensAt, "Closes At" → closesAt.
+    if (v.opensAt) input.opensAt = v.opensAt;
+    if (v.closesAt) input.closesAt = v.closesAt;
+
+    const hasAddress =
+        v.addressStreet1 || v.addressCity || v.addressState || v.addressPostcode;
     if (hasAddress) {
         input.addressCustom = {
             addressStreet1: v.addressStreet1 || null,
@@ -100,9 +190,6 @@ export const clinicFormToGraphQLInput = (v: ClinicFormValues): Record<string, un
         };
     }
 
-    if (v.weekdayHours.trim()) input.weekdayHours = v.weekdayHours.trim();
-    if (v.saturdayHours.trim()) input.saturdayHours = v.saturdayHours.trim();
-    if (v.sundayHours.trim()) input.sundayHours = v.sundayHours.trim();
     if (v.cancellationWindowHours.trim()) {
         const n = Number(v.cancellationWindowHours);
         if (!Number.isNaN(n)) input.cancellationWindowHours = n;
@@ -111,11 +198,33 @@ export const clinicFormToGraphQLInput = (v: ClinicFormValues): Record<string, un
         const n = Number(v.arriveEarlyMin);
         if (!Number.isNaN(n)) input.arriveEarlyMin = n;
     }
-    if (v.requiredDocuments.trim()) input.requiredDocuments = v.requiredDocuments.trim();
 
     return input;
 };
 
+// Helper: build HolidayCreateInput payloads. Use after the clinic has
+// been created and its id is known.
+export const holidayInputsFromForm = (
+    v: ClinicFormValues,
+    clinicId: string,
+): Array<Record<string, unknown>> =>
+    v.holidays.map((h) => ({
+        date: h.date,
+        reasonLabel: h.label.trim() || null, // column name matches the SDK label "Reason / Label"
+        clinicId,
+    }));
+
+// Helper: build ClinicRequiredDocumentCreateInput payloads. One per
+// selected document type.
+export const requiredDocInputsFromForm = (
+    v: ClinicFormValues,
+    clinicId: string,
+): Array<Record<string, unknown>> =>
+    v.requiredDocumentTypes.map((t) => ({
+        documentType: t,
+        clinicId,
+    }));
+
 type ClinicFormProps = {
     value: ClinicFormValues;
     onChange: (value: ClinicFormValues) => void;
@@ -124,6 +233,42 @@ type ClinicFormProps = {
 export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
     const patch = (updates: Partial<ClinicFormValues>) => onChange({ ...value, ...updates });
 
+    // Required-docs add/remove handlers. The user picks a type from the
+    // dropdown; it gets added to the list; the pill row below shows
+    // selected types with an X to remove. Dropdown filters out
+    // already-selected types so the user can't pick duplicates.
+    const availableDocTypes = DOCUMENT_TYPE_ORDER.filter(
+        (t) => !value.requiredDocumentTypes.includes(t),
+    ).map((t) => ({ id: t, label: DOCUMENT_TYPE_LABELS[t] }));
+
+    const addDocType = (type: DocumentType) => {
+        if (value.requiredDocumentTypes.includes(type)) return;
+        patch({ requiredDocumentTypes: [...value.requiredDocumentTypes, type] });
+    };
+
+    const removeDocType = (type: DocumentType) => {
+        patch({
+            requiredDocumentTypes: value.requiredDocumentTypes.filter((t) => t !== type),
+        });
+    };
+
+    // Holiday add/remove handlers. Freshly-added entries have no `id`
+    // field; the parent's save flow treats those as "create".
+    const addHoliday = () => {
+        const todayIso = today(getLocalTimeZone()).toString();
+        patch({ holidays: [...value.holidays, { date: todayIso, label: '' }] });
+    };
+
+    const updateHoliday = (index: number, updates: Partial<ClinicHolidayEntry>) => {
+        const next = [...value.holidays];
+        next[index] = { ...next[index], ...updates };
+        patch({ holidays: next });
+    };
+
+    const removeHoliday = (index: number) => {
+        patch({ holidays: value.holidays.filter((_, i) => i !== index) });
+    };
+
     return (
         <div className="flex flex-col gap-4">
             <Input
@@ -144,8 +289,11 @@ export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
                 {(item) => <Select.Item id={item.id} label={item.label} />}
             </Select>
 
+            {/* Address */}
             <div className="flex flex-col gap-3">
-                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Address</p>
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Address
+                </p>
                 <Input
                     label="Street address"
                     placeholder="Street / building / landmark"
@@ -180,8 +328,11 @@ export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
                 />
             </div>
 
+            {/* Contact */}
             <div className="flex flex-col gap-3">
-                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Contact</p>
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Contact
+                </p>
                 <Input
                     label="Phone"
                     type="tel"
@@ -198,32 +349,96 @@ export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
                 />
             </div>
 
+            {/* Visiting hours — day pills + single time range */}
             <div className="flex flex-col gap-3">
-                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Visiting hours</p>
-                <Input
-                    label="Weekdays"
-                    placeholder="9:00 AM - 6:00 PM"
-                    value={value.weekdayHours}
-                    onChange={(v) => patch({ weekdayHours: v })}
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Visiting hours
+                </p>
+                <DaySelector
+                    label="Open days"
+                    hint="Pick the days this clinic is open. The time range below applies to every selected day."
+                    value={value.openDays}
+                    onChange={(openDays) => patch({ openDays })}
                 />
                 <div className="grid grid-cols-2 gap-3">
-                    <Input
-                        label="Saturday"
-                        placeholder="9:00 AM - 2:00 PM"
-                        value={value.saturdayHours}
-                        onChange={(v) => patch({ saturdayHours: v })}
+                    <TimePicker
+                        label="Opens at"
+                        value={value.opensAt}
+                        onChange={(opensAt) => patch({ opensAt })}
                     />
-                    <Input
-                        label="Sunday"
-                        placeholder="Closed"
-                        value={value.sundayHours}
-                        onChange={(v) => patch({ sundayHours: v })}
+                    <TimePicker
+                        label="Closes at"
+                        value={value.closesAt}
+                        onChange={(closesAt) => patch({ closesAt })}
                     />
                 </div>
             </div>
 
+            {/* Holiday closures */}
             <div className="flex flex-col gap-3">
-                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Booking policy</p>
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Holiday closures (optional)
+                </p>
+                {value.holidays.length === 0 && (
+                    <p className="text-xs text-tertiary">
+                        No holidays configured. Add dates when this clinic is closed (Diwali,
+                        Republic Day, maintenance days, etc.).
+                    </p>
+                )}
+                {value.holidays.map((h, idx) => (
+                    <div
+                        key={idx}
+                        className="flex items-end gap-2 rounded-lg border border-secondary bg-secondary p-3"
+                    >
+                        <div className="shrink-0">
+                            <span className="mb-1 block text-xs font-medium text-secondary">
+                                Date
+                            </span>
+                            <DatePicker
+                                value={h.date ? parseDate(h.date) : null}
+                                onChange={(dv: DateValue | null) =>
+                                    updateHoliday(idx, { date: dv ? dv.toString() : '' })
+                                }
+                            />
+                        </div>
+                        <div className="flex-1">
+                            <Input
+                                label="Reason"
+                                placeholder="e.g. Diwali"
+                                value={h.label}
+                                onChange={(label) => updateHoliday(idx, { label })}
+                            />
+                        </div>
+                        <Button
+                            size="sm"
+                            color="tertiary-destructive"
+                            iconLeading={({ className }: { className?: string }) => (
+                                <FontAwesomeIcon icon={faTrash} className={className} />
+                            )}
+                            onClick={() => removeHoliday(idx)}
+                        >
+                            Remove
+                        </Button>
+                    </div>
+                ))}
+                <Button
+                    size="sm"
+                    color="secondary"
+                    iconLeading={({ className }: { className?: string }) => (
+                        <FontAwesomeIcon icon={faPlus} className={className} />
+                    )}
+                    onClick={addHoliday}
+                    className="self-start"
+                >
+                    Add holiday
+                </Button>
+            </div>
+
+            {/* Booking policy */}
+            <div className="flex flex-col gap-3">
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Booking policy
+                </p>
                 <div className="flex flex-col gap-3 rounded-lg border border-secondary bg-secondary p-4">
                     <Toggle
                         label="Walk-ins allowed"
@@ -250,13 +465,49 @@ export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
                         onChange={(v) => patch({ arriveEarlyMin: v })}
                     />
                 </div>
-                <TextArea
-                    label="Required documents"
-                    placeholder="ID proof, referral letter, previous reports..."
-                    value={value.requiredDocuments}
-                    onChange={(v) => patch({ requiredDocuments: v })}
-                    rows={3}
-                />
+            </div>
+
+            {/* Required documents — multi-select → pills */}
+            <div className="flex flex-col gap-3">
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Required documents (optional)
+                </p>
+                {availableDocTypes.length > 0 && (
+                    <Select
+                        label="Add a required document"
+                        placeholder="Pick a document type..."
+                        items={availableDocTypes}
+                        selectedKey={null}
+                        onSelectionChange={(key) => {
+                            if (key) addDocType(key as DocumentType);
+                        }}
+                    >
+                        {(item) => <Select.Item id={item.id} label={item.label} />}
+                    </Select>
+                )}
+                {value.requiredDocumentTypes.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                        {value.requiredDocumentTypes.map((t) => (
+                            <button
+                                key={t}
+                                type="button"
+                                onClick={() => removeDocType(t)}
+                                className="group flex items-center gap-2 rounded-full border border-brand bg-brand-secondary px-3 py-1.5 text-sm font-medium text-brand-secondary transition hover:bg-brand-primary_hover"
+                            >
+                                {DOCUMENT_TYPE_LABELS[t]}
+                                <FontAwesomeIcon
+                                    icon={faTrash}
+                                    className="size-3 text-fg-quaternary group-hover:text-fg-error-primary"
+                                />
+                            </button>
+                        ))}
+                    </div>
+                )}
+                {value.requiredDocumentTypes.length === 0 && (
+                    <p className="text-xs text-tertiary">
+                        No required documents. Patients won't be asked to bring anything.
+                    </p>
+                )}
             </div>
         </div>
     );