shellphone.app/app/public-area/pages/open-metrics.tsx

40 lines
1.1 KiB
TypeScript
Raw Normal View History

import type { BlitzPage } from "blitz";
2021-08-29 21:28:42 +00:00
import { useQuery } from "blitz";
2021-08-28 20:17:01 +00:00
import getMetrics from "../queries/get-metrics";
2021-08-29 21:28:42 +00:00
import Layout from "../components/layout";
2021-08-28 20:17:01 +00:00
const initialData = {
phoneNumbers: 0,
smsExchanged: 0,
minutesCalled: 0,
};
const OpenMetrics: BlitzPage = () => {
2021-08-28 20:17:01 +00:00
const [metrics] = useQuery(getMetrics, {}, { suspense: false, initialData });
const { phoneNumbers, smsExchanged, minutesCalled } = metrics ?? initialData;
return (
2021-08-29 21:28:42 +00:00
<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>
);
};
2021-08-28 19:56:26 +00:00
function Card({ title, value }: any) {
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>
);
}
2021-08-29 21:28:42 +00:00
OpenMetrics.getLayout = (page) => <Layout title="Open Metrics">{page}</Layout>;
OpenMetrics.suppressFirstRenderFlicker = true;
export default OpenMetrics;