feat: activity audit log written from all resource routes

Add the activity_log table, a best-effort recordActivity() service and a
GET /api/activity feed, and write entries on create/update/delete of
patients, notes, appointments, prescriptions and tasks. The Activity page
now shows the real audit trail (actor, action, patient context, time);
the fabricated signing hashes / approval badges are gone — that vision
stays deferred.

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

frontend/components/activity/activity-view.tsx

@@ -1,109 +1,59 @@
 "use client";
 
 import {
-  Clock,
+  Activity as ActivityIcon,
+  CalendarClock,
+  CalendarDays,
   FileText,
   Hash,
+  ListChecks,
   type LucideIcon,
   NotebookPen,
   Pill,
-  ShieldCheck,
   Stethoscope,
-  TriangleAlert,
 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
+import {
+  type ActivityEntityType,
+  type ActivityEntry,
+  listActivity,
+} from "@/lib/activity";
 import { cn } from "@/lib/utils";
 
-// All entries here are mock/placeholder data — there is no signing/ledger
-// backend yet. They illustrate temetro's patient-owned, signed-change vision:
-// every record change is signed (blockchain-style) and awaits patient approval.
+// A plain, tamper-evident audit log of record changes in the active clinic. (The
+// blockchain-style signing / patient-approval flow from the product vision is
+// separate and not built yet.)
 
-type ActivityStatus = "signed" | "pending";
-
-type ActivityEntry = {
-  id: string;
-  actor: string;
-  initials: string;
-  action: string;
-  patient: string;
-  fileNumber: string;
-  time: string;
-  hash: string;
-  status: ActivityStatus;
-  icon: LucideIcon;
+const entityIcon: Record<ActivityEntityType, LucideIcon> = {
+  patient: Stethoscope,
+  note: NotebookPen,
+  appointment: CalendarClock,
+  prescription: Pill,
+  task: ListChecks,
 };
 
-const entries: ActivityEntry[] = [
-  {
-    id: "1",
-    actor: "Dr. Okafor",
-    initials: "DO",
-    action: "Updated vitals",
-    patient: "Amina Yusuf",
-    fileNumber: "10293",
-    time: "Today, 10:24",
-    hash: "0x9f3a…c21",
-    status: "pending",
-    icon: Stethoscope,
-  },
-  {
-    id: "2",
-    actor: "Dr. Okafor",
-    initials: "DO",
-    action: "Added prescription — Lisinopril 10mg",
-    patient: "Amina Yusuf",
-    fileNumber: "10293",
-    time: "Today, 10:21",
-    hash: "0x4b8e…7df",
-    status: "pending",
-    icon: Pill,
-  },
-  {
-    id: "3",
-    actor: "Dr. Stein",
-    initials: "DS",
-    action: "Created note — Lab review",
-    patient: "Leila Haddad",
-    fileNumber: "10342",
-    time: "Today, 09:48",
-    hash: "0x1c07…a90",
-    status: "signed",
-    icon: NotebookPen,
-  },
-  {
-    id: "4",
-    actor: "Dr. Stein",
-    initials: "DS",
-    action: "Edited allergies — added Penicillin",
-    patient: "Daniel Mensah",
-    fileNumber: "10311",
-    time: "Yesterday, 16:05",
-    hash: "0xab12…44e",
-    status: "signed",
-    icon: TriangleAlert,
-  },
-  {
-    id: "5",
-    actor: "Dr. Okafor",
-    initials: "DO",
-    action: "Imported prior records",
-    patient: "Carlos Rivera",
-    fileNumber: "10358",
-    time: "Yesterday, 14:30",
-    hash: "0x77f0…b3c",
-    status: "signed",
-    icon: FileText,
-  },
-];
-
-const kpis = [
-  { label: "Pending approvals", value: "2", icon: Clock },
-  { label: "Signed today", value: "1", icon: ShieldCheck },
-  { label: "Changes this week", value: "37", icon: Hash },
-];
+// ISO timestamp -> "Today, 10:24" / "Yesterday, 16:05" / "Jun 3, 14:30".
+function formatTime(iso: string): string {
+  const d = new Date(iso);
+  const time = d.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  const sameDay = (a: Date, b: Date) =>
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+  if (sameDay(d, today)) return `Today, ${time}`;
+  if (sameDay(d, yesterday)) return `Yesterday, ${time}`;
+  return `${d.toLocaleDateString("en-US", { month: "short", day: "numeric" })}, ${time}`;
+}
 
 function Kpi({
   label,
@@ -130,13 +80,46 @@ function Kpi({
 }
 
 export function ActivityView() {
+  const [entries, setEntries] = useState<ActivityEntry[]>([]);
+
+  useEffect(() => {
+    let active = true;
+    listActivity()
+      .then((data) => {
+        if (active) setEntries(data);
+      })
+      .catch(() => {
+        /* api-client redirects on 401; otherwise leave the feed empty */
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const kpis = useMemo(() => {
+    const now = new Date();
+    const startOfToday = new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate(),
+    );
+    const startOfWeek = new Date(startOfToday);
+    startOfWeek.setDate(startOfToday.getDate() - now.getDay());
+    const today = entries.filter((e) => new Date(e.createdAt) >= startOfToday);
+    const week = entries.filter((e) => new Date(e.createdAt) >= startOfWeek);
+    return [
+      { label: "Changes today", value: String(today.length), icon: ActivityIcon },
+      { label: "This week", value: String(week.length), icon: CalendarDays },
+      { label: "Total recorded", value: String(entries.length), icon: Hash },
+    ];
+  }, [entries]);
+
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col gap-10 px-6 py-10">
       <div>
         <h1 className="font-semibold text-2xl tracking-tight">Activity</h1>
         <p className="text-muted-foreground text-sm">
-          A signed, tamper-evident log of record changes awaiting patient
-          approval. Sample data.
+          An audit log of record changes across the clinic.
         </p>
       </div>
 
@@ -146,66 +129,59 @@ export function ActivityView() {
         ))}
       </div>
 
-      <ol className="flex flex-col">
-        {entries.map((entry, i) => {
-          const Icon = entry.icon;
-          const isLast = i === entries.length - 1;
-          return (
-            <li className="flex gap-4" key={entry.id}>
-              <div className="flex flex-col items-center">
-                <div className="flex size-9 shrink-0 items-center justify-center rounded-full border bg-card text-muted-foreground">
-                  <Icon className="size-4" />
+      {entries.length === 0 ? (
+        <div className="rounded-2xl border border-dashed bg-card/20 px-4 py-12 text-center text-muted-foreground text-sm">
+          No activity yet. Changes to patients, notes, appointments,
+          prescriptions and tasks will appear here.
+        </div>
+      ) : (
+        <ol className="flex flex-col">
+          {entries.map((entry, i) => {
+            const Icon = entityIcon[entry.entityType] ?? FileText;
+            const isLast = i === entries.length - 1;
+            const context = [
+              entry.actorName,
+              entry.patientName &&
+                `${entry.patientName}${
+                  entry.patientFileNumber ? ` (#${entry.patientFileNumber})` : ""
+                }`,
+            ]
+              .filter(Boolean)
+              .join(" · ");
+            return (
+              <li className="flex gap-4" key={entry.id}>
+                <div className="flex flex-col items-center">
+                  <div className="flex size-9 shrink-0 items-center justify-center rounded-full border bg-card text-muted-foreground">
+                    <Icon className="size-4" />
+                  </div>
+                  {!isLast && <div className="mt-1 w-px flex-1 bg-border" />}
                 </div>
-                {!isLast && <div className="mt-1 w-px flex-1 bg-border" />}
-              </div>
 
-              <div className={cn("flex-1", isLast ? "pb-0" : "pb-6")}>
-                <div className="flex items-start justify-between gap-2">
+                <div className={cn("flex-1", isLast ? "pb-0" : "pb-6")}>
                   <span className="font-medium text-foreground text-sm">
                     {entry.action}
                   </span>
-                  {entry.status === "signed" ? (
-                    <Badge
-                      className="shrink-0 border-success/40 text-success"
-                      variant="outline"
-                    >
-                      <ShieldCheck className="size-3" />
-                      Signed
-                    </Badge>
-                  ) : (
-                    <Badge
-                      className="shrink-0 border-warning/40 text-warning"
-                      variant="outline"
-                    >
-                      <Clock className="size-3" />
-                      Pending approval
-                    </Badge>
-                  )}
-                </div>
 
-                <div className="mt-1 flex items-center gap-2">
-                  <Avatar className="size-5">
-                    <AvatarFallback className="text-[10px]">
-                      {entry.initials}
-                    </AvatarFallback>
-                  </Avatar>
-                  <span className="text-muted-foreground text-xs">
-                    {entry.actor} · {entry.patient} (#{entry.fileNumber})
-                  </span>
-                </div>
+                  <div className="mt-1 flex items-center gap-2">
+                    <Avatar className="size-5">
+                      <AvatarFallback className="text-[10px]">
+                        {entry.actorInitials}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="text-muted-foreground text-xs">
+                      {context}
+                    </span>
+                  </div>
 
-                <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
-                  <span className="text-muted-foreground">{entry.time}</span>
-                  <span className="inline-flex items-center gap-1 rounded-md border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
-                    <Hash className="size-3" />
-                    {entry.hash}
-                  </span>
+                  <div className="mt-2 text-muted-foreground text-xs">
+                    {formatTime(entry.createdAt)}
+                  </div>
                 </div>
-              </div>
-            </li>
-          );
-        })}
-      </ol>
+              </li>
+            );
+          })}
+        </ol>
+      )}
     </div>
   );
 }