feat: improve bed workspace layout

modules/facilities/components/BedsWorkspace.tsx

@@ -6,9 +6,11 @@ import { BedDouble, DoorOpen, History, MoveRight, UserCheck, UserMinus, Wrench }
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/input";
 import { Select, type SelectOption } from "@/components/ui/select";
 import { Table } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Admission, BedStatus, FacilityBed, Permission, Room } from "@/modules/core/types";
 import type { Elder } from "@/modules/elders/types";
@@ -24,6 +26,11 @@ type BedsWorkspaceProps = {
 };
 
 type WorkspaceTab = "overview" | "operations" | "history";
+type BedDetailTab = "context" | "records" | "actions";
+type RoomView = {
+  room: Room;
+  beds: FacilityBed[];
+};
 
 const workspaceTabs: Array<{ value: WorkspaceTab; label: string }> = [
   { value: "overview", label: "概览" },
@@ -31,6 +38,12 @@ const workspaceTabs: Array<{ value: WorkspaceTab; label: string }> = [
   { value: "history", label: "记录" },
 ];
 
+const bedDetailTabs: Array<{ value: BedDetailTab; label: string }> = [
+  { value: "context", label: "上下文" },
+  { value: "records", label: "流水记录" },
+  { value: "actions", label: "专项办理" },
+];
+
 const bedStatusLabels: Record<BedStatus, string> = {
   available: "空闲",
   occupied: "占用",
@@ -44,6 +57,13 @@ const admissionStatusLabels: Record<Admission["status"], string> = {
   discharged: "已退住",
 };
 
+const contextKindLabels: Record<OperationalContextLine["kind"], string> = {
+  admission: "入住",
+  care: "照护",
+  health: "健康",
+  incident: "预警",
+};
+
 function formatDateTime(value: string): string {
   return new Date(value).toLocaleString("zh-CN");
 }
@@ -65,6 +85,24 @@ function admissionBedLabel(admission: Admission): string {
   return `${admission.roomName}-${admission.bedCode}`;
 }
 
+function buildRoomViews(rooms: Room[], beds: FacilityBed[]): RoomView[] {
+  const bedsByRoomId = new Map<string, FacilityBed[]>();
+  for (const bed of beds) {
+    const roomBeds = bedsByRoomId.get(bed.roomId) ?? [];
+    roomBeds.push(bed);
+    bedsByRoomId.set(bed.roomId, roomBeds);
+  }
+
+  return [...rooms]
+    .sort((first, second) => first.code.localeCompare(second.code, "zh-CN", { numeric: true }))
+    .map((room) => ({
+      room,
+      beds: (bedsByRoomId.get(room.id) ?? []).sort((first, second) =>
+        first.code.localeCompare(second.code, "zh-CN", { numeric: true }),
+      ),
+    }));
+}
+
 function makeSelectOptions(items: Array<{ id: string; label: string }>, emptyLabel: string): SelectOption[] {
   return [
     { value: "", label: emptyLabel, disabled: true },
@@ -72,6 +110,32 @@ function makeSelectOptions(items: Array<{ id: string; label: string }>, emptyLab
   ];
 }
 
+function bedTileClass(status: BedStatus): string {
+  switch (status) {
+    case "available":
+      return "border-emerald-200 bg-emerald-50 text-emerald-900 hover:border-emerald-400";
+    case "occupied":
+      return "border-zinc-200 bg-zinc-50 text-zinc-900 hover:border-zinc-400";
+    case "maintenance":
+      return "border-amber-200 bg-amber-50 text-amber-950 hover:border-amber-400";
+    case "disabled":
+      return "border-rose-200 bg-rose-50 text-rose-950 hover:border-rose-400";
+  }
+}
+
+function statusDotClass(status: BedStatus): string {
+  switch (status) {
+    case "available":
+      return "bg-emerald-500";
+    case "occupied":
+      return "bg-zinc-500";
+    case "maintenance":
+      return "bg-amber-500";
+    case "disabled":
+      return "bg-rose-500";
+  }
+}
+
 export function BedsWorkspace({
   bedContexts = {},
   initialRooms,
@@ -95,6 +159,8 @@ export function BedsWorkspace({
   const [transferNotes, setTransferNotes] = useState("");
   const [dischargeAdmissionId, setDischargeAdmissionId] = useState("");
   const [dischargeNotes, setDischargeNotes] = useState("");
+  const [selectedBedId, setSelectedBedId] = useState("");
+  const [bedDetailTab, setBedDetailTab] = useState<BedDetailTab>("context");
 
   const canManageAdmissions = permissions.includes("admission:manage");
   const activeAdmissions = useMemo(() => admissions.filter((admission) => admission.status === "active"), [admissions]);
@@ -104,6 +170,15 @@ export function BedsWorkspace({
   const maintenanceBeds = beds.filter((bed) => bed.status === "maintenance").length;
   const occupancyRate = beds.length > 0 ? Math.round((occupiedBeds / beds.length) * 100) : 0;
   const admissionEligibleElders = elders.filter((elder) => !activeElderIds.has(elder.id));
+  const roomViews = useMemo(() => buildRoomViews(rooms, beds), [rooms, beds]);
+  const selectedBed = useMemo(() => beds.find((bed) => bed.id === selectedBedId), [beds, selectedBedId]);
+  const selectedAdmission = selectedBed
+    ? activeAdmissions.find((admission) => admission.bedId === selectedBed.id)
+    : undefined;
+  const selectedBedAdmissions = selectedBed
+    ? admissions.filter((admission) => admission.bedId === selectedBed.id)
+    : [];
+  const selectedBedContext = selectedBed ? bedContexts[selectedBed.id] : undefined;
 
   const elderOptions = makeSelectOptions(
     admissionEligibleElders.map((elder) => ({ id: elder.id, label: `${elder.name} / ${elder.phone}` })),
@@ -121,6 +196,17 @@ export function BedsWorkspace({
     "选择在住记录",
   );
 
+  function openBedDetail(bed: FacilityBed, initialTab: BedDetailTab = "context"): void {
+    setSelectedBedId(bed.id);
+    setBedDetailTab(initialTab);
+  }
+
+  function startAdmissionFromBed(bed: FacilityBed): void {
+    setAdmitBedId(bed.id);
+    setSelectedBedId(bed.id);
+    setBedDetailTab("actions");
+  }
+
   async function refreshData(): Promise<void> {
     const [eldersResponse, roomsResponse, bedsResponse, admissionsResponse] = await Promise.all([
       fetch("/api/elders"),
@@ -187,6 +273,43 @@ export function BedsWorkspace({
     setMessage(result.reason);
   }
 
+  async function submitAdmissionForBed(event: FormEvent<HTMLFormElement>, bed: FacilityBed): Promise<void> {
+    event.preventDefault();
+    if (!canManageAdmissions) {
+      setMessage("当前角色无权办理入住");
+      return;
+    }
+    if (bed.status !== "available") {
+      setMessage("当前床位不可办理入住");
+      return;
+    }
+    if (!admitElderId) {
+      setMessage("请选择老人");
+      return;
+    }
+
+    setIsPending(true);
+    setMessage("");
+    const response = await fetch("/api/admissions", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ elderId: admitElderId, bedId: bed.id, notes: admitNotes }),
+    });
+    const result = (await response.json()) as ApiResult<{ admission: Admission }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setAdmitElderId("");
+    setAdmitBedId("");
+    setAdmitNotes("");
+    await refreshData();
+    setMessage(result.reason);
+  }
+
   async function submitTransfer(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
     const admission = activeAdmissions.find((item) => item.id === transferAdmissionId);
@@ -221,6 +344,39 @@ export function BedsWorkspace({
     setMessage("换床已办理");
   }
 
+  async function submitTransferForAdmission(event: FormEvent<HTMLFormElement>, admission: Admission): Promise<void> {
+    event.preventDefault();
+    if (!canManageAdmissions) {
+      setMessage("当前角色无权办理换床");
+      return;
+    }
+    if (!transferBedId) {
+      setMessage("请选择新床位");
+      return;
+    }
+
+    setIsPending(true);
+    setMessage("");
+    const response = await fetch("/api/admissions", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ elderId: admission.elderId, bedId: transferBedId, notes: transferNotes || "办理换床" }),
+    });
+    const result = (await response.json()) as ApiResult<{ admission: Admission }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setTransferAdmissionId("");
+    setTransferBedId("");
+    setTransferNotes("");
+    await refreshData();
+    setMessage("换床已办理");
+  }
+
   async function submitDischarge(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
     if (!canManageAdmissions) {
@@ -253,6 +409,34 @@ export function BedsWorkspace({
     setMessage(result.reason);
   }
 
+  async function submitDischargeForAdmission(event: FormEvent<HTMLFormElement>, admission: Admission): Promise<void> {
+    event.preventDefault();
+    if (!canManageAdmissions) {
+      setMessage("当前角色无权办理退住");
+      return;
+    }
+
+    setIsPending(true);
+    setMessage("");
+    const response = await fetch(`/api/admissions/${admission.id}`, {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ notes: dischargeNotes }),
+    });
+    const result = (await response.json()) as ApiResult<{ admission: Admission }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setDischargeAdmissionId("");
+    setDischargeNotes("");
+    await refreshData();
+    setMessage(result.reason);
+  }
+
   return (
     <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
       <section className="flex border-b pb-4">
@@ -324,97 +508,65 @@ export function BedsWorkspace({
             </Card>
           </section>
 
-          <section className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
+          <section className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
             <Card>
               <CardHeader>
-                <CardTitle>房间台账</CardTitle>
+                <CardTitle>房间格子视图</CardTitle>
+                <CardDescription>按房间查看床位占用、维修、停用和待入住空床。</CardDescription>
               </CardHeader>
-              <CardContent>
-                <div className="overflow-x-auto rounded-md border">
-                  <Table className="w-full min-w-[620px] text-sm">
-                    <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
-                      <Table.Row>
-                        <Table.Head className="px-4 py-3 font-medium">房间</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">编号</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">容量</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">床位</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
-                      </Table.Row>
-                    </Table.Header>
-                    <Table.Body className="divide-y bg-card">
-                      {rooms.map((room) => (
-                        <Table.Row key={room.id}>
-                          <Table.Cell className="px-4 py-3 font-medium">{room.name}</Table.Cell>
-                          <Table.Cell className="px-4 py-3 text-muted-foreground">{room.code}</Table.Cell>
-                          <Table.Cell className="px-4 py-3">{room.capacity}</Table.Cell>
-                          <Table.Cell className="px-4 py-3">
-                            {room.occupiedBedCount}/{room.bedCount}
-                          </Table.Cell>
-                          <Table.Cell className="px-4 py-3">
-                            <Badge variant={room.status === "active" ? "success" : "danger"}>{room.status}</Badge>
-                          </Table.Cell>
-                        </Table.Row>
-                      ))}
-                      {rooms.length === 0 ? (
-                        <Table.Row>
-                          <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
-                            暂无房间主数据
-                          </Table.Cell>
-                        </Table.Row>
-                      ) : null}
-                    </Table.Body>
-                  </Table>
-                </div>
+              <CardContent className="grid gap-4">
+                <StatusLegend />
+                {roomViews.length > 0 ? (
+                  <div className="grid gap-4 lg:grid-cols-2">
+                    {roomViews.map((view) => (
+                      <RoomGrid
+                        bedContexts={bedContexts}
+                        key={view.room.id}
+                        onSelectBed={openBedDetail}
+                        onStartAdmission={startAdmissionFromBed}
+                        roomView={view}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <p className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">暂无房间主数据</p>
+                )}
               </CardContent>
             </Card>
 
             <Card>
               <CardHeader>
-                <CardTitle>床位状态</CardTitle>
+                <CardTitle>快速办理</CardTitle>
+                <CardDescription>空床格子可直接进入入住办理。</CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="overflow-x-auto rounded-md border">
-                  <Table className="w-full min-w-[700px] text-sm">
-                    <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
-                      <Table.Row>
-                        <Table.Head className="px-4 py-3 font-medium">房间</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">床位</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">当前老人</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">入住上下文</Table.Head>
-                        <Table.Head className="px-4 py-3 font-medium">备注</Table.Head>
-                      </Table.Row>
-                    </Table.Header>
-                    <Table.Body className="divide-y bg-card">
-                      {beds.map((bed) => {
-                        const context = bedContexts[bed.id];
-                        return (
-                          <Table.Row key={bed.id}>
-                            <Table.Cell className="px-4 py-3">{bed.roomName}</Table.Cell>
-                            <Table.Cell className="px-4 py-3 font-medium">{bed.code}</Table.Cell>
-                            <Table.Cell className="px-4 py-3">
-                              <Badge variant={bedBadgeVariant(bed.status)}>{bedStatusLabels[bed.status]}</Badge>
-                            </Table.Cell>
-                            <Table.Cell className="px-4 py-3">
-                              <OccupantSummary context={context} fallbackName={bed.currentElderName} />
-                            </Table.Cell>
-                            <Table.Cell className="px-4 py-3">
-                              <ContextLines lines={context?.lines ?? []} />
-                            </Table.Cell>
-                            <Table.Cell className="px-4 py-3 text-muted-foreground">{bed.notes || "-"}</Table.Cell>
-                          </Table.Row>
-                        );
-                      })}
-                      {beds.length === 0 ? (
-                        <Table.Row>
-                          <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
-                            暂无床位主数据
-                          </Table.Cell>
-                        </Table.Row>
-                      ) : null}
-                    </Table.Body>
-                  </Table>
-                </div>
+                <form className="grid gap-3" onSubmit={(event) => void submitAdmission(event)}>
+                  <Select
+                    aria-label="入住老人"
+                    disabled={!canManageAdmissions || isPending}
+                    onValueChange={setAdmitElderId}
+                    options={elderOptions}
+                    value={admitElderId}
+                  />
+                  <Select
+                    aria-label="入住房间床位"
+                    disabled={!canManageAdmissions || isPending}
+                    onValueChange={setAdmitBedId}
+                    options={bedOptions}
+                    value={admitBedId}
+                  />
+                  <Textarea
+                    aria-label="入住备注"
+                    disabled={!canManageAdmissions || isPending}
+                    onChange={(event) => setAdmitNotes(event.target.value)}
+                    placeholder="备注"
+                    value={admitNotes}
+                  />
+                  <Button disabled={!canManageAdmissions || isPending} type="submit">
+                    <UserCheck className="size-4" aria-hidden="true" />
+                    办理入住
+                  </Button>
+                </form>
               </CardContent>
             </Card>
           </section>
@@ -583,6 +735,435 @@ export function BedsWorkspace({
           </CardContent>
         </Card>
       ) : null}
+
+      <BedDetailDialog
+        activeAdmission={selectedAdmission}
+        activeTab={bedDetailTab}
+        admissions={selectedBedAdmissions}
+        bed={selectedBed}
+        bedOptions={bedOptions}
+        canManageAdmissions={canManageAdmissions}
+        context={selectedBedContext}
+        dischargeNotes={dischargeNotes}
+        elderOptions={elderOptions}
+        isPending={isPending}
+        notes={admitNotes}
+        onClose={() => setSelectedBedId("")}
+        onDischargeNotesChange={setDischargeNotes}
+        onElderChange={setAdmitElderId}
+        onNotesChange={setAdmitNotes}
+        onSubmitAdmission={submitAdmissionForBed}
+        onSubmitDischarge={submitDischargeForAdmission}
+        onSubmitTransfer={submitTransferForAdmission}
+        onTabChange={setBedDetailTab}
+        onTransferBedChange={setTransferBedId}
+        onTransferNotesChange={setTransferNotes}
+        selectedElderId={admitElderId}
+        selectedTransferBedId={transferBedId}
+        transferNotes={transferNotes}
+      />
+    </div>
+  );
+}
+
+function StatusLegend(): React.ReactElement {
+  return (
+    <div className="flex flex-wrap gap-3 text-xs text-muted-foreground" aria-label="床位状态图例">
+      {(["available", "occupied", "maintenance", "disabled"] as BedStatus[]).map((status) => (
+        <span className="inline-flex items-center gap-2" key={status}>
+          <span className={cn("size-2 rounded-full", statusDotClass(status))} aria-hidden="true" />
+          {bedStatusLabels[status]}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function RoomGrid({
+  bedContexts,
+  onSelectBed,
+  onStartAdmission,
+  roomView,
+}: {
+  bedContexts: Record<string, BedOperationalContext>;
+  onSelectBed: (bed: FacilityBed, initialTab?: BedDetailTab) => void;
+  onStartAdmission: (bed: FacilityBed) => void;
+  roomView: RoomView;
+}): React.ReactElement {
+  const availableCount = roomView.beds.filter((bed) => bed.status === "available").length;
+  const maintenanceCount = roomView.beds.filter((bed) => bed.status === "maintenance").length;
+
+  return (
+    <article className="rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <header className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h3 className="truncate text-sm font-semibold text-kumo-strong">{roomView.room.name}</h3>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {roomView.room.code} · {roomView.room.occupiedBedCount}/{roomView.room.bedCount} 在住 · 容量 {roomView.room.capacity}
+          </p>
+        </div>
+        <Badge variant={roomView.room.status === "active" ? "success" : "danger"}>
+          {roomView.room.status === "active" ? "启用" : "停用"}
+        </Badge>
+      </header>
+
+      <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3">
+        {roomView.beds.map((bed) => (
+          <BedTile
+            bed={bed}
+            context={bedContexts[bed.id]}
+            key={bed.id}
+            onSelect={() => onSelectBed(bed)}
+            onStartAdmission={() => onStartAdmission(bed)}
+          />
+        ))}
+        {roomView.beds.length === 0 ? (
+          <p className="col-span-full rounded-md border border-dashed px-3 py-5 text-center text-xs text-muted-foreground">暂无床位</p>
+        ) : null}
+      </div>
+
+      <footer className="mt-4 flex flex-wrap gap-2 text-xs text-muted-foreground">
+        <span>{availableCount} 空闲</span>
+        <span>{maintenanceCount} 维修</span>
+      </footer>
+    </article>
+  );
+}
+
+function BedTile({
+  bed,
+  context,
+  onSelect,
+  onStartAdmission,
+}: {
+  bed: FacilityBed;
+  context: BedOperationalContext | undefined;
+  onSelect: () => void;
+  onStartAdmission: () => void;
+}): React.ReactElement {
+  const occupantName = context?.occupant?.elderName ?? bed.currentElderName;
+  const bedActionLabel = bed.status === "available" ? "可办理入住" : bedStatusLabels[bed.status];
+
+  return (
+    <button
+      className={cn(
+        "grid min-h-28 content-between rounded-md border p-3 text-left transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+        bedTileClass(bed.status),
+      )}
+      onClick={bed.status === "available" ? onStartAdmission : onSelect}
+      type="button"
+    >
+      <span className="flex items-start justify-between gap-2">
+        <span className="min-w-0">
+          <span className="block truncate text-sm font-semibold">{bed.code}</span>
+          <span className="mt-1 block text-xs opacity-75">{bedStatusLabels[bed.status]}</span>
+        </span>
+        <span className={cn("mt-1 size-2 shrink-0 rounded-full", statusDotClass(bed.status))} aria-hidden="true" />
+      </span>
+      <span className="min-w-0">
+        <span className="block truncate text-xs font-medium">{occupantName ?? bedActionLabel}</span>
+        <span className="mt-1 block truncate text-[11px] opacity-75">{bed.notes || "无备注"}</span>
+      </span>
+    </button>
+  );
+}
+
+function BedDetailDialog({
+  activeAdmission,
+  activeTab,
+  admissions,
+  bed,
+  bedOptions,
+  canManageAdmissions,
+  context,
+  dischargeNotes,
+  elderOptions,
+  isPending,
+  notes,
+  onClose,
+  onDischargeNotesChange,
+  onElderChange,
+  onNotesChange,
+  onSubmitAdmission,
+  onSubmitDischarge,
+  onSubmitTransfer,
+  onTabChange,
+  onTransferBedChange,
+  onTransferNotesChange,
+  selectedElderId,
+  selectedTransferBedId,
+  transferNotes,
+}: {
+  activeAdmission: Admission | undefined;
+  activeTab: BedDetailTab;
+  admissions: Admission[];
+  bed: FacilityBed | undefined;
+  bedOptions: SelectOption[];
+  canManageAdmissions: boolean;
+  context: BedOperationalContext | undefined;
+  dischargeNotes: string;
+  elderOptions: SelectOption[];
+  isPending: boolean;
+  notes: string;
+  onClose: () => void;
+  onDischargeNotesChange: (value: string) => void;
+  onElderChange: (value: string) => void;
+  onNotesChange: (value: string) => void;
+  onSubmitAdmission: (event: FormEvent<HTMLFormElement>, bed: FacilityBed) => Promise<void>;
+  onSubmitDischarge: (event: FormEvent<HTMLFormElement>, admission: Admission) => Promise<void>;
+  onSubmitTransfer: (event: FormEvent<HTMLFormElement>, admission: Admission) => Promise<void>;
+  onTabChange: (value: BedDetailTab) => void;
+  onTransferBedChange: (value: string) => void;
+  onTransferNotesChange: (value: string) => void;
+  selectedElderId: string;
+  selectedTransferBedId: string;
+  transferNotes: string;
+}): React.ReactElement {
+  const title = bed ? `${bed.roomName} · ${bed.code}` : "床位详情";
+  const description = bed ? `${bedStatusLabels[bed.status]} · ${bed.notes || "无备注"}` : undefined;
+
+  return (
+    <Dialog description={description} onClose={onClose} open={Boolean(bed)} title={title} width="wide">
+      {bed ? (
+        <div className="grid gap-5">
+          <div className="flex flex-wrap gap-2" role="tablist" aria-label="床位详情">
+            {bedDetailTabs.map((tab) => (
+              <Button
+                aria-selected={activeTab === tab.value}
+                key={tab.value}
+                onClick={() => onTabChange(tab.value)}
+                role="tab"
+                size="sm"
+                type="button"
+                variant={activeTab === tab.value ? "default" : "outline"}
+              >
+                {tab.label}
+              </Button>
+            ))}
+          </div>
+
+          {activeTab === "context" ? <BedContextPanel bed={bed} context={context} /> : null}
+          {activeTab === "records" ? <AdmissionRecords admissions={admissions} /> : null}
+          {activeTab === "actions" ? (
+            <BedActionsPanel
+              activeAdmission={activeAdmission}
+              bed={bed}
+              bedOptions={bedOptions}
+              canManageAdmissions={canManageAdmissions}
+              dischargeNotes={dischargeNotes}
+              elderOptions={elderOptions}
+              isPending={isPending}
+              notes={notes}
+              onDischargeNotesChange={onDischargeNotesChange}
+              onElderChange={onElderChange}
+              onNotesChange={onNotesChange}
+              onSubmitAdmission={onSubmitAdmission}
+              onSubmitDischarge={onSubmitDischarge}
+              onSubmitTransfer={onSubmitTransfer}
+              onTransferBedChange={onTransferBedChange}
+              onTransferNotesChange={onTransferNotesChange}
+              selectedElderId={selectedElderId}
+              selectedTransferBedId={selectedTransferBedId}
+              transferNotes={transferNotes}
+            />
+          ) : null}
+        </div>
+      ) : null}
+    </Dialog>
+  );
+}
+
+function BedContextPanel({
+  bed,
+  context,
+}: {
+  bed: FacilityBed;
+  context: BedOperationalContext | undefined;
+}): React.ReactElement {
+  return (
+    <div className="grid gap-4 lg:grid-cols-[18rem_minmax(0,1fr)]">
+      <section className="rounded-lg border border-kumo-line p-4">
+        <p className="text-xs text-muted-foreground">当前老人</p>
+        <div className="mt-3">
+          <OccupantSummary context={context} fallbackName={bed.currentElderName} />
+        </div>
+        <dl className="mt-4 grid gap-3 text-sm">
+          <div>
+            <dt className="text-xs text-muted-foreground">状态</dt>
+            <dd className="mt-1">
+              <Badge variant={bedBadgeVariant(bed.status)}>{bedStatusLabels[bed.status]}</Badge>
+            </dd>
+          </div>
+          <div>
+            <dt className="text-xs text-muted-foreground">备注</dt>
+            <dd className="mt-1 text-kumo-strong">{bed.notes || "-"}</dd>
+          </div>
+        </dl>
+      </section>
+
+      <section className="rounded-lg border border-kumo-line p-4">
+        <h3 className="text-sm font-semibold text-kumo-strong">运营上下文</h3>
+        <div className="mt-3">
+          <ContextLines lines={context?.lines ?? []} expanded />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function AdmissionRecords({ admissions }: { admissions: Admission[] }): React.ReactElement {
+  return (
+    <div className="overflow-x-auto rounded-md border">
+      <Table className="w-full min-w-[720px] text-sm">
+        <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
+          <Table.Row>
+            <Table.Head className="px-4 py-3 font-medium">老人</Table.Head>
+            <Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
+            <Table.Head className="px-4 py-3 font-medium">入住时间</Table.Head>
+            <Table.Head className="px-4 py-3 font-medium">结束时间</Table.Head>
+            <Table.Head className="px-4 py-3 font-medium">备注</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body className="divide-y bg-card">
+          {admissions.map((admission) => (
+            <Table.Row key={admission.id}>
+              <Table.Cell className="px-4 py-3 font-medium">{admission.elderName}</Table.Cell>
+              <Table.Cell className="px-4 py-3">
+                <Badge variant={admission.status === "active" ? "success" : "secondary"}>{admissionStatusLabels[admission.status]}</Badge>
+              </Table.Cell>
+              <Table.Cell className="px-4 py-3 text-muted-foreground">{formatDateTime(admission.admittedAt)}</Table.Cell>
+              <Table.Cell className="px-4 py-3 text-muted-foreground">
+                {admission.dischargedAt ? formatDateTime(admission.dischargedAt) : "-"}
+              </Table.Cell>
+              <Table.Cell className="px-4 py-3 text-muted-foreground">{admission.notes || "-"}</Table.Cell>
+            </Table.Row>
+          ))}
+          {admissions.length === 0 ? (
+            <Table.Row>
+              <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
+                暂无该床位流水记录
+              </Table.Cell>
+            </Table.Row>
+          ) : null}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+}
+
+function BedActionsPanel({
+  activeAdmission,
+  bed,
+  bedOptions,
+  canManageAdmissions,
+  dischargeNotes,
+  elderOptions,
+  isPending,
+  notes,
+  onDischargeNotesChange,
+  onElderChange,
+  onNotesChange,
+  onSubmitAdmission,
+  onSubmitDischarge,
+  onSubmitTransfer,
+  onTransferBedChange,
+  onTransferNotesChange,
+  selectedElderId,
+  selectedTransferBedId,
+  transferNotes,
+}: {
+  activeAdmission: Admission | undefined;
+  bed: FacilityBed;
+  bedOptions: SelectOption[];
+  canManageAdmissions: boolean;
+  dischargeNotes: string;
+  elderOptions: SelectOption[];
+  isPending: boolean;
+  notes: string;
+  onDischargeNotesChange: (value: string) => void;
+  onElderChange: (value: string) => void;
+  onNotesChange: (value: string) => void;
+  onSubmitAdmission: (event: FormEvent<HTMLFormElement>, bed: FacilityBed) => Promise<void>;
+  onSubmitDischarge: (event: FormEvent<HTMLFormElement>, admission: Admission) => Promise<void>;
+  onSubmitTransfer: (event: FormEvent<HTMLFormElement>, admission: Admission) => Promise<void>;
+  onTransferBedChange: (value: string) => void;
+  onTransferNotesChange: (value: string) => void;
+  selectedElderId: string;
+  selectedTransferBedId: string;
+  transferNotes: string;
+}): React.ReactElement {
+  if (bed.status === "available") {
+    return (
+      <form className="grid gap-3 rounded-lg border border-kumo-line p-4" onSubmit={(event) => void onSubmitAdmission(event, bed)}>
+        <h3 className="text-sm font-semibold text-kumo-strong">办理入住</h3>
+        <Select
+          aria-label="入住老人"
+          disabled={!canManageAdmissions || isPending}
+          onValueChange={onElderChange}
+          options={elderOptions}
+          value={selectedElderId}
+        />
+        <Textarea
+          aria-label="入住备注"
+          disabled={!canManageAdmissions || isPending}
+          onChange={(event) => onNotesChange(event.target.value)}
+          placeholder="备注"
+          value={notes}
+        />
+        <Button disabled={!canManageAdmissions || isPending} type="submit">
+          <UserCheck className="size-4" aria-hidden="true" />
+          办理入住
+        </Button>
+      </form>
+    );
+  }
+
+  if (!activeAdmission) {
+    return <p className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">该床位当前不能办理入住操作</p>;
+  }
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <form className="grid gap-3 rounded-lg border border-kumo-line p-4" onSubmit={(event) => void onSubmitTransfer(event, activeAdmission)}>
+        <h3 className="text-sm font-semibold text-kumo-strong">办理换床</h3>
+        <p className="text-xs text-muted-foreground">
+          当前：{activeAdmission.elderName} / {admissionBedLabel(activeAdmission)}
+        </p>
+        <Select
+          aria-label="换床新床位"
+          disabled={!canManageAdmissions || isPending}
+          onValueChange={onTransferBedChange}
+          options={bedOptions}
+          value={selectedTransferBedId}
+        />
+        <Textarea
+          aria-label="换床备注"
+          disabled={!canManageAdmissions || isPending}
+          onChange={(event) => onTransferNotesChange(event.target.value)}
+          placeholder="备注"
+          value={transferNotes}
+        />
+        <Button disabled={!canManageAdmissions || isPending} type="submit" variant="outline">
+          <MoveRight className="size-4" aria-hidden="true" />
+          办理换床
+        </Button>
+      </form>
+
+      <form className="grid gap-3 rounded-lg border border-kumo-line p-4" onSubmit={(event) => void onSubmitDischarge(event, activeAdmission)}>
+        <h3 className="text-sm font-semibold text-kumo-strong">办理退住</h3>
+        <p className="text-xs text-muted-foreground">退住会关闭当前入住记录并释放该床位。</p>
+        <Textarea
+          aria-label="退住备注"
+          disabled={!canManageAdmissions || isPending}
+          onChange={(event) => onDischargeNotesChange(event.target.value)}
+          placeholder="备注"
+          value={dischargeNotes}
+        />
+        <Button disabled={!canManageAdmissions || isPending} type="submit" variant="destructive">
+          <UserMinus className="size-4" aria-hidden="true" />
+          办理退住
+        </Button>
+      </form>
     </div>
   );
 }
@@ -597,7 +1178,7 @@ function contextToneClass(tone: OperationalContextLine["tone"]): string {
   return "text-muted-foreground";
 }
 
-function ContextLines({ lines }: { lines: OperationalContextLine[] }): React.ReactElement {
+function ContextLines({ expanded = false, lines }: { expanded?: boolean; lines: OperationalContextLine[] }): React.ReactElement {
   if (lines.length === 0) {
     return <span className="text-muted-foreground">-</span>;
   }
@@ -605,8 +1186,11 @@ function ContextLines({ lines }: { lines: OperationalContextLine[] }): React.Rea
   return (
     <div className="grid gap-1">
       {lines.map((line) => (
-        <p className={`max-w-[260px] truncate text-xs ${contextToneClass(line.tone)}`} key={`${line.kind}-${line.label}-${line.value}`}>
-          <span className="font-medium">{line.label}</span> {line.value}
+        <p
+          className={cn(expanded ? "text-sm" : "max-w-[260px] truncate text-xs", contextToneClass(line.tone))}
+          key={`${line.kind}-${line.label}-${line.value}`}
+        >
+          <span className="font-medium">{contextKindLabels[line.kind]} · {line.label}</span> {line.value}
         </p>
       ))}
     </div>