@exxatdesignux/ui 0.3.0 → 0.4.1

package/template/components/new-placement-form.tsx

@@ -1,942 +0,0 @@
-"use client"
-
-/**
- * NewPlacementForm — 5-step multi-step placement creation form
- *
- * Steps:
- *   1. Student Information   — personal & academic details
- *   2. Site & Program        — where and what rotation
- *   3. Schedule              — dates (via picker), hours, shift
- *   4. Supervisor & Compliance — supervisor info + compliance checklist + notes
- *   5. Review & Submit       — read-only summary before saving
- *
- * WCAG 2.1 AA:
- *  ✓ All fields have visible <label> via FormLabel (WCAG 1.3.1, 2.4.6)
- *  ✓ Required fields marked aria-required (WCAG 3.3.2)
- *  ✓ Errors tied to inputs via aria-describedby (WCAG 3.3.1)
- *  ✓ Step indicator conveys state via aria-current="step" (WCAG 1.3.1)
- *  ✓ Focus moves to step heading on advance for screen readers (WCAG 2.4.3)
- *  ✓ Date inputs use Calendar + Popover — never plain text input (date-picker guideline)
- *  ✓ Review section uses <dl> with visible term/value pairs (WCAG 1.3.1)
- */
-
-import * as React from "react"
-import { useRouter } from "next/navigation"
-import {
-  useForm,
-  useFormContext,
-  useWatch,
-  type ControllerRenderProps,
-  type Resolver,
-} from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod"
-
-import { devLog } from "@/lib/dev-log"
-import { formatDateFromDate } from "@/lib/date-filter"
-
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import {
-  exxatMaskPatterns,
-  useExxatMaskedFieldRef,
-} from "@/components/ui/input-mask"
-import { Button }   from "@/components/ui/button"
-import { Textarea } from "@/components/ui/textarea"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Label }    from "@/components/ui/label"
-import { DatePickerField } from "@/components/ui/date-picker-field"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { RadioGroup, RadioGroupItem, RadioGroupLabel } from "@/components/ui/radio-group"
-import { Card, CardHeader, CardTitle, CardAction, CardContent } from "@/components/ui/card"
-import {
-  NewFocusTemplate,
-  type NewFocusStep,
-} from "@/components/templates/new-focus-template"
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const PROGRAMS = [
-  "Nursing",
-  "Physical Therapy",
-  "Occupational Therapy",
-  "Social Work",
-  "Pharmacy",
-  "Respiratory Therapy",
-  "Medical Laboratory Science",
-  "Radiologic Technology",
-  "Dental Hygiene",
-  "Dietetics",
-]
-
-const SITES = [
-  "City Medical Center",
-  "Metro Rehab",
-  "Bay Area Health",
-  "Sunrise Hospital",
-  "Community Care",
-  "Summit Sports Med",
-  "Harbor Medical",
-  "Valley Health",
-  "Westside Clinic",
-  "Hope Community Ctr",
-  "Lakeside Hospital",
-]
-
-const DEPARTMENTS = [
-  "Emergency Medicine",
-  "Cardiology",
-  "Orthopedics",
-  "Pediatrics",
-  "Oncology",
-  "Neurology",
-  "General Surgery",
-  "Internal Medicine",
-  "Rehabilitation",
-  "Outpatient Clinic",
-]
-
-const SUPERVISORS = [
-  "Dr. Patel",
-  "Dr. Kim",
-  "Dr. Torres",
-  "Dr. Lee",
-  "Dr. Wong",
-  "Dr. Santos",
-  "Ms. Torres",
-  "Dr. Martinez",
-  "Dr. Chen",
-]
-
-const DURATIONS = [
-  "4 weeks",
-  "6 weeks",
-  "8 weeks",
-  "10 weeks",
-  "12 weeks",
-  "16 weeks",
-  "24 weeks",
-]
-
-const SHIFTS = [
-  "Day shift (7 AM – 3 PM)",
-  "Evening shift (3 PM – 11 PM)",
-  "Night shift (11 PM – 7 AM)",
-  "Flexible / varies",
-]
-
-// ── Zod schema ────────────────────────────────────────────────────────────────
-
-const placementSchema = z
-  .object({
-    // Step 1 — Student
-    firstName:    z.string().min(1, "First name is required"),
-    lastName:     z.string().min(1, "Last name is required"),
-    email:        z.string().min(1, "Email is required").email("Enter a valid email address"),
-    studentId:    z.string().min(1, "Student ID is required"),
-    phone:        z.string().optional(),
-    program:      z.string().min(1, "Program is required"),
-    cohort:       z.string().min(1, "Cohort / class year is required"),
-    gpa:          z.string().optional(),
-
-    // Step 2 — Site
-    site:         z.string().min(1, "Clinical site is required"),
-    department:   z.string().min(1, "Department is required"),
-    siteAddress:  z.string().min(1, "Site address is required"),
-    siteContact:  z.string().optional(),
-    sitePhone:    z.string().optional(),
-    rotation:     z.enum(["clinical", "field", "internship", "practicum"]).refine(
-      v => v !== undefined,
-      { message: "Rotation type is required" }
-    ),
-    creditHours:  z.string().min(1, "Credit hours are required"),
-
-    // Step 3 — Schedule (dates stored as Date objects — Calendar picker)
-    startDate:    z.date({ error: "Start date is required" }),
-    endDate:      z.date({ error: "End date is required" }),
-    duration:     z.string().min(1, "Duration is required"),
-    hoursPerWeek: z.string().min(1, "Hours per week is required"),
-    shift:        z.string().min(1, "Shift is required"),
-    totalHours:   z.string().optional(),
-    onWeekends:   z.boolean().default(false),
-    remoteOption: z.enum(["on-site", "remote", "hybrid"]).refine(
-      v => v !== undefined,
-      { message: "Work arrangement is required" }
-    ),
-
-    // Step 4 — Supervisor & compliance
-    supervisor:           z.string().min(1, "Supervisor is required"),
-    supervisorEmail:      z.string().email("Enter a valid email").or(z.literal("")).optional(),
-    supervisorPhone:      z.string().optional(),
-    preceptor:            z.string().optional(),
-    objectives:           z.string().min(10, "Enter at least a brief learning objective"),
-    specialRequirements:  z.string().optional(),
-    backgroundCheck:      z.boolean().default(false),
-    immunizationOk:       z.boolean().default(false),
-    hipaaTraining:        z.boolean().default(false),
-    notes:                z.string().optional(),
-  })
-  .refine(d => d.endDate >= d.startDate, {
-    message: "End date must be after start date",
-    path: ["endDate"],
-  })
-
-type PlacementFormValues = z.infer<typeof placementSchema>
-
-type PhoneFieldName = "phone" | "sitePhone" | "supervisorPhone"
-
-/** US phone mask — [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask) + RHF `field.ref`. */
-function PhoneMaskedInput({
-  field,
-  placeholder = "(555) 555-0100",
-}: {
-  field: ControllerRenderProps<PlacementFormValues, PhoneFieldName>
-  placeholder?: string
-}) {
-  const ref = useExxatMaskedFieldRef(field.ref, exxatMaskPatterns.phoneUS)
-  return (
-    <Input
-      type="tel"
-      autoComplete="tel"
-      placeholder={placeholder}
-      name={field.name}
-      value={field.value ?? ""}
-      onBlur={field.onBlur}
-      onChange={field.onChange}
-      ref={ref}
-    />
-  )
-}
-
-// ── Step metadata ─────────────────────────────────────────────────────────────
-
-// Field-validation map keyed by step index (0-based) — passed to `form.trigger` before advance.
-const STEP_FIELDS: Record<number, (keyof PlacementFormValues)[]> = {
-  0: ["firstName", "lastName", "email", "studentId", "program", "cohort"],
-  1: ["site", "department", "siteAddress", "rotation", "creditHours"],
-  2: ["startDate", "endDate", "duration", "hoursPerWeek", "shift", "remoteOption"],
-  3: ["supervisor", "objectives"],
-}
-
-// ── Section heading ───────────────────────────────────────────────────────────
-
-function SectionHeading({ icon, title, description }: { icon: string; title: string; description?: string }) {
-  return (
-    <div className="flex items-start gap-3 mb-6 pb-4 border-b border-border">
-      <div className="flex items-center justify-center size-9 rounded-lg bg-secondary text-secondary-foreground shrink-0 mt-0.5" aria-hidden="true">
-        <i className={`fa-light ${icon} text-base`} />
-      </div>
-      <div>
-        <p className="text-base font-semibold text-foreground">{title}</p>
-        {description && <p className="text-sm text-muted-foreground mt-0.5">{description}</p>}
-      </div>
-    </div>
-  )
-}
-
-// ── Step 1 — Student ──────────────────────────────────────────────────────────
-
-function Step1() {
-  const form = useFormContext<PlacementFormValues>()
-  return (
-    <div>
-      <SectionHeading icon="fa-user-graduate" title="Student Information" description="Enter the student's personal and academic details." />
-      <div className="space-y-5">
-
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="firstName" render={({ field }) => (
-            <FormItem>
-              <FormLabel>First name <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl><Input placeholder="Jane" {...field} aria-required="true" autoComplete="given-name" /></FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="lastName" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Last name <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl><Input placeholder="Smith" {...field} aria-required="true" autoComplete="family-name" /></FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-        <FormField control={form.control} name="email" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Email address <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <FormControl>
-              <Input type="email" placeholder="jane.smith@university.edu" {...field} aria-required="true" autoComplete="email" />
-            </FormControl>
-            <FormDescription>Must be the student&apos;s institutional email.</FormDescription>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="studentId" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Student ID <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl><Input placeholder="STU-2024-0001" {...field} aria-required="true" /></FormControl>
-              <FormDescription>STU-YYYY-####</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="phone" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Phone <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-              <FormControl>
-                <PhoneMaskedInput field={field} />
-              </FormControl>
-              <FormDescription>US format (555) 555-0100</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-        <FormField control={form.control} name="program" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Program <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <Select value={field.value} onValueChange={field.onChange}>
-              <FormControl>
-                <SelectTrigger aria-required="true"><SelectValue placeholder="Select a program" /></SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                {PROGRAMS.map(p => <SelectItem key={p} value={p}>{p}</SelectItem>)}
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="cohort" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Cohort / Class year <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl><Input placeholder="2025" {...field} aria-required="true" /></FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="gpa" render={({ field }) => (
-            <FormItem>
-              <FormLabel>GPA <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-              <FormControl><Input placeholder="3.8" {...field} /></FormControl>
-              <FormDescription>Out of 4.0</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-      </div>
-    </div>
-  )
-}
-
-// ── Step 2 — Site & Program ───────────────────────────────────────────────────
-
-function Step2() {
-  const form = useFormContext<PlacementFormValues>()
-  return (
-    <div>
-      <SectionHeading icon="fa-hospital" title="Site & Program Details" description="Where will the placement take place, and what type of rotation?" />
-      <div className="space-y-5">
-
-        <FormField control={form.control} name="site" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Clinical site <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <Select value={field.value} onValueChange={field.onChange}>
-              <FormControl>
-                <SelectTrigger aria-required="true"><SelectValue placeholder="Select a site" /></SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                {SITES.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)}
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="department" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Department <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <Select value={field.value} onValueChange={field.onChange}>
-              <FormControl>
-                <SelectTrigger aria-required="true"><SelectValue placeholder="Select a department" /></SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                {DEPARTMENTS.map(d => <SelectItem key={d} value={d}>{d}</SelectItem>)}
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="siteAddress" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Site address <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <FormControl>
-              <Input placeholder="1400 N Lake Shore Dr, Chicago, IL 60610" {...field} aria-required="true" />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="siteContact" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Site contact <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-              <FormControl><Input placeholder="Coordinator name" {...field} /></FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="sitePhone" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Site phone <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-              <FormControl>
-                <PhoneMaskedInput field={field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-        <FormField control={form.control} name="rotation" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Rotation type <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <FormControl>
-              <RadioGroup
-                value={field.value}
-                onValueChange={field.onChange}
-                className="grid grid-cols-2 gap-2 mt-1"
-                aria-required="true"
-                itemVariant="outline"
-                itemMotion="pop"
-              >
-                {([
-                  { value: "clinical",   label: "Clinical",   icon: "fa-stethoscope"    },
-                  { value: "field",      label: "Field",      icon: "fa-map-location"   },
-                  { value: "internship", label: "Internship", icon: "fa-briefcase"      },
-                  { value: "practicum",  label: "Practicum",  icon: "fa-graduation-cap" },
-                ] as const).map(opt => (
-                  <RadioGroupLabel
-                    key={opt.value}
-                    htmlFor={`rot-${opt.value}`}
-                    className="flex min-h-0 items-center gap-2.5 rounded-lg border border-border px-3 py-2.5 font-normal transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10"
-                  >
-                    <RadioGroupItem value={opt.value} id={`rot-${opt.value}`} />
-                    <i className={`fa-light ${opt.icon} text-muted-foreground text-sm`} aria-hidden="true" />
-                    <span className="text-sm">{opt.label}</span>
-                  </RadioGroupLabel>
-                ))}
-              </RadioGroup>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="creditHours" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Credit hours <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <FormControl>
-              <Input type="number" min={1} max={20} placeholder="3" className="w-32" {...field} aria-required="true" />
-            </FormControl>
-            <FormDescription>Number of academic credit hours for this placement.</FormDescription>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-      </div>
-    </div>
-  )
-}
-
-// ── Step 3 — Schedule ─────────────────────────────────────────────────────────
-
-function Step3() {
-  const form = useFormContext<PlacementFormValues>()
-  return (
-    <div>
-      <SectionHeading icon="fa-calendar-days" title="Schedule" description="Define the placement timeline, hours, and work arrangement." />
-      <div className="space-y-5">
-
-        {/* Start + End date — using Calendar+Popover (date-picker guideline) */}
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="startDate" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Start Date <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl>
-                <DatePickerField value={field.value} onChange={field.onChange} />
-              </FormControl>
-              <FormDescription>MM/DD/YYYY</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="endDate" render={({ field }) => (
-            <FormItem>
-              <FormLabel>End Date <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl>
-                <DatePickerField value={field.value} onChange={field.onChange} />
-              </FormControl>
-              <FormDescription>MM/DD/YYYY</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="duration" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Duration <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <Select value={field.value} onValueChange={field.onChange}>
-                <FormControl>
-                  <SelectTrigger aria-required="true"><SelectValue placeholder="Select duration" /></SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  {DURATIONS.map(d => <SelectItem key={d} value={d}>{d}</SelectItem>)}
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="hoursPerWeek" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Hours per week <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-              <FormControl>
-                <Input type="number" min={1} max={80} placeholder="40" {...field} aria-required="true" />
-              </FormControl>
-              <FormDescription>hrs/wk</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-        <FormField control={form.control} name="shift" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Shift <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <Select value={field.value} onValueChange={field.onChange}>
-              <FormControl>
-                <SelectTrigger aria-required="true"><SelectValue placeholder="Select a shift" /></SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                {SHIFTS.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)}
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="totalHours" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Total required hours <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-            <FormControl>
-              <Input type="number" min={1} placeholder="480" className="w-40" {...field} />
-            </FormControl>
-            <FormDescription>Minimum hours the student must complete.</FormDescription>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="remoteOption" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Work arrangement <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <FormControl>
-              <RadioGroup
-                value={field.value}
-                onValueChange={field.onChange}
-                className="flex gap-3 mt-1"
-                aria-required="true"
-                itemVariant="outline"
-                itemMotion="pop"
-              >
-                {([
-                  { value: "on-site", label: "On-site",  icon: "fa-building"             },
-                  { value: "remote",  label: "Remote",   icon: "fa-house-laptop"          },
-                  { value: "hybrid",  label: "Hybrid",   icon: "fa-circle-half-stroke"    },
-                ] as const).map(opt => (
-                  <RadioGroupLabel
-                    key={opt.value}
-                    htmlFor={`mode-${opt.value}`}
-                    className="flex min-h-0 flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg border border-border px-3 py-2.5 font-normal transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10"
-                  >
-                    <RadioGroupItem value={opt.value} id={`mode-${opt.value}`} />
-                    <i className={`fa-light ${opt.icon} text-muted-foreground text-sm`} aria-hidden="true" />
-                    <span className="text-sm whitespace-nowrap">{opt.label}</span>
-                  </RadioGroupLabel>
-                ))}
-              </RadioGroup>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="onWeekends" render={({ field }) => (
-          <FormItem>
-            <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-2.5 hover:bg-interactive-hover transition-colors has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10">
-              <FormControl>
-                <Checkbox id="on-weekends" checked={field.value} onCheckedChange={field.onChange} />
-              </FormControl>
-              <div>
-                <Label htmlFor="on-weekends" className="text-sm font-medium cursor-pointer leading-none">
-                  Includes weekend hours
-                </Label>
-                <p className="text-xs text-muted-foreground mt-1">Student may be scheduled on Saturdays or Sundays.</p>
-              </div>
-            </div>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-      </div>
-    </div>
-  )
-}
-
-// ── Step 4 — Supervisor & Compliance ─────────────────────────────────────────
-
-const COMPLIANCE_ITEMS = [
-  { name: "backgroundCheck" as const, label: "Background check completed",    desc: "Student has passed required background screening." },
-  { name: "immunizationOk"  as const, label: "Immunization records verified", desc: "All required vaccinations are on file." },
-  { name: "hipaaTraining"   as const, label: "HIPAA training completed",       desc: "Student has completed HIPAA privacy training." },
-]
-
-function Step4() {
-  const form = useFormContext<PlacementFormValues>()
-  return (
-    <div>
-      <SectionHeading icon="fa-user-tie" title="Supervisor & Compliance" description="Assign a supervisor and confirm compliance requirements." />
-      <div className="space-y-5">
-
-        <FormField control={form.control} name="supervisor" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Primary supervisor <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <Select value={field.value} onValueChange={field.onChange}>
-              <FormControl>
-                <SelectTrigger aria-required="true"><SelectValue placeholder="Select a supervisor" /></SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                {SUPERVISORS.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)}
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <div className="grid grid-cols-2 gap-4">
-          <FormField control={form.control} name="supervisorEmail" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Supervisor email <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-              <FormControl>
-                <Input type="email" placeholder="supervisor@hospital.org" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-          <FormField control={form.control} name="supervisorPhone" render={({ field }) => (
-            <FormItem>
-              <FormLabel>Supervisor phone <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-              <FormControl>
-                <PhoneMaskedInput field={field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )} />
-        </div>
-
-        <FormField control={form.control} name="preceptor" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Preceptor / secondary supervisor <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-            <FormControl><Input placeholder="On-site preceptor name" {...field} /></FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="objectives" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Learning objectives <span className="text-destructive" aria-hidden="true">*</span></FormLabel>
-            <FormControl>
-              <Textarea
-                placeholder="Describe the primary learning goals for this placement…"
-                className="min-h-[100px] resize-y"
-                {...field}
-                aria-required="true"
-              />
-            </FormControl>
-            <FormDescription>Competencies and skills the student should develop.</FormDescription>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        <FormField control={form.control} name="specialRequirements" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Special requirements <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-            <FormControl>
-              <Textarea
-                placeholder="Dress code, languages, certifications, etc."
-                className="min-h-[80px] resize-y"
-                {...field}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-        {/* Compliance checklist */}
-        <fieldset className="space-y-2">
-          <legend className="text-sm font-medium text-foreground">Compliance checklist</legend>
-          {COMPLIANCE_ITEMS.map(item => (
-            <FormField key={item.name} control={form.control} name={item.name} render={({ field }) => (
-              <FormItem>
-                <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-2.5 hover:bg-interactive-hover transition-colors has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10">
-                  <FormControl>
-                    <Checkbox
-                      id={item.name}
-                      checked={field.value as boolean}
-                      onCheckedChange={field.onChange}
-                      className="mt-0.5 shrink-0"
-                    />
-                  </FormControl>
-                  <div className="min-w-0">
-                    <Label htmlFor={item.name} className="text-sm font-medium cursor-pointer leading-none">{item.label}</Label>
-                    <p className="text-xs text-muted-foreground mt-1">{item.desc}</p>
-                  </div>
-                </div>
-                <FormMessage />
-              </FormItem>
-            )} />
-          ))}
-        </fieldset>
-
-        <FormField control={form.control} name="notes" render={({ field }) => (
-          <FormItem>
-            <FormLabel>Internal notes <span className="text-muted-foreground font-normal text-xs">(optional)</span></FormLabel>
-            <FormControl>
-              <Textarea
-                placeholder="Any internal notes visible only to coordinators…"
-                className="min-h-[80px] resize-y"
-                {...field}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )} />
-
-      </div>
-    </div>
-  )
-}
-
-// ── Step 5 — Review ───────────────────────────────────────────────────────────
-
-function ReviewRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="flex justify-between gap-4 py-2 border-b border-border last:border-0">
-      <dt className="text-sm text-muted-foreground shrink-0 w-40">{label}</dt>
-      <dd className="text-sm text-foreground text-right break-all">
-        {value || <span className="text-muted-foreground italic">—</span>}
-      </dd>
-    </div>
-  )
-}
-
-function ReviewSection({
-  title, icon, onEdit, children,
-}: { title: string; icon: string; onEdit: () => void; children: React.ReactNode }) {
-  return (
-    <Card size="sm">
-      <CardHeader className="border-b">
-        <CardTitle className="flex items-center gap-2">
-          <i className={`fa-light ${icon} text-sm text-muted-foreground`} aria-hidden="true" />
-          <span>{title}</span>
-        </CardTitle>
-        <CardAction>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="text-xs h-7 gap-1.5"
-            onClick={onEdit}
-            aria-label={`Edit ${title}`}
-          >
-            <i className="fa-light fa-pen text-xs" aria-hidden="true" />
-            Edit
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <dl>{children}</dl>
-      </CardContent>
-    </Card>
-  )
-}
-
-function Step5({
-  data,
-  goToStep,
-}: {
-  data: Partial<PlacementFormValues>
-  goToStep: (n: number) => void
-}) {
-  return (
-    <div>
-      <SectionHeading icon="fa-clipboard-check" title="Review & Submit" description="Review all details before creating the placement." />
-      <div className="space-y-4">
-
-        <ReviewSection title="Student Information" icon="fa-user-graduate" onEdit={() => goToStep(1)}>
-          <ReviewRow label="Name"       value={[data.firstName, data.lastName].filter(Boolean).join(" ")} />
-          <ReviewRow label="Email"      value={data.email} />
-          <ReviewRow label="Student ID" value={data.studentId} />
-          <ReviewRow label="Phone"      value={data.phone} />
-          <ReviewRow label="Program"    value={data.program} />
-          <ReviewRow label="Cohort"     value={data.cohort} />
-          <ReviewRow label="GPA"        value={data.gpa} />
-        </ReviewSection>
-
-        <ReviewSection title="Site & Program" icon="fa-hospital" onEdit={() => goToStep(2)}>
-          <ReviewRow label="Site"         value={data.site} />
-          <ReviewRow label="Department"   value={data.department} />
-          <ReviewRow label="Address"      value={data.siteAddress} />
-          <ReviewRow label="Site Contact" value={data.siteContact} />
-          <ReviewRow label="Rotation"     value={data.rotation ? data.rotation.charAt(0).toUpperCase() + data.rotation.slice(1) : undefined} />
-          <ReviewRow label="Credit Hours" value={data.creditHours} />
-        </ReviewSection>
-
-        <ReviewSection title="Schedule" icon="fa-calendar-days" onEdit={() => goToStep(3)}>
-          <ReviewRow label="Start Date"   value={data.startDate ? formatDateFromDate(data.startDate) : undefined} />
-          <ReviewRow label="End Date"     value={data.endDate   ? formatDateFromDate(data.endDate)   : undefined} />
-          <ReviewRow label="Duration"     value={data.duration} />
-          <ReviewRow label="Hours / Week" value={data.hoursPerWeek ? `${data.hoursPerWeek} hrs` : undefined} />
-          <ReviewRow label="Shift"        value={data.shift} />
-          <ReviewRow label="Arrangement"  value={data.remoteOption} />
-          <ReviewRow label="Weekends"     value={data.onWeekends ? "Yes" : "No"} />
-        </ReviewSection>
-
-        <ReviewSection title="Supervisor & Compliance" icon="fa-user-tie" onEdit={() => goToStep(4)}>
-          <ReviewRow label="Supervisor"       value={data.supervisor} />
-          <ReviewRow label="Supervisor Email" value={data.supervisorEmail} />
-          <ReviewRow label="Preceptor"        value={data.preceptor} />
-          <ReviewRow label="Background ✓"     value={data.backgroundCheck ? "Yes" : "No"} />
-          <ReviewRow label="Immunization ✓"   value={data.immunizationOk  ? "Yes" : "No"} />
-          <ReviewRow label="HIPAA ✓"          value={data.hipaaTraining   ? "Yes" : "No"} />
-        </ReviewSection>
-
-        <p className="text-xs text-muted-foreground text-center pt-1">
-          By submitting, you confirm all details are accurate and the student has been notified.
-        </p>
-      </div>
-    </div>
-  )
-}
-
-// ── Main component ────────────────────────────────────────────────────────────
-
-export function NewPlacementForm() {
-  const router = useRouter()
-  const [step, setStep] = React.useState(0)
-  const [submitting, setSubmitting] = React.useState(false)
-
-  const form = useForm<PlacementFormValues>({
-    resolver: zodResolver(placementSchema) as Resolver<PlacementFormValues>,
-    mode: "onTouched",
-    defaultValues: {
-      firstName: "", lastName: "", email: "", studentId: "", phone: "",
-      program: "", cohort: "", gpa: "",
-      site: "", department: "", siteAddress: "", siteContact: "", sitePhone: "",
-      rotation: undefined, creditHours: "",
-      startDate: undefined, endDate: undefined,
-      duration: "", hoursPerWeek: "", shift: "", totalHours: "",
-      remoteOption: undefined, onWeekends: false,
-      supervisor: "", supervisorEmail: "", supervisorPhone: "",
-      preceptor: "", objectives: "", specialRequirements: "",
-      backgroundCheck: false, immunizationOk: false, hipaaTraining: false, notes: "",
-    },
-  })
-
-  const goToStep = React.useCallback((n: number) => setStep(n), [])
-
-  const handleNext = React.useCallback(async (): Promise<boolean> => {
-    const fields = STEP_FIELDS[step]
-    if (!fields) return true
-    return await form.trigger(fields)
-  }, [form, step])
-
-  const handleSubmit = React.useCallback(async (values: PlacementFormValues) => {
-    setSubmitting(true)
-    await new Promise(r => setTimeout(r, 1400))
-    devLog("New placement:", values)
-    setSubmitting(false)
-    router.push("/data-list")
-  }, [router])
-
-  const handleFormSubmit = React.useCallback(
-    () => form.handleSubmit(handleSubmit)(),
-    [form, handleSubmit],
-  )
-
-  // `useWatch` is memoization-friendly (returns a stable reactive value)
-  // unlike `form.watch()`, which the React Compiler can't memoize safely.
-  const formData = useWatch({ control: form.control })
-
-  const steps: NewFocusStep[] = React.useMemo(
-    () => [
-      { id: "student",    label: "Student",    icon: "fa-user-graduate",   render: () => <Step1 /> },
-      { id: "site",       label: "Site",       icon: "fa-hospital",        render: () => <Step2 /> },
-      { id: "schedule",   label: "Schedule",   icon: "fa-calendar-days",   render: () => <Step3 /> },
-      { id: "supervisor", label: "Supervisor", icon: "fa-user-tie",        render: () => <Step4 /> },
-      { id: "review",     label: "Review",     icon: "fa-clipboard-check", render: () => <Step5 data={formData} goToStep={goToStep} /> },
-    ],
-    [formData, goToStep],
-  )
-  const lastIndex = steps.length - 1
-
-  return (
-    <Form {...form}>
-      {/*
-        Implicit submit only fires on the final step (Review) — Enter on earlier steps
-        is ignored so the review never auto-closes when users hit Enter inside an input
-        on steps before the last.
-      */}
-      {/*
-        `<form>` participates in the (app)/layout flex row alongside the sidebar +
-        secondary panel + Ask Leo rail, so it MUST behave like a normal flex column
-        host (flex-1 + min-w-0). Without these classes the form shrinks to its
-        intrinsic content width and the page collapses into a narrow column on the
-        left with the rest of the viewport empty.
-      */}
-      <form
-        onSubmit={(e) => {
-          if (step !== lastIndex) { e.preventDefault(); return }
-          form.handleSubmit(handleSubmit)(e)
-        }}
-        noValidate
-        aria-label="New placement form"
-        className="flex min-h-0 min-w-0 flex-1 flex-col"
-      >
-        <NewFocusTemplate
-          variant="workflow"
-          title="New record"
-          description="Multi-step wizard shell (demo fields) — swap the form for your product flow."
-          back={{ href: "/data-list", label: "Back", ariaLabel: "Back to list hub" }}
-          steps={steps}
-          step={step}
-          onStepChange={setStep}
-          onNext={handleNext}
-          onSubmit={handleFormSubmit}
-          submitLabel="Create placement"
-          submitting={submitting}
-        />
-      </form>
-    </Form>
-  )
-}