src/Header.tsx

@@ -34,6 +34,7 @@ interface HeaderProps {
 const NAV_LINKS = [
   { label: "Home", path: "/" },
   { label: "Expenses", path: "/expenses" },
+  { label: "Reports", path: "/reports" },
   { label: "Fetch Requests", path: "/fetch-requests" },
 ];
 

src/Reports/GenerateReportPanel.tsx

@@ -0,0 +1,210 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Paper,
+  Typography,
+  TextField,
+  Button,
+  IconButton,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel,
+  Autocomplete,
+  Alert,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import { useResource, useAppContext, applyDisplayFormat } from "../../react-openapi";
+import { useToast } from "../ui/Toast";
+import { apiErrorMessage, groupTypeEnum, isDdmmyyyy, periodHints } from "./types";
+
+interface GroupRow {
+  id: number;
+  group_type: string;
+  group_value: string;
+}
+
+interface GenerateReportPanelProps {
+  onGenerated: (reports: any[]) => void;
+}
+
+export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
+  const { schemas, resources } = useAppContext();
+  const { create } = useResource("reports");
+  const { list: listEntities } = useResource("entities");
+  const { showToast } = useToast();
+
+  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 types = useMemo(() => groupTypeEnum(schemas), [schemas]);
+  const entitiesRes = resources.find((r) => r.name === "entities");
+  const entitiesFormat = entitiesRes?.displayFormat ?? "{name}";
+
+  useEffect(() => {
+    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)));
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [listEntities, entitiesFormat]);
+
+  const isPayee = (type: string) => type === "payee";
+
+  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 () => {
+    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(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);
+    }
+  };
+
+  return (
+    <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, mb: 4 }}>
+      <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
+        Generate report
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 2 }}>
+        Choose the dimensions to snapshot. At least one group is required — with no period dimension the server
+        snapshots weekly, monthly and quarterly.
+      </Typography>
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 2, borderRadius: 2 }}>
+          {error}
+        </Alert>
+      )}
+
+      <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>
+
+      <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/ReportList.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Box, Paper, Typography, Button, IconButton, Skeleton, Tooltip } from "@mui/material";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import CachedIcon from "@mui/icons-material/Cached";
+import { ListCellRenderer, formatCurrency } from "../../react-openapi";
+import type { ReportFieldConfigs } from "./types";
+
+interface ReportListProps {
+  reports: any[];
+  loading: boolean;
+  fields: ReportFieldConfigs | null;
+  selectedId: string | null;
+  onView: (id: string) => void;
+  onRegenerate: (report: any) => void;
+  onDelete: (id: string) => void;
+}
+
+export function ReportList({ reports, loading, fields, selectedId, onView, onRegenerate, onDelete }: ReportListProps) {
+  if (loading && reports.length === 0) {
+    return (
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+        {[0, 1, 2].map((i) => (
+          <Skeleton key={i} variant="rounded" height={88} sx={{ borderRadius: 2 }} />
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+      {reports.map((report) => {
+        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
+            key={report.id}
+            variant="outlined"
+            sx={{
+              p: 2,
+              borderRadius: 2,
+              borderColor: selectedId === report.id ? "primary.main" : "divider",
+              transition: "border-color 160ms ease",
+              "&:hover": { borderColor: "primary.light" },
+            }}
+          >
+            <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.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">
+                    {report.period_label}
+                  </Typography>
+                  <Typography variant="caption" color="text.disabled">
+                    /
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
+                    {report.payee}
+                  </Typography>
+                  {range && (
+                    <Typography variant="caption" color="text.disabled">
+                      {range}
+                    </Typography>
+                  )}
+                </Box>
+                <Box sx={{ display: "flex", gap: 1.5, mt: 0.5 }}>
+                  <Typography variant="caption" color="text.secondary">
+                    {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>
+                  {fields && (
+                    <Box sx={{ color: "text.secondary" }}>
+                      <ListCellRenderer field={fields.generatedAt} value={report.generated_at} />
+                    </Box>
+                  )}
+                </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
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<CachedIcon />}
+                  onClick={() => onRegenerate(report)}
+                >
+                  Regenerate
+                </Button>
+                <Tooltip title="Delete">
+                  <IconButton aria-label="Delete report" onClick={() => onDelete(report.id)}>
+                    <DeleteOutlineIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            </Box>
+          </Paper>
+        );
+      })}
+    </Box>
+  );
+}

src/Reports/ReportViewer.tsx

@@ -0,0 +1,438 @@
+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 { 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;
+  version: number;
+  fields: TxnFieldConfigs | null;
+  onClose: () => void;
+  onRegenerated: (report: any) => void;
+}
+
+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 [selectedPeriod, setSelectedPeriod] = useState("*");
+  const [selectedPayee, setSelectedPayee] = useState("*");
+  const [openMonth, setOpenMonth] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+    setError(null);
+    get(id)
+      .then((res) => {
+        if (!mounted) return;
+        setReport(res);
+        setSelectedPeriod("*");
+        setSelectedPayee("*");
+      })
+      .catch((e: any) => {
+        if (!mounted) return;
+        setError(e?.response?.data?.detail ?? e?.message ?? "Failed to load report");
+      })
+      .finally(() => {
+        if (mounted) setLoading(false);
+      });
+    return () => {
+      mounted = false;
+    };
+  }, [id, version, reload, get]);
+
+  const data = useMemo(() => (Array.isArray(report?.data) ? report.data : null), [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 months = useMemo(() => groupByMonth(slice.txns), [slice.txns]);
+
+  const pivot = useMemo(
+    () => buildPivot(data ?? [], groupOptions.period, groupOptions.payee),
+    [data, groupOptions],
+  );
+
+  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 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;
+  };
+
+  if (loading) {
+    return (
+      <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3 }}>
+        <Skeleton variant="text" width={220} height={28} />
+        <Skeleton variant="rounded" height={120} sx={{ my: 2, borderRadius: 2 }} />
+        <Skeleton variant="rounded" height={240} sx={{ borderRadius: 2 }} />
+      </Paper>
+    );
+  }
+
+  if (error) {
+    return (
+      <Paper variant="outlined" sx={{ p: 3, borderRadius: 3 }}>
+        <Alert severity="error" sx={{ borderRadius: 2 }}>
+          {error}
+        </Alert>
+        <Button size="small" sx={{ mt: 2 }} onClick={() => setReload((r) => r + 1)}>
+          Retry
+        </Button>
+      </Paper>
+    );
+  }
+
+  if (!report) return null;
+
+  return (
+    <Paper variant="outlined" sx={{ borderRadius: 3, overflow: "hidden" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          px: 2.5,
+          py: 2,
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          flexWrap: "wrap",
+        }}
+      >
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
+            {report.group_label}
+          </Typography>
+          <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
+            <Typography variant="caption" color="text.secondary">
+              {report.granularity} · {report.period_label} · {report.payee}
+            </Typography>
+            <Typography variant="caption" color="text.disabled">
+              {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="Close report" onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+
+      {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={{ 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={{ 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={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 3 }}>
+            {metrics.map((m) => {
+              const value = metricValue(m.key);
+              if (value == null) return null;
+              return (
+                <Paper
+                  key={m.key}
+                  variant="outlined"
+                  sx={{ px: 1.5, py: 1, borderRadius: 2 }}
+                >
+                  <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+                    {m.label}
+                  </Typography>
+                  <Typography variant="body2" fontWeight={600}>
+                    {value}
+                  </Typography>
+                </Paper>
+              );
+            })}
+          </Box>
+
+          {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 transactions in this slice.
+              </Typography>
+            </Paper>
+          ) : (
+            <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={{
+                    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" },
+                  }}
+                >
+                  <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>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </Box>
+          )}
+        </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

@@ -0,0 +1,302 @@
+import type { FieldConfig, ResourceConfig } from "../../react-openapi";
+
+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 ReportGroupLike {
+  key: string;
+  group_label?: string;
+  metrics?: Record<string, any>;
+  txns?: any[];
+}
+
+export interface SliceFilter {
+  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 {
+  groupLabel: FieldConfig;
+  granularity: FieldConfig;
+  periodLabel: FieldConfig;
+  payee: FieldConfig;
+  entityCount: FieldConfig;
+  generatedAt: FieldConfig;
+}
+
+export interface MetricLabel {
+  key: string;
+  label: string;
+  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;
+    if (Array.isArray(d)) return d.map((x: any) => x?.msg ?? String(x)).join("; ");
+    if (typeof d.detail === "string") return d.detail;
+    if (typeof d.detail?.msg === "string") return d.detail.msg;
+    if (typeof d === "string") return d;
+  }
+  return e?.message ?? "Request failed";
+}
+
+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 ?? {};
+  return Object.entries(props)
+    .filter(([, p]) => p && typeof p === "object")
+    .map(([key, p]) => ({
+      key,
+      label: (p as any)["x-label"] ?? key,
+      order: (p as any)["x-order"] ?? Infinity,
+    }))
+    .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 parseDdmmyyyy(value).getTime();
+  } catch {
+    return 0;
+  }
+}
+
+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;
+}
+
+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[] = [];
+  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 (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;
+    }
+  }
+
+  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 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 (!groupLabel || !granularity || !periodLabel || !payee || !entityCount || !generatedAt) return null;
+  return { groupLabel, granularity, periodLabel, payee, entityCount, generatedAt };
+}

src/main.jsx

@@ -18,6 +18,7 @@ import Home from './Home';
 import FetchRequests from './FetchRequest/FetchRequestCreate';
 import FetchRequestDetail from './FetchRequest/FetchRequestDetail';
 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';
@@ -80,6 +81,7 @@ const routerMapping = [
   { path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
   { path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
   { path: "/expenses", component: Expense, headerTitle: "Expenses" },
+  { path: "/reports", component: Reports, headerTitle: "Reports" },
   { path: "/admin/*", component: Admin, headerTitle: "Admin" },
   { path: "/profile/*", component: ProfileRoutes, headerTitle: "Profile" },
 ];