mirror of
https://github.com/temetro/temetro.git
synced 2026-08-18 06:13:14 +00:00
frontend: pharmacy inventory, lab add-result & analysis charts
- Pharmacy: the sidebar entry now expands into Pharmacy + a new Inventory page (searchable medication stock with derived in-stock/low/out availability, backed by /api/inventory). Fix the dispensing-queue "Expiring" badge so it only flags courses ending within the next 7 days, not ones already elapsed. - Lab "Add analysis result": the patient picker no longer lists patients until you type and supports arrow-key + Enter selection; the test field offers a catalog of common analyses with an Advanced option (custom analysis + ref range); submitted results now show immediately in a Recent results feed. - Analysis: add a Live panel (real-time line chart) and replace the flat trend sparklines with bklit-ui area + bar charts (installed from the @bklit shadcn registry; chart CSS variables wired into the theme for light and dark). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -1,9 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { type ReactNode, useEffect, useState } from "react";
|
||||
import { type ReactNode, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { TrendCard } from "@/components/analysis/trend-card";
|
||||
import { LiveHospitalChart } from "@/components/analysis/live-hospital-chart";
|
||||
import { Area, AreaChart } from "@/components/charts/area-chart";
|
||||
import { Bar } from "@/components/charts/bar";
|
||||
import { BarChart } from "@/components/charts/bar-chart";
|
||||
import { BarXAxis } from "@/components/charts/bar-x-axis";
|
||||
import { BarYAxis } from "@/components/charts/bar-y-axis";
|
||||
import { Grid } from "@/components/charts/grid";
|
||||
import { ChartTooltip } from "@/components/charts/tooltip";
|
||||
import { XAxis } from "@/components/charts/x-axis";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { type Analytics, getAnalytics } from "@/lib/analytics";
|
||||
|
||||
@@ -55,6 +63,28 @@ function Section({
|
||||
);
|
||||
}
|
||||
|
||||
// A titled card that frames a chart, used for the trend visualisations.
|
||||
function ChartCard({
|
||||
title,
|
||||
total,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
total: number;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card className="gap-3 p-4">
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<span className="text-muted-foreground text-sm">{title}</span>
|
||||
<span className="font-semibold text-foreground text-xl tabular-nums">
|
||||
{total}
|
||||
</span>
|
||||
</div>
|
||||
{children}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function AnalysisView() {
|
||||
const { t } = useTranslation();
|
||||
@@ -76,6 +106,34 @@ export function AnalysisView() {
|
||||
|
||||
const n = (v: number | undefined) => String(v ?? 0);
|
||||
|
||||
// The area chart needs real Date x-values: synthesise one month per point,
|
||||
// ending with the current month.
|
||||
const monthData = useMemo(() => {
|
||||
const points = data?.trends.patientsByMonth ?? [];
|
||||
const now = new Date();
|
||||
return points.map((p, i) => ({
|
||||
date: new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth() - (points.length - 1 - i),
|
||||
1,
|
||||
),
|
||||
patients: p.count,
|
||||
}));
|
||||
}, [data]);
|
||||
|
||||
// The bar chart is categorical (one bar per weekday).
|
||||
const weekdayData = useMemo(
|
||||
() =>
|
||||
(data?.trends.appointmentsByWeekday ?? []).map((p) => ({
|
||||
name: p.label,
|
||||
appointments: p.count,
|
||||
})),
|
||||
[data],
|
||||
);
|
||||
|
||||
const monthTotal = monthData.reduce((sum, p) => sum + p.patients, 0);
|
||||
const weekdayTotal = weekdayData.reduce((sum, p) => sum + p.appointments, 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-10">
|
||||
<div>
|
||||
@@ -85,6 +143,23 @@ export function AnalysisView() {
|
||||
<p className="text-muted-foreground text-sm">{t("analysis.subtitle")}</p>
|
||||
</div>
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg tracking-tight">
|
||||
{t("analysis.live.title")}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("analysis.live.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
<Card className="gap-3 p-4">
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{t("analysis.live.label")}
|
||||
</span>
|
||||
<LiveHospitalChart />
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
columns={3}
|
||||
description={t("analysis.patientVolume.description")}
|
||||
@@ -114,20 +189,29 @@ export function AnalysisView() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<TrendCard
|
||||
description={t("analysis.charts.patientGrowthDescription")}
|
||||
detailsLabel={t("analysis.charts.viewDetails")}
|
||||
emptyLabel={t("analysis.charts.empty")}
|
||||
points={data?.trends.patientsByMonth ?? []}
|
||||
<ChartCard
|
||||
title={t("analysis.charts.patientGrowthTitle")}
|
||||
/>
|
||||
<TrendCard
|
||||
description={t("analysis.charts.weeklyAppointmentsDescription")}
|
||||
detailsLabel={t("analysis.charts.viewDetails")}
|
||||
emptyLabel={t("analysis.charts.empty")}
|
||||
points={data?.trends.appointmentsByWeekday ?? []}
|
||||
total={monthTotal}
|
||||
>
|
||||
<AreaChart aspectRatio="2 / 1" data={monthData}>
|
||||
<Grid horizontal />
|
||||
<Area dataKey="patients" fill="var(--chart-line-primary)" />
|
||||
<XAxis tickMode="data" />
|
||||
<ChartTooltip showDatePill={false} />
|
||||
</AreaChart>
|
||||
</ChartCard>
|
||||
<ChartCard
|
||||
title={t("analysis.charts.weeklyAppointmentsTitle")}
|
||||
/>
|
||||
total={weekdayTotal}
|
||||
>
|
||||
<BarChart aspectRatio="2 / 1" data={weekdayData}>
|
||||
<Grid horizontal />
|
||||
<Bar dataKey="appointments" fill="var(--chart-line-primary)" />
|
||||
<BarXAxis />
|
||||
<BarYAxis />
|
||||
<ChartTooltip showDatePill={false} />
|
||||
</BarChart>
|
||||
</ChartCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import {
|
||||
LiveLineChart,
|
||||
type LiveLinePoint,
|
||||
} from "@/components/charts/live-line-chart";
|
||||
import { LiveLine } from "@/components/charts/live-line";
|
||||
import { LiveYAxis } from "@/components/charts/live-y-axis";
|
||||
import { ChartTooltip } from "@/components/charts/tooltip";
|
||||
|
||||
// temetro has no real-time telemetry feed yet, so the "Live" panel simulates a
|
||||
// hospital signal (patients currently in the building) as a bounded random walk
|
||||
// that updates once a second. Swap `tick()` for a WebSocket/poll when a real
|
||||
// feed exists — the chart contract (append { time, value }) stays the same.
|
||||
const BASELINE = 48;
|
||||
const MIN = 24;
|
||||
const MAX = 90;
|
||||
const WINDOW_SECONDS = 30;
|
||||
|
||||
export function LiveHospitalChart() {
|
||||
const [data, setData] = useState<LiveLinePoint[]>([]);
|
||||
const [value, setValue] = useState(BASELINE);
|
||||
const valueRef = useRef(BASELINE);
|
||||
|
||||
useEffect(() => {
|
||||
// Seed a short history so the line is drawn immediately on mount.
|
||||
const now = Date.now() / 1000;
|
||||
setData(
|
||||
Array.from({ length: WINDOW_SECONDS }, (_, i) => ({
|
||||
time: now - (WINDOW_SECONDS - i),
|
||||
value: BASELINE,
|
||||
})),
|
||||
);
|
||||
|
||||
const id = setInterval(() => {
|
||||
const drift = (Math.random() - 0.5) * 5;
|
||||
const next = Math.max(MIN, Math.min(MAX, valueRef.current + drift));
|
||||
valueRef.current = next;
|
||||
setValue(next);
|
||||
setData((prev) => [
|
||||
...prev.slice(-500),
|
||||
{ time: Date.now() / 1000, value: next },
|
||||
]);
|
||||
}, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="h-56 w-full">
|
||||
<LiveLineChart data={data} value={value} window={WINDOW_SECONDS}>
|
||||
<LiveLine
|
||||
dataKey="value"
|
||||
formatValue={(v) => String(Math.round(v))}
|
||||
momentumColors={{
|
||||
up: "var(--color-emerald-500)",
|
||||
down: "var(--color-red-500)",
|
||||
flat: "var(--chart-line-primary)",
|
||||
}}
|
||||
/>
|
||||
<LiveYAxis formatValue={(v) => String(Math.round(v))} position="left" />
|
||||
<ChartTooltip showDatePill={false} />
|
||||
</LiveLineChart>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user