feat(analysis): add trend charts to the Analysis page

The Analysis page only showed KPI numbers. Add two real time-series and render
them as dependency-free bar charts (matching components/chat/sparkline.tsx):

- backend: GET /api/analytics now returns `trends.patientsByMonth` (new patients
  per month over the last 6 months) and `trends.appointmentsByWeekday`
  (appointments per day for the current week), bucketed in JS from one query each.
- frontend: new components/analysis/bar-chart.tsx and two chart sections on the
  Analysis view (Patient growth, Appointments this week), with i18n keys.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-06-08 19:20:15 +03:00
parent 6213da9477
commit 8ab0552cf8
6 changed files with 199 additions and 0 deletions
+6
View File
@@ -2,6 +2,8 @@ import { apiFetch } from "@/lib/api-client";
// Server-computed clinic analytics. Mirrors the backend `src/types/analytics.ts`.
// All figures are aggregates over the active clinic's real data.
export type TrendPoint = { label: string; count: number };
export type Analytics = {
patients: {
total: number;
@@ -22,6 +24,10 @@ export type Analytics = {
open: number;
done: number;
};
trends: {
patientsByMonth: TrendPoint[];
appointmentsByWeekday: TrendPoint[];
};
};
export function getAnalytics(): Promise<Analytics> {
@@ -402,6 +402,13 @@
"description": "Care-team workload",
"open": "Open",
"completed": "Completed"
},
"charts": {
"patientGrowthTitle": "Patient growth",
"patientGrowthDescription": "New patients per month over the last 6 months",
"weeklyAppointmentsTitle": "Appointments this week",
"weeklyAppointmentsDescription": "Bookings per day for the current week",
"empty": "No data yet"
}
},
"activity": {