refactor: revamp for older report logic with benefits of newer one

src/Reports/Report.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import AssessmentIcon from "@mui/icons-material/Assessment";
-import { useResource, useAppContext, formatCurrency } from "../../react-openapi";
+import { useResource, useAppContext } from "../../react-openapi";
 import { useToast } from "../ui/Toast";
 import { PageHeader } from "../ui/PageHeader";
 import { EmptyState } from "../ui/EmptyState";
@@ -45,22 +45,19 @@ export default function Report() {
   }, [load]);
 
   const handleGenerated = useCallback(
-    (created: any[]) => {
+    (created: any) => {
       load();
-      if (created?.[0]?.id) setSelectedId(created[0].id);
+      if (created?.id) setSelectedId(created.id);
     },
     [load],
   );
 
   const handleRegenerate = useCallback(
     async (report: any) => {
-      const payload: Record<string, any> = { groups: report.groups ?? [] };
-      if (report.start_date) payload.start_date = report.start_date;
-      if (report.end_date) payload.end_date = report.end_date;
       try {
-        await create(payload);
+        const created = await create(report.query ?? {});
         showToast("Report regenerated");
-        setSelectedId(report.id);
+        setSelectedId(created?.id ?? report.id);
         setViewerVersion((v) => v + 1);
         load();
       } catch (e: any) {
@@ -86,9 +83,9 @@ export default function Report() {
 
   const summary = useMemo(() => {
     const rows = reports ?? [];
-    const txnCount = rows.reduce((s, r) => s + (r.txn_count ?? 0), 0);
-    const total = rows.reduce((s, r) => s + (typeof r.metrics?.sum === "number" ? r.metrics.sum : 0), 0);
-    return { count: rows.length, txnCount, total };
+    const granularities = new Set<string>();
+    for (const r of rows) for (const g of r.query?.granularities ?? []) granularities.add(g);
+    return { count: rows.length, granularities: [...granularities].join(", ") };
   }, [reports]);
 
   return (
@@ -96,7 +93,7 @@ export default function Report() {
       <PageHeader
         crumbs={[{ label: "Home", path: "/" }, { label: "Reports" }]}
         title="Reports"
-        subtitle="Generate period/payee snapshots from the reporting API and slice the cached data."
+        subtitle="Build an immutable snapshot cube once, then slice by granularity, period, payee and tag at view time."
       />
 
       {error && (
@@ -107,8 +104,7 @@ export default function Report() {
 
       <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
         <StatCard label="Reports" value={summary.count.toLocaleString("en-IN")} />
-        <StatCard label="Transactions covered" value={summary.txnCount.toLocaleString("en-IN")} />
-        <StatCard label="Total" value={formatCurrency(summary.total, "INR")} />
+        <StatCard label="Granularities covered" value={summary.granularities || "—"} />
       </Box>
 
       <GenerateReportPanel onGenerated={handleGenerated} />
@@ -154,7 +150,7 @@ export default function Report() {
               <EmptyState
                 icon={<AssessmentIcon />}
                 title="No reports yet"
-                description="Generate your first report above — pick a granularity and payee (a payee-only or wildcard config snapshots weekly, monthly and quarterly)."
+                description="Generate your first snapshot above — choose granularities and grouping dimensions, then slice the cached cube by period, payee and tag."
               />
             </Paper>
           ) : (