reports page: spec-driven generate panel, list, and sliceable viewer

Add a /reports page built on react-openapi's runtime configs:
- inline generate panel (GroupSpec enum, prefetched payee picker,
  strict DD-MM-YYYY range, 400 surfacing)
- metadata report list with view/regenerate/delete
- viewer that slices the cached per-entity payload via
  metadata.group_options, aggregates metrics + txns, pivots
  period x payee, and renders month accordions
- route + nav entry; no hand-rolled schema duplication

react-openapi/index.ts

@@ -5,12 +5,7 @@ export { useAppContext } from "./src/context/AppContext";
 export { useResource } from "./src/context/useResource";
 export { ListCellRenderer, DetailFieldRenderer, applyDisplayFormat } from "./src/components/fields";
 export { FormFieldRenderer } from "./src/components/fields/FormFieldRenderer";
-export { MultiEnumField } from "./src/components/fields/renderers/MultiEnumField";
-export { extractFields } from "./src/transformers/field-config";
-export { useFkFieldOptions } from "./src/hooks/useFkFieldOptions";
-export type { FkOption } from "./src/hooks/useFkFieldOptions";
 export { CurrencyField, formatCurrency } from "./src/components/fields/renderers/CurrencyField";
-export { FkMultiSelectField } from "./src/components/fields/renderers/FkMultiSelectField";
 export { SseStreamView } from "./src/components/SseStreamView";
 export { SseConnectionStatus } from "./src/components/SseConnectionStatus";
 export { getApi } from "./src/hooks/useApi";

react-openapi/src/components/fields/FormFieldRenderer.tsx

@@ -6,7 +6,6 @@ import { NumberField } from "./renderers/NumberField";
 import { DateField } from "./renderers/DateField";
 import { BooleanField } from "./renderers/BooleanField";
 import { EnumField } from "./renderers/EnumField";
-import { MultiEnumField } from "./renderers/MultiEnumField";
 import { FkSelectField } from "./renderers/FkSelectField";
 import { FkMultiSelectField } from "./renderers/FkMultiSelectField";
 import { FileUploadField } from "./renderers/FileUploadField";
@@ -82,17 +81,6 @@ export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fk
     );
   }
 
-  if (field.isArray && field.enumValues) {
-    return (
-      <MultiEnumField
-        field={field}
-        value={value}
-        onChange={onChange}
-        error={error}
-      />
-    );
-  }
-
   if (field.enumValues) {
     return (
       <EnumField

react-openapi/src/components/fields/index.ts

@@ -3,5 +3,4 @@ export { ListCellRenderer } from "./ListCellRenderer";
 export { DetailFieldRenderer } from "./DetailFieldRenderer";
 export { applyDisplayFormat } from "./utils";
 export { JsonField } from "./renderers/JsonField";
-export { MultiEnumField } from "./renderers/MultiEnumField";
 export { CurrencyField, formatCurrency } from "./renderers/CurrencyField";

react-openapi/src/components/fields/renderers/MultiEnumField.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import { Autocomplete, TextField, Chip, Box } from "@mui/material";
-import DoneIcon from "@mui/icons-material/Done";
-import type { FieldConfig } from "../../../types";
-
-interface Props {
-  field: FieldConfig;
-  value: any;
-  onChange: (value: any[]) => void;
-  error?: string;
-}
-
-export function MultiEnumField({ field, value, onChange, error }: Props) {
-  const selected: string[] = Array.isArray(value) ? value : [];
-
-  return (
-    <Autocomplete
-      multiple
-      disableCloseOnSelect
-      size="small"
-      options={field.enumValues ?? []}
-      value={selected}
-      onChange={(_, newVal) => onChange(newVal)}
-      renderOption={(props, option, { selected: isSelected }) => {
-        const { key, ...rest } = props as any;
-        return (
-          <li key={key} {...rest}>
-            {isSelected ? (
-              <DoneIcon sx={{ fontSize: 14, mr: 1, color: "primary.main" }} />
-            ) : (
-              <Box sx={{ width: 22, mr: 1 }} />
-            )}
-            {option}
-          </li>
-        );
-      }}
-      renderTags={(tagValue, getTagProps) =>
-        tagValue.map((tag, index) => {
-          const { key, ...tagProps } = getTagProps({ index });
-          return <Chip key={key} {...tagProps} label={tag} size="small" />;
-        })
-      }
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={field.label}
-          placeholder={field.description || undefined}
-          error={!!error}
-          helperText={error || field.description || undefined}
-          size="small"
-        />
-      )}
-      sx={{
-        "& .MuiAutocomplete-popupIndicator, & .MuiAutocomplete-clearIndicator": { width: 20, height: 20, fontSize: 16 },
-      }}
-      disabled={field.readOnly}
-    />
-  );
-}

react-openapi/src/hooks/useApi.ts

@@ -3,24 +3,6 @@ import axios, { AxiosInstance } from "axios";
 let apiClient: AxiosInstance | null = null;
 let _onUnauthorized: (() => void) | undefined;
 
-function serializeParams(params: Record<string, any>): string {
-  const searchParams = new URLSearchParams();
-  for (const [key, value] of Object.entries(params ?? {})) {
-    if (value === undefined || value === null) continue;
-    if (Array.isArray(value)) {
-      for (const item of value) searchParams.append(key, String(item));
-    } else if (typeof value === "object") {
-      for (const [nestedKey, nestedValue] of Object.entries(value)) {
-        if (nestedValue === undefined || nestedValue === null) continue;
-        searchParams.append(`${key}[${nestedKey}]`, String(nestedValue));
-      }
-    } else {
-      searchParams.append(key, String(value));
-    }
-  }
-  return searchParams.toString();
-}
-
 export function initApi(baseUrl: string, getToken?: () => string | null, onUnauthorized?: () => void): AxiosInstance {
   if (apiClient && apiClient.defaults.baseURL === baseUrl) {
     _onUnauthorized = onUnauthorized;
@@ -32,7 +14,6 @@ export function initApi(baseUrl: string, getToken?: () => string | null, onUnaut
   apiClient = axios.create({
     baseURL: baseUrl,
     headers: { "Content-Type": "application/json" },
-    paramsSerializer: serializeParams,
   });
 
   apiClient.interceptors.request.use((config) => {

react-openapi/src/hooks/useFkFieldOptions.ts

@@ -1,82 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import type { FieldConfig, FKFieldConfig } from "../types";
-import { useAppContext } from "../context/AppContext";
-import { getApi } from "./useApi";
-
-export interface FkOption {
-  value: any;
-  label: string;
-}
-
-function applyFormat(obj: any, format: string): string {
-  if (!obj || typeof obj !== "object") return String(obj ?? "");
-  return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));
-}
-
-/**
- * Loads select options for FK-annotated fields of a field set.
- * Option values bind to `fk.value` when set (e.g. account names),
- * otherwise to the target resource's primary key.
- */
-export function useFkFieldOptions(fields: FieldConfig[]) {
-  const { resources } = useAppContext();
-  const [fkOptions, setFkOptions] = useState<Record<string, FkOption[]>>({});
-  const [fkLoading, setFkLoading] = useState<Record<string, boolean>>({});
-
-  const loadFkOptions = useCallback(
-    async (fieldName: string, fk: FKFieldConfig) => {
-      setFkLoading((prev) => ({ ...prev, [fieldName]: true }));
-      try {
-        const targetRes = resources.find((r) => r.name === fk.resource);
-        if (!targetRes) return;
-
-        const api = getApi();
-        const params: Record<string, any> = {};
-        if (targetRes.pagination) params.limit = 0;
-        const res = await api.get(targetRes.path, { params });
-
-        let items: any[];
-        if (targetRes.pagination) {
-          if (!res.data || typeof res.data !== "object" || !Array.isArray(res.data.items)) {
-            throw new Error(`Expected paginated response from ${targetRes.path}`);
-          }
-          items = res.data.items;
-        } else {
-          if (!Array.isArray(res.data)) {
-            throw new Error(`Expected array response from ${targetRes.path}`);
-          }
-          items = res.data;
-        }
-
-        const opts: FkOption[] = items.map((item: any) => ({
-          value: item[fk.value ?? targetRes.primaryKey],
-          label: applyFormat(item, targetRes.displayFormat),
-        }));
-        setFkOptions((prev) => ({ ...prev, [fieldName]: opts }));
-      } catch {
-        // leave options empty; the field renders without suggestions
-      } finally {
-        setFkLoading((prev) => ({ ...prev, [fieldName]: false }));
-      }
-    },
-    [resources]
-  );
-
-  useEffect(() => {
-    fields.forEach((f) => {
-      if (f.fk?.prefetch) loadFkOptions(f.name, f.fk);
-    });
-  }, [fields, loadFkOptions]);
-
-  const loadFkOnOpen = useCallback(
-    (fieldName: string) => {
-      const field = fields.find((f) => f.name === fieldName);
-      if (field?.fk && !field.fk.prefetch && !fkOptions[fieldName]) {
-        loadFkOptions(fieldName, field.fk);
-      }
-    },
-    [fields, fkOptions, loadFkOptions]
-  );
-
-  return { fkOptions, fkLoading, loadFkOnOpen };
-}

react-openapi/src/transformers/field-config.ts

@@ -136,10 +136,7 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
         sortable: prop["x-sortable"] ?? false,
         readOnly: prop.readOnly ?? false,
         required: requiredFields.includes(name),
-        // Lift enum constraints from array items so arrays-of-enum can render
-        // as multi-selects (e.g. ReportQuery.granularities).
-        enumValues: prop.enum ?? (prop.type === "array" ? prop.items?.enum : undefined),
-        defaultValue: prop.default,
+        enumValues: prop.enum,
         fk: prop["x-fk"],
         uiType: prop["x-ui-type"],
         uploadUrl: prop["x-upload-url"],

react-openapi/src/types.ts

@@ -85,8 +85,6 @@ export interface ResourceConfig {
 export interface FKFieldConfig {
   resource: string;
   prefetch: boolean;
-  /** Target property used as the wire value (defaults to the target's primary key). */
-  value?: string;
 }
 
 export interface OneOfOption {
@@ -108,8 +106,6 @@ export interface FieldConfig {
   readOnly: boolean;
   required: boolean;
   enumValues?: string[];
-  /** Schema-level `default` used to seed create-form state. */
-  defaultValue?: any;
   fk?: FKFieldConfig;
   uiType?: string;
   uploadUrl?: string;

react-openapi/src/utils/sanitize-payload.ts

@@ -29,9 +29,7 @@ export async function sanitizePayload(
 
     const val = result[key];
 
-    // FK fields whose wire value is a plain target property (fk.value, e.g.
-    // account names) are already in wire format — no id→object resolution.
-    if (field.fk && !field.fk.value) {
+    if (field.fk) {
       if (val == null || val === "") {
         result[key] = null;
       } else if (resolveFk) {

src/Expense/Expense.tsx

@@ -10,15 +10,32 @@ import {
 } from "@mui/material";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
 import { useNavigate } from "react-router-dom";
-import { useResource, useAppContext, formatCurrency } from "../react-openapi";
-import { PageHeader } from "./ui/PageHeader";
-import { EmptyState } from "./ui/EmptyState";
-import { StatCard } from "./common/components/StatCard";
-import { TransactionList } from "./common/components/TransactionList";
-import { buildTxnFieldConfigs } from "./common/utils/fieldConfigs";
-import { isExpense } from "./common/utils/transactions";
-import { currentMonthKey, monthKey, monthLabel, parseOccurredAt } from "./common/utils/dates";
-import type { ExpenseItem } from "./common/types";
+import { useResource, useAppContext, formatCurrency } from "../../react-openapi";
+import { PageHeader } from "../ui/PageHeader";
+import { EmptyState } from "../ui/EmptyState";
+import { ExpenseList } from "./ExpenseList";
+import { ExpenseItem, ExpenseFieldConfigs, isExpense, currentMonthKey, monthKey, monthLabel, parseOccurredAt } from "./types";
+
+function StatCard({ label, value, hint }: { label: string; value: string; hint?: string }) {
+  return (
+    <Paper
+      variant="outlined"
+      sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 180 }}
+    >
+      <Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
+        {label}
+      </Typography>
+      <Typography variant="h5" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em" }}>
+        {value}
+      </Typography>
+      {hint && (
+        <Typography variant="caption" color="text.secondary">
+          {hint}
+        </Typography>
+      )}
+    </Paper>
+  );
+}
 
 export default function Expense() {
   const navigate = useNavigate();
@@ -26,7 +43,33 @@ export default function Expense() {
   const { resources } = useAppContext();
   const [items, setItems] = useState<ExpenseItem[] | null>(null);
 
-  const fieldConfigs = useMemo(() => buildTxnFieldConfigs(resources), [resources]);
+  const fieldConfigs = useMemo<ExpenseFieldConfigs | null>(() => {
+    if (!resource) return null;
+    const find = (name: string) => resource.fields.find((f) => f.name === name);
+    const entity = find("entity");
+    const amount = find("amount");
+    const account = find("account");
+    const tags = find("tags");
+    const occurredAt = find("occurred_at");
+    const entitiesRes = resources.find((r) => r.name === "entities");
+    const accountsRes = resources.find((r) => r.name === "accounts");
+    const tagsRes = resources.find((r) => r.name === "tags");
+    const logo = entitiesRes?.fields.find((f) => f.name === "logo");
+    if (!entity || !amount || !account || !tags || !occurredAt || !logo) return null;
+    return {
+      entity,
+      amount,
+      account,
+      tags,
+      occurredAt,
+      logo,
+      formats: {
+        entity: entitiesRes?.displayFormat ?? "{name}",
+        account: accountsRes?.displayFormat ?? "{name}",
+        tags: tagsRes?.displayFormat ?? "{name}",
+      },
+    };
+  }, [resource, resources]);
 
   useEffect(() => {
     let mounted = true;
@@ -37,7 +80,7 @@ export default function Expense() {
     return () => {
       mounted = false;
     };
-  }, [list]);
+  }, []);
 
   const sorted = useMemo(
     () =>
@@ -110,15 +153,15 @@ export default function Expense() {
         <>
           <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
             <StatCard
-              label="Outflows"
+              label="Total spent"
               value={formatCurrency(summary.totalSpent, summary.currency)}
               hint={`${summary.monthItems.length} transaction${summary.monthItems.length === 1 ? "" : "s"} this month`}
             />
             <StatCard label="This month" value={formatCurrency(summary.monthTotal, summary.currency)} hint={summary.thisMonth} />
-            <StatCard label="Inflows" value={formatCurrency(summary.totalIncome, summary.currency)} />
+            <StatCard label="Income" value={formatCurrency(summary.totalIncome, summary.currency)} />
           </Box>
 
-          {fieldConfigs && <TransactionList items={sorted} fields={fieldConfigs} />}
+          {fieldConfigs && <ExpenseList items={sorted} fields={fieldConfigs} />}
         </>
       )}
     </Container>

src/Expense/ExpenseList.tsx

@@ -12,85 +12,120 @@ import {
 import { alpha } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { formatCurrency } from "../../../react-openapi";
-import type { ExpenseItem, TxnFieldConfigs } from "../types";
-import { computeTxnMetrics, groupByDate, groupByPeriod } from "../utils/transactions";
-import type { ListGroupMetrics, ListPeriodGroup, PeriodGranularity } from "../utils/transactions";
-import { TransactionRow } from "./TransactionRow";
-import { StatCard } from "./StatCard";
+import { ListCellRenderer, CurrencyField, applyDisplayFormat, formatCurrency } from "../../react-openapi";
+import type { ExpenseItem, ExpenseFieldConfigs } from "./types";
+import { isExpense, monthKey, monthLabel, parseOccurredAt } from "./types";
 
-interface TransactionListProps {
-  items?: ExpenseItem[];
-  fields: TxnFieldConfigs;
-  granularity?: PeriodGranularity;
-  showMetrics?: boolean;
-  groups?: ListPeriodGroup[];
-}
-
-function cadenceRow(cadenceDays: number | null, frequency: number | null): { label: string; value: string } {
-  const fmt = (v: number) => (Number.isInteger(v) ? String(v) : v.toFixed(2));
-  if (cadenceDays != null && cadenceDays < 1) {
-    return { label: "Frequency", value: `${frequency == null ? "—" : fmt(frequency)} /day` };
-  }
-  return {
-    label: "Cadence",
-    value: cadenceDays == null ? "—" : `${fmt(cadenceDays)} days`,
-  };
-}
-
-function txnFallbackMetrics(items: ExpenseItem[]): ListGroupMetrics {
-  const t = computeTxnMetrics(items);
-  return {
-    sum: t.sum,
-    count: t.count,
-    avg: t.avg,
-    min: t.min,
-    max: t.max,
-    cadence: t.cadenceDays,
-    frequency: t.frequency,
-  };
-}
-
-function GroupMetrics({
-  items,
-  currency,
-  metrics,
-}: {
+interface GroupedMonth {
+  key: string;
   items: ExpenseItem[];
+  spent: number;
+  income: number;
   currency: string;
-  metrics?: ListGroupMetrics;
-}) {
-  const m = metrics ?? txnFallbackMetrics(items);
-  const rows: { label: string; value: string }[] = [
-    { label: "Sum", value: formatCurrency(m.sum, currency) },
-    { label: "Avg", value: m.avg == null ? "—" : formatCurrency(m.avg, currency) },
-    { label: "Min", value: m.min == null ? "—" : formatCurrency(m.min, currency) },
-    { label: "Max", value: m.max == null ? "—" : formatCurrency(m.max, currency) },
-    cadenceRow(m.cadence, m.frequency),
-  ];
+}
+
+function groupByMonth(items: ExpenseItem[]): GroupedMonth[] {
+  const map = new Map<string, ExpenseItem[]>();
+  for (const item of items) {
+    const key = monthKey(item.occurred_at);
+    const list = map.get(key) ?? [];
+    list.push(item);
+    map.set(key, list);
+  }
+  return [...map.entries()]
+    .map(([key, list]) => {
+      const sorted = [...list].sort(
+        (a, b) => parseOccurredAt(b.occurred_at).getTime() - parseOccurredAt(a.occurred_at).getTime(),
+      );
+      const currency = sorted.find((it) => it.account?.currency)?.account?.currency ?? "INR";
+      const spent = sorted.filter(isExpense).reduce((sum, it) => sum + Math.abs(it.amount ?? 0), 0);
+      const income = sorted.filter((it) => !isExpense(it)).reduce((sum, it) => sum + (it.amount ?? 0), 0);
+      return { key, items: sorted, spent, income, currency };
+    })
+    .sort((a, b) => b.key.localeCompare(a.key));
+}
+
+interface ExpenseRowProps {
+  item: ExpenseItem;
+  currency: string;
+  fields: ExpenseFieldConfigs;
+}
+
+const ExpenseRow = React.memo(function ExpenseRow({ item, currency, fields }: ExpenseRowProps) {
+  const itemCurrency = item.account?.currency ?? currency;
+
   return (
-    <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", width: "100%" }}>
-      {rows.map((row) => (
-        <StatCard key={row.label} label={row.label} value={row.value} />
-      ))}
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        px: 2,
+        py: 1.25,
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: 2,
+        backgroundColor: "background.paper",
+        transition: "background-color 160ms ease, border-color 160ms ease",
+        "&:hover": {
+          backgroundColor: "action.hover",
+          borderColor: "primary.light",
+        },
+      }}
+    >
+      <Box
+        sx={{
+          width: 40,
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {item.entity?.logo ? (
+          <ListCellRenderer field={fields.logo} value={item.entity.logo} />
+        ) : (
+          <Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: "action.hover" }} />
+        )}
+      </Box>
+      <Box sx={{ flex: "0 1 auto", minWidth: 0 }}>
+        <Typography
+          variant="body1"
+          fontWeight={600}
+          noWrap
+          sx={{ fontSize: "0.9375rem", lineHeight: 1.3 }}
+        >
+          {item.entity ? applyDisplayFormat(item.entity, fields.formats.entity) : "Unknown"}
+        </Typography>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
+          <Box sx={{ color: "text.secondary" }}>
+            <ListCellRenderer field={fields.occurredAt} value={item.occurred_at} />
+          </Box>
+          {item.account?.name && (
+            <ListCellRenderer
+              field={fields.account}
+              value={item.account}
+              displayFormat={fields.formats.account}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box sx={{ flex: 1 }} />
+      <CurrencyField value={item.amount} currency={itemCurrency} large />
     </Box>
   );
+});
+
+interface ExpenseListProps {
+  items: ExpenseItem[];
+  fields: ExpenseFieldConfigs;
 }
 
-export function TransactionList({
-  items,
-  fields,
-  granularity = "monthly",
-  showMetrics = false,
-  groups: externalGroups,
-}: TransactionListProps) {
+export function ExpenseList({ items, fields }: ExpenseListProps) {
   const [activeMonth, setActiveMonth] = useState<string | null>(null);
   const [openMonth, setOpenMonth] = useState<string | null>(null);
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
-  const groups = useMemo<ListPeriodGroup[]>(
-    () => externalGroups ?? groupByPeriod(items ?? [], granularity),
-    [externalGroups, items, granularity],
-  );
+  const groups = useMemo(() => groupByMonth(items), [items]);
   const listRef = useRef<HTMLDivElement>(null);
   const pillRef = useRef<HTMLDivElement>(null);
   const didInitOpenMonth = useRef(false);
@@ -198,79 +233,38 @@ export function TransactionList({
                   px: 2,
                   py: 1,
                   "& .MuiAccordionSummary-content": {
-                    flexDirection: "column",
-                    alignItems: "stretch",
-                    gap: 0.75,
+                    alignItems: "center",
+                    gap: 1.5,
                     minWidth: 0,
                   },
                 }}
               >
-                <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, minWidth: 0 }}>
-                  <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
-                    {group.label}
-                  </Typography>
-                  <Typography variant="caption" color="text.secondary">
-                    {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
-                  </Typography>
-                  <Box sx={{ flex: 1 }} />
-                  <Typography variant="body2" fontWeight={700} color="error.main">
-                    {formatCurrency(group.spent, group.currency)}
-                  </Typography>
-                  <Typography variant="body2" color="text.disabled">
-                    /
-                  </Typography>
-                  <Typography variant="body2" fontWeight={700} color="success.main">
-                    {formatCurrency(group.income, group.currency)}
-                  </Typography>
-                </Box>
-                {showMetrics && (
-                  <GroupMetrics items={group.items} currency={group.currency} metrics={group.metrics} />
-                )}
+                <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
+                  {monthLabel(group.key)}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
+                </Typography>
+                <Box sx={{ flex: 1 }} />
+                <Typography variant="body2" fontWeight={700} color="error.main">
+                  {formatCurrency(group.spent, group.currency)}
+                </Typography>
+                <Typography variant="body2" color="text.disabled">
+                  /
+                </Typography>
+                <Typography variant="body2" fontWeight={700} color="success.main">
+                  {formatCurrency(group.income, group.currency)}
+                </Typography>
               </AccordionSummary>
               <AccordionDetails sx={{ p: 1.5, pt: 1 }}>
                 <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-                  {groupByDate(group.items).map((dateGroup) => (
-                    <Box
-                      key={dateGroup.date}
-                      sx={{
-                        border: "1px solid",
-                        borderColor: "divider",
-                        borderRadius: 2,
-                        backgroundColor: "background.default",
-                        p: 1,
-                      }}
-                    >
-                      <Box
-                        sx={{
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 1,
-                          px: 1,
-                          pb: 1,
-                          borderBottom: "1px solid",
-                          borderColor: "divider",
-                          mb: 1,
-                        }}
-                      >
-                        <Typography variant="subtitle2" fontWeight={600} sx={{ letterSpacing: "-0.01em" }}>
-                          {dateGroup.label}
-                        </Typography>
-                        <Box sx={{ flex: 1 }} />
-                        <Typography variant="caption" color="text.secondary">
-                          {dateGroup.items.length} transaction{dateGroup.items.length === 1 ? "" : "s"}
-                        </Typography>
-                      </Box>
-                      <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-                        {dateGroup.items.map((item) => (
-                          <TransactionRow
-                            key={item.id}
-                            item={item}
-                            currency={group.currency}
-                            fields={fields}
-                          />
-                        ))}
-                      </Box>
-                    </Box>
+                  {group.items.map((item) => (
+                    <ExpenseRow
+                      key={item.id}
+                      item={item}
+                      currency={group.currency}
+                      fields={fields}
+                    />
                   ))}
                 </Box>
               </AccordionDetails>
@@ -325,7 +319,7 @@ export function TransactionList({
           }}
         >
           <Typography variant="caption" fontWeight={700} color="text.secondary">
-            {activeMonth ? (groups.find((g) => g.key === activeMonth)?.label ?? activeMonth) : ""}
+            {activeMonth ? monthLabel(activeMonth) : ""}
           </Typography>
           <KeyboardArrowDownIcon sx={{ fontSize: 14, color: "text.secondary" }} />
         </Box>
@@ -345,7 +339,7 @@ export function TransactionList({
             onClick={() => handleSelectMonth(group.key)}
           >
             <ListItemText
-              primary={group.label}
+              primary={monthLabel(group.key)}
               secondary={`${group.items.length} transactions`}
             />
           </MenuItem>
@@ -353,4 +347,6 @@ export function TransactionList({
       </Menu>
     </>
   );
-}
+}
+
+export { groupByMonth };

src/Expense/types.ts

@@ -0,0 +1,65 @@
+import type { FieldConfig } from "../../react-openapi";
+
+export interface ExpenseItem {
+  id: string;
+  entity?: { name?: string; type?: string; logo?: string } | null;
+  amount: number;
+  account?: { name?: string; number?: string; type?: string; currency?: string } | null;
+  tags?: { icon?: string; name?: string }[];
+  occurred_at?: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface ExpenseFieldConfigs {
+  entity: FieldConfig;
+  amount: FieldConfig;
+  account: FieldConfig;
+  tags: FieldConfig;
+  occurredAt: FieldConfig;
+  logo: FieldConfig;
+  formats: {
+    entity: string;
+    account: string;
+    tags: string;
+  };
+}
+
+export function isExpense(item: ExpenseItem): boolean {
+  return (item.amount ?? 0) < 0;
+}
+
+export function parseOccurredAt(value?: string): Date {
+  const m = value?.match(/^(\d{2})-(\d{2})-(\d{4})$/);
+  if (!m) {
+    throw new Error(`Expense occurred_at is not DD-MM-YYYY: ${value}`);
+  }
+  const [, dd, mm, yyyy] = m;
+  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
+  if (
+    Number.isNaN(d.getTime()) ||
+    d.getDate() !== Number(dd) ||
+    d.getMonth() !== Number(mm) - 1 ||
+    d.getFullYear() !== Number(yyyy)
+  ) {
+    throw new Error(`Invalid expense occurred_at date: ${value}`);
+  }
+  return d;
+}
+
+export function monthKey(value?: string): string {
+  const d = parseOccurredAt(value);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+}
+
+export function currentMonthKey(): string {
+  const now = new Date();
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+}
+
+export function monthLabel(key: string): string {
+  const [y, m] = key.split("-").map(Number);
+  if (!y || !m) return key;
+  const d = new Date(y, m - 1, 1);
+  return d.toLocaleDateString("en-IN", { month: "long", year: "numeric" });
+}

src/Reports/GenerateReportPanel.tsx

@@ -1,85 +1,113 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   Box,
   Paper,
   Typography,
+  TextField,
   Button,
-  Grid,
+  IconButton,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel,
+  Autocomplete,
   Alert,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
-import {
-  useResource,
-  useAppContext,
-  FormFieldRenderer,
-  extractFields,
-  useFkFieldOptions,
-} from "../../react-openapi";
-import type { FieldConfig } from "../../react-openapi";
+import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import { useResource, useAppContext, applyDisplayFormat } from "../../react-openapi";
 import { useToast } from "../ui/Toast";
-import { apiErrorMessage } from "./types";
+import { apiErrorMessage, groupTypeEnum, isDdmmyyyy, periodHints } from "./types";
+
+interface GroupRow {
+  id: number;
+  group_type: string;
+  group_value: string;
+}
 
 interface GenerateReportPanelProps {
-  onGenerated: (report: any) => void;
+  onGenerated: (reports: any[]) => void;
 }
 
 export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
-  const { schemas } = useAppContext();
-  const { create, loading: submitting } = useResource("reports");
+  const { schemas, resources } = useAppContext();
+  const { create } = useResource("reports");
+  const { list: listEntities } = useResource("entities");
   const { showToast } = useToast();
 
-  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [rows, setRows] = useState<GroupRow[]>([{ id: 1, group_type: "monthly", group_value: "*" }]);
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [entityNames, setEntityNames] = useState<string[]>([]);
+  const [dateErrors, setDateErrors] = useState<{ start?: string; end?: string }>({});
 
-  const fields: FieldConfig[] = useMemo(() => {
-    const schema = schemas?.ReportQuery;
-    if (!schema) return [];
-    return extractFields("ReportQuery", schema, schemas).sort(
-      (a, b) => a.order - b.order || a.name.localeCompare(b.name)
-    );
-  }, [schemas]);
-
-  const { fkOptions, fkLoading, loadFkOnOpen } = useFkFieldOptions(fields);
+  const types = useMemo(() => groupTypeEnum(schemas), [schemas]);
+  const entitiesRes = resources.find((r) => r.name === "entities");
+  const entitiesFormat = entitiesRes?.displayFormat ?? "{name}";
 
   useEffect(() => {
-    setFormData((prev) => {
-      const next = { ...prev };
-      let changed = false;
-      for (const f of fields) {
-        if (next[f.name] === undefined && f.defaultValue !== undefined) {
-          next[f.name] = Array.isArray(f.defaultValue) ? [...f.defaultValue] : f.defaultValue;
-          changed = true;
-        }
-      }
-      return changed ? next : prev;
+    let mounted = true;
+    listEntities({ limit: 0 }).then((res) => {
+      if (!mounted) return;
+      const names = (res.items ?? [])
+        .map((it: any) => applyDisplayFormat(it, entitiesFormat))
+        .filter((n: string) => n);
+      setEntityNames([...new Set(names)].sort((a, b) => a.localeCompare(b)));
     });
-  }, [fields]);
+    return () => {
+      mounted = false;
+    };
+  }, [listEntities, entitiesFormat]);
 
-  const handleChange = useCallback((name: string, value: any) => {
-    setFormData((prev) => ({ ...prev, [name]: value }));
-    setError(null);
-  }, []);
+  const isPayee = (type: string) => type === "payee";
 
-  const buildPayload = (): Record<string, any> => {
-    const payload: Record<string, any> = {};
-    for (const f of fields) {
-      const v = formData[f.name];
-      if (v === undefined || v === null || v === "") continue;
-      if (Array.isArray(v) && v.length === 0) continue;
-      payload[f.name] = v;
-    }
-    return payload;
+  const valueOptions = (row: GroupRow): string[] => ["*", ...(isPayee(row.group_type) ? entityNames : [])];
+
+  const valueHint = (row: GroupRow): string =>
+    isPayee(row.group_type) ? "Entity name, or * for all payees" : `e.g. ${periodHints(row.group_type).join(", ")}, or *`;
+
+  const nextRowId = () => Math.max(0, ...rows.map((r) => r.id)) + 1;
+
+  const addRow = () => setRows((rs) => [...rs, { id: nextRowId(), group_type: "monthly", group_value: "*" }]);
+
+  const removeRow = (id: number) => setRows((rs) => rs.filter((r) => r.id !== id));
+
+  const updateRow = (id: number, patch: Partial<GroupRow>) =>
+    setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+
+  const validateDates = (): boolean => {
+    const errs: { start?: string; end?: string } = {};
+    if (startDate && !isDdmmyyyy(startDate)) errs.start = "Use DD-MM-YYYY";
+    if (endDate && !isDdmmyyyy(endDate)) errs.end = "Use DD-MM-YYYY";
+    setDateErrors(errs);
+    return Object.keys(errs).length === 0;
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
+    if (!validateDates()) return;
     setError(null);
+    const groups = rows
+      .filter((r) => r.group_type && r.group_value.trim())
+      .map(({ group_type, group_value }) => ({ group_type, group_value: group_value.trim() }));
+    if (groups.length === 0) {
+      setError("At least one group is required");
+      return;
+    }
+    setSubmitting(true);
+    const payload: Record<string, any> = { groups };
+    if (startDate.trim()) payload.start_date = startDate.trim();
+    if (endDate.trim()) payload.end_date = endDate.trim();
     try {
-      const created = await create(buildPayload());
-      showToast(`Generated snapshot ${created?.name ? `“${created.name}”` : ""}`.trim() || "Generated snapshot");
-      onGenerated(created);
+      const created = await create(payload);
+      const list = Array.isArray(created) ? created : created ? [created] : [];
+      showToast(`Generated ${list.length} report${list.length === 1 ? "" : "s"}`);
+      onGenerated(list);
     } catch (e: any) {
       setError(apiErrorMessage(e));
+    } finally {
+      setSubmitting(false);
     }
   };
 
@@ -89,8 +117,8 @@ export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
         Generate report
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 2 }}>
-        Define the snapshot's scope. Granularity, payee and tag are sliced at view time — the cube is built once and
-        every combination stays cheap to read.
+        Choose the dimensions to snapshot. At least one group is required — with no period dimension the server
+        snapshots weekly, monthly and quarterly.
       </Typography>
 
       {error && (
@@ -99,28 +127,84 @@ export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
         </Alert>
       )}
 
-      <Box component="form" onSubmit={handleSubmit}>
-        <Grid container spacing={2}>
-          {fields.map((field) => (
-            <Grid item xs={12} sm={6} md={4} key={field.name}>
-              <FormFieldRenderer
-                field={field}
-                value={formData[field.name]}
-                onChange={(val) => handleChange(field.name, val)}
-                fkOptions={fkOptions[field.name]}
-                fkLoading={fkLoading[field.name]}
-                onFkOpen={loadFkOnOpen}
-              />
-            </Grid>
-          ))}
-        </Grid>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+        {rows.map((row) => (
+          <Box key={row.id} sx={{ display: "flex", gap: 1.5, alignItems: "flex-start" }}>
+            <FormControl size="small" sx={{ width: 180, flexShrink: 0 }}>
+              <InputLabel id={`group-type-${row.id}`}>Type</InputLabel>
+              <Select
+                labelId={`group-type-${row.id}`}
+                label="Type"
+                value={row.group_type}
+                onChange={(e) => updateRow(row.id, { group_type: e.target.value, group_value: "*" })}
+              >
+                {types.map((t) => (
+                  <MenuItem key={t} value={t}>
+                    {t}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <Autocomplete
+              freeSolo
+              size="small"
+              sx={{ flex: 1, minWidth: 240 }}
+              options={valueOptions(row)}
+              value={row.group_value}
+              onInputChange={(_, newVal) => updateRow(row.id, { group_value: newVal ?? "" })}
+              renderInput={(params) => (
+                <TextField {...params} label="Value" helperText={valueHint(row)} />
+              )}
+            />
+            <IconButton
+              aria-label="Remove group"
+              disabled={rows.length === 1}
+              onClick={() => removeRow(row.id)}
+              sx={{ mt: 0.25 }}
+            >
+              <RemoveCircleOutlineIcon />
+            </IconButton>
+          </Box>
+        ))}
+      </Box>
 
-        <Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
-          <Button type="submit" variant="contained" startIcon={<AddIcon />} disabled={submitting}>
-            {submitting ? "Generating…" : "Generate"}
-          </Button>
-        </Box>
+      <Button startIcon={<AddIcon />} size="small" sx={{ mt: 1 }} onClick={addRow}>
+        Add dimension
+      </Button>
+
+      <Box sx={{ display: "flex", gap: 1.5, mt: 2, flexWrap: "wrap" }}>
+        <TextField
+          size="small"
+          label="Start date"
+          placeholder="DD-MM-YYYY"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+          error={Boolean(dateErrors.start)}
+          helperText={dateErrors.start ?? "Inclusive start (empty = unbounded)"}
+          sx={{ width: 200 }}
+        />
+        <TextField
+          size="small"
+          label="End date"
+          placeholder="DD-MM-YYYY"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+          error={Boolean(dateErrors.end)}
+          helperText={dateErrors.end ?? "Inclusive end (empty = unbounded)"}
+          sx={{ width: 200 }}
+        />
+      </Box>
+
+      <Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={handleSubmit}
+          disabled={submitting}
+        >
+          {submitting ? "Generating…" : "Generate"}
+        </Button>
       </Box>
     </Paper>
   );
-}
+}

src/Reports/Report.tsx

@@ -1,184 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Container,
-  Box,
-  Paper,
-  Typography,
-  Alert,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import AssessmentIcon from "@mui/icons-material/Assessment";
-import { useResource, useAppContext } from "../../react-openapi";
-import { useToast } from "../ui/Toast";
-import { PageHeader } from "../ui/PageHeader";
-import { EmptyState } from "../ui/EmptyState";
-import { StatCard } from "../common/components/StatCard";
-import { buildTxnFieldConfigs } from "../common/utils/fieldConfigs";
-import { GenerateReportPanel } from "./GenerateReportPanel";
-import { ReportList } from "./ReportList";
-import { ReportViewer } from "./ReportViewer";
-import { apiErrorMessage, buildReportFieldConfigs } from "./types";
-
-export default function Report() {
-  const { resources } = useAppContext();
-  const { showToast } = useToast();
-  const { list, loading, error } = useResource("reports");
-  const { create, remove } = useResource("reports");
-
-  const [reports, setReports] = useState<any[] | null>(null);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [viewerVersion, setViewerVersion] = useState(0);
-
-  const reportFields = useMemo(() => buildReportFieldConfigs(resources), [resources]);
-  const txnFields = useMemo(() => buildTxnFieldConfigs(resources), [resources]);
-
-  const load = useCallback(async () => {
-    const res = await list({ limit: 200 });
-    setReports(res.items ?? []);
-  }, [list]);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const handleGenerated = useCallback(
-    (created: any) => {
-      load();
-      if (created?.id) setSelectedId(created.id);
-    },
-    [load],
-  );
-
-  const handleRegenerate = useCallback(
-    async (report: any) => {
-      try {
-        const created = await create(report.query ?? {});
-        showToast("Report regenerated");
-        setSelectedId(created?.id ?? report.id);
-        setViewerVersion((v) => v + 1);
-        load();
-      } catch (e: any) {
-        showToast(apiErrorMessage(e), "error");
-      }
-    },
-    [create, load, showToast],
-  );
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      try {
-        await remove(id);
-        showToast("Report deleted");
-        if (selectedId === id) setSelectedId(null);
-        load();
-      } catch (e: any) {
-        showToast(apiErrorMessage(e), "error");
-      }
-    },
-    [remove, load, selectedId, showToast],
-  );
-
-  const summary = useMemo(() => {
-    const rows = reports ?? [];
-    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 (
-    <Container maxWidth="lg" sx={{ py: 4 }}>
-      <PageHeader
-        crumbs={[{ label: "Home", path: "/" }, { label: "Reports" }]}
-        title="Reports"
-        subtitle="Build an immutable snapshot cube once, then slice by granularity, period, payee and tag at view time."
-      />
-
-      {error && (
-        <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
-          Failed to load reports: {error}
-        </Alert>
-      )}
-
-      <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
-        <StatCard label="Reports" value={summary.count.toLocaleString("en-IN")} />
-        <StatCard label="Granularities covered" value={summary.granularities || "—"} />
-      </Box>
-
-      <GenerateReportPanel onGenerated={handleGenerated} />
-
-      <Accordion
-        disableGutters
-        defaultExpanded
-        sx={{
-          border: "1px solid",
-          borderColor: "divider",
-          borderRadius: 2,
-          overflow: "hidden",
-          boxShadow: "none",
-          backgroundColor: "background.paper",
-          "&:before": { display: "none" },
-          mb: 4,
-        }}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          sx={{
-            px: 2.5,
-            py: 1,
-            "& .MuiAccordionSummary-content": {
-              alignItems: "center",
-              gap: 1.5,
-              minWidth: 0,
-            },
-          }}
-        >
-          <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
-            Saved reports
-          </Typography>
-          {reports !== null && (
-            <Typography variant="caption" color="text.secondary">
-              {reports.length} report{reports.length === 1 ? "" : "s"}
-            </Typography>
-          )}
-        </AccordionSummary>
-        <AccordionDetails sx={{ px: 2.5, pb: 2.5, pt: 0 }}>
-          {reports !== null && reports.length === 0 ? (
-            <Paper variant="outlined" sx={{ borderRadius: 3 }}>
-              <EmptyState
-                icon={<AssessmentIcon />}
-                title="No reports yet"
-                description="Generate your first snapshot above — choose granularities and grouping dimensions, then slice the cached cube by period, payee and tag."
-              />
-            </Paper>
-          ) : (
-            <Box sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
-              <ReportList
-                reports={reports ?? []}
-                loading={loading}
-                fields={reportFields}
-                selectedId={selectedId}
-                onView={(id) => setSelectedId(id)}
-                onRegenerate={handleRegenerate}
-                onDelete={handleDelete}
-              />
-            </Box>
-          )}
-        </AccordionDetails>
-      </Accordion>
-
-      {selectedId && (
-        <ReportViewer
-          key={selectedId}
-          id={selectedId}
-          version={viewerVersion}
-          fields={txnFields}
-          onClose={() => setSelectedId(null)}
-          onRegenerated={handleRegenerate}
-        />
-      )}
-    </Container>
-  );
-}

src/Reports/ReportList.tsx

@@ -3,7 +3,7 @@ import { Box, Paper, Typography, Button, IconButton, Skeleton, Tooltip } from "@
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import CachedIcon from "@mui/icons-material/Cached";
-import { ListCellRenderer } from "../../react-openapi";
+import { ListCellRenderer, formatCurrency } from "../../react-openapi";
 import type { ReportFieldConfigs } from "./types";
 
 interface ReportListProps {
@@ -30,14 +30,10 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
       {reports.map((report) => {
-        const q = report.query ?? {};
-        const range = q.start_date || q.end_date ? `range ${q.start_date || "…"} → ${q.end_date || "…"}` : null;
-        const dims = Array.isArray(q.group_dims) ? q.group_dims.join(", ") : "";
-        const granularities = Array.isArray(q.granularities) ? q.granularities.join(", ") : "";
-        const accounts = Array.isArray(q.accounts) ? `${q.accounts.length} account${q.accounts.length === 1 ? "" : "s"}` : "all accounts";
-        const amounts =
-          q.min_amount != null || q.max_amount != null
-            ? `amount ${q.min_amount ?? "0"} → ${q.max_amount ?? "∞"}`
+        const sum = typeof report.metrics?.sum === "number" ? report.metrics.sum : null;
+        const range =
+          report.start_date || report.end_date
+            ? `range ${report.start_date || "…"} → ${report.end_date || "…"}`
             : null;
         return (
           <Paper
@@ -54,17 +50,20 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
             <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
               <Box sx={{ flex: "1 1 260px", minWidth: 0 }}>
                 <Typography variant="body1" fontWeight={600} noWrap sx={{ fontSize: "0.9375rem" }}>
-                  {report.name || report.id}
+                  {report.group_label}
                 </Typography>
                 <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", mt: 0.25 }}>
+                  {fields && (
+                    <ListCellRenderer field={fields.granularity} value={report.granularity} />
+                  )}
                   <Typography variant="caption" color="text.secondary">
-                    {granularities}
+                    {report.period_label}
                   </Typography>
                   <Typography variant="caption" color="text.disabled">
                     /
                   </Typography>
                   <Typography variant="caption" color="text.secondary">
-                    {dims}
+                    {report.payee}
                   </Typography>
                   {range && (
                     <Typography variant="caption" color="text.disabled">
@@ -74,13 +73,14 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
                 </Box>
                 <Box sx={{ display: "flex", gap: 1.5, mt: 0.5 }}>
                   <Typography variant="caption" color="text.secondary">
-                    {accounts}
+                    {report.entity_count ?? 0} entities
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {report.txn_count ?? 0} txns
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {report.expense_count ?? 0} expenses
                   </Typography>
-                  {amounts && (
-                    <Typography variant="caption" color="text.secondary">
-                      {amounts}
-                    </Typography>
-                  )}
                   {fields && (
                     <Box sx={{ color: "text.secondary" }}>
                       <ListCellRenderer field={fields.generatedAt} value={report.generated_at} />
@@ -89,6 +89,12 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
                 </Box>
               </Box>
 
+              <Box sx={{ flexShrink: 0, textAlign: "right" }}>
+                <Typography variant="body1" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
+                  {sum != null ? formatCurrency(sum, "INR") : "—"}
+                </Typography>
+              </Box>
+
               <Box sx={{ display: "flex", gap: 0.5, flexShrink: 0 }}>
                 <Button size="small" variant="contained" startIcon={<VisibilityIcon />} onClick={() => onView(report.id)}>
                   View

src/Reports/ReportViewer.tsx

@@ -1,61 +1,33 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, Paper, Typography, Button, IconButton, Alert, Skeleton, Chip, MenuItem, Select, FormControl, InputLabel } from "@mui/material";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Paper,
+  Typography,
+  Button,
+  IconButton,
+  Alert,
+  Skeleton,
+  TextField,
+  Autocomplete,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CloseIcon from "@mui/icons-material/Close";
 import CachedIcon from "@mui/icons-material/Cached";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import { FkMultiSelectField, useResource, formatCurrency } from "../../react-openapi";
-import type { FieldConfig } from "../../react-openapi";
-import { StatCard } from "../common/components/StatCard";
-import { TransactionList } from "../common/components/TransactionList";
-import type { TxnFieldConfigs } from "../common/types";
-import type { ListPeriodGroup } from "../common/utils/transactions";
-import { buildDimensionBars, buildPeriodGroups, sliceSummary, FLOW_OPTIONS, apiErrorMessage } from "./types";
-import type { ReportDim } from "./types";
-
-const MAX_VISIBLE_BARS = 10;
-
-const periodField: FieldConfig = {
-  name: "period",
-  label: "Period",
-  description: "",
-  type: "string",
-  order: 0,
-  hidden: {},
-  filterable: true,
-  sortable: false,
-  readOnly: false,
-  required: false,
-  isArray: true,
-};
-
-const payeeField: FieldConfig = {
-  name: "payee",
-  label: "Payee",
-  description: "",
-  type: "string",
-  order: 0,
-  hidden: {},
-  filterable: true,
-  sortable: false,
-  readOnly: false,
-  required: false,
-  isArray: true,
-};
-
-const tagField: FieldConfig = {
-  name: "tag",
-  label: "Tag",
-  description: "",
-  type: "string",
-  order: 0,
-  hidden: {},
-  filterable: true,
-  sortable: false,
-  readOnly: false,
-  required: false,
-  isArray: true,
-};
+import { useAppContext, useResource, ListCellRenderer, CurrencyField, applyDisplayFormat, formatCurrency } from "../../react-openapi";
+import { groupByMonth } from "../Expense/ExpenseList";
+import type { ExpenseItem, ExpenseFieldConfigs } from "../Expense/types";
+import { monthLabel } from "../Expense/types";
+import type { TxnFieldConfigs } from "./types";
+import { aggregateSlice, buildPivot, metricLabels } from "./types";
 
 interface ReportViewerProps {
   id: string;
@@ -65,60 +37,109 @@ interface ReportViewerProps {
   onRegenerated: (report: any) => void;
 }
 
-function snapshotGranularities(report: any): string[] {
-  const fromQuery = report?.query?.granularities;
-  if (Array.isArray(fromQuery) && fromQuery.length) return fromQuery;
-  const fromResponse = report?.granularities;
-  if (Array.isArray(fromResponse) && fromResponse.length) return fromResponse;
-  const series = report?.buckets?.[0]?.series;
-  return series ? Object.keys(series) : [];
+function StatCard({ label, value, color }: { label: string; value: string; color?: string }) {
+  return (
+    <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 150 }}>
+      <Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
+        {label}
+      </Typography>
+      <Typography variant="h6" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em", color }}>
+        {value}
+      </Typography>
+    </Paper>
+  );
 }
 
+const ReportTxnRow = React.memo(function ReportTxnRow({
+  item,
+  currency,
+  fields,
+}: {
+  item: ExpenseItem;
+  currency: string;
+  fields: ExpenseFieldConfigs;
+}) {
+  const itemCurrency = item.account?.currency ?? currency;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        px: 2,
+        py: 1.25,
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: 2,
+        backgroundColor: "background.paper",
+        transition: "background-color 160ms ease, border-color 160ms ease",
+        "&:hover": {
+          backgroundColor: "action.hover",
+          borderColor: "primary.light",
+        },
+      }}
+    >
+      <Box
+        sx={{
+          width: 40,
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {item.entity?.logo ? (
+          <ListCellRenderer field={fields.logo} value={item.entity.logo} />
+        ) : (
+          <Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: "action.hover" }} />
+        )}
+      </Box>
+      <Box sx={{ flex: "0 1 auto", minWidth: 0 }}>
+        <Typography variant="body1" fontWeight={600} noWrap sx={{ fontSize: "0.9375rem", lineHeight: 1.3 }}>
+          {item.entity ? applyDisplayFormat(item.entity, fields.formats.entity) : "Unknown"}
+        </Typography>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
+          <Box sx={{ color: "text.secondary" }}>
+            <ListCellRenderer field={fields.occurredAt} value={item.occurred_at} />
+          </Box>
+          {item.account?.name && (
+            <ListCellRenderer field={fields.account} value={item.account} displayFormat={fields.formats.account} />
+          )}
+        </Box>
+      </Box>
+      <Box sx={{ flex: 1 }} />
+      <CurrencyField value={item.amount} currency={itemCurrency} large />
+    </Box>
+  );
+});
+
 export function ReportViewer({ id, version, fields, onClose, onRegenerated }: ReportViewerProps) {
+  const { schemas } = useAppContext();
   const { get } = useResource("reports");
 
   const [report, setReport] = useState<any | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [reload, setReload] = useState(0);
-  const [granularity, setGranularity] = useState<string | null>(null);
-  const [flow, setFlow] = useState("outflows");
-  const [dim, setDim] = useState<ReportDim>("period");
-  const [selectedPeriods, setSelectedPeriods] = useState<string[]>([]);
-  const [selectedPayees, setSelectedPayees] = useState<string[]>([]);
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const prevGranularity = useRef<string | null>(null);
-
-  const params = useMemo(() => {
-    const p: Record<string, any> = { flow };
-    if (granularity) p.granularity = [granularity];
-    if (selectedPeriods.length) p.period_ids = selectedPeriods;
-    // The active breakdown dim requests every cube value ("*") when its own
-    // filter is unselected, so bars show the full distribution.
-    if (selectedPayees.length) p.payee = selectedPayees;
-    else if (dim === "payee") p.payee = ["*"];
-    if (selectedTags.length) p.tags = selectedTags;
-    else if (dim === "tag") p.tags = ["*"];
-    return p;
-  }, [granularity, flow, dim, selectedPeriods, selectedPayees, selectedTags]);
+  const [selectedPeriod, setSelectedPeriod] = useState("*");
+  const [selectedPayee, setSelectedPayee] = useState("*");
+  const [openMonth, setOpenMonth] = useState<string | null>(null);
 
   useEffect(() => {
     let mounted = true;
     setLoading(true);
     setError(null);
-    const previous = prevGranularity.current;
-    get(id, params)
+    get(id)
       .then((res) => {
         if (!mounted) return;
         setReport(res);
-        const options = snapshotGranularities(res);
-        if (granularity === null && options.length) setGranularity(options[0]);
-        if (previous !== null && previous !== granularity) setSelectedPeriods([]);
-        prevGranularity.current = granularity;
+        setSelectedPeriod("*");
+        setSelectedPayee("*");
       })
       .catch((e: any) => {
         if (!mounted) return;
-        setError(apiErrorMessage(e));
+        setError(e?.response?.data?.detail ?? e?.message ?? "Failed to load report");
       })
       .finally(() => {
         if (mounted) setLoading(false);
@@ -126,86 +147,49 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
     return () => {
       mounted = false;
     };
-  }, [id, version, reload, params, get, granularity]);
+  }, [id, version, reload, get]);
 
-  const granularityOptions = useMemo(() => snapshotGranularities(report), [report]);
+  const data = useMemo(() => (Array.isArray(report?.data) ? report.data : null), [report]);
 
-  const periodOptions = useMemo(
-    () => (Array.isArray(report?.period_ids) ? report.period_ids.map((label: string) => ({ value: label, label })) : []),
-    [report],
-  );
-  const payeeOptions = useMemo(
-    () => (Array.isArray(report?.payees) ? report.payees.map((label: string) => ({ value: label, label })) : []),
-    [report],
-  );
-  const tagOptions = useMemo(
-    () => (Array.isArray(report?.tags) ? report.tags.map((label: string) => ({ value: label, label })) : []),
-    [report],
+  const groupOptions = useMemo(() => {
+    const options = report?.metadata?.group_options;
+    if (!options || typeof options !== "object") return { period: [], payee: [] };
+    return {
+      period: Array.isArray(options.period) ? options.period.map(String) : [],
+      payee: Array.isArray(options.payee) ? options.payee.map(String) : [],
+    };
+  }, [report]);
+
+  const slice = useMemo(
+    () => aggregateSlice(data ?? [], { period: selectedPeriod, payee: selectedPayee }),
+    [data, selectedPeriod, selectedPayee],
   );
 
-  const filter = useMemo(
-    () => ({
-      granularity: granularity ?? granularityOptions[0] ?? "",
-      periods: selectedPeriods,
-      payees: selectedPayees,
-      tags: selectedTags,
-    }),
-    [granularity, granularityOptions, selectedPeriods, selectedPayees, selectedTags],
+  const months = useMemo(() => groupByMonth(slice.txns), [slice.txns]);
+
+  const pivot = useMemo(
+    () => buildPivot(data ?? [], groupOptions.period, groupOptions.payee),
+    [data, groupOptions],
   );
 
-  const periodGroups = useMemo(() => buildPeriodGroups(report?.buckets ?? [], filter), [report, filter]);
-  const slice = useMemo(() => sliceSummary(periodGroups), [periodGroups]);
-  const bars = useMemo(() => buildDimensionBars(report?.buckets ?? [], filter, dim), [report, filter, dim]);
-  const visibleBars = useMemo(() => bars.slice(0, MAX_VISIBLE_BARS), [bars]);
-  const listGroups = useMemo<ListPeriodGroup[]>(
-    () =>
-      periodGroups.map((g) => ({
-        key: g.key,
-        label: g.key,
-        items: g.txns,
-        spent: g.metrics.outflows,
-        income: g.metrics.inflows,
-        currency: g.currency,
-        metrics: {
-          sum: g.metrics.sum,
-          count: g.metrics.count,
-          avg: g.metrics.avg,
-          min: g.metrics.min,
-          max: g.metrics.max,
-          cadence: g.metrics.cadence,
-          frequency: g.metrics.frequency,
-        },
-      })),
-    [periodGroups],
-  );
+  const metrics = useMemo(() => {
+    const labels = metricLabels(schemas);
+    const displayKeys = ["sum", "count", "avg", "min", "max", "first_date", "last_date"];
+    return labels.filter((l) => displayKeys.includes(l.key));
+  }, [schemas]);
 
-  const barsListRef = useRef<HTMLDivElement>(null);
-  const [barScroll, setBarScroll] = useState({ canUp: false, canDown: false, overflow: false });
+  const metricValue = (key: string): string | null => {
+    if (key === "sum") return formatCurrency(slice.sum, slice.currency);
+    if (key === "count") return slice.count.toLocaleString("en-IN");
+    if (key === "avg") return slice.avg == null ? null : formatCurrency(slice.avg, slice.currency);
+    if (key === "min") return slice.min == null ? null : formatCurrency(slice.min, slice.currency);
+    if (key === "max") return slice.max == null ? null : formatCurrency(slice.max, slice.currency);
+    if (key === "first_date") return slice.firstDate;
+    if (key === "last_date") return slice.lastDate;
+    return null;
+  };
 
-  const updateBarScroll = useCallback(() => {
-    const el = barsListRef.current;
-    if (!el) return;
-    const overflow = el.scrollHeight > el.clientHeight + 2;
-    setBarScroll({
-      overflow,
-      canUp: overflow && el.scrollTop > 2,
-      canDown: overflow && el.scrollTop < el.scrollHeight - el.clientHeight - 2,
-    });
-  }, []);
-
-  useEffect(() => {
-    const el = barsListRef.current;
-    if (el) el.scrollTop = 0;
-    updateBarScroll();
-  }, [dim, visibleBars.length, updateBarScroll]);
-
-  const scrollBarsByPage = useCallback((dir: number) => {
-    const el = barsListRef.current;
-    if (!el) return;
-    el.scrollTo({ top: dir > 0 ? el.scrollHeight : 0, behavior: "smooth" });
-  }, []);
-
-  if (loading && !report) {
+  if (loading) {
     return (
       <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3 }}>
         <Skeleton variant="text" width={220} height={28} />
@@ -230,22 +214,6 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
 
   if (!report) return null;
 
-  const activeGranularity = granularity ?? report.granularities?.[0] ?? "";
-  const maxBar = bars.reduce((m, b) => Math.max(m, Math.abs(b.sum)), 0);
-  const dimOptions: { id: ReportDim; label: string; count: number }[] = [
-    { id: "period", label: "Period", count: report.period_ids?.length ?? 0 },
-    { id: "payee", label: "Payees", count: report.payees?.length ?? 0 },
-    { id: "tag", label: "Tags", count: report.tags?.length ?? 0 },
-  ];
-  const activeDimIndex = Math.max(
-    0,
-    dimOptions.findIndex((d) => d.id === dim),
-  );
-  const range =
-    report.query?.start_date || report.query?.end_date
-      ? `range ${report.query.start_date || "…"} → ${report.query.end_date || "…"}`
-      : null;
-
   return (
     <Paper variant="outlined" sx={{ borderRadius: 3, overflow: "hidden" }}>
       <Box
@@ -262,241 +230,209 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
       >
         <Box sx={{ flex: 1, minWidth: 0 }}>
           <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
-            {report.name}
+            {report.group_label}
           </Typography>
           <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
             <Typography variant="caption" color="text.secondary">
-              flow {report.flow} · generated {report.generated_at ?? report.created_at}
+              {report.granularity} · {report.period_label} · {report.payee}
             </Typography>
-            {range && (
-              <Typography variant="caption" color="text.disabled">
-                {range}
-              </Typography>
-            )}
             <Typography variant="caption" color="text.disabled">
-              {report.payees?.length ?? 0} payees · {report.tags?.length ?? 0} tags
+              {report.entity_count ?? 0} entities · {report.txn_count ?? 0} txns · {report.expense_count ?? 0} expenses
             </Typography>
+            {report.start_date || report.end_date ? (
+              <Typography variant="caption" color="text.disabled">
+                range {report.start_date || "…"} → {report.end_date || "…"}
+              </Typography>
+            ) : null}
           </Box>
         </Box>
-        <IconButton aria-label="Regenerate report" onClick={() => onRegenerated(report)}>
-          <CachedIcon />
-        </IconButton>
         <IconButton aria-label="Close report" onClick={onClose}>
           <CloseIcon />
         </IconButton>
       </Box>
 
-      <Box sx={{ p: 2.5 }}>
-        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center", mb: 2 }}>
-          <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
-            {granularityOptions.map((g: string) => (
-              <Chip
-                key={g}
-                label={g}
-                clickable
-                size="small"
-                color={activeGranularity === g ? "primary" : "default"}
-                variant={activeGranularity === g ? "filled" : "outlined"}
-                onClick={() => setGranularity(g)}
-              />
-            ))}
-          </Box>
-          <FormControl size="small" sx={{ width: 140 }}>
-            <InputLabel id="viewer-flow-label">Flow</InputLabel>
-            <Select labelId="viewer-flow-label" label="Flow" value={flow} onChange={(e) => setFlow(e.target.value)}>
-              {FLOW_OPTIONS.map((f) => (
-                <MenuItem key={f} value={f}>
-                  {f}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
+      {data === null ? (
+        <Box sx={{ p: 3 }}>
+          <Alert severity="info" sx={{ borderRadius: 2, mb: 2 }}>
+            The cached data for this report has expired. Regenerate it to rebuild the snapshot.
+          </Alert>
+          <Button variant="contained" startIcon={<CachedIcon />} onClick={() => onRegenerated(report)}>
+            Regenerate
+          </Button>
         </Box>
-
-        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2.5 }}>
-          <Box sx={{ width: 260 }}>
-            <FkMultiSelectField
-              field={{ ...periodField, readOnly: periodOptions.length === 0 }}
-              fkOptions={periodOptions}
-              value={selectedPeriods}
-              onChange={setSelectedPeriods}
+      ) : (
+        <Box sx={{ p: 2.5 }}>
+          <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2.5 }}>
+            <Autocomplete
+              size="small"
+              sx={{ width: 220 }}
+              options={["*", ...groupOptions.period]}
+              value={selectedPeriod}
+              onChange={(_, v) => setSelectedPeriod(v ?? "*")}
+              disabled={groupOptions.period.length === 0}
+              renderInput={(params) => <TextField {...params} label="Period" />}
             />
+            <Autocomplete
+              size="small"
+              sx={{ width: 220 }}
+              options={["*", ...groupOptions.payee]}
+              value={selectedPayee}
+              onChange={(_, v) => setSelectedPayee(v ?? "*")}
+              disabled={groupOptions.payee.length === 0}
+              renderInput={(params) => <TextField {...params} label="Payee" />}
+            />
+            <Typography variant="body2" color="text.secondary" sx={{ alignSelf: "center" }}>
+              Showing {slice.count} transactions across {slice.txns.length} rows
+            </Typography>
           </Box>
-          <Box sx={{ width: 260 }}>
-            <FkMultiSelectField
-              field={{ ...payeeField, readOnly: payeeOptions.length === 0 }}
-              fkOptions={payeeOptions}
-              value={selectedPayees}
-              onChange={setSelectedPayees}
-            />
-          </Box>
-          <Box sx={{ width: 260 }}>
-            <FkMultiSelectField
-              field={{ ...tagField, readOnly: tagOptions.length === 0 }}
-              fkOptions={tagOptions}
-              value={selectedTags}
-              onChange={setSelectedTags}
-            />
-          </Box>
-          <Typography variant="body2" color="text.secondary" sx={{ alignSelf: "center" }}>
-            {slice.txns.length} transactions · {slice.count} rows
-          </Typography>
-        </Box>
 
-        <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 2.5 }}>
-          <StatCard label="Outflows" value={formatCurrency(slice.outflows, slice.currency)} color="error.main" />
-          <StatCard label="Inflows" value={formatCurrency(slice.inflows, slice.currency)} color="success.main" />
-          <StatCard label="Net" value={formatCurrency(slice.inflows - slice.outflows, slice.currency)} color="info.main" />
-          <StatCard label="Transactions" value={slice.count.toLocaleString("en-IN")} />
-        </Box>
+          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 2.5 }}>
+            <StatCard label="Spent" value={formatCurrency(slice.spent, slice.currency)} color="error.main" />
+            <StatCard label="Income" value={formatCurrency(slice.income, slice.currency)} color="success.main" />
+            <StatCard label="Transactions" value={slice.count.toLocaleString("en-IN")} />
+          </Box>
 
-        <Box sx={{ mb: 2.5 }}>
-          <Box
-            sx={{
-              position: "relative",
-              display: "flex",
-              alignItems: "stretch",
-              width: "fit-content",
-              maxWidth: "100%",
-              border: "1px solid",
-              borderColor: "divider",
-              borderRadius: "999px",
-              p: 0.5,
-              backgroundColor: "background.default",
-            }}
-          >
-            <Box
-              aria-hidden
-              sx={{
-                position: "absolute",
-                top: 4,
-                bottom: 4,
-                left: 4,
-                width: `calc((100% - 8px) / ${dimOptions.length})`,
-                borderRadius: "999px",
-                backgroundColor: "primary.main",
-                transform: `translateX(${activeDimIndex * 100}%)`,
-                transition: "transform 250ms cubic-bezier(0.4, 0, 0.2, 1)",
-              }}
-            />
-            {dimOptions.map((d) => {
-              const active = d.id === dim;
+          <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 3 }}>
+            {metrics.map((m) => {
+              const value = metricValue(m.key);
+              if (value == null) return null;
               return (
-                <Box
-                  key={d.id}
-                  component="button"
-                  type="button"
-                  disabled={d.count <= 1}
-                  onClick={() => setDim(d.id)}
-                  sx={{
-                    position: "relative",
-                    zIndex: 1,
-                    flex: 1,
-                    border: "none",
-                    background: "transparent",
-                    px: 3,
-                    py: 1,
-                    borderRadius: "999px",
-                    cursor: d.count <= 1 ? "default" : "pointer",
-                    typography: "body2",
-                    fontWeight: 700,
-                    letterSpacing: "-0.01em",
-                    color:
-                      d.count <= 1
-                        ? "text.disabled"
-                        : active
-                          ? "primary.contrastText"
-                          : "text.secondary",
-                    whiteSpace: "nowrap",
-                    transition: "color 160ms ease",
-                    "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" },
-                  }}
+                <Paper
+                  key={m.key}
+                  variant="outlined"
+                  sx={{ px: 1.5, py: 1, borderRadius: 2 }}
                 >
-                  {d.label}
-                </Box>
+                  <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+                    {m.label}
+                  </Typography>
+                  <Typography variant="body2" fontWeight={600}>
+                    {value}
+                  </Typography>
+                </Paper>
               );
             })}
           </Box>
 
-          {visibleBars.length === 0 ? (
-            <Paper variant="outlined" sx={{ borderRadius: 2, p: 3, mt: 1.5 }}>
+          {selectedPeriod === "*" && selectedPayee === "*" && pivot.rows.length > 0 && (
+            <TableContainer
+              component={Paper}
+              variant="outlined"
+              sx={{ borderRadius: 2, mb: 3, overflowX: "auto" }}
+            >
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell sx={{ fontWeight: 700 }}>Period</TableCell>
+                    {pivot.payees.map((payee) => (
+                      <TableCell key={payee} align="right" sx={{ fontWeight: 700 }}>
+                        {payee}
+                      </TableCell>
+                    ))}
+                    <TableCell align="right" sx={{ fontWeight: 700 }}>
+                      Total
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {pivot.rows.map((row) => (
+                    <TableRow key={row.period} sx={{ "&:last-child td": { borderBottom: 0 } }}>
+                      <TableCell sx={{ fontWeight: 600 }}>{row.period}</TableCell>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.payee} align="right">
+                          {cell.sum === 0 ? "—" : formatCurrency(cell.sum, slice.currency)}
+                        </TableCell>
+                      ))}
+                      <TableCell align="right" sx={{ fontWeight: 700 }}>
+                        {formatCurrency(row.periodSum, slice.currency)}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                  <TableRow>
+                    <TableCell sx={{ fontWeight: 700 }}>Total</TableCell>
+                    {pivot.totals.map((t) => (
+                      <TableCell key={t.payee} align="right" sx={{ fontWeight: 700 }}>
+                        {formatCurrency(t.sum, slice.currency)}
+                      </TableCell>
+                    ))}
+                    <TableCell align="right" sx={{ fontWeight: 700 }}>
+                      {formatCurrency(pivot.rows.reduce((s, r) => s + r.periodSum, 0), slice.currency)}
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+
+          {months.length === 0 ? (
+            <Paper variant="outlined" sx={{ borderRadius: 2, p: 3 }}>
               <Typography variant="body2" color="text.secondary">
-                No data for this slice. Try another granularity, period or payer.
+                No transactions in this slice.
               </Typography>
             </Paper>
           ) : (
-            <Paper variant="outlined" sx={{ borderRadius: 2, mt: 1.5 }}>
-              <Box sx={{ display: "flex", alignItems: "stretch" }}>
-                <Box
-                  ref={barsListRef}
-                  onScroll={updateBarScroll}
+            <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+              {months.map((group) => (
+                <Accordion
+                  key={group.key}
+                  disableGutters
+                  expanded={openMonth === group.key}
+                  onChange={(_, isExpanded) => setOpenMonth(isExpanded ? group.key : null)}
+                  TransitionProps={{ unmountOnExit: true }}
                   sx={{
-                    flex: 1,
-                    minWidth: 0,
-                    maxHeight: 220,
-                    overflowY: "auto",
-                    py: 1,
-                    px: 2,
-                    scrollbarWidth: "none",
-                    "&::-webkit-scrollbar": { display: "none" },
+                    border: "1px solid",
+                    borderColor: openMonth === group.key ? "primary.main" : "divider",
+                    borderRadius: 2,
+                    overflow: "hidden",
+                    boxShadow: "none",
+                    backgroundColor: "background.paper",
+                    "&:before": { display: "none" },
+                    "&:hover": { borderColor: "primary.light" },
                   }}
                 >
-                  {visibleBars.map((b) => (
-                    <Box key={b.key} sx={{ display: "flex", alignItems: "center", gap: 1.5, py: 0.75 }}>
-                      <Typography variant="caption" sx={{ width: 110, flexShrink: 0, textAlign: "right" }}>
-                        {b.key}
-                      </Typography>
-                      <Box
-                        sx={{
-                          height: 20,
-                          borderRadius: 1,
-                          bgcolor: flow === "outflows" ? "error.main" : "success.main",
-                          opacity: 0.85,
-                          minWidth: 4,
-                          flexGrow: 0,
-                        }}
-                        style={{
-                          width: `${maxBar ? Math.max((Math.abs(b.sum) / maxBar) * 100, 2) : 2}%`,
-                        }}
-                      />
-                      <Typography variant="body2" fontWeight={600}>
-                        {formatCurrency(b.sum, slice.currency)}
-                      </Typography>
-                      <Typography variant="caption" color="text.disabled">
-                        {b.count} txn{b.count === 1 ? "" : "s"}
-                      </Typography>
+                  <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    sx={{
+                      px: 2,
+                      py: 1,
+                      "& .MuiAccordionSummary-content": { alignItems: "center", gap: 1.5, minWidth: 0 },
+                    }}
+                  >
+                    <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
+                      {monthLabel(group.key)}
+                    </Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
+                    </Typography>
+                    <Box sx={{ flex: 1 }} />
+                    <Typography variant="body2" fontWeight={700} color="error.main">
+                      {formatCurrency(group.spent, group.currency)}
+                    </Typography>
+                    <Typography variant="body2" color="text.disabled">
+                      /
+                    </Typography>
+                    <Typography variant="body2" fontWeight={700} color="success.main">
+                      {formatCurrency(group.income, group.currency)}
+                    </Typography>
+                  </AccordionSummary>
+                  <AccordionDetails sx={{ p: 1.5, pt: 1 }}>
+                    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+                      {fields &&
+                        group.items.map((item) => (
+                          <ReportTxnRow
+                            key={item.id ?? `${group.key}-${item.occurred_at}-${item.amount}`}
+                            item={item}
+                            currency={group.currency}
+                            fields={fields as ExpenseFieldConfigs}
+                          />
+                        ))}
                     </Box>
-                  ))}
-                </Box>
-                {barScroll.overflow && (
-                  <Box sx={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 0.5, pr: 1.5 }}>
-                    <IconButton
-                      size="small"
-                      aria-label="Scroll bars up"
-                      disabled={!barScroll.canUp}
-                      onClick={() => scrollBarsByPage(-1)}
-                    >
-                      <KeyboardArrowUpIcon fontSize="small" />
-                    </IconButton>
-                    <IconButton
-                      size="small"
-                      aria-label="Scroll bars down"
-                      disabled={!barScroll.canDown}
-                      onClick={() => scrollBarsByPage(1)}
-                    >
-                      <KeyboardArrowDownIcon fontSize="small" />
-                    </IconButton>
-                  </Box>
-                )}
-              </Box>
-            </Paper>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </Box>
           )}
         </Box>
-
-        {slice.txns.length === 0 ? null : fields ? (
-          <TransactionList fields={fields} groups={listGroups} showMetrics />
-        ) : null}
-      </Box>
+      )}
     </Paper>
   );
 }

src/Reports/Reports.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Container, Box, Paper, Typography, Alert } from "@mui/material";
+import AssessmentIcon from "@mui/icons-material/Assessment";
+import { useResource, useAppContext, formatCurrency } from "../../react-openapi";
+import { useToast } from "../ui/Toast";
+import { PageHeader } from "../ui/PageHeader";
+import { EmptyState } from "../ui/EmptyState";
+import { GenerateReportPanel } from "./GenerateReportPanel";
+import { ReportList } from "./ReportList";
+import { ReportViewer } from "./ReportViewer";
+import { apiErrorMessage, buildReportFieldConfigs, buildTxnFieldConfigs } from "./types";
+
+function StatCard({ label, value, hint }: { label: string; value: string; hint?: string }) {
+  return (
+    <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 180 }}>
+      <Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
+        {label}
+      </Typography>
+      <Typography variant="h5" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em" }}>
+        {value}
+      </Typography>
+      {hint && (
+        <Typography variant="caption" color="text.secondary">
+          {hint}
+        </Typography>
+      )}
+    </Paper>
+  );
+}
+
+export default function Reports() {
+  const { resources } = useAppContext();
+  const { showToast } = useToast();
+  const { list, loading, error } = useResource("reports");
+  const { create, remove } = useResource("reports");
+
+  const [reports, setReports] = useState<any[] | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [viewerVersion, setViewerVersion] = useState(0);
+
+  const reportFields = useMemo(() => buildReportFieldConfigs(resources), [resources]);
+  const txnFields = useMemo(() => buildTxnFieldConfigs(resources), [resources]);
+
+  const load = useCallback(async () => {
+    const res = await list({ limit: 200 });
+    setReports(res.items ?? []);
+  }, [list]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleGenerated = useCallback(
+    (created: any[]) => {
+      load();
+      if (created?.[0]?.id) setSelectedId(created[0].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);
+        showToast("Report regenerated");
+        setSelectedId(report.id);
+        setViewerVersion((v) => v + 1);
+        load();
+      } catch (e: any) {
+        showToast(apiErrorMessage(e), "error");
+      }
+    },
+    [create, load, showToast],
+  );
+
+  const handleDelete = useCallback(
+    async (id: string) => {
+      try {
+        await remove(id);
+        showToast("Report deleted");
+        if (selectedId === id) setSelectedId(null);
+        load();
+      } catch (e: any) {
+        showToast(apiErrorMessage(e), "error");
+      }
+    },
+    [remove, load, selectedId, showToast],
+  );
+
+  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 };
+  }, [reports]);
+
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <PageHeader
+        crumbs={[{ label: "Home", path: "/" }, { label: "Reports" }]}
+        title="Reports"
+        subtitle="Generate period/payee snapshots from the reporting API and slice the cached data."
+      />
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
+          Failed to load reports: {error}
+        </Alert>
+      )}
+
+      <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")} />
+      </Box>
+
+      <GenerateReportPanel onGenerated={handleGenerated} />
+
+      <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em", mb: 1.5 }}>
+        Saved reports
+      </Typography>
+
+      {reports !== null && reports.length === 0 ? (
+        <Paper variant="outlined" sx={{ borderRadius: 3 }}>
+          <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)."
+          />
+        </Paper>
+      ) : (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2.5, mb: 4 }}>
+          <ReportList
+            reports={reports ?? []}
+            loading={loading}
+            fields={reportFields}
+            selectedId={selectedId}
+            onView={(id) => setSelectedId(id)}
+            onRegenerate={handleRegenerate}
+            onDelete={handleDelete}
+          />
+        </Box>
+      )}
+
+      {selectedId && (
+        <ReportViewer
+          key={selectedId}
+          id={selectedId}
+          version={viewerVersion}
+          fields={txnFields}
+          onClose={() => setSelectedId(null)}
+          onRegenerated={handleRegenerate}
+        />
+      )}
+    </Container>
+  );
+}

src/Reports/types.ts

@@ -1,50 +1,73 @@
 import type { FieldConfig, ResourceConfig } from "../../react-openapi";
-import { parseOccurredAt } from "../common/utils/dates";
 
-export interface PeriodMetricsVM {
-  outflows: number;
-  inflows: number;
-  sum: number;
-  count: number;
-  avg: number | null;
-  min: number | null;
-  max: number | null;
-  firstDate: string | null;
-  lastDate: string | null;
-  cadence: number | null;
-  frequency: number | null;
+const DDMMYYYY = /^(\d{2})-(\d{2})-(\d{4})$/;
+
+export interface ParsedGroupKey {
+  period?: { granularity: string; label: string };
+  payee?: { label: string };
+  range?: { start?: string; end?: string };
 }
 
-export interface ReportPeriodGroup {
+export interface ReportGroupLike {
   key: string;
-  metrics: PeriodMetricsVM;
-  txns: any[];
-  currency: string;
-}
-
-export interface SliceSummary {
-  outflows: number;
-  inflows: number;
-  sum: number;
-  count: number;
-  avg: number | null;
-  min: number | null;
-  max: number | null;
-  firstDate: string | null;
-  lastDate: string | null;
-  txns: any[];
-  currency: string;
+  group_label?: string;
+  metrics?: Record<string, any>;
+  txns?: any[];
 }
 
 export interface SliceFilter {
-  granularity: string;
-  periods?: string[];
-  payees?: string[];
-  tags?: string[];
+  period?: string;
+  payee?: string;
+}
+
+export interface SliceSummary {
+  sum: number;
+  count: number;
+  avg: number | null;
+  min: number | null;
+  max: number | null;
+  firstDate: string | null;
+  lastDate: string | null;
+  txns: any[];
+  spent: number;
+  income: number;
+  currency: string;
+}
+
+export interface PivotCell {
+  payee: string;
+  sum: number;
+  count: number;
+}
+
+export interface PivotRow {
+  period: string;
+  cells: PivotCell[];
+  periodSum: number;
+  periodCount: number;
+}
+
+export interface PivotTable {
+  rows: PivotRow[];
+  payees: string[];
+  totals: PivotCell[];
+}
+
+export interface TxnFieldConfigs {
+  entity: FieldConfig;
+  amount: FieldConfig;
+  account: FieldConfig;
+  occurredAt: FieldConfig;
+  logo: FieldConfig;
+  formats: { entity: string; account: string };
 }
 
 export interface ReportFieldConfigs {
-  name: FieldConfig;
+  groupLabel: FieldConfig;
+  granularity: FieldConfig;
+  periodLabel: FieldConfig;
+  payee: FieldConfig;
+  entityCount: FieldConfig;
   generatedAt: FieldConfig;
 }
 
@@ -54,6 +77,53 @@ export interface MetricLabel {
   order: number;
 }
 
+/** Split a concrete cache key into its dimension parts, e.g. `period:monthly:2026-Jan|payee:Zepto`. */
+export function parseCacheKey(key: string): ParsedGroupKey {
+  const out: ParsedGroupKey = {};
+  for (const dim of key.split("|")) {
+    if (!dim) continue;
+    const [name, ...rest] = dim.split(":");
+    if (name === "period" && rest.length >= 2) {
+      out.period = { granularity: rest[0], label: rest.slice(1).join(":") };
+    } else if (name === "payee" && rest.length >= 1) {
+      out.payee = { label: rest.join(":") };
+    } else if (name === "range" && rest.length >= 1) {
+      out.range = { start: rest[0] || undefined, end: rest[1] || undefined };
+    }
+  }
+  return out;
+}
+
+export function isDdmmyyyy(value?: string): boolean {
+  if (!value) return true;
+  const m = value.match(DDMMYYYY);
+  if (!m) return false;
+  const [, dd, mm, yyyy] = m;
+  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
+  return !(
+    Number.isNaN(d.getTime()) ||
+    d.getDate() !== Number(dd) ||
+    d.getMonth() !== Number(mm) - 1 ||
+    d.getFullYear() !== Number(yyyy)
+  );
+}
+
+export function parseDdmmyyyy(value: string): Date {
+  const m = value.match(DDMMYYYY);
+  if (!m) throw new Error(`Date is not DD-MM-YYYY: ${value}`);
+  const [, dd, mm, yyyy] = m;
+  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
+  if (
+    Number.isNaN(d.getTime()) ||
+    d.getDate() !== Number(dd) ||
+    d.getMonth() !== Number(mm) - 1 ||
+    d.getFullYear() !== Number(yyyy)
+  ) {
+    throw new Error(`Invalid date: ${value}`);
+  }
+  return d;
+}
+
 export function apiErrorMessage(e: any): string {
   if (e?.response?.data) {
     const d = e.response.data;
@@ -65,7 +135,14 @@ export function apiErrorMessage(e: any): string {
   return e?.message ?? "Request failed";
 }
 
-export const FLOW_OPTIONS = ["both", "inflows", "outflows"];
+export function groupTypeEnum(schemas: Record<string, any>): string[] {
+  return schemas?.GroupSpec?.properties?.group_type?.enum ?? [];
+}
+
+export function groupValueFk(schemas: Record<string, any>): { resource?: string; prefetch?: boolean } | null {
+  const fk = schemas?.GroupSpec?.properties?.group_value?.["x-fk"];
+  return fk && typeof fk === "object" ? fk : null;
+}
 
 export function metricLabels(schemas: Record<string, any>): MetricLabel[] {
   const props: Record<string, any> = schemas?.ReportMetrics?.properties ?? {};
@@ -79,210 +156,147 @@ export function metricLabels(schemas: Record<string, any>): MetricLabel[] {
     .sort((a, b) => a.order - b.order);
 }
 
+export function periodHints(granularity: string): string[] {
+  const y = new Date().getFullYear();
+  switch (granularity) {
+    case "weekly":
+      return [`${y}-W01`, `${y}-W26`];
+    case "monthly":
+      return [`${y}-Jan`, `${y}-Feb`];
+    case "quarterly":
+      return [`${y}-Jan-Mar`, `${y}-Apr-Jun`];
+    case "yearly":
+      return [`${y - 1}`, `${y}`];
+    default:
+      return [`${y}-Jan`, `${y}-W01`, `${y}-Jan-Mar`, `${y}`];
+  }
+}
+
 function dateVal(value: string): number {
   try {
-    return parseOccurredAt(value).getTime();
+    return parseDdmmyyyy(value).getTime();
   } catch {
     return 0;
   }
 }
 
-function bucketMatches(bucket: any, filter: SliceFilter): boolean {
-  const gk = bucket?.group_key ?? {};
-  if (filter.payees?.length && !(gk.payee ?? []).some((p: string) => filter.payees?.includes(p))) return false;
-  if (filter.tags?.length && !(gk.tag ?? []).some((t: string) => filter.tags?.includes(t))) return false;
+export function groupMatches(group: ReportGroupLike, filter: SliceFilter): boolean {
+  const key = parseCacheKey(group.key);
+  if (filter.period && filter.period !== "*") {
+    if (!key.period || key.period.label !== filter.period) return false;
+  }
+  if (filter.payee && filter.payee !== "*") {
+    if (!key.payee || key.payee.label !== filter.payee) return false;
+  }
   return true;
 }
 
-function num(v: any): number | null {
-  return typeof v === "number" && Number.isFinite(v) ? v : null;
-}
-
-/**
- * Groups cube periods by their canonical period_id, merging buckets per
- * period. The server returns disjoint slices, so additive metric merge is
- * safe; txn ids are deduped defensively. Metrics come verbatim from the API
- * except when multiple buckets contribute to one period — then cadence and
- * frequency are re-derived from the merged txn dates.
- */
-export function buildPeriodGroups(buckets: any[], filter: SliceFilter): ReportPeriodGroup[] {
-  interface Acc {
-    metrics: PeriodMetricsVM;
-    txns: any[];
-    sources: number;
-    apiCadence: number | null;
-    apiFrequency: number | null;
-  }
-  const byPeriod = new Map<string, Acc>();
-  const seenTxnIds = new Set<string>();
-  let currency = "INR";
-
-  for (const bucket of buckets ?? []) {
-    if (!bucketMatches(bucket, filter)) continue;
-    for (const period of bucket.series?.[filter.granularity] ?? []) {
-      if (filter.periods?.length && !filter.periods.includes(period.period_id)) continue;
-      const m = period.metrics ?? {};
-      let acc = byPeriod.get(period.period_id);
-      if (!acc) {
-        acc = {
-          metrics: {
-            outflows: 0,
-            inflows: 0,
-            sum: 0,
-            count: 0,
-            avg: null,
-            min: null,
-            max: null,
-            firstDate: null,
-            lastDate: null,
-            cadence: null,
-            frequency: null,
-          },
-          txns: [],
-          sources: 0,
-          apiCadence: num(m.cadence),
-          apiFrequency: num(m.frequency),
-        };
-        byPeriod.set(period.period_id, acc);
-      }
-      acc.sources += 1;
-      const vm = acc.metrics;
-      vm.outflows += m.outflows ?? 0;
-      vm.inflows += m.inflows ?? 0;
-      vm.sum += m.sum ?? 0;
-      vm.count += m.count ?? 0;
-      const mn = num(m.min);
-      if (mn != null) vm.min = vm.min == null ? mn : Math.min(vm.min, mn);
-      const mx = num(m.max);
-      if (mx != null) vm.max = vm.max == null ? mx : Math.max(vm.max, mx);
-      if (m.first_date && (!vm.firstDate || dateVal(String(m.first_date)) < dateVal(vm.firstDate))) {
-        vm.firstDate = String(m.first_date);
-      }
-      if (m.last_date && (!vm.lastDate || dateVal(String(m.last_date)) > dateVal(vm.lastDate))) {
-        vm.lastDate = String(m.last_date);
-      }
-      for (const txn of period.txns ?? []) {
-        if (txn?.id != null) {
-          if (seenTxnIds.has(txn.id)) continue;
-          seenTxnIds.add(txn.id);
-        }
-        acc.txns.push(txn);
-        const c = txn?.account?.currency;
-        if (c) currency = c;
-      }
-    }
-  }
-
-  return [...byPeriod.entries()]
-    .map(([key, acc]) => {
-      const vm = acc.metrics;
-      vm.avg = vm.count ? Math.round((vm.sum / vm.count) * 100) / 100 : null;
-      if (acc.sources > 1) {
-        const dates = acc.txns
-          .map((t) => {
-            try {
-              return parseOccurredAt(t?.occurred_at).getTime();
-            } catch {
-              return NaN;
-            }
-          })
-          .filter((t) => !Number.isNaN(t))
-          .sort((a, b) => a - b);
-        if (dates.length >= 2) {
-          let gapSum = 0;
-          for (let i = 0; i < dates.length - 1; i += 1) gapSum += (dates[i + 1] - dates[i]) / 86400000;
-          const cadence = Math.round((gapSum / (dates.length - 1)) * 100) / 100;
-          vm.cadence = cadence > 0 ? cadence : null;
-          vm.frequency = cadence > 0 ? Math.round((1 / cadence) * 100) / 100 : null;
-        } else {
-          vm.cadence = null;
-          vm.frequency = null;
-        }
-      } else {
-        vm.cadence = acc.apiCadence;
-        vm.frequency = acc.apiFrequency;
-      }
-      return { key, metrics: vm, txns: acc.txns, currency };
-    })
-    .sort((a, b) => b.key.localeCompare(a.key));
-}
-
-export function sliceSummary(groups: ReportPeriodGroup[]): SliceSummary {
-  const outflows = groups.reduce((s, g) => s + g.metrics.outflows, 0);
-  const inflows = groups.reduce((s, g) => s + g.metrics.inflows, 0);
-  const sum = groups.reduce((s, g) => s + g.metrics.sum, 0);
-  const count = groups.reduce((s, g) => s + g.metrics.count, 0);
+export function aggregateSlice(groups: ReportGroupLike[], filter: SliceFilter): SliceSummary {
+  let sum = 0;
+  let count = 0;
+  let spent = 0;
+  let income = 0;
   let min: number | null = null;
   let max: number | null = null;
   let firstDate: string | null = null;
   let lastDate: string | null = null;
   let currency = "INR";
   const txns: any[] = [];
-  for (const g of groups) {
-    if (g.metrics.min != null) min = min == null ? g.metrics.min : Math.min(min, g.metrics.min);
-    if (g.metrics.max != null) max = max == null ? g.metrics.max : Math.max(max, g.metrics.max);
-    if (g.metrics.firstDate && (!firstDate || dateVal(g.metrics.firstDate) < dateVal(firstDate))) {
-      firstDate = g.metrics.firstDate;
+  const seen = new Set<string>();
+
+  for (const group of groups) {
+    if (!groupMatches(group, filter)) continue;
+    const m = group.metrics ?? {};
+    if (typeof m.sum === "number") sum += m.sum;
+    if (typeof m.count === "number") count += m.count;
+    if (typeof m.min === "number") min = min === null ? m.min : Math.min(min, m.min);
+    if (typeof m.max === "number") max = max === null ? m.max : Math.max(max, m.max);
+    if (m.first_date && (!firstDate || dateVal(String(m.first_date)) < dateVal(firstDate))) {
+      firstDate = String(m.first_date);
     }
-    if (g.metrics.lastDate && (!lastDate || dateVal(g.metrics.lastDate) > dateVal(lastDate))) {
-      lastDate = g.metrics.lastDate;
+    if (m.last_date && (!lastDate || dateVal(String(m.last_date)) > dateVal(lastDate))) {
+      lastDate = String(m.last_date);
+    }
+    for (const txn of group.txns ?? []) {
+      if (txn?.id != null) {
+        if (seen.has(txn.id)) continue;
+        seen.add(txn.id);
+      }
+      txns.push(txn);
+      const amt = Number(txn?.amount ?? 0);
+      if (amt < 0) spent += Math.abs(amt);
+      else income += amt;
+      const c = txn?.account?.currency;
+      if (c) currency = c;
     }
-    if (g.currency) currency = g.currency;
-    txns.push(...g.txns);
   }
-  return { outflows, inflows, sum, count, avg: count ? sum / count : null, min, max, firstDate, lastDate, txns, currency };
+
+  return { sum, count, avg: count ? sum / count : null, min, max, firstDate, lastDate, txns, spent, income, currency };
+}
+
+export function buildPivot(groups: ReportGroupLike[], periodOrder: string[], payeeOrder: string[]): PivotTable {
+  const payees = payeeOrder.filter((payee) =>
+    groups.some((g) => parseCacheKey(g.key).payee?.label === payee),
+  );
+  const totals = payees.map((payee) => ({ payee, sum: 0, count: 0 }));
+  const rows: PivotRow[] = [];
+
+  for (const period of periodOrder) {
+    const periodGroups = groups.filter((g) => parseCacheKey(g.key).period?.label === period);
+    if (periodGroups.length === 0) continue;
+    const cells = payees.map((payee, i) => {
+      const cellGroups = periodGroups.filter((g) => parseCacheKey(g.key).payee?.label === payee);
+      const sum = cellGroups.reduce((s, g) => s + (g.metrics?.sum ?? 0), 0);
+      const count = cellGroups.reduce((s, g) => s + (g.metrics?.count ?? 0), 0);
+      totals[i].sum += sum;
+      totals[i].count += count;
+      return { payee, sum, count };
+    });
+    rows.push({
+      period,
+      cells,
+      periodSum: cells.reduce((s, c) => s + c.sum, 0),
+      periodCount: cells.reduce((s, c) => s + c.count, 0),
+    });
+  }
+
+  return { rows, payees, totals };
+}
+
+export function buildTxnFieldConfigs(resources: ResourceConfig[]): TxnFieldConfigs | null {
+  const expensesRes = resources.find((r) => r.name === "expenses");
+  const entitiesRes = resources.find((r) => r.name === "entities");
+  const accountsRes = resources.find((r) => r.name === "accounts");
+  const find = (res: ResourceConfig | undefined, name: string) => res?.fields.find((f) => f.name === name);
+  const entity = find(expensesRes, "entity");
+  const amount = find(expensesRes, "amount");
+  const account = find(expensesRes, "account");
+  const occurredAt = find(expensesRes, "occurred_at");
+  const logo = find(entitiesRes, "logo");
+  if (!entity || !amount || !account || !occurredAt || !logo) return null;
+  return {
+    entity,
+    amount,
+    account,
+    occurredAt,
+    logo,
+    formats: {
+      entity: entitiesRes?.displayFormat ?? "{name}",
+      account: accountsRes?.displayFormat ?? "{name}",
+    },
+  };
 }
 
 export function buildReportFieldConfigs(resources: ResourceConfig[]): ReportFieldConfigs | null {
   const reportsRes = resources.find((r) => r.name === "reports");
   if (!reportsRes) return null;
   const find = (name: string) => reportsRes.fields.find((f) => f.name === name);
-  const name = find("name");
+  const groupLabel = find("group_label");
+  const granularity = find("granularity");
+  const periodLabel = find("period_label");
+  const payee = find("payee");
+  const entityCount = find("entity_count");
   const generatedAt = find("generated_at");
-  if (!name || !generatedAt) return null;
-  return { name, generatedAt };
-}
-
-export type ReportDim = "period" | "payee" | "tag";
-
-export interface DimensionBar {
-  key: string;
-  sum: number;
-  count: number;
-}
-
-/**
- * Bar-chart rows for a given dimension. "period" reuses the period groups;
- * "payee"/"tag" fold each bucket's metrics into every value listed under
- * group_key[dim] — safe because server buckets are disjoint slices.
- */
-export function buildDimensionBars(buckets: any[], filter: SliceFilter, dim: ReportDim): DimensionBar[] {
-  if (dim === "period") {
-    return buildPeriodGroups(buckets, filter).map((g) => ({
-      key: g.key,
-      sum: g.metrics.sum,
-      count: g.metrics.count,
-    }));
-  }
-  const acc = new Map<string, DimensionBar>();
-  for (const bucket of buckets ?? []) {
-    if (!bucketMatches(bucket, filter)) continue;
-    const keys: string[] = bucket.group_key?.[dim] ?? [];
-    for (const period of bucket.series?.[filter.granularity] ?? []) {
-      if (filter.periods?.length && !filter.periods.includes(period.period_id)) continue;
-      const m = period.metrics ?? {};
-      const sum = typeof m.sum === "number" ? m.sum : 0;
-      const count = typeof m.count === "number" ? m.count : 0;
-      for (const k of keys) {
-        const cur = acc.get(k);
-        if (cur) {
-          cur.sum += sum;
-          cur.count += count;
-        } else {
-          acc.set(k, { key: k, sum, count });
-        }
-      }
-    }
-  }
-  return [...acc.values()].sort((a, b) => Math.abs(b.sum) - Math.abs(a.sum));
+  if (!groupLabel || !granularity || !periodLabel || !payee || !entityCount || !generatedAt) return null;
+  return { groupLabel, granularity, periodLabel, payee, entityCount, generatedAt };
 }

src/common/components/StatCard.tsx

@@ -1,26 +0,0 @@
-import { Paper, Typography } from "@mui/material";
-
-interface StatCardProps {
-  label: string;
-  value: string;
-  color?: string;
-  hint?: string;
-}
-
-export function StatCard({ label, value, color, hint }: StatCardProps) {
-  return (
-    <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 180 }}>
-      <Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
-        {label}
-      </Typography>
-      <Typography variant="h5" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em", color }}>
-        {value}
-      </Typography>
-      {hint && (
-        <Typography variant="caption" color="text.secondary">
-          {hint}
-        </Typography>
-      )}
-    </Paper>
-  );
-}

src/common/components/TransactionRow.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import { ListCellRenderer, CurrencyField, applyDisplayFormat } from "../../../react-openapi";
-import type { ExpenseItem, TxnFieldConfigs } from "../types";
-
-interface TransactionRowProps {
-  item: ExpenseItem;
-  currency: string;
-  fields: TxnFieldConfigs;
-}
-
-export const TransactionRow = React.memo(function TransactionRow({ item, currency, fields }: TransactionRowProps) {
-  const itemCurrency = item.account?.currency ?? currency;
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        gap: 2,
-        px: 2,
-        py: 1.25,
-        border: "1px solid",
-        borderColor: "divider",
-        borderRadius: 2,
-        backgroundColor: "background.paper",
-        transition: "background-color 160ms ease, border-color 160ms ease",
-        "&:hover": {
-          backgroundColor: "action.hover",
-          borderColor: "primary.light",
-        },
-      }}
-    >
-      <Box
-        sx={{
-          width: 40,
-          flexShrink: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        {item.entity?.logo ? (
-          <ListCellRenderer field={fields.logo} value={item.entity.logo} />
-        ) : (
-          <Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: "action.hover" }} />
-        )}
-      </Box>
-      <Box sx={{ flex: "0 1 auto", minWidth: 0 }}>
-        <Typography
-          variant="body1"
-          fontWeight={600}
-          noWrap
-          sx={{ fontSize: "0.9375rem", lineHeight: 1.3 }}
-        >
-          {item.entity ? applyDisplayFormat(item.entity, fields.formats.entity) : "Unknown"}
-        </Typography>
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-          <Box sx={{ color: "text.secondary" }}>
-            <ListCellRenderer field={fields.occurredAt} value={item.occurred_at} />
-          </Box>
-          {item.account?.name && (
-            <ListCellRenderer field={fields.account} value={item.account} displayFormat={fields.formats.account} />
-          )}
-        </Box>
-      </Box>
-      <Box sx={{ flex: 1 }} />
-      <CurrencyField value={item.amount} currency={itemCurrency} large />
-    </Box>
-  );
-});

src/common/types.ts

@@ -1,21 +0,0 @@
-import type { FieldConfig } from "../../react-openapi";
-
-export interface ExpenseItem {
-  id: string;
-  entity?: { name?: string; type?: string; logo?: string } | null;
-  amount: number;
-  account?: { name?: string; number?: string; type?: string; currency?: string } | null;
-  tags?: { icon?: string; name?: string }[];
-  occurred_at?: string;
-  created_at?: string;
-  updated_at?: string;
-}
-
-export interface TxnFieldConfigs {
-  entity: FieldConfig;
-  amount: FieldConfig;
-  account: FieldConfig;
-  occurredAt: FieldConfig;
-  logo: FieldConfig;
-  formats: { entity: string; account: string };
-}

src/common/utils/dates.ts

@@ -1,71 +0,0 @@
-const DDMMYYYY = /^(\d{2})-(\d{2})-(\d{4})$/;
-
-export function parseOccurredAt(value?: string): Date {
-  const m = value?.match(DDMMYYYY);
-  if (!m) {
-    throw new Error(`Expense occurred_at is not DD-MM-YYYY: ${value}`);
-  }
-  const [, dd, mm, yyyy] = m;
-  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
-  if (
-    Number.isNaN(d.getTime()) ||
-    d.getDate() !== Number(dd) ||
-    d.getMonth() !== Number(mm) - 1 ||
-    d.getFullYear() !== Number(yyyy)
-  ) {
-    throw new Error(`Invalid expense occurred_at date: ${value}`);
-  }
-  return d;
-}
-
-export function isDdmmyyyy(value?: string): boolean {
-  if (!value) return true;
-  const m = value.match(DDMMYYYY);
-  if (!m) return false;
-  const [, dd, mm, yyyy] = m;
-  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
-  return !(
-    Number.isNaN(d.getTime()) ||
-    d.getDate() !== Number(dd) ||
-    d.getMonth() !== Number(mm) - 1 ||
-    d.getFullYear() !== Number(yyyy)
-  );
-}
-
-export function parseDdmmyyyy(value: string): Date {
-  const m = value.match(DDMMYYYY);
-  if (!m) throw new Error(`Date is not DD-MM-YYYY: ${value}`);
-  const [, dd, mm, yyyy] = m;
-  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
-  if (
-    Number.isNaN(d.getTime()) ||
-    d.getDate() !== Number(dd) ||
-    d.getMonth() !== Number(mm) - 1 ||
-    d.getFullYear() !== Number(yyyy)
-  ) {
-    throw new Error(`Invalid date: ${value}`);
-  }
-  return d;
-}
-
-export function monthKey(value?: string): string {
-  const d = parseOccurredAt(value);
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
-}
-
-export function currentMonthKey(): string {
-  const now = new Date();
-  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
-}
-
-export function monthLabel(key: string): string {
-  const [y, m] = key.split("-").map(Number);
-  if (!y || !m) return key;
-  const d = new Date(y, m - 1, 1);
-  return d.toLocaleDateString("en-IN", { month: "long", year: "numeric" });
-}
-
-export function dateLabel(value: string): string {
-  const d = parseOccurredAt(value);
-  return d.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
-}

src/common/utils/fieldConfigs.ts

@@ -1,26 +0,0 @@
-import type { ResourceConfig } from "../../../react-openapi";
-import type { TxnFieldConfigs } from "../types";
-
-export function buildTxnFieldConfigs(resources: ResourceConfig[]): TxnFieldConfigs | null {
-  const expensesRes = resources.find((r) => r.name === "expenses");
-  const entitiesRes = resources.find((r) => r.name === "entities");
-  const accountsRes = resources.find((r) => r.name === "accounts");
-  const find = (res: ResourceConfig | undefined, name: string) => res?.fields.find((f) => f.name === name);
-  const entity = find(expensesRes, "entity");
-  const amount = find(expensesRes, "amount");
-  const account = find(expensesRes, "account");
-  const occurredAt = find(expensesRes, "occurred_at");
-  const logo = find(entitiesRes, "logo");
-  if (!entity || !amount || !account || !occurredAt || !logo) return null;
-  return {
-    entity,
-    amount,
-    account,
-    occurredAt,
-    logo,
-    formats: {
-      entity: entitiesRes?.displayFormat ?? "{name}",
-      account: accountsRes?.displayFormat ?? "{name}",
-    },
-  };
-}

src/common/utils/transactions.ts

@@ -1,161 +0,0 @@
-import type { ExpenseItem } from "../types";
-import { dateLabel, monthKey, monthLabel, parseOccurredAt } from "./dates";
-
-export function isExpense(item: ExpenseItem): boolean {
-  return (item.amount ?? 0) < 0;
-}
-
-export interface DateGroup {
-  date: string;
-  label: string;
-  items: ExpenseItem[];
-}
-
-export function groupByDate(items: ExpenseItem[]): DateGroup[] {
-  const sorted = [...items].sort(
-    (a, b) => parseOccurredAt(b.occurred_at).getTime() - parseOccurredAt(a.occurred_at).getTime(),
-  );
-  const map = new Map<string, ExpenseItem[]>();
-  for (const item of sorted) {
-    const key = item.occurred_at ?? "";
-    const list = map.get(key) ?? [];
-    list.push(item);
-    map.set(key, list);
-  }
-  return [...map.entries()].map(([date, list]) => ({
-    date,
-    label: dateLabel(date),
-    items: list,
-  }));
-}
-
-export type PeriodGranularity = "weekly" | "monthly" | "quarterly" | "yearly";
-
-export interface PeriodGroup {
-  key: string;
-  label: string;
-  items: ExpenseItem[];
-  spent: number;
-  income: number;
-  currency: string;
-}
-
-/** Metrics verbatim from the API's ReportMetrics (camelCased). */
-export interface ListGroupMetrics {
-  sum: number;
-  count: number;
-  avg: number | null;
-  min: number | null;
-  max: number | null;
-  cadence: number | null;
-  frequency: number | null;
-}
-
-export interface ListPeriodGroup extends PeriodGroup {
-  metrics?: ListGroupMetrics;
-}
-
-function isoWeekKey(d: Date): string {
-  const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
-  const day = date.getUTCDay() || 7;
-  date.setUTCDate(date.getUTCDate() + 4 - day);
-  const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
-  const week = Math.ceil(((date.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
-  return `${date.getUTCFullYear()}-W${String(week).padStart(2, "0")}`;
-}
-
-function quarterKey(d: Date): string {
-  return `${d.getFullYear()}-Q${Math.floor(d.getMonth() / 3) + 1}`;
-}
-
-export function periodKey(value: string | undefined, granularity: PeriodGranularity): string {
-  const d = parseOccurredAt(value);
-  switch (granularity) {
-    case "weekly":
-      return isoWeekKey(d);
-    case "quarterly":
-      return quarterKey(d);
-    case "yearly":
-      return String(d.getFullYear());
-    default:
-      return monthKey(value);
-  }
-}
-
-export function periodLabel(key: string, granularity: PeriodGranularity): string {
-  switch (granularity) {
-    case "weekly":
-    case "yearly":
-      return key;
-    case "quarterly": {
-      const [y, q] = key.split("-Q");
-      return `Q${q} ${y}`;
-    }
-    default:
-      return monthLabel(key);
-  }
-}
-
-export function groupByPeriod(items: ExpenseItem[], granularity: PeriodGranularity = "monthly"): PeriodGroup[] {
-  const map = new Map<string, ExpenseItem[]>();
-  for (const item of items) {
-    const key = periodKey(item.occurred_at, granularity);
-    const list = map.get(key) ?? [];
-    list.push(item);
-    map.set(key, list);
-  }
-  return [...map.entries()]
-    .map(([key, list]) => {
-      const sorted = [...list].sort(
-        (a, b) => parseOccurredAt(b.occurred_at).getTime() - parseOccurredAt(a.occurred_at).getTime(),
-      );
-      const currency = sorted.find((it) => it.account?.currency)?.account?.currency ?? "INR";
-      const spent = sorted.filter(isExpense).reduce((sum, it) => sum + Math.abs(it.amount ?? 0), 0);
-      const income = sorted.filter((it) => !isExpense(it)).reduce((sum, it) => sum + (it.amount ?? 0), 0);
-      return { key, label: periodLabel(key, granularity), items: sorted, spent, income, currency };
-    })
-    .sort((a, b) => b.key.localeCompare(a.key));
-}
-
-export interface TxnMetrics {
-  sum: number;
-  count: number;
-  avg: number | null;
-  min: number | null;
-  max: number | null;
-  cadenceDays: number | null;
-  frequency: number | null;
-}
-
-/** Mirrors backend ReportMetrics.compute_metrics over a list of transactions. */
-export function computeTxnMetrics(items: ExpenseItem[]): TxnMetrics {
-  const amounts = items.filter((it) => typeof it.amount === "number").map((it) => it.amount as number);
-  const empty = { sum: 0, count: 0, avg: null, min: null, max: null, cadenceDays: null, frequency: null };
-  if (amounts.length === 0) {
-    return empty;
-  }
-  const dates = items
-    .map((it) => it.occurred_at)
-    .filter((d): d is string => !!d)
-    .map((d) => parseOccurredAt(d).getTime())
-    .sort((a, b) => a - b);
-  const sum = amounts.reduce((s, a) => s + a, 0);
-  let cadenceDays: number | null = null;
-  if (dates.length >= 2) {
-    const gaps: number[] = [];
-    for (let i = 0; i < dates.length - 1; i += 1) {
-      gaps.push((dates[i + 1] - dates[i]) / 86400000);
-    }
-    cadenceDays = Math.round((gaps.reduce((s, g) => s + g, 0) / gaps.length) * 100) / 100;
-  }
-  const frequency = cadenceDays != null && cadenceDays > 0 ? Math.round((1 / cadenceDays) * 100) / 100 : null;
-  return {
-    sum,
-    count: amounts.length,
-    avg: sum / amounts.length,
-    min: Math.min(...amounts),
-    max: Math.max(...amounts),
-    cadenceDays,
-    frequency,
-  };
-}

src/main.jsx

@@ -17,8 +17,8 @@ import {
 import Home from './Home';
 import FetchRequests from './FetchRequest/FetchRequestCreate';
 import FetchRequestDetail from './FetchRequest/FetchRequestDetail';
-import Expense from './Expense';
-import Reports from './Reports/Report';
+import Expense from './Expense/Expense';
+import Reports from './Reports/Reports';
 import { AppProvider, useAppContext, Admin, ProfileRoutes } from '../react-openapi';
 import { AuthProvider, AuthPage, useAuth, ProfileCreate, ProfileEdit, ProfileView } from "../react-auth";
 import Header from './Header';