mirror of
https://github.com/temetro/temetro.git
synced 2026-08-11 11:09:04 +00:00
feat: clinic-wide AI (analytics/earnings/inventory + invoice-from-file),
real Live card, persistent chat history Analytics & earnings: - Analytics now carries real money computed from invoices (billed/paid/ outstanding + by-month); new Earnings section on the Analysis page drawn with the project's Bklit chart components (shared EarningsChart). AI agent reaches the whole clinic: - new read tools getClinicInfo / getAnalytics / listInventory render clinic, analytics (with a Bklit earnings chart) and inventory cards in chat - proposeInvoice turns an uploaded purchase/medication list into an invoice (new "invoice" action-preview kind → createInvoice); invoices/appointments auto-create/link a patient (ensurePatient) so they hit the Patients page Live card: - plots real data — patients checked in today — via GET /api/analytics/live (polled); value pill clamped and margins widened so nothing spills the card Persistent AI chat history (Claude-style): - ai_chat_threads + ai_chat_messages (migration 0016); per-user, org-scoped thread CRUD under /api/chat/threads - chat panel owns a thread id, loads /?thread=<id>, and auto-saves after each exchange; sidebar lists past chats (open/delete), "New chat" starts fresh Verified with backend typecheck + frontend tsc + next build. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -3,6 +3,7 @@
|
||||
import { type ReactNode, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EarningsChart } from "@/components/analysis/earnings-chart";
|
||||
import { LiveHospitalChart } from "@/components/analysis/live-hospital-chart";
|
||||
import { Area, AreaChart } from "@/components/charts/area-chart";
|
||||
import { Bar } from "@/components/charts/bar";
|
||||
@@ -13,6 +14,7 @@ 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";
|
||||
import { formatMoney } from "@/lib/invoices";
|
||||
|
||||
// Clinic analytics computed on the server from real data (patients,
|
||||
// appointments, prescriptions, tasks). No fabricated financials — temetro has no
|
||||
@@ -216,6 +218,37 @@ export function AnalysisView() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-3">
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg tracking-tight">
|
||||
{t("analysis.earnings.title")}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("analysis.earnings.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<StatCard
|
||||
label={t("analysis.earnings.billed")}
|
||||
value={formatMoney(data?.earnings.totalBilled ?? 0)}
|
||||
/>
|
||||
<StatCard
|
||||
label={t("analysis.earnings.paid")}
|
||||
value={formatMoney(data?.earnings.totalPaid ?? 0)}
|
||||
/>
|
||||
<StatCard
|
||||
label={t("analysis.earnings.outstanding")}
|
||||
value={formatMoney(data?.earnings.totalOutstanding ?? 0)}
|
||||
/>
|
||||
</div>
|
||||
<Card className="gap-3 p-4">
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{t("analysis.earnings.byMonth")}
|
||||
</span>
|
||||
<EarningsChart data={data?.earnings.byMonth ?? []} />
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
columns={4}
|
||||
description={t("analysis.appointments.description")}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { Bar } from "@/components/charts/bar";
|
||||
import { BarChart } from "@/components/charts/bar-chart";
|
||||
import { BarXAxis } from "@/components/charts/bar-x-axis";
|
||||
import { Grid } from "@/components/charts/grid";
|
||||
import { ChartTooltip } from "@/components/charts/tooltip";
|
||||
import type { EarningsPoint } from "@/lib/analytics";
|
||||
|
||||
// Earnings by month — billed vs paid — drawn with the project's Bklit chart
|
||||
// components (the vendored visx chart family under components/charts). Shared by
|
||||
// the Analysis page and the chat analytics card.
|
||||
export function EarningsChart({
|
||||
data,
|
||||
aspectRatio = "2 / 1",
|
||||
}: {
|
||||
data: EarningsPoint[];
|
||||
aspectRatio?: string;
|
||||
}) {
|
||||
const chartData = data.map((d) => ({
|
||||
name: d.label,
|
||||
billed: d.billed,
|
||||
paid: d.paid,
|
||||
}));
|
||||
return (
|
||||
<BarChart aspectRatio={aspectRatio} data={chartData}>
|
||||
<Grid horizontal />
|
||||
<Bar dataKey="billed" fill="var(--chart-line-primary)" />
|
||||
<Bar dataKey="paid" fill="var(--chart-2)" />
|
||||
<BarXAxis />
|
||||
<ChartTooltip showDatePill={false} />
|
||||
</BarChart>
|
||||
);
|
||||
}
|
||||
@@ -12,51 +12,63 @@ import { LiveLine } from "@/components/charts/live-line";
|
||||
import { LiveYAxis } from "@/components/charts/live-y-axis";
|
||||
import { ChartTooltip } from "@/components/charts/tooltip";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { getLiveMetric } from "@/lib/analytics";
|
||||
|
||||
// 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.
|
||||
//
|
||||
// The simulation (a 1s interval + an rAF animation loop) only runs while the
|
||||
// clinician has explicitly toggled it on, so the Analysis page stays idle by
|
||||
// default instead of animating in the background.
|
||||
const BASELINE = 48;
|
||||
const MIN = 24;
|
||||
const MAX = 90;
|
||||
// The "Live" panel plots a REAL clinic signal — patients checked in today — by
|
||||
// polling GET /api/analytics/live. It only runs while the clinician toggles it
|
||||
// on, so the Analysis page stays idle by default. The metric changes slowly
|
||||
// (only as people check in), so the line scrolls smoothly using the last value
|
||||
// and refreshes from the server every few seconds.
|
||||
const WINDOW_SECONDS = 30;
|
||||
const REFETCH_EVERY_TICKS = 5; // poll the server every 5s (1s render ticks)
|
||||
|
||||
export function LiveHospitalChart() {
|
||||
const { t } = useTranslation();
|
||||
const [live, setLive] = useState(false);
|
||||
const [data, setData] = useState<LiveLinePoint[]>([]);
|
||||
const [value, setValue] = useState(BASELINE);
|
||||
const valueRef = useRef(BASELINE);
|
||||
const [value, setValue] = useState(0);
|
||||
const valueRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!live) return;
|
||||
// Seed a short history so the line is drawn immediately on start.
|
||||
const now = Date.now() / 1000;
|
||||
valueRef.current = BASELINE;
|
||||
setValue(BASELINE);
|
||||
setData(
|
||||
Array.from({ length: WINDOW_SECONDS }, (_, i) => ({
|
||||
time: now - (WINDOW_SECONDS - i),
|
||||
value: BASELINE,
|
||||
})),
|
||||
);
|
||||
let active = true;
|
||||
|
||||
const refetch = () =>
|
||||
getLiveMetric()
|
||||
.then((r) => {
|
||||
if (!active) return;
|
||||
valueRef.current = r.value;
|
||||
setValue(r.value);
|
||||
})
|
||||
.catch(() => {
|
||||
/* keep the last value on a transient error */
|
||||
});
|
||||
|
||||
// Seed a short flat history from the first reading so the line draws at once.
|
||||
refetch().finally(() => {
|
||||
if (!active) return;
|
||||
const now = Date.now() / 1000;
|
||||
setData(
|
||||
Array.from({ length: WINDOW_SECONDS }, (_, i) => ({
|
||||
time: now - (WINDOW_SECONDS - i),
|
||||
value: valueRef.current,
|
||||
})),
|
||||
);
|
||||
});
|
||||
|
||||
let tick = 0;
|
||||
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);
|
||||
tick += 1;
|
||||
if (tick % REFETCH_EVERY_TICKS === 0) void refetch();
|
||||
setData((prev) => [
|
||||
...prev.slice(-500),
|
||||
{ time: Date.now() / 1000, value: next },
|
||||
{ time: Date.now() / 1000, value: valueRef.current },
|
||||
]);
|
||||
}, 1000);
|
||||
return () => clearInterval(id);
|
||||
return () => {
|
||||
active = false;
|
||||
clearInterval(id);
|
||||
};
|
||||
}, [live]);
|
||||
|
||||
return (
|
||||
@@ -86,7 +98,7 @@ export function LiveHospitalChart() {
|
||||
<div className="h-56 w-full">
|
||||
<LiveLineChart
|
||||
data={data}
|
||||
margin={{ left: 44, right: 28 }}
|
||||
margin={{ left: 52, right: 48 }}
|
||||
value={value}
|
||||
window={WINDOW_SECONDS}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user