mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
frontend: pharmacy dashboard page
New /pharmacy department home: KPI cards (active prescriptions, expiring within 7 days from parseable durations, patients on medication) over a dispensing queue of active prescriptions (oldest first) with search, a mark-completed action and the existing detail sheet. No create/delete UI — prescribing stays with clinicians. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,10 @@
|
||||
import { PharmacyView } from "@/components/pharmacy/pharmacy-view";
|
||||
import { SidebarInset } from "@/components/ui/sidebar";
|
||||
|
||||
export default function PharmacyPage() {
|
||||
return (
|
||||
<SidebarInset className="flex flex-1 flex-col overflow-y-auto">
|
||||
<PharmacyView />
|
||||
</SidebarInset>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
"use client";
|
||||
|
||||
import { CircleCheck, Clock, Pill, Search, Users } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { PrescriptionDetailSheet } from "@/components/prescriptions/prescription-detail-sheet";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
type Prescription,
|
||||
formatPrescribedAt,
|
||||
listPrescriptions,
|
||||
updatePrescription,
|
||||
} from "@/lib/prescriptions";
|
||||
import { notify } from "@/lib/toast";
|
||||
|
||||
// "3 days" / "14 days" / "1 month" → a course length in days; null for
|
||||
// open-ended values ("Ongoing", "As needed", free text we can't parse).
|
||||
function parseDurationDays(duration: string | null): number | null {
|
||||
if (!duration) return null;
|
||||
const match = duration
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.match(/^(\d+)\s*(day|week|month)s?$/);
|
||||
if (!match) return null;
|
||||
const n = Number(match[1]);
|
||||
const unit = match[2] === "day" ? 1 : match[2] === "week" ? 7 : 30;
|
||||
return n * unit;
|
||||
}
|
||||
|
||||
// When an active course runs out, or null if it has no parseable end.
|
||||
function expiresAt(rx: Prescription): Date | null {
|
||||
const days = parseDurationDays(rx.duration);
|
||||
if (days == null) return null;
|
||||
const end = new Date(`${rx.prescribedAt}T00:00:00`);
|
||||
end.setDate(end.getDate() + days);
|
||||
return end;
|
||||
}
|
||||
|
||||
function Kpi({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: typeof Pill;
|
||||
}) {
|
||||
return (
|
||||
<Card className="flex-row items-center gap-3 p-4">
|
||||
<div className="flex size-9 items-center justify-center rounded-lg border bg-background text-muted-foreground">
|
||||
<Icon className="size-4" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-muted-foreground text-xs">{label}</span>
|
||||
<span className="font-semibold text-foreground text-lg tracking-tight">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function QueueRow({
|
||||
rx,
|
||||
expiring,
|
||||
onOpen,
|
||||
onComplete,
|
||||
}: {
|
||||
rx: Prescription;
|
||||
expiring: boolean;
|
||||
onOpen: () => void;
|
||||
onComplete: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
|
||||
onClick={onOpen}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault();
|
||||
onOpen();
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<Avatar className="size-8">
|
||||
<AvatarFallback>{rx.initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate font-medium text-foreground text-sm">
|
||||
{rx.medication}
|
||||
{rx.dose && (
|
||||
<span className="font-normal text-muted-foreground"> · {rx.dose}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="truncate text-muted-foreground text-xs">
|
||||
{rx.name} · #{rx.fileNumber} · {rx.frequency}
|
||||
</span>
|
||||
</div>
|
||||
<div className="hidden min-w-0 flex-col items-end sm:flex">
|
||||
<span className="truncate text-foreground text-xs">{rx.prescriber}</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{formatPrescribedAt(rx.prescribedAt)}
|
||||
</span>
|
||||
</div>
|
||||
{expiring && (
|
||||
<Badge variant="destructive">{t("pharmacy.expiringBadge")}</Badge>
|
||||
)}
|
||||
<Button
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onComplete();
|
||||
}}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<CircleCheck className="size-4" />
|
||||
{t("pharmacy.markCompleted")}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// The pharmacy department home: a dispensing work queue over the clinic's
|
||||
// prescriptions. Pharmacy holds prescription read/write (no delete and no
|
||||
// create UI — prescribing stays with clinicians), so the only action here is
|
||||
// completing a course.
|
||||
export function PharmacyView() {
|
||||
const { t } = useTranslation();
|
||||
const [list, setList] = useState<Prescription[]>([]);
|
||||
const [selected, setSelected] = useState<Prescription | null>(null);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
listPrescriptions()
|
||||
.then((data) => {
|
||||
if (active) setList(data);
|
||||
})
|
||||
.catch(() => {
|
||||
/* api-client redirects on 401; otherwise leave the list empty */
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const now = new Date();
|
||||
const soon = new Date(now);
|
||||
soon.setDate(soon.getDate() + 7);
|
||||
const isExpiringSoon = (rx: Prescription) => {
|
||||
if (rx.status !== "active") return false;
|
||||
const end = expiresAt(rx);
|
||||
return end != null && end <= soon;
|
||||
};
|
||||
|
||||
const active = useMemo(
|
||||
() => list.filter((rx) => rx.status === "active"),
|
||||
[list],
|
||||
);
|
||||
|
||||
// The dispensing queue: active prescriptions, oldest first.
|
||||
const search = query.trim().toLowerCase();
|
||||
const queue = useMemo(() => {
|
||||
const base = [...active].sort((a, b) =>
|
||||
a.prescribedAt.localeCompare(b.prescribedAt),
|
||||
);
|
||||
if (!search) return base;
|
||||
return base.filter(
|
||||
(rx) =>
|
||||
rx.name.toLowerCase().includes(search) ||
|
||||
rx.fileNumber.includes(search) ||
|
||||
rx.medication.toLowerCase().includes(search) ||
|
||||
rx.prescriber.toLowerCase().includes(search),
|
||||
);
|
||||
}, [active, search]);
|
||||
|
||||
const kpis = [
|
||||
{
|
||||
label: t("pharmacy.kpi.active"),
|
||||
value: String(active.length),
|
||||
icon: Pill,
|
||||
},
|
||||
{
|
||||
label: t("pharmacy.kpi.expiring"),
|
||||
value: String(active.filter(isExpiringSoon).length),
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
label: t("pharmacy.kpi.patients"),
|
||||
value: String(new Set(active.map((rx) => rx.fileNumber)).size),
|
||||
icon: Users,
|
||||
},
|
||||
];
|
||||
|
||||
const openRx = (rx: Prescription) => {
|
||||
setSelected(rx);
|
||||
setSheetOpen(true);
|
||||
};
|
||||
|
||||
// PUT requires the full record — resend the row with the new status.
|
||||
const markCompleted = async (rx: Prescription) => {
|
||||
try {
|
||||
const updated = await updatePrescription(rx.id, {
|
||||
fileNumber: rx.fileNumber,
|
||||
name: rx.name,
|
||||
initials: rx.initials,
|
||||
medication: rx.medication,
|
||||
dose: rx.dose,
|
||||
frequency: rx.frequency,
|
||||
prescriber: rx.prescriber,
|
||||
prescribedAt: rx.prescribedAt,
|
||||
status: "completed",
|
||||
duration: rx.duration,
|
||||
notes: rx.notes,
|
||||
});
|
||||
setList((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
|
||||
notify.success(
|
||||
t("pharmacy.completedTitle"),
|
||||
t("pharmacy.completedBody", { medication: rx.medication, name: rx.name }),
|
||||
);
|
||||
} catch {
|
||||
notify.error(t("pharmacy.completeFailedTitle"), t("pharmacy.completeFailedBody"));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-10">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 className="font-semibold text-2xl tracking-tight">
|
||||
{t("pharmacy.title")}
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm">{t("pharmacy.subtitle")}</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
className="w-full pl-9 sm:w-64"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder={t("pharmacy.searchPlaceholder")}
|
||||
value={query}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{kpis.map((k) => (
|
||||
<Kpi key={k.label} {...k} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg tracking-tight">
|
||||
{t("pharmacy.queue.title")}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("pharmacy.queue.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="divide-y divide-border overflow-hidden rounded-2xl border bg-card/30">
|
||||
{queue.map((rx) => (
|
||||
<QueueRow
|
||||
expiring={isExpiringSoon(rx)}
|
||||
key={rx.id}
|
||||
onComplete={() => markCompleted(rx)}
|
||||
onOpen={() => openRx(rx)}
|
||||
rx={rx}
|
||||
/>
|
||||
))}
|
||||
{queue.length === 0 && (
|
||||
<p className="p-6 text-center text-muted-foreground text-sm">
|
||||
{search ? t("pharmacy.queue.noMatches") : t("pharmacy.queue.empty")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PrescriptionDetailSheet
|
||||
onOpenChange={setSheetOpen}
|
||||
open={sheetOpen}
|
||||
rx={selected}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user