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

src/components/forms/doctor-form.tsx

@@ -1,14 +1,20 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faTrash } from '@fortawesome/pro-duotone-svg-icons';
 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 { TimePicker } from '@/components/application/date-picker/time-picker';
 
-// Reusable doctor form used by /settings/doctors and the /setup wizard. The
-// parent owns both the form state and the list of clinics to populate the
-// clinic dropdown (since the list page will already have it loaded).
+// Doctor form — hospital-wide profile with multi-clinic, multi-day
+// visiting schedule. Each row in the "visiting schedule" section maps
+// to one DoctorVisitSlot child record. The parent component owns the
+// mutation orchestration (create doctor, then create each slot).
 //
-// Field names mirror the platform's DoctorCreateInput — notably `active`, not
-// `isActive`, and `clinicId` for the relation.
+// Previously the form had a single `clinicId` dropdown + a free-text
+// `visitingHours` textarea. Both dropped — doctors are now hospital-
+// wide, and their presence at each clinic is expressed via the
+// DoctorVisitSlot records.
 
 export type DoctorDepartment =
     | 'CARDIOLOGY'
@@ -20,6 +26,27 @@ export type DoctorDepartment =
     | 'PEDIATRICS'
     | 'ONCOLOGY';
 
+// Matches the DoctorVisitSlot.dayOfWeek SELECT enum on the SDK entity.
+export type DayOfWeek =
+    | 'MONDAY'
+    | 'TUESDAY'
+    | 'WEDNESDAY'
+    | 'THURSDAY'
+    | 'FRIDAY'
+    | 'SATURDAY'
+    | 'SUNDAY';
+
+export type DoctorVisitSlotEntry = {
+    // Populated on existing records when editing; undefined for
+    // freshly-added rows. Used by the parent to decide create vs
+    // update vs delete on save.
+    id?: string;
+    clinicId: string;
+    dayOfWeek: DayOfWeek | '';
+    startTime: string | null;
+    endTime: string | null;
+};
+
 export type DoctorFormValues = {
     firstName: string;
     lastName: string;
@@ -27,14 +54,14 @@ export type DoctorFormValues = {
     specialty: string;
     qualifications: string;
     yearsOfExperience: string;
-    clinicId: string;
-    visitingHours: string;
     consultationFeeNew: string;
     consultationFeeFollowUp: string;
     phone: string;
     email: string;
     registrationNumber: string;
     active: boolean;
+    // Multi-clinic, multi-day visiting schedule. One entry per slot.
+    visitSlots: DoctorVisitSlotEntry[];
 };
 
 export const emptyDoctorFormValues = (): DoctorFormValues => ({
@@ -44,14 +71,13 @@ export const emptyDoctorFormValues = (): DoctorFormValues => ({
     specialty: '',
     qualifications: '',
     yearsOfExperience: '',
-    clinicId: '',
-    visitingHours: '',
     consultationFeeNew: '',
     consultationFeeFollowUp: '',
     phone: '',
     email: '',
     registrationNumber: '',
     active: true,
+    visitSlots: [],
 });
 
 const DEPARTMENT_ITEMS: { id: DoctorDepartment; label: string }[] = [
@@ -65,10 +91,20 @@ const DEPARTMENT_ITEMS: { id: DoctorDepartment; label: string }[] = [
     { id: 'ONCOLOGY', label: 'Oncology' },
 ];
 
-// Convert form state into the shape createDoctor/updateDoctor mutations
-// expect. yearsOfExperience and consultation fees are text fields in the UI
-// but typed in GraphQL, so we parse + validate here.
-export const doctorFormToGraphQLInput = (v: DoctorFormValues): Record<string, unknown> => {
+const DAY_ITEMS: { id: DayOfWeek; label: string }[] = [
+    { id: 'MONDAY', label: 'Monday' },
+    { id: 'TUESDAY', label: 'Tuesday' },
+    { id: 'WEDNESDAY', label: 'Wednesday' },
+    { id: 'THURSDAY', label: 'Thursday' },
+    { id: 'FRIDAY', label: 'Friday' },
+    { id: 'SATURDAY', label: 'Saturday' },
+    { id: 'SUNDAY', label: 'Sunday' },
+];
+
+// Build the createDoctor / updateDoctor mutation payload. Visit slots
+// are persisted via a separate mutation chain — see the parent
+// component's handleSave.
+export const doctorCoreToGraphQLInput = (v: DoctorFormValues): Record<string, unknown> => {
     const input: Record<string, unknown> = {
         fullName: {
             firstName: v.firstName.trim(),
@@ -84,8 +120,6 @@ export const doctorFormToGraphQLInput = (v: DoctorFormValues): Record<string, un
         const n = Number(v.yearsOfExperience);
         if (!Number.isNaN(n)) input.yearsOfExperience = n;
     }
-    if (v.clinicId) input.clinicId = v.clinicId;
-    if (v.visitingHours.trim()) input.visitingHours = v.visitingHours.trim();
     if (v.consultationFeeNew.trim()) {
         const n = Number(v.consultationFeeNew);
         if (!Number.isNaN(n)) {
@@ -123,6 +157,23 @@ export const doctorFormToGraphQLInput = (v: DoctorFormValues): Record<string, un
     return input;
 };
 
+// Build one DoctorVisitSlotCreateInput per complete slot. Drops any
+// half-filled rows silently — the form can't validate mid-entry
+// without blocking the user.
+export const visitSlotInputsFromForm = (
+    v: DoctorFormValues,
+    doctorId: string,
+): Array<Record<string, unknown>> =>
+    v.visitSlots
+        .filter((s) => s.clinicId && s.dayOfWeek && s.startTime && s.endTime)
+        .map((s) => ({
+            doctorId,
+            clinicId: s.clinicId,
+            dayOfWeek: s.dayOfWeek,
+            startTime: s.startTime,
+            endTime: s.endTime,
+        }));
+
 type ClinicOption = { id: string; label: string };
 
 type DoctorFormProps = {
@@ -134,6 +185,26 @@ type DoctorFormProps = {
 export const DoctorForm = ({ value, onChange, clinics }: DoctorFormProps) => {
     const patch = (updates: Partial<DoctorFormValues>) => onChange({ ...value, ...updates });
 
+    // Visit-slot handlers — add/edit/remove inline inside the form.
+    const addSlot = () => {
+        patch({
+            visitSlots: [
+                ...value.visitSlots,
+                { clinicId: clinics[0]?.id ?? '', dayOfWeek: '', startTime: '09:00', endTime: '13:00' },
+            ],
+        });
+    };
+
+    const updateSlot = (index: number, updates: Partial<DoctorVisitSlotEntry>) => {
+        const next = [...value.visitSlots];
+        next[index] = { ...next[index], ...updates };
+        patch({ visitSlots: next });
+    };
+
+    const removeSlot = (index: number) => {
+        patch({ visitSlots: value.visitSlots.filter((_, i) => i !== index) });
+    };
+
     return (
         <div className="flex flex-col gap-4">
             <div className="grid grid-cols-2 gap-3">
@@ -185,24 +256,94 @@ export const DoctorForm = ({ value, onChange, clinics }: DoctorFormProps) => {
                 />
             </div>
 
-            <Select
-                label="Clinic"
-                placeholder={clinics.length === 0 ? 'Add a clinic first' : 'Assign to a clinic'}
-                isDisabled={clinics.length === 0}
-                items={clinics}
-                selectedKey={value.clinicId || null}
-                onSelectionChange={(key) => patch({ clinicId: (key as string) || '' })}
-            >
-                {(item) => <Select.Item id={item.id} label={item.label} />}
-            </Select>
-
-            <TextArea
-                label="Visiting hours"
-                placeholder="Mon–Fri 10 AM – 2 PM, Sat 10 AM – 12 PM"
-                value={value.visitingHours}
-                onChange={(v) => patch({ visitingHours: v })}
-                rows={2}
-            />
+            {/* Visiting schedule — one row per clinic/day slot */}
+            <div className="flex flex-col gap-3">
+                <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
+                    Visiting schedule
+                </p>
+                {clinics.length === 0 ? (
+                    <div className="rounded-lg border border-dashed border-warning bg-warning-primary p-4">
+                        <p className="text-sm font-semibold text-warning-primary">Add a clinic first</p>
+                        <p className="mt-1 text-xs text-tertiary">
+                            You need at least one clinic before you can schedule doctor visits.
+                        </p>
+                    </div>
+                ) : (
+                    <>
+                        {value.visitSlots.length === 0 && (
+                            <p className="text-xs text-tertiary">
+                                No visit slots. Add rows for each clinic + day this doctor visits.
+                            </p>
+                        )}
+                        {value.visitSlots.map((slot, idx) => (
+                            <div
+                                key={idx}
+                                className="flex flex-col gap-3 rounded-lg border border-secondary bg-secondary p-3"
+                            >
+                                <div className="grid grid-cols-2 gap-3">
+                                    <Select
+                                        label="Clinic"
+                                        placeholder="Select clinic"
+                                        items={clinics}
+                                        selectedKey={slot.clinicId || null}
+                                        onSelectionChange={(key) =>
+                                            updateSlot(idx, { clinicId: (key as string) || '' })
+                                        }
+                                    >
+                                        {(item) => <Select.Item id={item.id} label={item.label} />}
+                                    </Select>
+                                    <Select
+                                        label="Day"
+                                        placeholder="Select day"
+                                        items={DAY_ITEMS}
+                                        selectedKey={slot.dayOfWeek || null}
+                                        onSelectionChange={(key) =>
+                                            updateSlot(idx, { dayOfWeek: (key as DayOfWeek) || '' })
+                                        }
+                                    >
+                                        {(item) => <Select.Item id={item.id} label={item.label} />}
+                                    </Select>
+                                </div>
+                                <div className="grid grid-cols-2 gap-3">
+                                    <TimePicker
+                                        label="Start time"
+                                        value={slot.startTime}
+                                        onChange={(startTime) => updateSlot(idx, { startTime })}
+                                    />
+                                    <TimePicker
+                                        label="End time"
+                                        value={slot.endTime}
+                                        onChange={(endTime) => updateSlot(idx, { endTime })}
+                                    />
+                                </div>
+                                <div className="flex justify-end">
+                                    <Button
+                                        size="sm"
+                                        color="tertiary-destructive"
+                                        iconLeading={({ className }: { className?: string }) => (
+                                            <FontAwesomeIcon icon={faTrash} className={className} />
+                                        )}
+                                        onClick={() => removeSlot(idx)}
+                                    >
+                                        Remove slot
+                                    </Button>
+                                </div>
+                            </div>
+                        ))}
+                        <Button
+                            size="sm"
+                            color="secondary"
+                            iconLeading={({ className }: { className?: string }) => (
+                                <FontAwesomeIcon icon={faPlus} className={className} />
+                            )}
+                            onClick={addSlot}
+                            className="self-start"
+                        >
+                            Add visit slot
+                        </Button>
+                    </>
+                )}
+            </div>
 
             <div className="grid grid-cols-2 gap-3">
                 <Input

src/components/forms/employee-create-form.tsx

@@ -0,0 +1,205 @@
+import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye, faEyeSlash, faRotate } from '@fortawesome/pro-duotone-svg-icons';
+import { Input } from '@/components/base/input/input';
+import { Select } from '@/components/base/select/select';
+
+// In-place employee creation form used by the Team wizard step and
+// the /settings/team slideout. Replaces the multi-email InviteMemberForm
+// — this project never uses email invitations, all employees are
+// created directly with a temp password that the admin hands out.
+//
+// Two modes:
+//
+//   - 'create': all fields editable. The temp password is auto-generated
+//     on form mount (parent does this) and revealed via an eye icon. A
+//     refresh icon next to the eye lets the admin re-roll the password
+//     before saving.
+//
+//   - 'edit':  email is read-only (it's the login id, can't change),
+//     password field is hidden entirely (no reset-password from the
+//     wizard). Only firstName/lastName/role can change.
+//
+// SIP seat assignment is intentionally NOT in this form — it lives
+// exclusively in the Telephony wizard step, so there's a single source
+// of truth for "who is on which seat" and admins don't have to remember
+// two places to manage the same thing.
+
+export type RoleOption = {
+    id: string;
+    label: string;
+    supportingText?: string;
+};
+
+export type EmployeeCreateFormValues = {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    roleId: string;
+};
+
+export const emptyEmployeeCreateFormValues: EmployeeCreateFormValues = {
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    roleId: '',
+};
+
+// Random temp password generator. Skips visually-ambiguous chars
+// (0/O/1/l/I) so admins can read the password back over a phone call
+// without typo risk. 11 alphanumerics + 1 symbol = 12 chars total.
+export const generateTempPassword = (): string => {
+    const chars = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+    const symbols = '!@#$';
+    let pwd = '';
+    for (let i = 0; i < 11; i++) {
+        pwd += chars[Math.floor(Math.random() * chars.length)];
+    }
+    pwd += symbols[Math.floor(Math.random() * symbols.length)];
+    return pwd;
+};
+
+type EmployeeCreateFormProps = {
+    value: EmployeeCreateFormValues;
+    onChange: (value: EmployeeCreateFormValues) => void;
+    roles: RoleOption[];
+    // 'create' = full form, 'edit' = name + role only.
+    mode?: 'create' | 'edit';
+};
+
+// Eye / eye-slash button rendered inside the password field's
+// trailing slot. Stays internal to this form since password reveal
+// is the only place we need it right now.
+const EyeButton = ({ visible, onClick, title }: { visible: boolean; onClick: () => void; title: string }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        title={title}
+        aria-label={title}
+        className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-tertiary_hover"
+    >
+        <FontAwesomeIcon icon={visible ? faEyeSlash : faEye} className="size-4" />
+    </button>
+);
+
+const RegenerateButton = ({ onClick }: { onClick: () => void }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        title="Generate a new password"
+        aria-label="Generate a new password"
+        className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-tertiary_hover"
+    >
+        <FontAwesomeIcon icon={faRotate} className="size-4" />
+    </button>
+);
+
+// Kept simple — name + contact + creds + role. No avatar, no phone,
+// no title. The goal is to get employees onto the system fast; they
+// can fill in the rest from their own profile page later.
+export const EmployeeCreateForm = ({
+    value,
+    onChange,
+    roles,
+    mode = 'create',
+}: EmployeeCreateFormProps) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const patch = (partial: Partial<EmployeeCreateFormValues>) =>
+        onChange({ ...value, ...partial });
+
+    const isEdit = mode === 'edit';
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="grid grid-cols-2 gap-3">
+                <Input
+                    label="First name"
+                    placeholder="Priya"
+                    value={value.firstName}
+                    onChange={(v) => patch({ firstName: v })}
+                    isRequired
+                />
+                <Input
+                    label="Last name"
+                    placeholder="Sharma"
+                    value={value.lastName}
+                    onChange={(v) => patch({ lastName: v })}
+                />
+            </div>
+
+            <Input
+                label="Email"
+                type="email"
+                placeholder="priya@hospital.com"
+                value={value.email}
+                onChange={(v) => patch({ email: v })}
+                isRequired={!isEdit}
+                isReadOnly={isEdit}
+                isDisabled={isEdit}
+                hint={
+                    isEdit
+                        ? 'Email is the login id and cannot be changed.'
+                        : 'This is the login id for the employee. Cannot be changed later.'
+                }
+            />
+
+            {!isEdit && (
+                <div>
+                    <label className="block text-sm font-medium text-secondary">
+                        Temporary password <span className="text-error-primary">*</span>
+                    </label>
+                    <div className="mt-1.5 flex items-center gap-2 rounded-lg border border-secondary bg-primary px-3 shadow-xs focus-within:border-brand focus-within:ring-2 focus-within:ring-brand-100">
+                        <input
+                            type={showPassword ? 'text' : 'password'}
+                            value={value.password}
+                            onChange={(e) => patch({ password: e.target.value })}
+                            placeholder="Auto-generated"
+                            className="flex-1 bg-transparent py-2 font-mono text-sm text-primary placeholder:text-placeholder outline-none"
+                        />
+                        <EyeButton
+                            visible={showPassword}
+                            onClick={() => setShowPassword((v) => !v)}
+                            title={showPassword ? 'Hide password' : 'Show password'}
+                        />
+                        <RegenerateButton
+                            onClick={() => {
+                                patch({ password: generateTempPassword() });
+                                setShowPassword(true);
+                            }}
+                        />
+                    </div>
+                    <p className="mt-1 text-xs text-tertiary">
+                        Auto-generated. Click the refresh icon to roll a new one. Share with the
+                        employee directly — they should change it after first login.
+                    </p>
+                </div>
+            )}
+
+            <Select
+                label="Role"
+                placeholder={roles.length === 0 ? 'No roles available' : 'Select a role'}
+                isDisabled={roles.length === 0}
+                items={roles}
+                selectedKey={value.roleId || null}
+                onSelectionChange={(key) => patch({ roleId: (key as string) || '' })}
+                isRequired
+            >
+                {(item) => (
+                    <Select.Item
+                        id={item.id}
+                        label={item.label}
+                        supportingText={item.supportingText}
+                    />
+                )}
+            </Select>
+
+            <div className="rounded-lg border border-dashed border-secondary bg-secondary p-3 text-xs text-tertiary">
+                SIP seats are managed in the <b>Telephony</b> step — create the employee here
+                first, then assign them a seat there.
+            </div>
+        </div>
+    );
+};

src/components/forms/invite-member-form.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserPlus, faTrash, faPlus } from '@fortawesome/pro-duotone-svg-icons';
-import { Input } from '@/components/base/input/input';
-import { Select } from '@/components/base/select/select';
-import { Button } from '@/components/base/buttons/button';
-
-// Multi-email invite form. Uses the platform's sendInvitations mutation which
-// takes a list of emails; the invited members all get the same role (the
-// platform doesn't support per-email roles in a single call). If the admin
-// needs different roles, they invite in multiple batches, or edit roles
-// afterwards via the team listing.
-//
-// Role selection is optional — leaving it blank invites members without a
-// role, matching the platform's default. When a role is selected, the caller
-// is expected to apply it via updateWorkspaceMemberRole after the invited
-// member accepts (this form just reports the selected roleId back).
-
-export type RoleOption = {
-    id: string;
-    label: string;
-    supportingText?: string;
-};
-
-export type InviteMemberFormValues = {
-    emails: string[];
-    roleId: string;
-};
-
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-type InviteMemberFormProps = {
-    value: InviteMemberFormValues;
-    onChange: (value: InviteMemberFormValues) => void;
-    roles: RoleOption[];
-};
-
-export const InviteMemberForm = ({ value, onChange, roles }: InviteMemberFormProps) => {
-    const [draft, setDraft] = useState('');
-
-    const addEmail = (rawValue?: string) => {
-        const source = (rawValue ?? draft).trim();
-        if (!source) return;
-        const trimmed = source.replace(/,+$/, '').trim();
-        if (!trimmed) return;
-        if (!EMAIL_REGEX.test(trimmed)) return;
-        if (value.emails.includes(trimmed)) {
-            setDraft('');
-            return;
-        }
-        onChange({ ...value, emails: [...value.emails, trimmed] });
-        setDraft('');
-    };
-
-    const removeEmail = (email: string) => {
-        onChange({ ...value, emails: value.emails.filter((e) => e !== email) });
-    };
-
-    // The Input component wraps react-aria TextField which doesn't expose
-    // onKeyDown via its typed props — so we commit on comma via the onChange
-    // handler instead. Users can also press the Add button or tab onto it.
-    const handleChange = (next: string) => {
-        if (next.endsWith(',')) {
-            addEmail(next);
-            return;
-        }
-        setDraft(next);
-    };
-
-    return (
-        <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-secondary">
-                    Emails <span className="text-error-primary">*</span>
-                </label>
-                <div className="flex items-center gap-2">
-                    <div className="flex-1">
-                        <Input
-                            placeholder="colleague@hospital.com"
-                            type="email"
-                            value={draft}
-                            onChange={handleChange}
-                        />
-                    </div>
-                    <Button
-                        size="sm"
-                        color="secondary"
-                        iconLeading={({ className }: { className?: string }) => (
-                            <FontAwesomeIcon icon={faPlus} className={className} />
-                        )}
-                        onClick={() => addEmail()}
-                        isDisabled={!draft.trim() || !EMAIL_REGEX.test(draft.trim())}
-                    >
-                        Add
-                    </Button>
-                </div>
-                <p className="text-xs text-tertiary">
-                    Type a comma to add multiple emails, or click Add.
-                </p>
-            </div>
-
-            {value.emails.length > 0 && (
-                <div className="flex flex-col gap-2 rounded-lg border border-secondary bg-secondary p-3">
-                    <p className="text-xs font-semibold uppercase tracking-wider text-quaternary">
-                        {value.emails.length} invitee{value.emails.length === 1 ? '' : 's'}
-                    </p>
-                    <ul className="flex flex-col gap-1.5">
-                        {value.emails.map((email) => (
-                            <li
-                                key={email}
-                                className="flex items-center justify-between rounded-md bg-primary px-3 py-2 text-sm"
-                            >
-                                <span className="flex items-center gap-2 text-primary">
-                                    <FontAwesomeIcon icon={faUserPlus} className="size-3.5 text-fg-brand-primary" />
-                                    {email}
-                                </span>
-                                <button
-                                    type="button"
-                                    onClick={() => removeEmail(email)}
-                                    className="flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:bg-secondary_hover hover:text-fg-error-primary"
-                                    title="Remove"
-                                >
-                                    <FontAwesomeIcon icon={faTrash} className="size-3" />
-                                </button>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            )}
-
-            <Select
-                label="Role"
-                placeholder={roles.length === 0 ? 'No roles available' : 'Assign a role'}
-                isDisabled={roles.length === 0}
-                items={roles}
-                selectedKey={value.roleId || null}
-                onSelectionChange={(key) => onChange({ ...value, roleId: (key as string) || '' })}
-            >
-                {(item) => <Select.Item id={item.id} label={item.label} supportingText={item.supportingText} />}
-            </Select>
-        </div>
-    );
-};