feat: add elder bed operational context

This commit is contained in:
2026-07-03 00:46:17 -07:00
parent f620d6c3dd
commit 0ce8cb9644
9 changed files with 477 additions and 30 deletions

View File

@@ -14,8 +14,10 @@ import type { ApiResult } from "@/modules/core/server/api";
import type { Permission } from "@/modules/core/types";
import type { CareLevel, Elder, ElderInput, ElderStatus } from "@/modules/elders/types";
import { CARE_LEVEL_LABELS, ELDER_STATUS_LABELS, GENDER_LABELS } from "@/modules/elders/types";
import type { ElderOperationalContext, OperationalContextLine } from "@/modules/operations/types";
type EldersClientProps = {
elderContexts?: Record<string, ElderOperationalContext>;
initialElders: Elder[];
permissions: Permission[];
};
@@ -109,7 +111,7 @@ function matchesFilters(
return matchesSearch && matchesStatus && matchesCareLevel;
}
export function EldersClient({ initialElders, permissions }: EldersClientProps): React.ReactElement {
export function EldersClient({ elderContexts = {}, initialElders, permissions }: EldersClientProps): React.ReactElement {
const [elders, setElders] = useState(initialElders);
const [editingId, setEditingId] = useState<string | null>(null);
const [form, setForm] = useState<ElderFormState>(emptyInput);
@@ -279,8 +281,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
<div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
<section className="flex flex-col gap-4 border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
<div>
<Badge variant="success"> CRUD</Badge>
<h1 className="mt-3 text-3xl font-semibold tracking-normal"></h1>
<h1 className="text-3xl font-semibold tracking-normal"></h1>
<p className="mt-2 text-sm text-muted-foreground"></p>
</div>
<div className="flex flex-wrap gap-2">
@@ -370,6 +371,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
<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.Head className="px-4 py-3 text-right font-medium"></Table.Head>
@@ -386,6 +388,9 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
</Table.Cell>
<Table.Cell className="px-4 py-3">{CARE_LEVEL_LABELS[elder.careLevel]}</Table.Cell>
<Table.Cell className="px-4 py-3 text-muted-foreground">{formatBedLabel(elder)}</Table.Cell>
<Table.Cell className="px-4 py-3">
<ContextLines lines={elderContexts[elder.id]?.lines ?? []} />
</Table.Cell>
<Table.Cell className="px-4 py-3 text-muted-foreground">
{elder.primaryContact} / {elder.phone}
</Table.Cell>
@@ -579,3 +584,29 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
</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({ lines }: { 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={`max-w-[240px] truncate text-xs ${contextToneClass(line.tone)}`} key={`${line.kind}-${line.label}-${line.value}`}>
<span className="font-medium">{line.label}</span> {line.value}
</p>
))}
</div>
);
}