40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import type { BlitzPage } from "blitz";
|
|
import { useQuery } from "blitz";
|
|
|
|
import getMetrics from "../queries/get-metrics";
|
|
|
|
import Layout from "../components/layout";
|
|
|
|
const initialData = {
|
|
phoneNumbers: 0,
|
|
smsExchanged: 0,
|
|
minutesCalled: 0,
|
|
};
|
|
|
|
const OpenMetrics: BlitzPage = () => {
|
|
const [metrics] = useQuery(getMetrics, {}, { suspense: false, initialData });
|
|
const { phoneNumbers, smsExchanged, minutesCalled } = metrics ?? initialData;
|
|
|
|
return (
|
|
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
|
<Card title="Phone Numbers Registered" value={phoneNumbers} />
|
|
<Card title="SMS Exchanged" value={smsExchanged} />
|
|
<Card title="Minutes on Call" value={minutesCalled} />
|
|
</dl>
|
|
);
|
|
};
|
|
|
|
function Card({ title, value }: { title: string; value: number | string }) {
|
|
return (
|
|
<div className="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
|
|
<dt className="text-sm font-medium text-gray-500 truncate">{title}</dt>
|
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">{value}</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
OpenMetrics.getLayout = (page) => <Layout title="Open Metrics">{page}</Layout>;
|
|
OpenMetrics.suppressFirstRenderFlicker = true;
|
|
|
|
export default OpenMetrics;
|