diff --git a/src/components/plans.tsx b/src/components/plans.tsx
deleted file mode 100644
index 0483c6b..0000000
--- a/src/components/plans.tsx
+++ /dev/null
@@ -1,1654 +0,0 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { supabase } from "@/integrations/supabase/client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Plus,
-  Trash2,
-  Pencil,
-  Check,
-  Lock,
-  FileText,
-  Target,
-  CalendarClock,
-  ClipboardList,
-  Loader2,
-  Users,
-} from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import {
-  ACCOMMODATION_CATEGORIES,
-  GOAL_STATUS_LABEL,
-  MEETING_TYPE_LABEL,
-  PLAN_STATUS_LABEL,
-  PLAN_TYPE_LABEL,
-  COMPLIANCE_CLASS,
-  accommodationLabel,
-  complianceLabel,
-  complianceState,
-  daysUntil,
-  defaultReviewDates,
-  formatDate,
-  todayISO,
-  type GoalStatus,
-  type MeetingType,
-  type PlanStatus,
-  type PlanType,
-} from "@/lib/plans";
-
-type PlanRow = {
-  id: string;
-  student_id: string;
-  plan_type: PlanType;
-  status: PlanStatus;
-  case_manager_id: string | null;
-  effective_date: string | null;
-  end_date: string | null;
-  next_annual_review_date: string | null;
-  next_reevaluation_date: string | null;
-};
-
-const err = (e: unknown) => toast.error((e as Error).message);
-
-// ── Small shared bits ───────────────────────────────────────────────────────
-function SectionCard({
-  title,
-  icon: Icon,
-  confidential,
-  action,
-  children,
-}: {
-  title: string;
-  icon: typeof Target;
-  confidential?: boolean;
-  action?: React.ReactNode;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="bg-card border rounded-lg p-4 space-y-3">
-      <div className="flex items-center justify-between gap-2">
-        <h3 className="text-sm font-semibold flex items-center gap-2">
-          <Icon className="h-4 w-4 text-primary" /> {title}
-          {confidential && (
-            <span className="inline-flex items-center gap-1 text-[10px] font-normal uppercase tracking-wide text-muted-foreground">
-              <Lock className="h-3 w-3" /> Confidential
-            </span>
-          )}
-        </h3>
-        {action}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-function Empty({ children }: { children: React.ReactNode }) {
-  return <p className="text-sm text-muted-foreground">{children}</p>;
-}
-
-export function ComplianceDate({ date, label }: { date: string | null; label: string }) {
-  const state = complianceState(date);
-  return (
-    <div>
-      <div className="text-xs text-muted-foreground">{label}</div>
-      <div className={`text-sm ${COMPLIANCE_CLASS[state]}`}>{formatDate(date)}</div>
-      {state !== "none" && (
-        <div className="text-[11px] text-muted-foreground">
-          {complianceLabel(state, daysUntil(date))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Staff list for the case-manager picker. profiles/user_roles are admin-readable
-// only, so this returns empty for everyone else — the picker is admin-only UI.
-function useStaff() {
-  return useQuery({
-    queryKey: ["plan-staff"],
-    queryFn: async () => {
-      const { data: roles } = await supabase
-        .from("user_roles")
-        .select("user_id, role")
-        .in("role", ["admin", "teacher"]);
-      const ids = [...new Set((roles ?? []).map((r) => r.user_id))];
-      if (!ids.length)
-        return [] as { id: string; full_name: string | null; email: string | null }[];
-      const { data } = await supabase.from("profiles").select("id, full_name, email").in("id", ids);
-      return data ?? [];
-    },
-  });
-}
-
-// ── Entry point: the Plans tab on a student ─────────────────────────────────
-export function StudentPlansTab({ studentId, isAdmin }: { studentId: string; isAdmin: boolean }) {
-  const qc = useQueryClient();
-  const [adding, setAdding] = useState(false);
-
-  const { data: plans, isLoading } = useQuery({
-    queryKey: ["student-plans", studentId],
-    queryFn: async () => {
-      const { data, error } = await supabase
-        .from("student_plans")
-        .select("*")
-        .eq("student_id", studentId)
-        .order("created_at", { ascending: false });
-      if (error) throw error;
-      return (data ?? []) as PlanRow[];
-    },
-  });
-
-  if (isLoading) {
-    return (
-      <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
-        <Loader2 className="h-4 w-4 animate-spin" /> Loading plans…
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4 mt-4">
-      {isAdmin &&
-        (adding ? (
-          <NewPlanForm
-            studentId={studentId}
-            onDone={() => {
-              setAdding(false);
-              qc.invalidateQueries({ queryKey: ["student-plans", studentId] });
-            }}
-          />
-        ) : (
-          <Button size="sm" onClick={() => setAdding(true)}>
-            <Plus className="h-4 w-4 mr-1" /> Add 504 / IEP plan
-          </Button>
-        ))}
-      {(plans ?? []).map((p) => (
-        <PlanCard key={p.id} plan={p} isAdmin={isAdmin} />
-      ))}
-      {plans?.length === 0 && <Empty>No 504 or IEP plan on file for this student.</Empty>}
-    </div>
-  );
-}
-
-function NewPlanForm({ studentId, onDone }: { studentId: string; onDone: () => void }) {
-  const { data: staff } = useStaff();
-  const [saving, setSaving] = useState(false);
-  const [f, setF] = useState({
-    plan_type: "iep" as PlanType,
-    status: "draft" as PlanStatus,
-    case_manager_id: "",
-    effective_date: todayISO(),
-    next_annual_review_date: defaultReviewDates(todayISO()).annual,
-    next_reevaluation_date: defaultReviewDates(todayISO()).reeval,
-  });
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const { data: u } = await supabase.auth.getUser();
-      const { error } = await supabase.from("student_plans").insert({
-        student_id: studentId,
-        plan_type: f.plan_type,
-        status: f.status,
-        case_manager_id: f.case_manager_id || null,
-        effective_date: f.effective_date || null,
-        next_annual_review_date: f.next_annual_review_date || null,
-        next_reevaluation_date: f.next_reevaluation_date || null,
-        created_by: u.user?.id,
-      });
-      if (error) throw error;
-      toast.success("Plan created");
-      onDone();
-    } catch (e) {
-      err(e);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div className="bg-card border rounded-lg p-4 space-y-3">
-      <div className="font-medium text-sm">New plan</div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        <div>
-          <Label className="text-xs">Type</Label>
-          <Select
-            value={f.plan_type}
-            onValueChange={(v) => setF({ ...f, plan_type: v as PlanType })}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="iep">{PLAN_TYPE_LABEL.iep}</SelectItem>
-              <SelectItem value="section_504">{PLAN_TYPE_LABEL.section_504}</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div>
-          <Label className="text-xs">Status</Label>
-          <Select value={f.status} onValueChange={(v) => setF({ ...f, status: v as PlanStatus })}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {(Object.keys(PLAN_STATUS_LABEL) as PlanStatus[]).map((s) => (
-                <SelectItem key={s} value={s}>
-                  {PLAN_STATUS_LABEL[s]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div>
-          <Label className="text-xs">Case manager</Label>
-          <Select
-            value={f.case_manager_id}
-            onValueChange={(v) => setF({ ...f, case_manager_id: v })}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Unassigned" />
-            </SelectTrigger>
-            <SelectContent>
-              {(staff ?? []).map((s) => (
-                <SelectItem key={s.id} value={s.id}>
-                  {s.full_name || s.email}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        {/* Uncontrolled dates so Safari's native picker isn't reset by React. */}
-        <div>
-          <Label className="text-xs">Effective date</Label>
-          <Input
-            type="date"
-            defaultValue={f.effective_date}
-            onChange={(e) => {
-              const v = e.target.value;
-              setF((prev) =>
-                v
-                  ? {
-                      ...prev,
-                      effective_date: v,
-                      ...(() => {
-                        const d = defaultReviewDates(v);
-                        return {
-                          next_annual_review_date: d.annual,
-                          next_reevaluation_date: d.reeval,
-                        };
-                      })(),
-                    }
-                  : { ...prev, effective_date: v },
-              );
-            }}
-          />
-        </div>
-        <div>
-          <Label className="text-xs">Next annual review</Label>
-          <Input
-            type="date"
-            key={f.next_annual_review_date}
-            defaultValue={f.next_annual_review_date}
-            onChange={(e) => setF({ ...f, next_annual_review_date: e.target.value })}
-          />
-        </div>
-        <div>
-          <Label className="text-xs">Next re-evaluation</Label>
-          <Input
-            type="date"
-            key={f.next_reevaluation_date}
-            defaultValue={f.next_reevaluation_date}
-            onChange={(e) => setF({ ...f, next_reevaluation_date: e.target.value })}
-          />
-        </div>
-      </div>
-      <p className="text-xs text-muted-foreground">
-        Review dates default to +1 year and +3 years from the effective date. Adjust to match the
-        district's actual timeline.
-      </p>
-      <div className="flex gap-2">
-        <Button size="sm" onClick={save} disabled={saving}>
-          {saving ? "Saving…" : "Create plan"}
-        </Button>
-        <Button size="sm" variant="ghost" onClick={onDone}>
-          Cancel
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ── One plan ────────────────────────────────────────────────────────────────
-function PlanCard({ plan, isAdmin }: { plan: PlanRow; isAdmin: boolean }) {
-  const qc = useQueryClient();
-  const [editing, setEditing] = useState(false);
-
-  // Ask the database who we are rather than re-deriving the tier rules here —
-  // these are the same predicates the RLS policies use.
-  const { data: access } = useQuery({
-    queryKey: ["plan-access", plan.id],
-    queryFn: async () => {
-      const [full, edit] = await Promise.all([
-        supabase.rpc("can_view_plan_full", { _plan: plan.id }),
-        supabase.rpc("can_edit_plan", { _plan: plan.id }),
-      ]);
-      return { full: full.data === true, edit: edit.data === true };
-    },
-  });
-  const canViewFull = access?.full ?? false;
-  const canEdit = access?.edit ?? false;
-
-  const { data: staff } = useStaff();
-  const manager = (staff ?? []).find((s) => s.id === plan.case_manager_id);
-
-  const invalidate = () => qc.invalidateQueries({ queryKey: ["student-plans", plan.student_id] });
-
-  const remove = async () => {
-    if (!confirm("Delete this plan and everything attached to it? This cannot be undone.")) return;
-    const { error } = await supabase.from("student_plans").delete().eq("id", plan.id);
-    if (error) return err(error);
-    toast.success("Plan deleted");
-    invalidate();
-  };
-
-  return (
-    <div className="border rounded-lg overflow-hidden">
-      <div className="bg-muted/40 p-4 space-y-3">
-        <div className="flex items-start justify-between gap-3 flex-wrap">
-          <div className="flex items-center gap-2">
-            <Badge variant={plan.plan_type === "iep" ? "default" : "secondary"}>
-              {PLAN_TYPE_LABEL[plan.plan_type]}
-            </Badge>
-            <Badge variant={plan.status === "active" ? "outline" : "secondary"}>
-              {PLAN_STATUS_LABEL[plan.status]}
-            </Badge>
-            <span className="text-xs text-muted-foreground">
-              {formatDate(plan.effective_date)}
-              {plan.end_date ? ` – ${formatDate(plan.end_date)}` : ""}
-            </span>
-          </div>
-          <div className="flex gap-1">
-            {canEdit &&
-              (editing ? (
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  onClick={() => {
-                    setEditing(false);
-                    invalidate();
-                  }}
-                >
-                  <Check className="h-4 w-4 mr-1" /> Done
-                </Button>
-              ) : (
-                <Button size="sm" variant="outline" onClick={() => setEditing(true)}>
-                  <Pencil className="h-4 w-4 mr-1" /> Edit
-                </Button>
-              ))}
-            {isAdmin && (
-              <Button size="sm" variant="ghost" onClick={remove}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-          <ComplianceDate date={plan.next_annual_review_date} label="Next annual review" />
-          <ComplianceDate date={plan.next_reevaluation_date} label="Next re-evaluation" />
-          <div>
-            <div className="text-xs text-muted-foreground">Case manager</div>
-            <div className="text-sm">
-              {manager
-                ? manager.full_name || manager.email
-                : plan.case_manager_id
-                  ? "Assigned"
-                  : "Unassigned"}
-            </div>
-          </div>
-        </div>
-
-        {editing && <PlanHeaderEditor plan={plan} staff={staff ?? []} onSaved={invalidate} />}
-      </div>
-
-      <div className="p-4 space-y-4">
-        <AccommodationsSection planId={plan.id} canEdit={canEdit} />
-        <ServicesSection planId={plan.id} canEdit={canEdit} />
-        {canViewFull ? (
-          <>
-            <DetailsSection planId={plan.id} canEdit={canEdit} />
-            <GoalsSection planId={plan.id} canEdit={canEdit} />
-            <MeetingsSection planId={plan.id} canEdit={canEdit} />
-            <DocumentsSection planId={plan.id} canEdit={canEdit} />
-          </>
-        ) : (
-          <div className="flex items-start gap-2 text-xs text-muted-foreground border rounded-md p-3">
-            <Lock className="h-3.5 w-3.5 mt-0.5 shrink-0" />
-            <span>
-              Eligibility, goals, meeting notes and documents are restricted to the case manager,
-              administrators, and the student's parents. You can see the accommodations and services
-              you are responsible for implementing.
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function PlanHeaderEditor({
-  plan,
-  staff,
-  onSaved,
-}: {
-  plan: PlanRow;
-  staff: { id: string; full_name: string | null; email: string | null }[];
-  onSaved: () => void;
-}) {
-  const [f, setF] = useState({
-    status: plan.status,
-    case_manager_id: plan.case_manager_id ?? "",
-    effective_date: plan.effective_date ?? "",
-    end_date: plan.end_date ?? "",
-    next_annual_review_date: plan.next_annual_review_date ?? "",
-    next_reevaluation_date: plan.next_reevaluation_date ?? "",
-  });
-  const [saving, setSaving] = useState(false);
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const { error } = await supabase
-        .from("student_plans")
-        .update({
-          status: f.status,
-          case_manager_id: f.case_manager_id || null,
-          effective_date: f.effective_date || null,
-          end_date: f.end_date || null,
-          next_annual_review_date: f.next_annual_review_date || null,
-          next_reevaluation_date: f.next_reevaluation_date || null,
-        })
-        .eq("id", plan.id);
-      if (error) throw error;
-      toast.success("Plan updated");
-      onSaved();
-    } catch (e) {
-      err(e);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div className="border-t pt-3 space-y-3">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-        <div>
-          <Label className="text-xs">Status</Label>
-          <Select value={f.status} onValueChange={(v) => setF({ ...f, status: v as PlanStatus })}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {(Object.keys(PLAN_STATUS_LABEL) as PlanStatus[]).map((s) => (
-                <SelectItem key={s} value={s}>
-                  {PLAN_STATUS_LABEL[s]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div>
-          <Label className="text-xs">Case manager</Label>
-          <Select
-            value={f.case_manager_id}
-            onValueChange={(v) => setF({ ...f, case_manager_id: v })}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Unassigned" />
-            </SelectTrigger>
-            <SelectContent>
-              {staff.map((s) => (
-                <SelectItem key={s.id} value={s.id}>
-                  {s.full_name || s.email}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div>
-          <Label className="text-xs">Effective date</Label>
-          <Input
-            type="date"
-            defaultValue={f.effective_date}
-            onChange={(e) => setF({ ...f, effective_date: e.target.value })}
-          />
-        </div>
-        <div>
-          <Label className="text-xs">End date</Label>
-          <Input
-            type="date"
-            defaultValue={f.end_date}
-            onChange={(e) => setF({ ...f, end_date: e.target.value })}
-          />
-        </div>
-        <div>
-          <Label className="text-xs">Next annual review</Label>
-          <Input
-            type="date"
-            defaultValue={f.next_annual_review_date}
-            onChange={(e) => setF({ ...f, next_annual_review_date: e.target.value })}
-          />
-        </div>
-        <div>
-          <Label className="text-xs">Next re-evaluation</Label>
-          <Input
-            type="date"
-            defaultValue={f.next_reevaluation_date}
-            onChange={(e) => setF({ ...f, next_reevaluation_date: e.target.value })}
-          />
-        </div>
-      </div>
-      <Button size="sm" onClick={save} disabled={saving}>
-        {saving ? "Saving…" : "Save plan details"}
-      </Button>
-    </div>
-  );
-}
-
-// ── Accommodations (visible to implementing teachers) ───────────────────────
-function AccommodationsSection({ planId, canEdit }: { planId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-accommodations", planId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (
-        await supabase
-          .from("plan_accommodations")
-          .select("*")
-          .eq("plan_id", planId)
-          .order("sort_order")
-      ).data ?? [],
-  });
-  const [draft, setDraft] = useState({ category: "instructional", description: "", setting: "" });
-  const [adding, setAdding] = useState(false);
-
-  const add = async () => {
-    if (!draft.description.trim()) return toast.error("Describe the accommodation");
-    const { error } = await supabase.from("plan_accommodations").insert({
-      plan_id: planId,
-      category: draft.category,
-      description: draft.description.trim(),
-      setting: draft.setting || null,
-      sort_order: data?.length ?? 0,
-    });
-    if (error) return err(error);
-    setDraft({ category: "instructional", description: "", setting: "" });
-    setAdding(false);
-    qc.invalidateQueries({ queryKey: key });
-  };
-  const remove = async (id: string) => {
-    const { error } = await supabase.from("plan_accommodations").delete().eq("id", id);
-    if (error) return err(error);
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  return (
-    <SectionCard
-      title="Accommodations & modifications"
-      icon={ClipboardList}
-      action={
-        canEdit && !adding ? (
-          <Button size="sm" variant="outline" onClick={() => setAdding(true)}>
-            <Plus className="h-4 w-4 mr-1" /> Add
-          </Button>
-        ) : undefined
-      }
-    >
-      {adding && (
-        <div className="border rounded-md p-3 space-y-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-            <Select
-              value={draft.category}
-              onValueChange={(v) => setDraft({ ...draft, category: v })}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {ACCOMMODATION_CATEGORIES.map((c) => (
-                  <SelectItem key={c.value} value={c.value}>
-                    {c.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="Setting (e.g. all classes, testing only)"
-              value={draft.setting}
-              onChange={(e) => setDraft({ ...draft, setting: e.target.value })}
-            />
-          </div>
-          <Textarea
-            rows={2}
-            placeholder="Description — what staff must actually do"
-            value={draft.description}
-            onChange={(e) => setDraft({ ...draft, description: e.target.value })}
-          />
-          <div className="flex gap-2">
-            <Button size="sm" onClick={add}>
-              Add
-            </Button>
-            <Button size="sm" variant="ghost" onClick={() => setAdding(false)}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      )}
-      {(data ?? []).length === 0 && !adding && <Empty>No accommodations recorded.</Empty>}
-      <div className="divide-y">
-        {(data ?? []).map((a) => (
-          <div key={a.id} className="py-2 flex items-start justify-between gap-3">
-            <div className="min-w-0">
-              <div className="text-sm">{a.description}</div>
-              <div className="text-xs text-muted-foreground">
-                {accommodationLabel(a.category)}
-                {a.setting ? ` · ${a.setting}` : ""}
-              </div>
-            </div>
-            {canEdit && (
-              <Button size="sm" variant="ghost" onClick={() => remove(a.id)}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        ))}
-      </div>
-    </SectionCard>
-  );
-}
-
-// ── Related services (visible to implementing teachers) ─────────────────────
-function ServicesSection({ planId, canEdit }: { planId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-services", planId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (await supabase.from("plan_services").select("*").eq("plan_id", planId).order("created_at"))
-        .data ?? [],
-  });
-  const [adding, setAdding] = useState(false);
-  const [d, setD] = useState({
-    service_type: "",
-    provider_name: "",
-    minutes_per_session: "",
-    sessions_per_period: "",
-    period: "week",
-    location: "",
-    delivery: "pull_out",
-  });
-
-  const add = async () => {
-    if (!d.service_type.trim()) return toast.error("Name the service");
-    const { error } = await supabase.from("plan_services").insert({
-      plan_id: planId,
-      service_type: d.service_type.trim(),
-      provider_name: d.provider_name || null,
-      minutes_per_session: d.minutes_per_session ? Number(d.minutes_per_session) : null,
-      sessions_per_period: d.sessions_per_period ? Number(d.sessions_per_period) : null,
-      period: d.period,
-      location: d.location || null,
-      delivery: d.delivery,
-    });
-    if (error) return err(error);
-    setD({
-      service_type: "",
-      provider_name: "",
-      minutes_per_session: "",
-      sessions_per_period: "",
-      period: "week",
-      location: "",
-      delivery: "pull_out",
-    });
-    setAdding(false);
-    qc.invalidateQueries({ queryKey: key });
-  };
-  const remove = async (id: string) => {
-    const { error } = await supabase.from("plan_services").delete().eq("id", id);
-    if (error) return err(error);
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  const summary = (s: {
-    minutes_per_session: number | null;
-    sessions_per_period: number | null;
-    period: string;
-  }) => {
-    if (!s.minutes_per_session && !s.sessions_per_period) return null;
-    const mins = s.minutes_per_session ? `${s.minutes_per_session} min` : "";
-    const freq = s.sessions_per_period ? `${s.sessions_per_period}× / ${s.period}` : "";
-    return [mins, freq].filter(Boolean).join(" · ");
-  };
-
-  return (
-    <SectionCard
-      title="Related services"
-      icon={Users}
-      action={
-        canEdit && !adding ? (
-          <Button size="sm" variant="outline" onClick={() => setAdding(true)}>
-            <Plus className="h-4 w-4 mr-1" /> Add
-          </Button>
-        ) : undefined
-      }
-    >
-      {adding && (
-        <div className="border rounded-md p-3 space-y-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-            <Input
-              placeholder="Service (speech, OT, counseling…)"
-              value={d.service_type}
-              onChange={(e) => setD({ ...d, service_type: e.target.value })}
-            />
-            <Input
-              placeholder="Provider"
-              value={d.provider_name}
-              onChange={(e) => setD({ ...d, provider_name: e.target.value })}
-            />
-            <Input
-              placeholder="Minutes per session"
-              inputMode="numeric"
-              value={d.minutes_per_session}
-              onChange={(e) => setD({ ...d, minutes_per_session: e.target.value })}
-            />
-            <div className="flex gap-2">
-              <Input
-                placeholder="Sessions"
-                inputMode="numeric"
-                value={d.sessions_per_period}
-                onChange={(e) => setD({ ...d, sessions_per_period: e.target.value })}
-              />
-              <Select value={d.period} onValueChange={(v) => setD({ ...d, period: v })}>
-                <SelectTrigger className="w-32">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="week">per week</SelectItem>
-                  <SelectItem value="month">per month</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <Input
-              placeholder="Location"
-              value={d.location}
-              onChange={(e) => setD({ ...d, location: e.target.value })}
-            />
-            <Select value={d.delivery} onValueChange={(v) => setD({ ...d, delivery: v })}>
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="pull_out">Pull-out</SelectItem>
-                <SelectItem value="push_in">Push-in</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex gap-2">
-            <Button size="sm" onClick={add}>
-              Add
-            </Button>
-            <Button size="sm" variant="ghost" onClick={() => setAdding(false)}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      )}
-      {(data ?? []).length === 0 && !adding && <Empty>No related services recorded.</Empty>}
-      <div className="divide-y">
-        {(data ?? []).map((s) => (
-          <div key={s.id} className="py-2 flex items-start justify-between gap-3">
-            <div className="min-w-0">
-              <div className="text-sm">
-                {s.service_type}
-                {s.provider_name ? ` — ${s.provider_name}` : ""}
-              </div>
-              <div className="text-xs text-muted-foreground">
-                {[summary(s), s.location, s.delivery === "push_in" ? "Push-in" : "Pull-out"]
-                  .filter(Boolean)
-                  .join(" · ")}
-              </div>
-            </div>
-            {canEdit && (
-              <Button size="sm" variant="ghost" onClick={() => remove(s.id)}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        ))}
-      </div>
-    </SectionCard>
-  );
-}
-
-// ── Eligibility / confidential detail ───────────────────────────────────────
-function DetailsSection({ planId, canEdit }: { planId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-details", planId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (await supabase.from("plan_details").select("*").eq("plan_id", planId).maybeSingle()).data,
-  });
-  const [editing, setEditing] = useState(false);
-  const [f, setF] = useState<Record<string, string>>({});
-  const [saving, setSaving] = useState(false);
-
-  const start = () => {
-    setF({
-      eligibility_category: data?.eligibility_category ?? "",
-      eligibility_notes: data?.eligibility_notes ?? "",
-      last_evaluation_date: data?.last_evaluation_date ?? "",
-      consent_date: data?.consent_date ?? "",
-      evaluation_summary: data?.evaluation_summary ?? "",
-      student_strengths: data?.student_strengths ?? "",
-      parent_concerns: data?.parent_concerns ?? "",
-      confidential_notes: data?.confidential_notes ?? "",
-    });
-    setEditing(true);
-  };
-
-  const save = async () => {
-    setSaving(true);
-    try {
-      const { error } = await supabase.from("plan_details").upsert(
-        {
-          plan_id: planId,
-          eligibility_category: f.eligibility_category || null,
-          eligibility_notes: f.eligibility_notes || null,
-          last_evaluation_date: f.last_evaluation_date || null,
-          consent_date: f.consent_date || null,
-          evaluation_summary: f.evaluation_summary || null,
-          student_strengths: f.student_strengths || null,
-          parent_concerns: f.parent_concerns || null,
-          confidential_notes: f.confidential_notes || null,
-        },
-        { onConflict: "plan_id" },
-      );
-      if (error) throw error;
-      toast.success("Details saved");
-      setEditing(false);
-      qc.invalidateQueries({ queryKey: key });
-    } catch (e) {
-      err(e);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const Row = ({ label, value }: { label: string; value?: string | null }) => (
-    <div className="flex justify-between gap-4 py-1.5 border-b last:border-0 text-sm">
-      <span className="text-muted-foreground shrink-0">{label}</span>
-      <span className="font-medium text-right break-words whitespace-pre-wrap">{value || "—"}</span>
-    </div>
-  );
-
-  return (
-    <SectionCard
-      title="Eligibility & evaluation"
-      icon={FileText}
-      confidential
-      action={
-        canEdit ? (
-          editing ? (
-            <Button size="sm" variant="ghost" onClick={() => setEditing(false)}>
-              Cancel
-            </Button>
-          ) : (
-            <Button size="sm" variant="outline" onClick={start}>
-              <Pencil className="h-4 w-4 mr-1" /> Edit
-            </Button>
-          )
-        ) : undefined
-      }
-    >
-      {editing ? (
-        <div className="space-y-3">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <Label className="text-xs">Eligibility / disability category</Label>
-              <Input
-                value={f.eligibility_category}
-                onChange={(e) => setF({ ...f, eligibility_category: e.target.value })}
-              />
-            </div>
-            <div>
-              <Label className="text-xs">Parental consent date</Label>
-              <Input
-                type="date"
-                defaultValue={f.consent_date}
-                onChange={(e) => setF({ ...f, consent_date: e.target.value })}
-              />
-            </div>
-            <div>
-              <Label className="text-xs">Last evaluation date</Label>
-              <Input
-                type="date"
-                defaultValue={f.last_evaluation_date}
-                onChange={(e) => setF({ ...f, last_evaluation_date: e.target.value })}
-              />
-            </div>
-          </div>
-          <div>
-            <Label className="text-xs">Eligibility notes</Label>
-            <Textarea
-              rows={2}
-              value={f.eligibility_notes}
-              onChange={(e) => setF({ ...f, eligibility_notes: e.target.value })}
-            />
-          </div>
-          <div>
-            <Label className="text-xs">Evaluation summary</Label>
-            <Textarea
-              rows={3}
-              value={f.evaluation_summary}
-              onChange={(e) => setF({ ...f, evaluation_summary: e.target.value })}
-            />
-          </div>
-          <div>
-            <Label className="text-xs">Student strengths</Label>
-            <Textarea
-              rows={2}
-              value={f.student_strengths}
-              onChange={(e) => setF({ ...f, student_strengths: e.target.value })}
-            />
-          </div>
-          <div>
-            <Label className="text-xs">Parent concerns</Label>
-            <Textarea
-              rows={2}
-              value={f.parent_concerns}
-              onChange={(e) => setF({ ...f, parent_concerns: e.target.value })}
-            />
-          </div>
-          <div>
-            <Label className="text-xs">Confidential notes (staff only)</Label>
-            <Textarea
-              rows={2}
-              value={f.confidential_notes}
-              onChange={(e) => setF({ ...f, confidential_notes: e.target.value })}
-            />
-          </div>
-          <Button size="sm" onClick={save} disabled={saving}>
-            {saving ? "Saving…" : "Save"}
-          </Button>
-        </div>
-      ) : (
-        <div>
-          <Row label="Eligibility category" value={data?.eligibility_category} />
-          <Row
-            label="Consent date"
-            value={data?.consent_date ? formatDate(data.consent_date) : null}
-          />
-          <Row
-            label="Last evaluation"
-            value={data?.last_evaluation_date ? formatDate(data.last_evaluation_date) : null}
-          />
-          <Row label="Eligibility notes" value={data?.eligibility_notes} />
-          <Row label="Evaluation summary" value={data?.evaluation_summary} />
-          <Row label="Student strengths" value={data?.student_strengths} />
-          <Row label="Parent concerns" value={data?.parent_concerns} />
-          <Row label="Confidential notes" value={data?.confidential_notes} />
-        </div>
-      )}
-    </SectionCard>
-  );
-}
-
-// ── Goals + progress monitoring ─────────────────────────────────────────────
-function GoalsSection({ planId, canEdit }: { planId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-goals", planId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (await supabase.from("plan_goals").select("*").eq("plan_id", planId).order("sort_order"))
-        .data ?? [],
-  });
-  const [adding, setAdding] = useState(false);
-  const [g, setG] = useState({
-    area: "",
-    statement: "",
-    baseline: "",
-    target_criteria: "",
-    target_value: "",
-    unit: "",
-    target_date: "",
-  });
-
-  const add = async () => {
-    if (!g.statement.trim()) return toast.error("Write the goal statement");
-    const { error } = await supabase.from("plan_goals").insert({
-      plan_id: planId,
-      area: g.area || null,
-      statement: g.statement.trim(),
-      baseline: g.baseline || null,
-      target_criteria: g.target_criteria || null,
-      target_value: g.target_value ? Number(g.target_value) : null,
-      unit: g.unit || null,
-      target_date: g.target_date || null,
-      sort_order: data?.length ?? 0,
-    });
-    if (error) return err(error);
-    setG({
-      area: "",
-      statement: "",
-      baseline: "",
-      target_criteria: "",
-      target_value: "",
-      unit: "",
-      target_date: "",
-    });
-    setAdding(false);
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  return (
-    <SectionCard
-      title="Annual goals & progress"
-      icon={Target}
-      confidential
-      action={
-        canEdit && !adding ? (
-          <Button size="sm" variant="outline" onClick={() => setAdding(true)}>
-            <Plus className="h-4 w-4 mr-1" /> Add goal
-          </Button>
-        ) : undefined
-      }
-    >
-      {adding && (
-        <div className="border rounded-md p-3 space-y-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-            <Input
-              placeholder="Area (reading, math, behavior…)"
-              value={g.area}
-              onChange={(e) => setG({ ...g, area: e.target.value })}
-            />
-            <Input
-              type="date"
-              defaultValue={g.target_date}
-              onChange={(e) => setG({ ...g, target_date: e.target.value })}
-            />
-          </div>
-          <Textarea
-            rows={2}
-            placeholder="Measurable annual goal statement"
-            value={g.statement}
-            onChange={(e) => setG({ ...g, statement: e.target.value })}
-          />
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
-            <Input
-              placeholder="Baseline"
-              value={g.baseline}
-              onChange={(e) => setG({ ...g, baseline: e.target.value })}
-            />
-            <Input
-              placeholder="Target value"
-              inputMode="decimal"
-              value={g.target_value}
-              onChange={(e) => setG({ ...g, target_value: e.target.value })}
-            />
-            <Input
-              placeholder="Unit (%, wpm…)"
-              value={g.unit}
-              onChange={(e) => setG({ ...g, unit: e.target.value })}
-            />
-          </div>
-          <Input
-            placeholder="Criteria for mastery"
-            value={g.target_criteria}
-            onChange={(e) => setG({ ...g, target_criteria: e.target.value })}
-          />
-          <div className="flex gap-2">
-            <Button size="sm" onClick={add}>
-              Add goal
-            </Button>
-            <Button size="sm" variant="ghost" onClick={() => setAdding(false)}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      )}
-      {(data ?? []).length === 0 && !adding && <Empty>No goals recorded.</Empty>}
-      <div className="space-y-3">
-        {(data ?? []).map((goal) => (
-          <GoalRow
-            key={goal.id}
-            goal={goal}
-            canEdit={canEdit}
-            onChanged={() => qc.invalidateQueries({ queryKey: key })}
-          />
-        ))}
-      </div>
-    </SectionCard>
-  );
-}
-
-type GoalRecord = {
-  id: string;
-  area: string | null;
-  statement: string;
-  baseline: string | null;
-  target_criteria: string | null;
-  target_value: number | null;
-  unit: string | null;
-  target_date: string | null;
-  status: GoalStatus;
-};
-
-function GoalRow({
-  goal,
-  canEdit,
-  onChanged,
-}: {
-  goal: GoalRecord;
-  canEdit: boolean;
-  onChanged: () => void;
-}) {
-  const qc = useQueryClient();
-  const key = ["plan-goal-progress", goal.id];
-  const [open, setOpen] = useState(false);
-  const { data: progress } = useQuery({
-    queryKey: key,
-    enabled: open,
-    queryFn: async () =>
-      (
-        await supabase
-          .from("plan_goal_progress")
-          .select("*")
-          .eq("goal_id", goal.id)
-          .order("date", { ascending: false })
-      ).data ?? [],
-  });
-  const [p, setP] = useState({ date: todayISO(), value: "", narrative: "" });
-
-  const latest = progress?.[0];
-  const pct =
-    goal.target_value && latest?.value != null
-      ? Math.max(0, Math.min(100, (Number(latest.value) / Number(goal.target_value)) * 100))
-      : null;
-
-  const addProgress = async () => {
-    const { data: u } = await supabase.auth.getUser();
-    const { error } = await supabase.from("plan_goal_progress").insert({
-      goal_id: goal.id,
-      date: p.date || todayISO(),
-      value: p.value ? Number(p.value) : null,
-      narrative: p.narrative || null,
-      recorded_by: u.user?.id,
-    });
-    if (error) return err(error);
-    setP({ date: todayISO(), value: "", narrative: "" });
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  const setStatus = async (status: GoalStatus) => {
-    const { error } = await supabase.from("plan_goals").update({ status }).eq("id", goal.id);
-    if (error) return err(error);
-    onChanged();
-  };
-
-  const remove = async () => {
-    if (!confirm("Delete this goal and its progress data?")) return;
-    const { error } = await supabase.from("plan_goals").delete().eq("id", goal.id);
-    if (error) return err(error);
-    onChanged();
-  };
-
-  return (
-    <div className="border rounded-md p-3 space-y-2">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="text-sm font-medium">{goal.statement}</div>
-          <div className="text-xs text-muted-foreground">
-            {[
-              goal.area,
-              goal.baseline ? `Baseline: ${goal.baseline}` : null,
-              goal.target_value != null ? `Target: ${goal.target_value}${goal.unit ?? ""}` : null,
-              goal.target_date ? `By ${formatDate(goal.target_date)}` : null,
-            ]
-              .filter(Boolean)
-              .join(" · ")}
-          </div>
-          {goal.target_criteria && (
-            <div className="text-xs text-muted-foreground">Mastery: {goal.target_criteria}</div>
-          )}
-        </div>
-        <div className="flex items-center gap-1 shrink-0">
-          {canEdit ? (
-            <Select value={goal.status} onValueChange={(v) => setStatus(v as GoalStatus)}>
-              <SelectTrigger className="h-8 w-36 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {(Object.keys(GOAL_STATUS_LABEL) as GoalStatus[]).map((s) => (
-                  <SelectItem key={s} value={s}>
-                    {GOAL_STATUS_LABEL[s]}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          ) : (
-            <Badge variant="secondary">{GOAL_STATUS_LABEL[goal.status]}</Badge>
-          )}
-          {canEdit && (
-            <Button size="sm" variant="ghost" onClick={remove}>
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {pct !== null && (
-        <div className="space-y-1">
-          <Progress value={pct} />
-          <div className="text-[11px] text-muted-foreground">
-            Latest {latest?.value}
-            {goal.unit ?? ""} of {goal.target_value}
-            {goal.unit ?? ""} target ({Math.round(pct)}%)
-          </div>
-        </div>
-      )}
-
-      <Button
-        size="sm"
-        variant="ghost"
-        className="h-7 px-2 text-xs"
-        onClick={() => setOpen((o) => !o)}
-      >
-        {open ? "Hide" : "Show"} progress {progress ? `(${progress.length})` : ""}
-      </Button>
-
-      {open && (
-        <div className="space-y-2">
-          {canEdit && (
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-2">
-              <Input
-                type="date"
-                defaultValue={p.date}
-                onChange={(e) => setP({ ...p, date: e.target.value })}
-              />
-              <Input
-                placeholder="Value"
-                inputMode="decimal"
-                value={p.value}
-                onChange={(e) => setP({ ...p, value: e.target.value })}
-              />
-              <Input
-                placeholder="Narrative"
-                value={p.narrative}
-                onChange={(e) => setP({ ...p, narrative: e.target.value })}
-              />
-              <Button size="sm" onClick={addProgress}>
-                Record
-              </Button>
-            </div>
-          )}
-          {(progress ?? []).length === 0 ? (
-            <Empty>No progress recorded yet.</Empty>
-          ) : (
-            <div className="divide-y text-sm">
-              {(progress ?? []).map((row) => (
-                <div key={row.id} className="py-1.5 flex justify-between gap-3">
-                  <span className="text-muted-foreground">{formatDate(row.date)}</span>
-                  <span className="flex-1 text-right break-words">
-                    {row.value != null ? `${row.value}${goal.unit ?? ""}` : ""}
-                    {row.narrative ? ` — ${row.narrative}` : ""}
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Meetings + team ─────────────────────────────────────────────────────────
-function MeetingsSection({ planId, canEdit }: { planId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-meetings", planId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (
-        await supabase
-          .from("plan_meetings")
-          .select("*")
-          .eq("plan_id", planId)
-          .order("meeting_date", { ascending: false })
-      ).data ?? [],
-  });
-  const [adding, setAdding] = useState(false);
-  const [m, setM] = useState({
-    meeting_type: "annual_review" as MeetingType,
-    meeting_date: todayISO(),
-    location: "",
-    notes: "",
-    outcome: "",
-  });
-
-  const add = async () => {
-    const { data: u } = await supabase.auth.getUser();
-    const { error } = await supabase.from("plan_meetings").insert({
-      plan_id: planId,
-      meeting_type: m.meeting_type,
-      meeting_date: m.meeting_date || todayISO(),
-      location: m.location || null,
-      notes: m.notes || null,
-      outcome: m.outcome || null,
-      created_by: u.user?.id,
-    });
-    if (error) return err(error);
-    setM({
-      meeting_type: "annual_review",
-      meeting_date: todayISO(),
-      location: "",
-      notes: "",
-      outcome: "",
-    });
-    setAdding(false);
-    qc.invalidateQueries({ queryKey: key });
-  };
-  const remove = async (id: string) => {
-    const { error } = await supabase.from("plan_meetings").delete().eq("id", id);
-    if (error) return err(error);
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  return (
-    <SectionCard
-      title="Meetings & team"
-      icon={CalendarClock}
-      confidential
-      action={
-        canEdit && !adding ? (
-          <Button size="sm" variant="outline" onClick={() => setAdding(true)}>
-            <Plus className="h-4 w-4 mr-1" /> Add meeting
-          </Button>
-        ) : undefined
-      }
-    >
-      {adding && (
-        <div className="border rounded-md p-3 space-y-2">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
-            <Select
-              value={m.meeting_type}
-              onValueChange={(v) => setM({ ...m, meeting_type: v as MeetingType })}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {(Object.keys(MEETING_TYPE_LABEL) as MeetingType[]).map((t) => (
-                  <SelectItem key={t} value={t}>
-                    {MEETING_TYPE_LABEL[t]}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Input
-              type="date"
-              defaultValue={m.meeting_date}
-              onChange={(e) => setM({ ...m, meeting_date: e.target.value })}
-            />
-            <Input
-              placeholder="Location"
-              value={m.location}
-              onChange={(e) => setM({ ...m, location: e.target.value })}
-            />
-          </div>
-          <Textarea
-            rows={2}
-            placeholder="Notes"
-            value={m.notes}
-            onChange={(e) => setM({ ...m, notes: e.target.value })}
-          />
-          <Input
-            placeholder="Outcome / decisions"
-            value={m.outcome}
-            onChange={(e) => setM({ ...m, outcome: e.target.value })}
-          />
-          <div className="flex gap-2">
-            <Button size="sm" onClick={add}>
-              Add meeting
-            </Button>
-            <Button size="sm" variant="ghost" onClick={() => setAdding(false)}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      )}
-      {(data ?? []).length === 0 && !adding && <Empty>No meetings recorded.</Empty>}
-      <div className="space-y-3">
-        {(data ?? []).map((mt) => (
-          <div key={mt.id} className="border rounded-md p-3 space-y-2">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <div className="text-sm font-medium">
-                  {MEETING_TYPE_LABEL[mt.meeting_type]} · {formatDate(mt.meeting_date)}
-                </div>
-                {mt.location && <div className="text-xs text-muted-foreground">{mt.location}</div>}
-                {mt.notes && <div className="text-sm mt-1 whitespace-pre-wrap">{mt.notes}</div>}
-                {mt.outcome && (
-                  <div className="text-xs text-muted-foreground mt-1">Outcome: {mt.outcome}</div>
-                )}
-              </div>
-              {canEdit && (
-                <Button size="sm" variant="ghost" onClick={() => remove(mt.id)}>
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              )}
-            </div>
-            <Attendees meetingId={mt.id} canEdit={canEdit} />
-          </div>
-        ))}
-      </div>
-    </SectionCard>
-  );
-}
-
-function Attendees({ meetingId, canEdit }: { meetingId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-meeting-attendees", meetingId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (
-        await supabase
-          .from("plan_meeting_attendees")
-          .select("*")
-          .eq("meeting_id", meetingId)
-          .order("created_at")
-      ).data ?? [],
-  });
-  const [a, setA] = useState({ name: "", team_role: "" });
-
-  const add = async () => {
-    if (!a.name.trim()) return;
-    const { error } = await supabase.from("plan_meeting_attendees").insert({
-      meeting_id: meetingId,
-      name: a.name.trim(),
-      team_role: a.team_role || null,
-    });
-    if (error) return err(error);
-    setA({ name: "", team_role: "" });
-    qc.invalidateQueries({ queryKey: key });
-  };
-  const remove = async (id: string) => {
-    const { error } = await supabase.from("plan_meeting_attendees").delete().eq("id", id);
-    if (error) return err(error);
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  return (
-    <div className="border-t pt-2 space-y-2">
-      <div className="text-xs font-medium text-muted-foreground">Team members present</div>
-      <div className="flex flex-wrap gap-1.5">
-        {(data ?? []).map((at) => (
-          <Badge key={at.id} variant="secondary" className="gap-1">
-            {at.name}
-            {at.team_role ? ` · ${at.team_role}` : ""}
-            {canEdit && (
-              <button onClick={() => remove(at.id)} className="ml-1 opacity-60 hover:opacity-100">
-                ×
-              </button>
-            )}
-          </Badge>
-        ))}
-        {(data ?? []).length === 0 && (
-          <span className="text-xs text-muted-foreground">None recorded.</span>
-        )}
-      </div>
-      {canEdit && (
-        <div className="flex gap-2">
-          <Input
-            className="h-8"
-            placeholder="Name"
-            value={a.name}
-            onChange={(e) => setA({ ...a, name: e.target.value })}
-          />
-          <Input
-            className="h-8"
-            placeholder="Role (parent, LEA rep…)"
-            value={a.team_role}
-            onChange={(e) => setA({ ...a, team_role: e.target.value })}
-          />
-          <Button size="sm" variant="outline" onClick={add}>
-            Add
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Signed documents ────────────────────────────────────────────────────────
-function DocumentsSection({ planId, canEdit }: { planId: string; canEdit: boolean }) {
-  const qc = useQueryClient();
-  const key = ["plan-documents", planId];
-  const { data } = useQuery({
-    queryKey: key,
-    queryFn: async () =>
-      (
-        await supabase
-          .from("plan_documents")
-          .select("*")
-          .eq("plan_id", planId)
-          .order("created_at", { ascending: false })
-      ).data ?? [],
-  });
-  const [title, setTitle] = useState("");
-  const [uploading, setUploading] = useState(false);
-
-  const onUpload = async (file: File) => {
-    if (!file) return;
-    setUploading(true);
-    try {
-      // Bucket policies key off the first path segment, so it must be the plan id.
-      const path = `${planId}/${Date.now()}-${file.name}`;
-      const { error: upErr } = await supabase.storage.from("plan-documents").upload(path, file);
-      if (upErr) throw upErr;
-      const { data: u } = await supabase.auth.getUser();
-      const { error } = await supabase.from("plan_documents").insert({
-        plan_id: planId,
-        file_path: path,
-        title: title || file.name,
-        uploaded_by: u.user?.id,
-      });
-      if (error) throw error;
-      setTitle("");
-      qc.invalidateQueries({ queryKey: key });
-      toast.success("Document uploaded");
-    } catch (e) {
-      err(e);
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  const download = async (path: string) => {
-    const { data, error } = await supabase.storage.from("plan-documents").createSignedUrl(path, 60);
-    if (error) return err(error);
-    window.open(data.signedUrl, "_blank");
-  };
-
-  const remove = async (id: string, path: string) => {
-    if (!confirm("Delete this document?")) return;
-    await supabase.storage.from("plan-documents").remove([path]);
-    const { error } = await supabase.from("plan_documents").delete().eq("id", id);
-    if (error) return err(error);
-    qc.invalidateQueries({ queryKey: key });
-  };
-
-  return (
-    <SectionCard title="Signed documents" icon={FileText} confidential>
-      {canEdit && (
-        <div className="space-y-2">
-          <Input
-            placeholder="Title (optional)"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-          />
-          <Input
-            type="file"
-            disabled={uploading}
-            onChange={(e) => e.target.files && onUpload(e.target.files[0])}
-          />
-        </div>
-      )}
-      {(data ?? []).length === 0 ? (
-        <Empty>No documents uploaded.</Empty>
-      ) : (
-        <div className="divide-y">
-          {(data ?? []).map((doc) => (
-            <div key={doc.id} className="py-2 flex items-center justify-between gap-3">
-              <button
-                onClick={() => download(doc.file_path)}
-                className="flex items-center gap-2 text-sm hover:underline text-left"
-              >
-                <FileText className="h-4 w-4 shrink-0" /> {doc.title}
-              </button>
-              <div className="flex items-center gap-2 shrink-0">
-                <span className="text-xs text-muted-foreground">
-                  {new Date(doc.created_at).toLocaleDateString()}
-                </span>
-                {canEdit && (
-                  <Button size="sm" variant="ghost" onClick={() => remove(doc.id, doc.file_path)}>
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </SectionCard>
-  );
-}