frontend: messages search, care-team employee dialog, PCP picker + transfer, activity detail, analytics grid

- Messages: search the inbox and the compose member picker.
- Care Team: clickable member rows open an employee dialog showing role +
  permissions, with change-role (updateMemberRole) and remove.
- Patients: Primary Care is now a provider dropdown (defaults to self for a
  doctor); add a Transfer action + dialog wired to the transfer API.
- Activity: entries are clickable, opening a detail dialog.
- Analytics: Section takes a columns prop so each row fills evenly (no orphan
  card in Appointments).
- Add lib/staff.ts (listProviders), transferPatient client, rolePermissionSummary
  helper, and i18n keys for all new strings.

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

frontend/components/patients/patient-detail-sheet.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import { PatientFormDialog } from "@/components/chat/patient-form-dialog";
 import { PatientDetail } from "@/components/patients/patient-detail";
+import { TransferPatientDialog } from "@/components/patients/transfer-patient-dialog";
 import {
   Sheet,
   SheetHeader,
@@ -14,6 +15,7 @@ import {
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import { getPatient, type Patient } from "@/lib/patients";
+import { hasClinicalAccess, useActiveRole } from "@/lib/roles";
 
 type Status = "loading" | "ready" | "not-found";
 
@@ -54,9 +56,13 @@ export function PatientDetailSheet({
   onOpenChange: (open: boolean) => void;
 }) {
   const { t } = useTranslation();
+  const role = useActiveRole();
+  // Clinical roles can reassign a chart; show optimistically while role loads.
+  const canTransfer = role == null || hasClinicalAccess(role);
   const [patient, setPatient] = useState<Patient | null>(null);
   const [status, setStatus] = useState<Status>("loading");
   const [editOpen, setEditOpen] = useState(false);
+  const [transferOpen, setTransferOpen] = useState(false);
   // Bumped on open so the editor remounts with the latest patient data.
   const [editKey, setEditKey] = useState(0);
 
@@ -106,6 +112,9 @@ export function PatientDetailSheet({
                   setEditKey((k) => k + 1);
                   setEditOpen(true);
                 }}
+                onTransfer={
+                  canTransfer ? () => setTransferOpen(true) : undefined
+                }
                 patient={patient}
               />
             )}
@@ -123,6 +132,15 @@ export function PatientDetailSheet({
           patient={patient}
         />
       )}
+
+      {patient && (
+        <TransferPatientDialog
+          onOpenChange={setTransferOpen}
+          onTransferred={(updated) => setPatient(updated)}
+          open={transferOpen}
+          patient={patient}
+        />
+      )}
     </>
   );
 }

frontend/components/patients/patient-detail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Pencil } from "lucide-react";
+import { ArrowLeftRight, Pencil } from "lucide-react";
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -81,9 +81,11 @@ function TrendBlock({ trend }: { trend: Trend }) {
 export function PatientDetail({
   patient,
   onEdit,
+  onTransfer,
 }: {
   patient: Patient;
   onEdit?: () => void;
+  onTransfer?: () => void;
 }) {
   const { t } = useTranslation();
   const sex = t(`patientCard.sex.${patient.sex}`);
@@ -115,12 +117,25 @@ export function PatientDetail({
             </div>
           )}
         </div>
-        {onEdit && (
-          <Button onClick={onEdit} size="sm" type="button" variant="outline">
-            <Pencil className="size-4" />
-            {t("patientCard.edit")}
-          </Button>
-        )}
+        <div className="flex shrink-0 items-center gap-2">
+          {onTransfer && (
+            <Button
+              onClick={onTransfer}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <ArrowLeftRight className="size-4" />
+              {t("patients.transfer.action")}
+            </Button>
+          )}
+          {onEdit && (
+            <Button onClick={onEdit} size="sm" type="button" variant="outline">
+              <Pencil className="size-4" />
+              {t("patientCard.edit")}
+            </Button>
+          )}
+        </div>
       </div>
 
       <Section title={t("patientCard.overview")}>

frontend/components/patients/transfer-patient-dialog.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ROLE_LABELS } from "@/lib/access";
+import { type Patient, transferPatient } from "@/lib/patients";
+import { listProviders, type Provider } from "@/lib/staff";
+import { notify } from "@/lib/toast";
+
+const selectClass =
+  "h-9 w-full rounded-3xl border border-transparent bg-input/50 px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30";
+
+type Props = {
+  patient: Patient;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onTransferred: (patient: Patient) => void;
+};
+
+// Reassign a patient to another clinician. The new provider becomes the
+// patient's primary provider (and PCP label), which moves the chart into their
+// panel under per-doctor visibility.
+export function TransferPatientDialog({
+  patient,
+  open,
+  onOpenChange,
+  onTransferred,
+}: Props) {
+  const { t } = useTranslation();
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [providerId, setProviderId] = useState(patient.primaryProviderId ?? "");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setProviderId(patient.primaryProviderId ?? "");
+    setError(null);
+    let active = true;
+    listProviders()
+      .then((list) => active && setProviders(list))
+      .catch(() => active && setProviders([]));
+    return () => {
+      active = false;
+    };
+  }, [open, patient.primaryProviderId]);
+
+  const submit = async () => {
+    if (!providerId || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const updated = await transferPatient(patient.fileNumber, providerId);
+      onTransferred(updated);
+      notify.success(
+        t("patients.transfer.successTitle"),
+        t("patients.transfer.successBody", {
+          name: updated.name,
+          provider: updated.pcp,
+        }),
+      );
+      onOpenChange(false);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : t("patients.transfer.error");
+      setError(message);
+      notify.error(t("patients.transfer.errorTitle"), message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogPopup className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("patients.transfer.title")}</DialogTitle>
+          <DialogDescription>
+            {t("patients.transfer.description", { name: patient.name })}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogPanel className="flex flex-col gap-3">
+          {error && (
+            <p className="rounded-2xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </p>
+          )}
+          <label className="flex flex-col gap-1.5">
+            <span className="text-xs text-muted-foreground">
+              {t("patients.transfer.providerLabel")}
+            </span>
+            <select
+              className={selectClass}
+              onChange={(e) => setProviderId(e.target.value)}
+              value={providerId}
+            >
+              <option value="">{t("patients.transfer.choose")}</option>
+              {providers.map((p) => (
+                <option key={p.userId} value={p.userId}>
+                  {p.name} ·{" "}
+                  {ROLE_LABELS[p.role as keyof typeof ROLE_LABELS] ?? p.role}
+                </option>
+              ))}
+            </select>
+          </label>
+        </DialogPanel>
+        <DialogFooter>
+          <DialogClose render={<Button type="button" variant="outline" />}>
+            {t("patients.transfer.cancel")}
+          </DialogClose>
+          <Button
+            disabled={
+              submitting ||
+              !providerId ||
+              providerId === patient.primaryProviderId
+            }
+            onClick={submit}
+            type="button"
+          >
+            {submitting
+              ? t("patients.transfer.transferring")
+              : t("patients.transfer.confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogPopup>
+    </Dialog>
+  );
+}