1220 lines
44 KiB
TypeScript
1220 lines
44 KiB
TypeScript
"use client";
|
||
|
||
import { FormEvent, useMemo, useState } from "react";
|
||
import { BedDouble, DoorOpen, History, MoveRight, UserCheck, UserMinus, Wrench } from "lucide-react";
|
||
|
||
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";
|
||
import type { BedOperationalContext, OperationalContextLine } from "@/modules/operations/types";
|
||
|
||
type BedsWorkspaceProps = {
|
||
bedContexts?: Record<string, BedOperationalContext>;
|
||
initialRooms: Room[];
|
||
initialBeds: FacilityBed[];
|
||
initialAdmissions: Admission[];
|
||
initialElders: Elder[];
|
||
permissions: Permission[];
|
||
};
|
||
|
||
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: "概览" },
|
||
{ value: "operations", label: "办理" },
|
||
{ 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: "占用",
|
||
maintenance: "维修",
|
||
disabled: "停用",
|
||
};
|
||
|
||
const admissionStatusLabels: Record<Admission["status"], string> = {
|
||
active: "在住",
|
||
transferred: "已换床",
|
||
discharged: "已退住",
|
||
};
|
||
|
||
const contextKindLabels: Record<OperationalContextLine["kind"], string> = {
|
||
admission: "入住",
|
||
care: "照护",
|
||
health: "健康",
|
||
incident: "预警",
|
||
};
|
||
|
||
function formatDateTime(value: string): string {
|
||
return new Date(value).toLocaleString("zh-CN");
|
||
}
|
||
|
||
function bedBadgeVariant(status: BedStatus): "success" | "secondary" | "warning" | "danger" {
|
||
switch (status) {
|
||
case "available":
|
||
return "success";
|
||
case "occupied":
|
||
return "secondary";
|
||
case "maintenance":
|
||
return "warning";
|
||
case "disabled":
|
||
return "danger";
|
||
}
|
||
}
|
||
|
||
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 },
|
||
...items.map((item) => ({ value: item.id, label: item.label })),
|
||
];
|
||
}
|
||
|
||
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,
|
||
initialBeds,
|
||
initialAdmissions,
|
||
initialElders,
|
||
permissions,
|
||
}: BedsWorkspaceProps): React.ReactElement {
|
||
const [rooms, setRooms] = useState(initialRooms);
|
||
const [beds, setBeds] = useState(initialBeds);
|
||
const [admissions, setAdmissions] = useState(initialAdmissions);
|
||
const [elders, setElders] = useState(initialElders);
|
||
const [activeTab, setActiveTab] = useState<WorkspaceTab>("overview");
|
||
const [message, setMessage] = useState("");
|
||
const [isPending, setIsPending] = useState(false);
|
||
const [admitElderId, setAdmitElderId] = useState("");
|
||
const [admitBedId, setAdmitBedId] = useState("");
|
||
const [admitNotes, setAdmitNotes] = useState("");
|
||
const [transferAdmissionId, setTransferAdmissionId] = useState("");
|
||
const [transferBedId, setTransferBedId] = useState("");
|
||
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]);
|
||
const activeElderIds = useMemo(() => new Set(activeAdmissions.map((admission) => admission.elderId)), [activeAdmissions]);
|
||
const availableBeds = useMemo(() => beds.filter((bed) => bed.status === "available"), [beds]);
|
||
const occupiedBeds = beds.filter((bed) => bed.status === "occupied").length;
|
||
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}` })),
|
||
"选择老人",
|
||
);
|
||
const bedOptions = makeSelectOptions(
|
||
availableBeds.map((bed) => ({ id: bed.id, label: `${bed.roomName}-${bed.code}` })),
|
||
"选择空闲床位",
|
||
);
|
||
const activeAdmissionOptions = makeSelectOptions(
|
||
activeAdmissions.map((admission) => ({
|
||
id: admission.id,
|
||
label: `${admission.elderName} / ${admissionBedLabel(admission)}`,
|
||
})),
|
||
"选择在住记录",
|
||
);
|
||
|
||
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"),
|
||
fetch("/api/facilities/rooms"),
|
||
fetch("/api/facilities/beds"),
|
||
fetch("/api/admissions"),
|
||
]);
|
||
const [eldersResult, roomsResult, bedsResult, admissionsResult] = (await Promise.all([
|
||
eldersResponse.json(),
|
||
roomsResponse.json(),
|
||
bedsResponse.json(),
|
||
admissionsResponse.json(),
|
||
])) as [
|
||
ApiResult<{ elders: Elder[] }>,
|
||
ApiResult<{ rooms: Room[] }>,
|
||
ApiResult<{ beds: FacilityBed[] }>,
|
||
ApiResult<{ admissions: Admission[] }>,
|
||
];
|
||
|
||
if (eldersResult.success) {
|
||
setElders(eldersResult.elders);
|
||
}
|
||
if (roomsResult.success) {
|
||
setRooms(roomsResult.rooms);
|
||
}
|
||
if (bedsResult.success) {
|
||
setBeds(bedsResult.beds);
|
||
}
|
||
if (admissionsResult.success) {
|
||
setAdmissions(admissionsResult.admissions);
|
||
}
|
||
}
|
||
|
||
async function submitAdmission(event: FormEvent<HTMLFormElement>): Promise<void> {
|
||
event.preventDefault();
|
||
if (!canManageAdmissions) {
|
||
setMessage("当前角色无权办理入住");
|
||
return;
|
||
}
|
||
if (!admitElderId || !admitBedId) {
|
||
setMessage("请选择老人和空闲床位");
|
||
return;
|
||
}
|
||
|
||
setIsPending(true);
|
||
setMessage("");
|
||
const response = await fetch("/api/admissions", {
|
||
method: "POST",
|
||
headers: { "content-type": "application/json" },
|
||
body: JSON.stringify({ elderId: admitElderId, bedId: admitBedId, 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 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);
|
||
if (!canManageAdmissions) {
|
||
setMessage("当前角色无权办理换床");
|
||
return;
|
||
}
|
||
if (!admission || !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 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) {
|
||
setMessage("当前角色无权办理退住");
|
||
return;
|
||
}
|
||
if (!dischargeAdmissionId) {
|
||
setMessage("请选择在住记录");
|
||
return;
|
||
}
|
||
|
||
setIsPending(true);
|
||
setMessage("");
|
||
const response = await fetch(`/api/admissions/${dischargeAdmissionId}`, {
|
||
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);
|
||
}
|
||
|
||
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">
|
||
<div className="flex flex-wrap gap-2" role="tablist" aria-label="床位工作区">
|
||
{workspaceTabs.map((tab) => (
|
||
<Button
|
||
aria-selected={activeTab === tab.value}
|
||
key={tab.value}
|
||
onClick={() => setActiveTab(tab.value)}
|
||
role="tab"
|
||
type="button"
|
||
variant={activeTab === tab.value ? "default" : "outline"}
|
||
>
|
||
{tab.label}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{message ? (
|
||
<p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
|
||
{message}
|
||
</p>
|
||
) : null}
|
||
|
||
{activeTab === "overview" ? (
|
||
<>
|
||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||
<div>
|
||
<CardDescription>房间</CardDescription>
|
||
<CardTitle className="mt-2 text-3xl">{rooms.length}</CardTitle>
|
||
</div>
|
||
<DoorOpen className="size-5 text-primary" aria-hidden="true" />
|
||
</CardHeader>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||
<div>
|
||
<CardDescription>床位</CardDescription>
|
||
<CardTitle className="mt-2 text-3xl">{beds.length}</CardTitle>
|
||
</div>
|
||
<BedDouble className="size-5 text-primary" aria-hidden="true" />
|
||
</CardHeader>
|
||
<CardContent className="pt-0">
|
||
<p className="text-sm text-muted-foreground">占用率 {occupancyRate}%</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className={maintenanceBeds > 0 ? "border-amber-200 bg-amber-50/70" : undefined}>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||
<div>
|
||
<CardDescription className={maintenanceBeds > 0 ? "text-amber-700" : undefined}>维修床位</CardDescription>
|
||
<CardTitle className={maintenanceBeds > 0 ? "mt-2 text-3xl text-amber-700" : "mt-2 text-3xl"}>
|
||
{maintenanceBeds}
|
||
</CardTitle>
|
||
</div>
|
||
<Wrench className={maintenanceBeds > 0 ? "size-5 text-amber-700" : "size-5 text-primary"} aria-hidden="true" />
|
||
</CardHeader>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||
<div>
|
||
<CardDescription>在住</CardDescription>
|
||
<CardTitle className="mt-2 text-3xl">{activeAdmissions.length}</CardTitle>
|
||
</div>
|
||
<History className="size-5 text-primary" aria-hidden="true" />
|
||
</CardHeader>
|
||
</Card>
|
||
</section>
|
||
|
||
<section className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>房间格子视图</CardTitle>
|
||
<CardDescription>按房间查看床位占用、维修、停用和待入住空床。</CardDescription>
|
||
</CardHeader>
|
||
<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>
|
||
<CardDescription>空床格子可直接进入入住办理。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<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>
|
||
</>
|
||
) : null}
|
||
|
||
{activeTab === "operations" ? (
|
||
<section className="grid gap-4 xl:grid-cols-3">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<UserCheck className="size-5 text-primary" aria-hidden="true" />
|
||
办理入住
|
||
</CardTitle>
|
||
<CardDescription>选择未在住老人和空闲床位。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<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>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<MoveRight className="size-5 text-primary" aria-hidden="true" />
|
||
办理换床
|
||
</CardTitle>
|
||
<CardDescription>换床会释放原床位并占用新床位。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form className="grid gap-3" onSubmit={(event) => void submitTransfer(event)}>
|
||
<Select
|
||
aria-label="换床入住记录"
|
||
disabled={!canManageAdmissions || isPending}
|
||
onValueChange={setTransferAdmissionId}
|
||
options={activeAdmissionOptions}
|
||
value={transferAdmissionId}
|
||
/>
|
||
<Select
|
||
aria-label="换床新床位"
|
||
disabled={!canManageAdmissions || isPending}
|
||
onValueChange={setTransferBedId}
|
||
options={bedOptions}
|
||
value={transferBedId}
|
||
/>
|
||
<Textarea
|
||
aria-label="换床备注"
|
||
disabled={!canManageAdmissions || isPending}
|
||
onChange={(event) => setTransferNotes(event.target.value)}
|
||
placeholder="备注"
|
||
value={transferNotes}
|
||
/>
|
||
<Button disabled={!canManageAdmissions || isPending} type="submit" variant="outline">
|
||
<MoveRight className="size-4" aria-hidden="true" />
|
||
办理换床
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<UserMinus className="size-5 text-primary" aria-hidden="true" />
|
||
办理退住
|
||
</CardTitle>
|
||
<CardDescription>退住会关闭入住记录并释放床位。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form className="grid gap-3" onSubmit={(event) => void submitDischarge(event)}>
|
||
<Select
|
||
aria-label="退住入住记录"
|
||
disabled={!canManageAdmissions || isPending}
|
||
onValueChange={setDischargeAdmissionId}
|
||
options={activeAdmissionOptions}
|
||
value={dischargeAdmissionId}
|
||
/>
|
||
<Textarea
|
||
aria-label="退住备注"
|
||
disabled={!canManageAdmissions || isPending}
|
||
onChange={(event) => setDischargeNotes(event.target.value)}
|
||
placeholder="备注"
|
||
value={dischargeNotes}
|
||
/>
|
||
<Button disabled={!canManageAdmissions || isPending} type="submit" variant="destructive">
|
||
<UserMinus className="size-4" aria-hidden="true" />
|
||
办理退住
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
) : null}
|
||
|
||
{activeTab === "history" ? (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>入住、换床与退住记录</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto rounded-md border">
|
||
<Table className="w-full min-w-[820px] 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">
|
||
{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">{admissionBedLabel(admission)}</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={6}>
|
||
暂无入住记录
|
||
</Table.Cell>
|
||
</Table.Row>
|
||
) : null}
|
||
</Table.Body>
|
||
</Table>
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|
||
|
||
function contextToneClass(tone: OperationalContextLine["tone"]): string {
|
||
if (tone === "danger") {
|
||
return "text-destructive";
|
||
}
|
||
if (tone === "warning") {
|
||
return "text-amber-700";
|
||
}
|
||
return "text-muted-foreground";
|
||
}
|
||
|
||
function ContextLines({ expanded = false, lines }: { expanded?: boolean; lines: OperationalContextLine[] }): React.ReactElement {
|
||
if (lines.length === 0) {
|
||
return <span className="text-muted-foreground">-</span>;
|
||
}
|
||
|
||
return (
|
||
<div className="grid gap-1">
|
||
{lines.map((line) => (
|
||
<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>
|
||
);
|
||
}
|
||
|
||
function OccupantSummary({
|
||
context,
|
||
fallbackName,
|
||
}: {
|
||
context: BedOperationalContext | undefined;
|
||
fallbackName: string | undefined;
|
||
}): React.ReactElement {
|
||
if (!context?.occupant) {
|
||
return <span className="text-muted-foreground">{fallbackName ?? "-"}</span>;
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<p className="font-medium">{context.occupant.elderName}</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
{context.occupant.careLevel} / {context.occupant.status}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|