refactor(reports): drop txns_per_month and Count card

Group strip is now Sum/Avg/Min/Max/Cadence-Frequency; count already
shown in the accordion header, per-month rate derivable from monthly
buckets.

.gitignore

@@ -14,4 +14,3 @@ dist
 dist-ssr
 *.local
 .idea
-tsconfig.tsbuildinfo

react-openapi/index.ts

@@ -17,6 +17,5 @@ export { getApi } from "./src/hooks/useApi";
 export { useItemSse } from "./src/hooks/useItemSse";
 export { sanitizePayload } from "./src/utils/sanitize-payload";
 export type { FkResolver } from "./src/utils/sanitize-payload";
-export { formatDate, formatDateTime } from "./src/utils/datetime";
 export type { FilterComponentProps } from "./src/context/useResource";
 export type { SpecConfiguration, ResourceConfig, FieldConfig, FKFieldConfig, ResourceRelationship, ProfileOperation, ProfileComponents, AuthConfig } from "./src/types";

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

@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
 import { Box, Typography, Chip, Avatar, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material";
 import type { FieldConfig } from "../../types";
 import { applyDisplayFormat, resolveMediaUrl } from "./utils";
-import { formatByFieldFormat } from "../../utils/datetime";
 import { InlineRefField } from "./renderers/InlineRefField";
 import { CurrencyField } from "./renderers/CurrencyField";
 import { extractFields } from "../../transformers/field-config";
@@ -58,7 +57,7 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List
                   {sf.label}
                 </Typography>
                 <Typography variant="body2">
-                  {fv == null ? "—" : typeof fv === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(fv, sf.inlineDisplayFormat) : JSON.stringify(fv)) : formatByFieldFormat(fv, sf.format)}
+                  {fv == null ? "—" : typeof fv === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(fv, sf.inlineDisplayFormat) : JSON.stringify(fv)) : String(fv)}
                 </Typography>
               </Box>
             </Grid>
@@ -154,5 +153,5 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List
     return <Typography variant="body2">{applyDisplayFormat(value, displayFormat ?? "")}</Typography>;
   }
 
-  return <Typography variant="body2">{formatByFieldFormat(value, field.format)}</Typography>;
+  return <Typography variant="body2">{String(value)}</Typography>;
 }

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

@@ -10,26 +10,11 @@ interface Props {
 }
 
 export function DateField({ field, value, onChange, error }: Props) {
-  // `x-edit-as: date` renders a date-time field as a plain date picker;
-  // the picked day is submitted as midnight so the stored type is intact.
-  const editAsDate = field.format === "date" || field.editAs === "date";
+  const inputType = field.format === "date" ? "date" : "datetime-local";
 
-  const inputType = editAsDate ? "date" : "datetime-local";
-
-  const normalized = (() => {
-    if (field.format !== "date-time" || typeof value !== "string") return value;
-    if (editAsDate) return value.slice(0, 10);
-    return value.replace(/\.\d+Z$/, "").replace(/Z$/, "");
-  })();
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = e.target.value;
-    if (editAsDate && field.format === "date-time" && /^\d{4}-\d{2}-\d{2}$/.test(v)) {
-      onChange(`${v}T00:00:00`);
-    } else {
-      onChange(v);
-    }
-  };
+  const normalized = field.format === "date-time" && typeof value === "string"
+    ? value.replace(/\.\d+Z$/, "").replace(/Z$/, "")
+    : value;
 
   return (
     <TextField
@@ -37,7 +22,7 @@ export function DateField({ field, value, onChange, error }: Props) {
       label={field.label}
       type={inputType}
       value={normalized ?? ""}
-      onChange={handleChange}
+      onChange={(e) => onChange(e.target.value)}
       error={!!error}
       helperText={error || field.description || undefined}
       placeholder={field.description || undefined}

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

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Box, Typography, Chip, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material";
 import type { FieldConfig } from "../../../types";
 import { applyDisplayFormat } from "../utils";
-import { formatByFieldFormat } from "../../../utils/datetime";
 import { extractFields } from "../../../transformers/field-config";
 import { useAppContext } from "../../../context/AppContext";
 
@@ -69,7 +68,7 @@ export function InlineRefField({ field, value }: Props) {
                   <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
                     {sf.label}
                   </Typography>
-                  <Typography variant="body2">{value?.[sf.name] == null ? "—" : typeof value[sf.name] === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(value[sf.name], sf.inlineDisplayFormat) : JSON.stringify(value[sf.name])) : formatByFieldFormat(value[sf.name], sf.format)}</Typography>
+                  <Typography variant="body2">{value?.[sf.name] == null ? "—" : typeof value[sf.name] === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(value[sf.name], sf.inlineDisplayFormat) : JSON.stringify(value[sf.name])) : String(value[sf.name])}</Typography>
                 </Box>
               </Grid>
             ))}

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

@@ -1,5 +1,3 @@
-import { formatIsoLike } from "../../utils/datetime";
-
 function getNested(obj: any, path: string): any {
   return path.split(".").reduce((o, k) => o?.[k], obj);
 }
@@ -8,7 +6,7 @@ export function applyDisplayFormat(item: any, format: string): string {
   if (!item || typeof item !== "object") return String(item ?? "");
   return format.replace(/\{([\w.]+)\}/g, (_, key) => {
     const val = getNested(item, key);
-    return val != null ? formatIsoLike(val) : "";
+    return val != null ? String(val) : "";
   });
 }
 

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

@@ -64,7 +64,6 @@ function extractOneOfOptions(schema: any, schemas: Record<string, any>, discrimi
           description: prop["x-description"] ?? "",
           type: prop.type ?? "string",
           format: prop.format,
-          editAs: prop["x-edit-as"],
           order: prop["x-order"] ?? Infinity,
           hidden: prop["x-hidden"] ?? {},
           filterable: prop["x-filterable"] ?? false,
@@ -131,7 +130,6 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
         description: prop["x-description"] ?? "",
         type: isRef && refSchema ? "object" : isOneOf ? "object" : (prop.type ?? "string"),
         format: prop.format,
-        editAs: prop["x-edit-as"],
         order: prop["x-order"] ?? Infinity,
         hidden: prop["x-hidden"] ?? {},
         filterable: prop["x-filterable"] ?? false,

react-openapi/src/types.ts

@@ -101,8 +101,6 @@ export interface FieldConfig {
   description: string;
   type: string;
   format?: string;
-  /** `x-edit-as: date` — edit a `date-time` field with a plain date input; submits midnight. */
-  editAs?: string;
   order: number;
   hidden: { form?: boolean; list?: boolean; detail?: boolean };
   filterable: boolean;

react-openapi/src/utils/datetime.ts

@@ -1,63 +0,0 @@
-/**
- * Zero-dependency date/time display helpers.
- *
- * Only ISO-shaped strings ("2026-08-24", "2026-08-24T09:07:25[.f][Z]") are
- * reformatted; anything else (DD-MM-YYYY expense strings, free text) passes
- * through untouched. Naive strings without a zone are parsed as clock time
- * so the displayed wall time matches what the backend stored.
- */
-
-const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
-const ISO_DATETIME = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/;
-
-function parseIso(value: any): Date | null {
-  if (typeof value !== "string") return null;
-  if (!ISO_DATE.test(value) && !ISO_DATETIME.test(value)) return null;
-  const d = new Date(value);
-  return isNaN(d.getTime()) ? null : d;
-}
-
-const DATE_FMT = new Intl.DateTimeFormat("en-IN", { day: "numeric", month: "short", year: "numeric" });
-const DATETIME_FMT = new Intl.DateTimeFormat("en-IN", {
-  day: "numeric",
-  month: "short",
-  year: "numeric",
-  hour: "2-digit",
-  minute: "2-digit",
-  hour12: false,
-});
-
-function fallback(value: any): string {
-  return typeof value === "string" ? value : value != null ? String(value) : "";
-}
-
-/** "2026-08-24" -> "24 Aug 2026"; non-ISO values pass through. */
-export function formatDate(value: any): string {
-  const d = parseIso(value);
-  return d ? DATE_FMT.format(d) : fallback(value);
-}
-
-/** "2026-08-24T09:07:25" -> "24 Aug 2026, 09:07"; non-ISO values pass through. */
-export function formatDateTime(value: any): string {
-  const d = parseIso(value);
-  return d ? DATETIME_FMT.format(d) : fallback(value);
-}
-
-/** Route by OpenAPI field format ("date" | "date-time"); other formats render plainly. */
-export function formatByFieldFormat(value: any, format?: string): string {
-  if (format === "date") return formatDate(value);
-  if (format === "date-time") return formatDateTime(value);
-  return fallback(value);
-}
-
-/**
- * Metadata-free variant for display-format templates ({key} interpolation):
- * reformats a scalar only when it happens to be ISO-shaped.
- */
-export function formatIsoLike(value: any): string {
-  if (typeof value === "string") {
-    if (ISO_DATETIME.test(value)) return formatDateTime(value);
-    if (ISO_DATE.test(value)) return formatDate(value);
-  }
-  return fallback(value);
-}

src/FetchRequest/FetchRequestCreate.tsx

@@ -1,60 +1,22 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
   Box, Container, Typography, Paper, Button, Alert,
-  CircularProgress, IconButton, Tooltip,
+  CircularProgress,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import { alpha } from "@mui/material/styles";
 import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi";
 import type { FieldConfig } from "../../react-openapi";
 import { PageHeader } from "../ui/PageHeader";
 import { EmptyState } from "../ui/EmptyState";
-import { formatApiError } from "../features/fetch-requests";
-import { useToast } from "../ui/Toast";
 
-const CREATE_FIELDS = ["account", "bank", "pipeline", "trust_fallback", "start_date", "end_date", "source"];
-
-// Two-pane form partition — explicit names, spec order is unreliable.
-// Grid stretch keeps both panes equal-height regardless of which source
-// variant is active (email adds From/Subject under the type select).
-const SOURCE_PANE_FIELDS = ["account", "bank"];
-const POLICY_PANE_FIELDS = ["start_date", "end_date", "pipeline", "trust_fallback"];
-
-const glassSx = (theme: any) => ({
-  backgroundColor: alpha(theme.palette.background.default, 0.72),
-  backdropFilter: "blur(8px)",
-  borderColor: "divider",
-  boxShadow: 1,
-});
-
-function GlassPanel({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <Paper variant="outlined" sx={(theme) => ({ p: 3, borderRadius: 3, ...glassSx(theme) })}>
-      <Typography
-        variant="overline"
-        sx={{ display: "block", mb: 2, color: "text.secondary", letterSpacing: 1.2, lineHeight: 1.4 }}
-      >
-        {title}
-      </Typography>
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>{children}</Box>
-    </Paper>
-  );
-}
+const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"];
 
 function FetchRequestList() {
   const navigate = useNavigate();
-  const { list, remove, resource } = useResource("fetch-requests");
+  const { list, resource } = useResource("fetch-requests");
   const { resources: allResources } = useAppContext();
   const [rows, setRows] = useState<any[] | null>(null);
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-  const { showToast } = useToast();
-
-  const reload = () => {
-    if (!resource) return;
-    list({ limit: 20 }).then((res) => setRows(res.items ?? []));
-  };
 
   const columns = useMemo(() => {
     if (!resource) return [];
@@ -68,26 +30,6 @@ function FetchRequestList() {
     list({ limit: 20 }).then((res) => setRows(res.items ?? []));
   }, [resource?.name]);
 
-  const handleDelete = async (e: React.MouseEvent, id: string) => {
-    e.stopPropagation();
-    if (
-      !window.confirm(
-        "Delete this fetch request along with all its expenses and ambiguities? This cannot be undone.",
-      )
-    )
-      return;
-    setDeletingId(id);
-    try {
-      await remove(id);
-      showToast("Fetch request deleted");
-      reload();
-    } catch (err: any) {
-      showToast(formatApiError(err), "error");
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
   if (!rows) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
@@ -116,63 +58,30 @@ function FetchRequestList() {
           <Paper
             key={row.id ?? i}
             variant="outlined"
-            sx={(theme) => ({
+            sx={{
               p: 2,
               cursor: "pointer",
-              borderRadius: 3,
-              transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
-              "&:hover": {
-                borderColor: "primary.main",
-                boxShadow: 1,
-                backgroundColor: alpha(theme.palette.background.default, 0.9),
-              },
-              ...glassSx(theme),
-            })}
+              borderRadius: 2,
+              transition: "border-color 160ms ease, box-shadow 160ms ease",
+              "&:hover": { borderColor: "primary.main", boxShadow: 1 },
+            }}
             onClick={() => navigate(`/fetch-requests/${row.id}`)}
           >
-            <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
-              <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center", flex: 1, minWidth: 0 }}>
-                {columns
-                  .filter((col) => col.name !== "created_at")
-                  .map((col) => (
-                    <Box key={col.name} sx={{ minWidth: 120 }}>
-                      <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
-                        {col.label}
-                      </Typography>
-                      <ListCellRenderer
-                        field={col}
-                        value={row[col.name]}
-                        displayFormat={col.fk
-                          ? (allResources.find((r) => r.name === col.fk!.resource)?.displayFormat ?? displayFormat)
-                          : displayFormat}
-                      />
-                    </Box>
-                  ))}
-              </Box>
-              {(() => {
-                const dateCol = columns.find((col) => col.name === "created_at");
-                if (!dateCol) return null;
-                return (
-                  <Box sx={{ flexShrink: 0, textAlign: "right" }}>
-                    <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
-                      {dateCol.label}
-                    </Typography>
-                    <ListCellRenderer field={dateCol} value={row.created_at} displayFormat={displayFormat} />
-                  </Box>
-                );
-              })()}
-              <Box sx={{ flexShrink: 0 }}>
-                <Tooltip title="Delete fetch request">
-                  <IconButton
-                    size="small"
-                    color="error"
-                    disabled={deletingId === row.id || row.status === "processing"}
-                    onClick={(e) => handleDelete(e, row.id)}
-                  >
-                    <DeleteOutlineIcon fontSize="small" />
-                  </IconButton>
-                </Tooltip>
-              </Box>
+            <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
+              {columns.map((col) => (
+                <Box key={col.name} sx={{ minWidth: 120 }}>
+                  <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+                    {col.label}
+                  </Typography>
+                  <ListCellRenderer
+                    field={col}
+                    value={row[col.name]}
+                    displayFormat={col.fk
+                      ? (allResources.find((r) => r.name === col.fk!.resource)?.displayFormat ?? displayFormat)
+                      : displayFormat}
+                  />
+                </Box>
+              ))}
             </Box>
           </Paper>
         );
@@ -185,7 +94,6 @@ export default function FetchRequestCreate() {
   const { resources: allResources } = useAppContext();
   const resource = useMemo(() => allResources.find((r) => r.name === "fetch-requests"), [allResources]);
   const { create } = useResource("fetch-requests");
-  const navigate = useNavigate();
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [fkOptions, setFkOptions] = useState<Record<string, { value: any; label: string }[]>>({});
   const [loading, setLoading] = useState(false);
@@ -235,10 +143,6 @@ export default function FetchRequestCreate() {
       const display = applyDisplayFormat(created, resource!.displayFormat);
       setResult({ severity: "success", message: `Created: ${display}` });
       setFormData({});
-      const newId = (created as any)?.id;
-      if (newId) {
-        navigate(`/fetch-requests/${newId}`);
-      }
     } catch (e: any) {
       const detail = e?.response?.data?.detail;
       const msg = Array.isArray(detail) ? detail.map((d: any) => d.msg).join("; ") : (detail ?? e?.message ?? "Unknown error");
@@ -256,90 +160,59 @@ export default function FetchRequestCreate() {
     );
   }
 
-  const renderPaneFields = (names: string[]) =>
-    names.map((name) => {
-      const field = formFields.find((f) => f.name === name);
-      if (!field) return null;
-      return (
-        <FormFieldRenderer
-          key={field.name}
-          field={field}
-          value={formData[field.name] ?? ""}
-          onChange={(val) => handleChange(field.name, val)}
-          fkOptions={fkOptions[field.name]}
-        />
-      );
-    });
-
   return (
-    <Box sx={{ position: "relative" }}>
-      {/* Decorative gradient backdrop — gives the frosted panes something to blur. */}
-      <Box
-        aria-hidden
-        sx={{
-          position: "fixed",
-          inset: 0,
-          zIndex: 0,
-          pointerEvents: "none",
-          background: (theme) =>
-            [
-              `radial-gradient(640px circle at 12% 8%, ${alpha(theme.palette.primary.main, 0.14)}, transparent 70%)`,
-              `radial-gradient(900px circle at 88% 92%, ${alpha(theme.palette.primary.main, 0.09)}, transparent 70%)`,
-              `radial-gradient(520px circle at 78% 22%, ${alpha(theme.palette.primary.light, 0.07)}, transparent 70%)`,
-            ].join(", "),
-        }}
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <PageHeader
+        crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests" }]}
+        title="Fetch Requests"
+        subtitle="Import transactions from bank statements or email and track pipeline progress."
       />
-      <Container maxWidth="lg" sx={{ py: 4, position: "relative", zIndex: 1 }}>
-        <PageHeader
-          crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests" }]}
-          title="Fetch Requests"
-          subtitle="Import transactions from bank statements or email and track pipeline progress."
-        />
 
-        <Box id="new-fetch-request" sx={{ mb: 4 }}>
-          <Typography variant="subtitle1" fontWeight={700} gutterBottom>
-            New Fetch Request
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 2.5, maxWidth: 560, lineHeight: 1.6 }}>
-            Choose an account, pipeline, and a file or email source to kick off an import.
-          </Typography>
+      <Paper
+        id="new-fetch-request"
+        variant="outlined"
+        sx={{ p: 3, mb: 4, borderRadius: 3 }}
+      >
+        <Typography variant="subtitle1" fontWeight={700} gutterBottom>
+          New Fetch Request
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3, maxWidth: 520, lineHeight: 1.6 }}>
+          Choose an account, pipeline, and a file or email source to kick off an import.
+        </Typography>
 
-          <Box
-            sx={{
-              display: "grid",
-              gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
-              gap: 2,
-            }}
-          >
-            <GlassPanel title="Source & Account">
-              {renderPaneFields(SOURCE_PANE_FIELDS)}
-              {renderPaneFields(["source"])}
-            </GlassPanel>
-            <GlassPanel title="Window & Policy">{renderPaneFields(POLICY_PANE_FIELDS)}</GlassPanel>
-          </Box>
-
-          <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3, gap: 1.5 }}>
-            <Button variant="outlined" onClick={() => { setFormData({}); setResult(null); }}>
-              Reset
-            </Button>
-            <Button variant="contained" onClick={handleSubmit} disabled={loading} sx={{ minWidth: 180 }}>
-              {loading ? <CircularProgress size={20} sx={{ mr: 0.5 }} /> : null}
-              Create Fetch Request
-            </Button>
-          </Box>
-
-          {result && (
-            <Alert severity={result.severity} sx={{ mt: 2 }} onClose={() => setResult(null)}>
-              {result.message}
-            </Alert>
-          )}
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, maxWidth: 520 }}>
+          {formFields.map((field) => (
+            <FormFieldRenderer
+              key={field.name}
+              field={field}
+              value={formData[field.name] ?? ""}
+              onChange={(val) => handleChange(field.name, val)}
+              fkOptions={fkOptions[field.name]}
+            />
+          ))}
         </Box>
 
-        <Typography variant="h6" fontWeight={700} sx={{ mb: 2 }}>
-          Recent Fetch Requests
-        </Typography>
-        <FetchRequestList />
-      </Container>
-    </Box>
+        <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3, gap: 1.5 }}>
+          <Button variant="outlined" onClick={() => { setFormData({}); setResult(null); }}>
+            Reset
+          </Button>
+          <Button variant="contained" onClick={handleSubmit} disabled={loading} sx={{ minWidth: 180 }}>
+            {loading ? <CircularProgress size={20} sx={{ mr: 0.5 }} /> : null}
+            Create Fetch Request
+          </Button>
+        </Box>
+
+        {result && (
+          <Alert severity={result.severity} sx={{ mt: 2 }} onClose={() => setResult(null)}>
+            {result.message}
+          </Alert>
+        )}
+      </Paper>
+
+      <Typography variant="h6" fontWeight={700} sx={{ mb: 2 }}>
+        Recent Fetch Requests
+      </Typography>
+      <FetchRequestList />
+    </Container>
   );
 }

src/FetchRequest/FetchRequestDetail.tsx

@@ -10,7 +10,6 @@ import {
   CircularProgress,
   Alert,
   Divider,
-  Tooltip,
 } from "@mui/material";
 import ReplayIcon from "@mui/icons-material/Replay";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
@@ -19,7 +18,6 @@ import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { useResource, useItemSse, useAppContext, DetailFieldRenderer, applyDisplayFormat } from "../../react-openapi";
 import { useQuery } from "@tanstack/react-query";
 import { RETRY_MAX, formatApiError } from "../features/fetch-requests";
@@ -87,12 +85,11 @@ function Section({ title, children, action }: { title: string; children: React.R
 export default function FetchRequestDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const { get, patch, remove, resource } = useResource("fetch-requests");
+  const { get, patch, resource } = useResource("fetch-requests");
   const { resources: allResources } = useAppContext();
   const [stepStats, setStepStats] = useState<Record<string, number>>({});
   const [liveParsedCount, setLiveParsedCount] = useState<number | undefined>(undefined);
   const [retrying, setRetrying] = useState(false);
-  const [deleting, setDeleting] = useState(false);
   const { showToast } = useToast();
   const feedRef = useRef<HTMLDivElement>(null);
 
@@ -177,26 +174,6 @@ export default function FetchRequestDetail() {
     }
   };
 
-  const handleDelete = async () => {
-    if (!id || !remove || deleting) return;
-    if (
-      !window.confirm(
-        "Delete this fetch request along with all its expenses and ambiguities? This cannot be undone.",
-      )
-    )
-      return;
-    setDeleting(true);
-    try {
-      await remove(id);
-      showToast("Fetch request deleted");
-      navigate("/fetch-requests");
-    } catch (err: any) {
-      showToast(formatApiError(err), "error");
-    } finally {
-      setDeleting(false);
-    }
-  };
-
   const req = fetchRequest as any;
   const retryCount = req?.retry_count ?? 0;
   const isRetryExhausted = retryCount >= RETRY_MAX;
@@ -309,20 +286,6 @@ export default function FetchRequestDetail() {
               Retry
             </Button>
           )}
-          <Tooltip title={status === "processing" ? "Cannot delete while processing" : "Delete fetch request"}>
-            <span>
-              <Button
-                variant="outlined"
-                size="small"
-                color="error"
-                startIcon={<DeleteOutlineIcon />}
-                onClick={handleDelete}
-                disabled={deleting || status === "processing"}
-              >
-                Delete
-              </Button>
-            </span>
-          </Tooltip>
         </Box>
       </Section>
 

src/FetchRequest/components/PipelineStepper.tsx

@@ -29,12 +29,7 @@ function computeProgressPercent(
 
   let pct = 0;
 
-  if (
-    seenSteps.has("raw_lines") ||
-    seenSteps.has("txn_blocks")
-  ) {
-    pct += 10;
-  }
+  if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) pct += 10;
 
   if (txnBlockCount > 0) {
     const current = Math.max(liveCount, stepStats.txn_dicts ?? 0);

src/Reports/ReportList.tsx

@@ -51,7 +51,7 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
               "&:hover": { borderColor: "primary.light" },
             }}
           >
-            <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+            <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}
@@ -81,15 +81,14 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
                       {amounts}
                     </Typography>
                   )}
+                  {fields && (
+                    <Box sx={{ color: "text.secondary" }}>
+                      <ListCellRenderer field={fields.generatedAt} value={report.generated_at} />
+                    </Box>
+                  )}
                 </Box>
               </Box>
 
-              {fields && (
-                <Box sx={{ ml: "auto", flexShrink: 0, color: "text.secondary" }}>
-                  <ListCellRenderer field={fields.generatedAt} value={report.generated_at} />
-                </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,19 +1,14 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Paper, Typography, Button, IconButton, Alert, Skeleton, Chip, MenuItem, Select, FormControl, InputLabel } from "@mui/material";
 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, formatDateTime } from "../../react-openapi";
+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;
+import { buildPeriodGroups, sliceSummary, FLOW_OPTIONS, apiErrorMessage } from "./types";
 
 const periodField: FieldConfig = {
   name: "period",
@@ -83,7 +78,6 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
   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[]>([]);
@@ -93,14 +87,10 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
     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]);
+  }, [granularity, flow, selectedPeriods, selectedPayees, selectedTags]);
 
   useEffect(() => {
     let mounted = true;
@@ -155,8 +145,6 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
 
   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) => ({
@@ -179,32 +167,6 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
     [periodGroups],
   );
 
-  const barsListRef = useRef<HTMLDivElement>(null);
-  const [barScroll, setBarScroll] = useState({ canUp: false, canDown: false, overflow: false });
-
-  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) {
     return (
       <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3 }}>
@@ -231,16 +193,7 @@ 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 maxBar = periodGroups.reduce((m, g) => Math.max(m, g.metrics.sum), 0);
   const range =
     report.query?.start_date || report.query?.end_date
       ? `range ${report.query.start_date || "…"} → ${report.query.end_date || "…"}`
@@ -266,7 +219,7 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
           </Typography>
           <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
             <Typography variant="caption" color="text.secondary">
-              flow {report.flow} · generated {formatDateTime(report.generated_at ?? report.created_at)}
+              flow {report.flow} · generated {report.generated_at ?? report.created_at}
             </Typography>
             {range && (
               <Typography variant="caption" color="text.disabled">
@@ -350,148 +303,39 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
           <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;
-              return (
+        {periodGroups.length === 0 ? (
+          <Paper variant="outlined" sx={{ borderRadius: 2, p: 3, mb: 2.5 }}>
+            <Typography variant="body2" color="text.secondary">
+              No data for this slice. Try another granularity, period or payer.
+            </Typography>
+          </Paper>
+        ) : (
+          <Paper variant="outlined" sx={{ borderRadius: 2, p: 2, mb: 2.5 }}>
+            {periodGroups.map((g) => (
+              <Box key={g.key} sx={{ display: "flex", alignItems: "center", gap: 1.5, py: 0.75 }}>
+                <Typography variant="caption" sx={{ width: 110, flexShrink: 0, textAlign: "right" }}>
+                  {g.key}
+                </Typography>
                 <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" },
+                    height: 20,
+                    borderRadius: 1,
+                    bgcolor: flow === "outflows" ? "error.main" : "success.main",
+                    opacity: 0.85,
+                    minWidth: 4,
                   }}
-                >
-                  {d.label}
-                </Box>
-              );
-            })}
-          </Box>
-
-          {visibleBars.length === 0 ? (
-            <Paper variant="outlined" sx={{ borderRadius: 2, p: 3, mt: 1.5 }}>
-              <Typography variant="body2" color="text.secondary">
-                No data for this slice. Try another granularity, period or payer.
-              </Typography>
-            </Paper>
-          ) : (
-            <Paper variant="outlined" sx={{ borderRadius: 2, mt: 1.5 }}>
-              <Box sx={{ display: "flex", alignItems: "stretch" }}>
-                <Box
-                  ref={barsListRef}
-                  onScroll={updateBarScroll}
-                  sx={{
-                    flex: 1,
-                    minWidth: 0,
-                    maxHeight: 220,
-                    overflowY: "auto",
-                    py: 1,
-                    px: 2,
-                    scrollbarWidth: "none",
-                    "&::-webkit-scrollbar": { display: "none" },
-                  }}
-                >
-                  {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>
-                    </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>
-                )}
+                  style={{ width: `${maxBar ? Math.max((g.metrics.sum / maxBar) * 100, 2) : 2}%` }}
+                />
+                <Typography variant="body2" fontWeight={600}>
+                  {formatCurrency(g.metrics.sum, slice.currency)}
+                </Typography>
+                <Typography variant="caption" color="text.disabled">
+                  {g.metrics.count} txn{g.metrics.count === 1 ? "" : "s"}
+                </Typography>
               </Box>
-            </Paper>
-          )}
-        </Box>
+            ))}
+          </Paper>
+        )}
 
         {slice.txns.length === 0 ? null : fields ? (
           <TransactionList fields={fields} groups={listGroups} showMetrics />

src/Reports/types.ts

@@ -1,5 +1,4 @@
 import type { FieldConfig, ResourceConfig } from "../../react-openapi";
-import { parseOccurredAt } from "../common/utils/dates";
 
 export interface PeriodMetricsVM {
   outflows: number;
@@ -80,11 +79,8 @@ export function metricLabels(schemas: Record<string, any>): MetricLabel[] {
 }
 
 function dateVal(value: string): number {
-  try {
-    return parseOccurredAt(value).getTime();
-  } catch {
-    return 0;
-  }
+  const t = new Date(value).getTime();
+  return Number.isNaN(t) ? 0 : t;
 }
 
 function bucketMatches(bucket: any, filter: SliceFilter): boolean {
@@ -179,13 +175,7 @@ export function buildPeriodGroups(buckets: any[], filter: SliceFilter): ReportPe
       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;
-            }
-          })
+          .map((t) => new Date(t?.occurred_at ?? "").getTime())
           .filter((t) => !Number.isNaN(t))
           .sort((a, b) => a - b);
         if (dates.length >= 2) {
@@ -241,48 +231,4 @@ export function buildReportFieldConfigs(resources: ResourceConfig[]): ReportFiel
   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));
 }

src/features/fetch-requests/fetch-requests.models.ts

@@ -7,10 +7,7 @@ export type FetchRequestStatus =
   | "completed"
   | "failed";
 
-export type SourceType = "file" | "pdf" | "xlsx" | "csv" | "email";
-
 export interface FileSource {
-  type?: SourceType;
   path: string;
   bank: string;
   raw_lines?: string[];
@@ -20,20 +17,7 @@ export interface FileSource {
   txn_dicts_count?: number;
 }
 
-export interface PdfSource extends FileSource {
-  type: "pdf";
-}
-
-export interface XlsxSource extends FileSource {
-  type: "xlsx";
-}
-
-export interface CsvSource extends FileSource {
-  type: "csv";
-}
-
 export interface EmailSource {
-  type: "email";
   bank: string;
   from_email?: string;
   subject?: string;
@@ -42,15 +26,12 @@ export interface EmailSource {
   txn_dicts_count?: number;
 }
 
-export type PipelineType = "heuristic" | "llm" | "llama_parse";
-
-export type TrustFallback = "amount" | "balance";
+export type PipelineType = "heuristic" | "llm" | "llama_parser";
 
 export interface FetchRequestCreate {
-  source: PdfSource | XlsxSource | CsvSource | EmailSource;
+  source: FileSource | EmailSource;
   account_name: string;
   pipeline?: PipelineType;
-  trust_fallback?: TrustFallback | null;
   payor_username?: string;
   start_date?: string;
   end_date?: string;
@@ -132,7 +113,7 @@ export interface SSEEvent {
 export interface FetchRequestFilters {
   status?: FetchRequestStatus[];
   account_name?: string;
-  source_type?: SourceType;
+  source_type?: "file" | "email";
 }
 
 export function formatApiError(err: any): string {

src/features/fetch-requests/index.ts

@@ -5,9 +5,6 @@ export type {
   FetchRequestStatus,
   FetchRequestFilters,
   FileSource,
-  PdfSource,
-  XlsxSource,
-  SourceType,
   EmailSource,
   UploadResult,
   PendingAmbiguity,
@@ -18,7 +15,6 @@ export type {
   SSEEventStatus,
   ProgressMessage,
   PipelineType,
-  TrustFallback,
 } from "./fetch-requests.models";
 export { RETRY_MAX, formatApiError } from "./fetch-requests.models";
 export {