feat: org-scoped prescriptions backend, wire prescriptions page

Add the prescriptions table, validation, service and CRUD routes
(/api/prescriptions, RBAC-gated; prescriber defaults to the signed-in
clinician, prescribedAt to today) and the frontend data module. The page
now loads/persists real data and computes its status KPIs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/prescriptions/add-prescription-dialog.tsx

@@ -111,8 +111,8 @@ function Field({ label, children }: { label: string; children: ReactNode }) {
 
 // Compact "New prescription" dialog. The patient is chosen via a quick search by
 // name or file number (same pattern as the appointment dialog); the rest is the
-// medication detail. Prescriptions are mock-only, so the new entry is handed back
-// to the page via onAdd.
+// medication detail. The new entry is handed back to the page via onAdd, which
+// persists it through the prescriptions API.
 export function AddPrescriptionDialog({
   open,
   onOpenChange,

frontend/components/prescriptions/prescription-detail-sheet.tsx

@@ -10,6 +10,7 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import type { Prescription, RxStatus } from "@/components/prescriptions/prescriptions-view";
+import { formatPrescribedAt } from "@/lib/prescriptions";
 
 const statusVariant: Record<
   RxStatus,
@@ -28,7 +29,7 @@ const statusLabel: Record<RxStatus, string> = {
 
 // Right-side Sheet showing one prescription's full detail, opened by clicking a
 // row in the Prescriptions list (mirrors the Patients table → side Sheet
-// pattern). Prescriptions live in local state, so the record is passed in.
+// pattern). The selected record is passed in from the page.
 export function PrescriptionDetailSheet({
   rx,
   open,
@@ -82,7 +83,9 @@ export function PrescriptionDetailSheet({
                 <dt className="text-muted-foreground">Prescriber</dt>
                 <dd className="text-foreground">{rx.prescriber}</dd>
                 <dt className="text-muted-foreground">Date</dt>
-                <dd className="text-foreground">{rx.date}</dd>
+                <dd className="text-foreground">
+                  {formatPrescribedAt(rx.prescribedAt)}
+                </dd>
                 <dt className="text-muted-foreground">Status</dt>
                 <dd className="text-foreground">{statusLabel[rx.status]}</dd>
               </dl>

frontend/components/prescriptions/prescriptions-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { CircleCheck, Clock, Pill, Plus } from "lucide-react";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
 
 import {
   AddPrescriptionDialog,
@@ -12,25 +12,16 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import {
+  type Prescription,
+  type RxStatus,
+  createPrescription,
+  formatPrescribedAt,
+  listPrescriptions,
+} from "@/lib/prescriptions";
+import { notify } from "@/lib/toast";
 
-// All figures here are mock/placeholder data — there is no prescriptions backend.
-// They illustrate the Prescriptions layout.
-
-export type RxStatus = "active" | "completed" | "expired";
-
-export type Prescription = {
-  fileNumber: string;
-  name: string;
-  initials: string;
-  medication: string;
-  dose: string;
-  frequency: string;
-  prescriber: string;
-  date: string;
-  status: RxStatus;
-  duration?: string;
-  notes?: string;
-};
+export type { Prescription, RxStatus } from "@/lib/prescriptions";
 
 const statusVariant: Record<
   RxStatus,
@@ -47,70 +38,6 @@ const statusLabel: Record<RxStatus, string> = {
   expired: "Expired",
 };
 
-const kpis = [
-  { label: "Active", value: "8", icon: Pill },
-  { label: "Due refill", value: "3", icon: Clock },
-  { label: "Completed", value: "27", icon: CircleCheck },
-];
-
-const initial: Prescription[] = [
-  {
-    fileNumber: "10293",
-    name: "Amina Yusuf",
-    initials: "AY",
-    medication: "Lisinopril",
-    dose: "10 mg",
-    frequency: "Once daily",
-    prescriber: "Dr. Okafor",
-    date: "Jun 5, 2026",
-    status: "active",
-  },
-  {
-    fileNumber: "10311",
-    name: "Daniel Mensah",
-    initials: "DM",
-    medication: "Metformin",
-    dose: "500 mg",
-    frequency: "Twice daily",
-    prescriber: "Dr. Okafor",
-    date: "Jun 4, 2026",
-    status: "active",
-  },
-  {
-    fileNumber: "10342",
-    name: "Leila Haddad",
-    initials: "LH",
-    medication: "Amoxicillin",
-    dose: "500 mg",
-    frequency: "Three times daily",
-    prescriber: "Dr. Stein",
-    date: "May 28, 2026",
-    status: "completed",
-  },
-  {
-    fileNumber: "10358",
-    name: "Carlos Rivera",
-    initials: "CR",
-    medication: "Atorvastatin",
-    dose: "20 mg",
-    frequency: "Once daily",
-    prescriber: "Dr. Okafor",
-    date: "May 12, 2026",
-    status: "expired",
-  },
-  {
-    fileNumber: "10377",
-    name: "Priya Nair",
-    initials: "PN",
-    medication: "Salbutamol inhaler",
-    dose: "100 mcg",
-    frequency: "As needed",
-    prescriber: "Dr. Stein",
-    date: "Jun 1, 2026",
-    status: "active",
-  },
-];
-
 function Kpi({
   label,
   value,
@@ -165,7 +92,9 @@ function RxRow({ rx, onOpen }: { rx: Prescription; onOpen: () => void }) {
       </div>
       <div className="hidden min-w-0 flex-col items-end sm:flex">
         <span className="truncate text-foreground text-xs">{rx.prescriber}</span>
-        <span className="text-muted-foreground text-xs">{rx.date}</span>
+        <span className="text-muted-foreground text-xs">
+          {formatPrescribedAt(rx.prescribedAt)}
+        </span>
       </div>
       <Badge variant={statusVariant[rx.status]}>{statusLabel[rx.status]}</Badge>
     </div>
@@ -196,46 +125,76 @@ function Section({
 
 export function PrescriptionsView() {
   const [addOpen, setAddOpen] = useState(false);
-  const [list, setList] = useState<Prescription[]>(initial);
+  const [list, setList] = useState<Prescription[]>([]);
   const [selected, setSelected] = useState<Prescription | null>(null);
   const [sheetOpen, setSheetOpen] = useState(false);
 
+  useEffect(() => {
+    let active = true;
+    listPrescriptions()
+      .then((data) => {
+        if (active) setList(data);
+      })
+      .catch(() => {
+        /* api-client redirects on 401; otherwise leave the list empty */
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+
   const openRx = (rx: Prescription) => {
     setSelected(rx);
     setSheetOpen(true);
   };
 
-  // Insert a new (mock) prescription at the top of the list, marked active.
-  const addPrescription = (rx: NewPrescription) => {
-    setList((prev) => [
-      {
+  // Persist a new prescription, then add the saved record to the top of the list.
+  const addPrescription = async (rx: NewPrescription) => {
+    try {
+      const created = await createPrescription({
         fileNumber: rx.fileNumber,
         name: rx.name,
         initials: rx.initials,
         medication: rx.medication,
         dose: rx.dose,
         frequency: rx.frequency,
-        duration: rx.duration || undefined,
-        notes: rx.notes || undefined,
-        prescriber: "Dr. Okafor",
-        date: new Date().toLocaleDateString("en-US", {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-        status: "active" as const,
-      },
-      ...prev,
-    ]);
+        duration: rx.duration || null,
+        notes: rx.notes || null,
+      });
+      setList((prev) => [created, ...prev]);
+    } catch {
+      notify.error("Couldn't add prescription", "Please try again.");
+    }
   };
 
+  const kpis = useMemo(
+    () => [
+      {
+        label: "Active",
+        value: String(list.filter((r) => r.status === "active").length),
+        icon: Pill,
+      },
+      {
+        label: "Completed",
+        value: String(list.filter((r) => r.status === "completed").length),
+        icon: CircleCheck,
+      },
+      {
+        label: "Expired",
+        value: String(list.filter((r) => r.status === "expired").length),
+        icon: Clock,
+      },
+    ],
+    [list],
+  );
+
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-10">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="font-semibold text-2xl tracking-tight">Prescriptions</h1>
           <p className="text-muted-foreground text-sm">
-            Medications prescribed across the clinic. Sample data.
+            Medications prescribed across the clinic.
           </p>
         </div>
         <Button
@@ -257,11 +216,7 @@ export function PrescriptionsView() {
       <Section description="Most recent first" title="Recent prescriptions">
         <div className="divide-y divide-border overflow-hidden rounded-2xl border bg-card/30">
           {list.map((rx) => (
-            <RxRow
-              key={rx.fileNumber + rx.medication + rx.date}
-              onOpen={() => openRx(rx)}
-              rx={rx}
-            />
+            <RxRow key={rx.id} onOpen={() => openRx(rx)} rx={rx} />
           ))}
         </div>
       </Section>

frontend/lib/prescriptions.ts

@@ -0,0 +1,74 @@
+import { apiFetch } from "@/lib/api-client";
+
+// A prescription. Mirrors the backend `src/types/prescription.ts`. Scoped to the
+// active clinic. `prescribedAt` is an ISO YYYY-MM-DD date.
+export type RxStatus = "active" | "completed" | "expired";
+
+export type Prescription = {
+  id: string;
+  fileNumber: string;
+  name: string;
+  initials: string;
+  medication: string;
+  dose: string;
+  frequency: string;
+  prescriber: string;
+  prescribedAt: string; // YYYY-MM-DD
+  status: RxStatus;
+  duration: string | null;
+  notes: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+// The fields the "New prescription" dialog collects; the backend fills the
+// prescriber (from the signed-in user), prescribedAt (today) and status.
+export type PrescriptionInput = {
+  fileNumber: string;
+  name: string;
+  initials: string;
+  medication: string;
+  dose: string;
+  frequency: string;
+  duration?: string | null;
+  notes?: string | null;
+  prescriber?: string;
+  prescribedAt?: string;
+  status?: RxStatus;
+};
+
+// "2026-06-05" -> "Jun 5, 2026" (matches the previous mock display format).
+export function formatPrescribedAt(iso: string): string {
+  return new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function listPrescriptions(): Promise<Prescription[]> {
+  return apiFetch<Prescription[]>("/api/prescriptions");
+}
+
+export function createPrescription(
+  input: PrescriptionInput,
+): Promise<Prescription> {
+  return apiFetch<Prescription>("/api/prescriptions", {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
+export function updatePrescription(
+  id: string,
+  input: PrescriptionInput,
+): Promise<Prescription> {
+  return apiFetch<Prescription>(`/api/prescriptions/${id}`, {
+    method: "PUT",
+    body: JSON.stringify(input),
+  });
+}
+
+export function deletePrescription(id: string): Promise<void> {
+  return apiFetch<void>(`/api/prescriptions/${id}`, { method: "DELETE" });
+}