feat: standardize cms data views

modules/elders/components/EldersClient.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { FormEvent, useMemo, useState } from "react";
-import { Edit3, Plus, Trash2, X } from "lucide-react";
+import { Edit3, Filter, Plus, Search, Trash2 } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Permission } from "@/modules/core/types";
-import type { Elder, ElderInput } from "@/modules/elders/types";
+import type { CareLevel, Elder, ElderInput, ElderStatus } from "@/modules/elders/types";
 import { CARE_LEVEL_LABELS, ELDER_STATUS_LABELS, GENDER_LABELS } from "@/modules/elders/types";
 
 type EldersClientProps = {
@@ -30,6 +31,10 @@ const emptyInput: ElderInput = {
   medicalNotes: "",
 };
 
+const PAGE_SIZE = 8;
+const ALL_STATUS = "all";
+const ALL_CARE_LEVELS = "all";
+
 function elderToInput(elder: Elder): ElderInput {
   return {
     name: elder.name,
@@ -45,12 +50,53 @@ function elderToInput(elder: Elder): ElderInput {
   };
 }
 
+function formatDateTime(value: string): string {
+  return new Date(value).toLocaleString("zh-CN");
+}
+
+function getRiskLabel(elder: Elder): { label: string; variant: "danger" | "warning" | "success" } {
+  if (elder.careLevel === "intensive") {
+    return { label: "红色重点", variant: "danger" };
+  }
+
+  if (elder.status === "pending" || elder.careLevel === "assisted") {
+    return { label: "黄色关注", variant: "warning" };
+  }
+
+  return { label: "绿色稳定", variant: "success" };
+}
+
+function matchesFilters(
+  elder: Elder,
+  query: string,
+  statusFilter: ElderStatus | typeof ALL_STATUS,
+  careLevelFilter: CareLevel | typeof ALL_CARE_LEVELS,
+): boolean {
+  const normalizedQuery = query.trim().toLowerCase();
+  const matchesSearch =
+    normalizedQuery.length === 0 ||
+    [elder.name, elder.room, elder.bed, elder.primaryContact, elder.phone, elder.medicalNotes]
+      .join(" ")
+      .toLowerCase()
+      .includes(normalizedQuery);
+  const matchesStatus = statusFilter === ALL_STATUS || elder.status === statusFilter;
+  const matchesCareLevel = careLevelFilter === ALL_CARE_LEVELS || elder.careLevel === careLevelFilter;
+
+  return matchesSearch && matchesStatus && matchesCareLevel;
+}
+
 export function EldersClient({ initialElders, permissions }: EldersClientProps): React.ReactElement {
   const [elders, setElders] = useState(initialElders);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [form, setForm] = useState<ElderInput>(emptyInput);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Elder | null>(null);
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<ElderStatus | typeof ALL_STATUS>(ALL_STATUS);
+  const [careLevelFilter, setCareLevelFilter] = useState<CareLevel | typeof ALL_CARE_LEVELS>(ALL_CARE_LEVELS);
+  const [page, setPage] = useState(1);
 
   const canCreate = permissions.includes("elder:create");
   const canUpdate = permissions.includes("elder:update");
@@ -62,9 +108,19 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     const activeCount = elders.filter((elder) => elder.status === "active").length;
     const pendingCount = elders.filter((elder) => elder.status === "pending").length;
     const intensiveCount = elders.filter((elder) => elder.careLevel === "intensive").length;
-    return { activeCount, pendingCount, intensiveCount };
+    const warningCount = elders.filter((elder) => getRiskLabel(elder).variant !== "success").length;
+    return { activeCount, pendingCount, intensiveCount, warningCount };
   }, [elders]);
 
+  const filteredElders = useMemo(
+    () => elders.filter((elder) => matchesFilters(elder, query, statusFilter, careLevelFilter)),
+    [careLevelFilter, elders, query, statusFilter],
+  );
+  const pageCount = Math.max(1, Math.ceil(filteredElders.length / PAGE_SIZE));
+  const safePage = Math.min(page, pageCount);
+  const pageStart = (safePage - 1) * PAGE_SIZE;
+  const visibleElders = filteredElders.slice(pageStart, pageStart + PAGE_SIZE);
+
   function updateField<K extends keyof ElderInput>(key: K, value: ElderInput[K]): void {
     setForm((current) => ({ ...current, [key]: value }));
   }
@@ -73,12 +129,39 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     setEditingId(null);
     setForm(emptyInput);
     setMessage("");
+    setIsFormOpen(true);
   }
 
   function beginEdit(elder: Elder): void {
     setEditingId(elder.id);
     setForm(elderToInput(elder));
     setMessage("");
+    setIsFormOpen(true);
+  }
+
+  function closeForm(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsFormOpen(false);
+    setEditingId(null);
+    setForm(emptyInput);
+  }
+
+  function updateQuery(value: string): void {
+    setQuery(value);
+    setPage(1);
+  }
+
+  function updateStatusFilter(value: string): void {
+    setStatusFilter(value as ElderStatus | typeof ALL_STATUS);
+    setPage(1);
+  }
+
+  function updateCareLevelFilter(value: string): void {
+    setCareLevelFilter(value as CareLevel | typeof ALL_CARE_LEVELS);
+    setPage(1);
   }
 
   async function refreshElders(): Promise<void> {
@@ -115,10 +198,15 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     await refreshElders();
     setEditingId(null);
     setForm(emptyInput);
+    setIsFormOpen(false);
     setMessage(result.reason);
   }
 
-  async function handleDelete(elder: Elder): Promise<void> {
+  async function handleDelete(): Promise<void> {
+    if (!deleteTarget) {
+      return;
+    }
+
     if (!canDelete) {
       setMessage("当前角色无权删除老人档案");
       return;
@@ -127,7 +215,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     setIsPending(true);
     setMessage("");
 
-    const response = await fetch(`/api/elders/${elder.id}`, { method: "DELETE" });
+    const response = await fetch(`/api/elders/${deleteTarget.id}`, { method: "DELETE" });
     const result = (await response.json()) as ApiResult<{ elder: Elder }>;
     setIsPending(false);
 
@@ -137,6 +225,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     }
 
     await refreshElders();
+    setDeleteTarget(null);
     setMessage(result.reason);
   }
 
@@ -146,160 +235,116 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
         <div>
           <Badge variant="success">全栈 CRUD</Badge>
           <h1 className="mt-3 text-3xl font-semibold tracking-normal">老人档案</h1>
-          <p className="mt-2 text-sm text-muted-foreground">服务端持久化档案、权限校验和审计记录。</p>
+          <p className="mt-2 text-sm text-muted-foreground">列表管理、筛选搜索、分页、弹窗维护和审计持久化。</p>
         </div>
-        <div className="grid gap-2 text-sm sm:grid-cols-3">
-          <div className="rounded-md border bg-white/72 px-4 py-3">
-            <p className="text-muted-foreground">在院老人</p>
-            <p className="mt-1 text-2xl font-semibold">{metrics.activeCount}</p>
-          </div>
-          <div className="rounded-md border bg-white/72 px-4 py-3">
-            <p className="text-muted-foreground">待入住</p>
-            <p className="mt-1 text-2xl font-semibold">{metrics.pendingCount}</p>
-          </div>
-          <div className="rounded-md border bg-white/72 px-4 py-3">
-            <p className="text-muted-foreground">重点照护</p>
-            <p className="mt-1 text-2xl font-semibold">{metrics.intensiveCount}</p>
-          </div>
+        <div className="flex flex-wrap gap-2">
+          <Button disabled={!canCreate} onClick={beginCreate} type="button">
+            <Plus className="size-4" aria-hidden="true" />
+            新增老人
+          </Button>
         </div>
       </section>
 
-      <section className="grid gap-4 xl:grid-cols-[0.82fr_1.18fr]">
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle>{isEditing ? "编辑档案" : "新增档案"}</CardTitle>
-            {isEditing ? (
-              <Button type="button" variant="ghost" size="sm" onClick={beginCreate}>
-                <X className="size-4" aria-hidden="true" />
-                取消
-              </Button>
-            ) : null}
+          <CardHeader className="p-4">
+            <CardDescription>在院老人</CardDescription>
+            <CardTitle className="text-3xl">{metrics.activeCount}</CardTitle>
           </CardHeader>
-          <CardContent>
-            <form className="grid gap-3" onSubmit={handleSubmit}>
-              <label className="grid gap-1.5 text-sm font-medium">
-                姓名
-                <Input value={form.name} onChange={(event) => updateField("name", event.target.value)} />
-              </label>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <label className="grid gap-1.5 text-sm font-medium">
-                  性别
-                  <select
-                    className="h-11 rounded-md border bg-background px-3 text-sm"
-                    value={form.gender}
-                    onChange={(event) => updateField("gender", event.target.value as ElderInput["gender"])}
-                  >
-                    {Object.entries(GENDER_LABELS).map(([value, label]) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label className="grid gap-1.5 text-sm font-medium">
-                  年龄
-                  <Input
-                    type="number"
-                    min={0}
-                    max={130}
-                    value={form.age}
-                    onChange={(event) => updateField("age", Number(event.target.value))}
-                  />
-                </label>
-              </div>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <label className="grid gap-1.5 text-sm font-medium">
-                  护理等级
-                  <select
-                    className="h-11 rounded-md border bg-background px-3 text-sm"
-                    value={form.careLevel}
-                    onChange={(event) => updateField("careLevel", event.target.value as ElderInput["careLevel"])}
-                  >
-                    {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label className="grid gap-1.5 text-sm font-medium">
-                  状态
-                  <select
-                    className="h-11 rounded-md border bg-background px-3 text-sm"
-                    value={form.status}
-                    onChange={(event) => updateField("status", event.target.value as ElderInput["status"])}
-                  >
-                    {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-              </div>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <label className="grid gap-1.5 text-sm font-medium">
-                  房间
-                  <Input value={form.room} onChange={(event) => updateField("room", event.target.value)} />
-                </label>
-                <label className="grid gap-1.5 text-sm font-medium">
-                  床位
-                  <Input value={form.bed} onChange={(event) => updateField("bed", event.target.value)} />
-                </label>
-              </div>
-              <label className="grid gap-1.5 text-sm font-medium">
-                联系人
-                <Input
-                  value={form.primaryContact}
-                  onChange={(event) => updateField("primaryContact", event.target.value)}
-                />
-              </label>
-              <label className="grid gap-1.5 text-sm font-medium">
-                联系电话
-                <Input value={form.phone} onChange={(event) => updateField("phone", event.target.value)} />
-              </label>
-              <label className="grid gap-1.5 text-sm font-medium">
-                健康备注
-                <textarea
-                  className="min-h-24 rounded-md border bg-background px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-                  value={form.medicalNotes}
-                  onChange={(event) => updateField("medicalNotes", event.target.value)}
-                />
-              </label>
-
-              {message ? (
-                <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
-                  {message}
-                </p>
-              ) : null}
-
-              <Button type="submit" disabled={isPending || !canSubmit}>
-                <Plus className="size-4" aria-hidden="true" />
-                {isEditing ? "保存修改" : "新增老人"}
-              </Button>
-            </form>
-          </CardContent>
         </Card>
-
         <Card>
-          <CardHeader>
-            <CardTitle>档案列表</CardTitle>
+          <CardHeader className="p-4">
+            <CardDescription>待入住</CardDescription>
+            <CardTitle className="text-3xl">{metrics.pendingCount}</CardTitle>
           </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto rounded-md border">
-              <table className="w-full min-w-[820px] text-sm">
-                <thead className="bg-secondary text-left text-xs text-muted-foreground">
-                  <tr>
-                    <th className="px-4 py-3 font-medium">姓名</th>
-                    <th className="px-4 py-3 font-medium">照护</th>
-                    <th className="px-4 py-3 font-medium">床位</th>
-                    <th className="px-4 py-3 font-medium">联系人</th>
-                    <th className="px-4 py-3 font-medium">状态</th>
-                    <th className="px-4 py-3 text-right font-medium">操作</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y bg-card">
-                  {elders.map((elder) => (
+        </Card>
+        <Card className="border-red-200 bg-red-50/70">
+          <CardHeader className="p-4">
+            <CardDescription className="text-red-700">红色重点</CardDescription>
+            <CardTitle className="text-3xl text-red-700">{metrics.intensiveCount}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="p-4">
+            <CardDescription>需关注标记</CardDescription>
+            <CardTitle className="text-3xl">{metrics.warningCount}</CardTitle>
+          </CardHeader>
+        </Card>
+      </section>
+
+      <Card>
+        <CardHeader className="gap-4">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+            <div>
+              <CardTitle>档案列表</CardTitle>
+              <CardDescription className="mt-1">
+                共 {filteredElders.length} 条匹配记录，按状态、照护等级和关键词快速定位。
+              </CardDescription>
+            </div>
+            <div className="grid gap-2 sm:grid-cols-[minmax(220px,1fr)_150px_150px]">
+              <label className="relative block">
+                <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  className="pl-9"
+                  onChange={(event) => updateQuery(event.target.value)}
+                  placeholder="搜索姓名、床位、联系人"
+                  value={query}
+                />
+              </label>
+              <label className="relative block">
+                <Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <select
+                  className="h-11 w-full rounded-md border bg-background px-9 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                  onChange={(event) => updateStatusFilter(event.target.value)}
+                  value={statusFilter}
+                >
+                  <option value={ALL_STATUS}>全部状态</option>
+                  {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <select
+                className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                onChange={(event) => updateCareLevelFilter(event.target.value)}
+                value={careLevelFilter}
+              >
+                <option value={ALL_CARE_LEVELS}>全部照护</option>
+                {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
+          ) : null}
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto rounded-md border">
+            <table className="w-full min-w-[980px] text-sm">
+              <thead className="bg-secondary text-left text-xs text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 font-medium">姓名</th>
+                  <th className="px-4 py-3 font-medium">照护</th>
+                  <th className="px-4 py-3 font-medium">床位</th>
+                  <th className="px-4 py-3 font-medium">联系人</th>
+                  <th className="px-4 py-3 font-medium">状态</th>
+                  <th className="px-4 py-3 font-medium">标记</th>
+                  <th className="px-4 py-3 text-right font-medium">操作</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y bg-card">
+                {visibleElders.map((elder) => {
+                  const risk = getRiskLabel(elder);
+
+                  return (
                     <tr key={elder.id}>
                       <td className="px-4 py-3">
                         <p className="font-medium">{elder.name}</p>
@@ -319,24 +364,27 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
                           {ELDER_STATUS_LABELS[elder.status]}
                         </Badge>
                       </td>
+                      <td className="px-4 py-3">
+                        <Badge variant={risk.variant}>{risk.label}</Badge>
+                      </td>
                       <td className="px-4 py-3">
                         <div className="flex justify-end gap-2">
                           <Button
+                            disabled={!canUpdate}
+                            onClick={() => beginEdit(elder)}
+                            size="sm"
                             type="button"
                             variant="outline"
-                            size="sm"
-                            onClick={() => beginEdit(elder)}
-                            disabled={!canUpdate}
                           >
                             <Edit3 className="size-4" aria-hidden="true" />
                             编辑
                           </Button>
                           <Button
+                            disabled={!canDelete || isPending}
+                            onClick={() => setDeleteTarget(elder)}
+                            size="sm"
                             type="button"
                             variant="destructive"
-                            size="sm"
-                            onClick={() => void handleDelete(elder)}
-                            disabled={!canDelete || isPending}
                           >
                             <Trash2 className="size-4" aria-hidden="true" />
                             删除
@@ -344,21 +392,180 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
                         </div>
                       </td>
                     </tr>
-                  ))}
-                  {elders.length === 0 ? (
-                    <tr>
-                      <td className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
-                        暂无老人档案
-                      </td>
-                    </tr>
-                  ) : null}
-                </tbody>
-              </table>
+                  );
+                })}
+                {visibleElders.length === 0 ? (
+                  <tr>
+                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={7}>
+                      暂无匹配老人档案
+                    </td>
+                  </tr>
+                ) : null}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm text-muted-foreground">
+              第 {safePage} / {pageCount} 页
+            </p>
+            <div className="flex gap-2">
+              <Button
+                disabled={safePage === 1}
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                上一页
+              </Button>
+              <Button
+                disabled={safePage === pageCount}
+                onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                下一页
+              </Button>
             </div>
-          </CardContent>
-        </Card>
-      </section>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog
+        description="保存后会写入服务端数据文件，并生成审计记录。"
+        onClose={closeForm}
+        open={isFormOpen}
+        title={isEditing ? "编辑老人档案" : "新增老人档案"}
+      >
+        <form className="grid gap-3" id="elder-form" onSubmit={handleSubmit}>
+          <label className="grid gap-1.5 text-sm font-medium">
+            姓名
+            <Input value={form.name} onChange={(event) => updateField("name", event.target.value)} />
+          </label>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="grid gap-1.5 text-sm font-medium">
+              性别
+              <select
+                className="h-11 rounded-md border bg-background px-3 text-sm"
+                onChange={(event) => updateField("gender", event.target.value as ElderInput["gender"])}
+                value={form.gender}
+              >
+                {Object.entries(GENDER_LABELS).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="grid gap-1.5 text-sm font-medium">
+              年龄
+              <Input
+                max={130}
+                min={0}
+                onChange={(event) => updateField("age", Number(event.target.value))}
+                type="number"
+                value={form.age}
+              />
+            </label>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="grid gap-1.5 text-sm font-medium">
+              护理等级
+              <select
+                className="h-11 rounded-md border bg-background px-3 text-sm"
+                onChange={(event) => updateField("careLevel", event.target.value as ElderInput["careLevel"])}
+                value={form.careLevel}
+              >
+                {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="grid gap-1.5 text-sm font-medium">
+              状态
+              <select
+                className="h-11 rounded-md border bg-background px-3 text-sm"
+                onChange={(event) => updateField("status", event.target.value as ElderInput["status"])}
+                value={form.status}
+              >
+                {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="grid gap-1.5 text-sm font-medium">
+              房间
+              <Input value={form.room} onChange={(event) => updateField("room", event.target.value)} />
+            </label>
+            <label className="grid gap-1.5 text-sm font-medium">
+              床位
+              <Input value={form.bed} onChange={(event) => updateField("bed", event.target.value)} />
+            </label>
+          </div>
+          <label className="grid gap-1.5 text-sm font-medium">
+            联系人
+            <Input value={form.primaryContact} onChange={(event) => updateField("primaryContact", event.target.value)} />
+          </label>
+          <label className="grid gap-1.5 text-sm font-medium">
+            联系电话
+            <Input value={form.phone} onChange={(event) => updateField("phone", event.target.value)} />
+          </label>
+          <label className="grid gap-1.5 text-sm font-medium">
+            健康备注
+            <textarea
+              className="min-h-24 rounded-md border bg-background px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              onChange={(event) => updateField("medicalNotes", event.target.value)}
+              value={form.medicalNotes}
+            />
+          </label>
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
+          ) : null}
+          <div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={closeForm} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending || !canSubmit} type="submit">
+              <Plus className="size-4" aria-hidden="true" />
+              {isEditing ? "保存修改" : "新增老人"}
+            </Button>
+          </div>
+        </form>
+      </Dialog>
+
+      <Dialog
+        className="max-w-md"
+        description={deleteTarget ? `确认删除 ${deleteTarget.name} 的档案？该操作会写入审计日志。` : undefined}
+        onClose={() => setDeleteTarget(null)}
+        open={deleteTarget !== null}
+        title="删除确认"
+      >
+        <div className="flex flex-col gap-4">
+          {deleteTarget ? (
+            <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+              {deleteTarget.name}，{deleteTarget.room}-{deleteTarget.bed}，最近更新：
+              {formatDateTime(deleteTarget.updatedAt)}
+            </div>
+          ) : null}
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={() => setDeleteTarget(null)} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending || !canDelete} onClick={() => void handleDelete()} type="button" variant="destructive">
+              删除档案
+            </Button>
+          </div>
+        </div>
+      </Dialog>
     </div>
   );
 }
-