"use client";
import { type ReactNode, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { TrendCard } from "@/components/analysis/trend-card";
import { Card } from "@/components/ui/card";
import { type Analytics, getAnalytics } from "@/lib/analytics";
// Clinic analytics computed on the server from real data (patients,
// appointments, prescriptions, tasks). No fabricated financials — temetro has no
// billing data source.
type Metric = { label: string; value: string };
function StatCard({ label, value }: Metric) {
return (
{label}
{value}
);
}
// Each section's grid fills its row evenly: the column count matches the number
// of cards so there's never an orphan card on its own row. Static class strings
// (no interpolation) so Tailwind can see them.
const GRID_BY_COLUMNS: Record<2 | 3 | 4, string> = {
2: "grid grid-cols-1 gap-4 sm:grid-cols-2",
3: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
4: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
};
function Section({
title,
description,
columns,
children,
}: {
title: string;
description: string;
columns: 2 | 3 | 4;
children: ReactNode;
}) {
return (
{title}
{description}
{children}
);
}
export function AnalysisView() {
const { t } = useTranslation();
const [data, setData] = useState(null);
useEffect(() => {
let active = true;
getAnalytics()
.then((a) => {
if (active) setData(a);
})
.catch(() => {
/* api-client redirects on 401; otherwise leave it loading */
});
return () => {
active = false;
};
}, []);
const n = (v: number | undefined) => String(v ?? 0);
return (