apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: apps:1.2.1
Branches Tags
apps:main
apps:1.2.2 apps:1.2.1 apps:1.2.0 apps:1.1.2 apps:1.1.1 apps:1.1.0 apps:1.0.0 apps:0.2.1 apps:0.2.0 apps:0.1.1 apps:0.1.0 apps:0.0.1
..
compare: apps:47c00a06a88d51d60e3cf51b8327b51f19006148
Branches Tags
apps:main
apps:1.2.2 apps:1.2.1 apps:1.2.0 apps:1.1.2 apps:1.1.1 apps:1.1.0 apps:1.0.0 apps:0.2.1 apps:0.2.0 apps:0.1.1 apps:0.1.0 apps:0.0.1

4 Commits
1.2.1 ... 47c00a06a8

Author SHA1 Message Date
Vishesh 'ironeagle' Bangotra
47c00a06a8 feat: group report transactions by report granularity 
Make the outer accordion grouping in TransactionList granularity-aware
instead of hardcoded months. TransactionList accepts a granularity prop
(weekly/monthly/quarterly/yearly, default monthly); ReportViewer passes
the report's granularity so a weekly report buckets transactions by ISO
week, quarterly by quarter, yearly by year. Expense page keeps monthly
grouping. Add periodKey/periodLabel/groupByPeriod/toPeriodGranularity to
src/common/utils/transactions.ts and drop the dead groupByMonth/
GroupedMonth helpers.
 2026-08-20 14:37:52 +05:30
Vishesh 'ironeagle' Bangotra
a107029b90 feat: group transactions by date inside month accordions 
Add two-layer grouping to the shared transaction list: each month
accordion now renders one card per occurred_at date (most recent first)
with a date label and txn count header, nesting the usual transaction
rows inside. Add dateLabel + groupByDate helpers to src/common and use
them in TransactionList. Month accordions, scroll pill/menu, and month
totals are unchanged.
 2026-08-20 14:14:44 +05:30
Vishesh 'ironeagle' Bangotra
baa9b296cb refactor: extract shared expense/report module into src/common 
Collapse the Expenses page into a single src/Expense.tsx file and rename
the Reports page to src/Reports/Report.tsx, extracting their shared
transaction-list UI, date/grouping helpers, field configs, and types
into an expense/report-agnostic src/common module. Update ReportViewer
and GenerateReportPanel to consume the shared components, rewire
main.jsx imports, and remove the old src/Expense/ folder and
src/Reports/Reports.tsx.
 2026-08-20 13:29:44 +05:30
Vishesh 'ironeagle' Bangotra
f08bc72037 reports page: spec-driven generate panel, list, and sliceable viewer 
Add a /reports page built on react-openapi's runtime configs:
- inline generate panel (GroupSpec enum, prefetched payee picker,
  strict DD-MM-YYYY range, 400 surfacing)
- metadata report list with view/regenerate/delete
- viewer that slices the cached per-entity payload via
  metadata.group_options, aggregates metrics + txns, pivots
  period x payee, and renders month accordions
- route + nav entry; no hand-rolled schema duplication
 2026-08-19 22:00:14 +05:30
22 changed files with 602 additions and 1209 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

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

5
react-openapi/index.ts
View File

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

12
react-openapi/src/components/fields/FormFieldRenderer.tsx
View File

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

1
react-openapi/src/components/fields/index.ts
View File

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

59
react-openapi/src/components/fields/renderers/MultiEnumField.tsx
View File

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

19
react-openapi/src/hooks/useApi.ts
View File

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

82
react-openapi/src/hooks/useFkFieldOptions.ts
View File

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

5
react-openapi/src/transformers/field-config.ts
View File

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

4
react-openapi/src/types.ts
View File

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

4
react-openapi/src/utils/sanitize-payload.ts
View File

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

4
src/Expense.tsx
View File

@@ -110,12 +110,12 @@ export default function Expense() {
<> <>
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}> <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
<StatCard <StatCard
label="Outflows" label="Total spent"
value={formatCurrency(summary.totalSpent, summary.currency)} value={formatCurrency(summary.totalSpent, summary.currency)}
hint={`${summary.monthItems.length} transaction${summary.monthItems.length === 1 ? "" : "s"} this month`} hint={`${summary.monthItems.length} transaction${summary.monthItems.length === 1 ? "" : "s"} this month`}
/> />
<StatCard label="This month" value={formatCurrency(summary.monthTotal, summary.currency)} hint={summary.thisMonth} /> <StatCard label="This month" value={formatCurrency(summary.monthTotal, summary.currency)} hint={summary.thisMonth} />
<StatCard label="Inflows" value={formatCurrency(summary.totalIncome, summary.currency)} /> <StatCard label="Income" value={formatCurrency(summary.totalIncome, summary.currency)} />
</Box> </Box>
{fieldConfigs && <TransactionList items={sorted} fields={fieldConfigs} />} {fieldConfigs && <TransactionList items={sorted} fields={fieldConfigs} />}

51
src/FetchRequest/FetchRequestCreate.tsx
View File

@@ -1,32 +1,22 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { import {
Box, Container, Typography, Paper, Button, Alert, Box, Container, Typography, Paper, Button, Alert,
CircularProgress, IconButton, Tooltip, CircularProgress,
} from "@mui/material"; } from "@mui/material";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import ReceiptLongIcon from "@mui/icons-material/ReceiptLong"; import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi"; import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi";
import type { FieldConfig } from "../../react-openapi"; import type { FieldConfig } from "../../react-openapi";
import { PageHeader } from "../ui/PageHeader"; import { PageHeader } from "../ui/PageHeader";
import { EmptyState } from "../ui/EmptyState"; import { EmptyState } from "../ui/EmptyState";
import { formatApiError } from "../features/fetch-requests";
import { useToast } from "../ui/Toast";
const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"]; const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"];
function FetchRequestList() { function FetchRequestList() {
const navigate = useNavigate(); const navigate = useNavigate();
const { list, remove, resource } = useResource("fetch-requests"); const { list, resource } = useResource("fetch-requests");
const { resources: allResources } = useAppContext(); const { resources: allResources } = useAppContext();
const [rows, setRows] = useState<any[] | null>(null); 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(() => { const columns = useMemo(() => {
if (!resource) return []; if (!resource) return [];
@@ -40,26 +30,6 @@ function FetchRequestList() {
list({ limit: 20 }).then((res) => setRows(res.items ?? [])); list({ limit: 20 }).then((res) => setRows(res.items ?? []));
}, [resource?.name]); }, [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) { if (!rows) {
return ( return (
<Box sx={{ display: "flex", justifyContent: "center", py: 6 }}> <Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
@@ -112,18 +82,6 @@ function FetchRequestList() {
/> />
</Box> </Box>
))} ))}
<Box sx={{ ml: "auto", 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> </Box>
</Paper> </Paper>
); );
@@ -136,7 +94,6 @@ export default function FetchRequestCreate() {
const { resources: allResources } = useAppContext(); const { resources: allResources } = useAppContext();
const resource = useMemo(() => allResources.find((r) => r.name === "fetch-requests"), [allResources]); const resource = useMemo(() => allResources.find((r) => r.name === "fetch-requests"), [allResources]);
const { create } = useResource("fetch-requests"); const { create } = useResource("fetch-requests");
const navigate = useNavigate();
const [formData, setFormData] = useState<Record<string, any>>({}); const [formData, setFormData] = useState<Record<string, any>>({});
const [fkOptions, setFkOptions] = useState<Record<string, { value: any; label: string }[]>>({}); const [fkOptions, setFkOptions] = useState<Record<string, { value: any; label: string }[]>>({});
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -186,10 +143,6 @@ export default function FetchRequestCreate() {
const display = applyDisplayFormat(created, resource!.displayFormat); const display = applyDisplayFormat(created, resource!.displayFormat);
setResult({ severity: "success", message: `Created: ${display}` }); setResult({ severity: "success", message: `Created: ${display}` });
setFormData({}); setFormData({});
const newId = (created as any)?.id;
if (newId) {
navigate(`/fetch-requests/${newId}`);
}
} catch (e: any) { } catch (e: any) {
const detail = e?.response?.data?.detail; const detail = e?.response?.data?.detail;
const msg = Array.isArray(detail) ? detail.map((d: any) => d.msg).join("; ") : (detail ?? e?.message ?? "Unknown error"); const msg = Array.isArray(detail) ? detail.map((d: any) => d.msg).join("; ") : (detail ?? e?.message ?? "Unknown error");

39
src/FetchRequest/FetchRequestDetail.tsx
View File

@@ -10,7 +10,6 @@ import {
CircularProgress, CircularProgress,
Alert, Alert,
Divider, Divider,
Tooltip,
} from "@mui/material"; } from "@mui/material";
import ReplayIcon from "@mui/icons-material/Replay"; import ReplayIcon from "@mui/icons-material/Replay";
import CheckCircleIcon from "@mui/icons-material/CheckCircle"; 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 PlayArrowIcon from "@mui/icons-material/PlayArrow";
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline"; import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord"; import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import { useResource, useItemSse, useAppContext, DetailFieldRenderer, applyDisplayFormat } from "../../react-openapi"; import { useResource, useItemSse, useAppContext, DetailFieldRenderer, applyDisplayFormat } from "../../react-openapi";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { RETRY_MAX, formatApiError } from "../features/fetch-requests"; 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() { export default function FetchRequestDetail() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const { get, patch, remove, resource } = useResource("fetch-requests"); const { get, patch, resource } = useResource("fetch-requests");
const { resources: allResources } = useAppContext(); const { resources: allResources } = useAppContext();
const [stepStats, setStepStats] = useState<Record<string, number>>({}); const [stepStats, setStepStats] = useState<Record<string, number>>({});
const [liveParsedCount, setLiveParsedCount] = useState<number | undefined>(undefined); const [liveParsedCount, setLiveParsedCount] = useState<number | undefined>(undefined);
const [retrying, setRetrying] = useState(false); const [retrying, setRetrying] = useState(false);
const [deleting, setDeleting] = useState(false);
const { showToast } = useToast(); const { showToast } = useToast();
const feedRef = useRef<HTMLDivElement>(null); 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 req = fetchRequest as any;
const retryCount = req?.retry_count ?? 0; const retryCount = req?.retry_count ?? 0;
const isRetryExhausted = retryCount >= RETRY_MAX; const isRetryExhausted = retryCount >= RETRY_MAX;
@@ -309,20 +286,6 @@ export default function FetchRequestDetail() {
Retry Retry
</Button> </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> </Box>
</Section> </Section>

7
src/FetchRequest/components/PipelineStepper.tsx
View File

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

235
src/Reports/GenerateReportPanel.tsx
View File

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

120
src/Reports/Report.tsx
View File

@@ -1,17 +1,7 @@
import React, { useCallback, useEffect, useMemo, useState } from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import { import { Container, Box, Paper, Typography, Alert } from "@mui/material";
Container,
Box,
Paper,
Typography,
Alert,
Accordion,
AccordionSummary,
AccordionDetails,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import AssessmentIcon from "@mui/icons-material/Assessment"; import AssessmentIcon from "@mui/icons-material/Assessment";
import { useResource, useAppContext } from "../../react-openapi"; import { useResource, useAppContext, formatCurrency } from "../../react-openapi";
import { useToast } from "../ui/Toast"; import { useToast } from "../ui/Toast";
import { PageHeader } from "../ui/PageHeader"; import { PageHeader } from "../ui/PageHeader";
import { EmptyState } from "../ui/EmptyState"; import { EmptyState } from "../ui/EmptyState";
@@ -45,19 +35,22 @@ export default function Report() {
}, [load]); }, [load]);
const handleGenerated = useCallback( const handleGenerated = useCallback(
(created: any) => { (created: any[]) => {
load(); load();
if (created?.id) setSelectedId(created.id); if (created?.[0]?.id) setSelectedId(created[0].id);
}, },
[load], [load],
); );
const handleRegenerate = useCallback( const handleRegenerate = useCallback(
async (report: any) => { 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 { try {
const created = await create(report.query ?? {}); await create(payload);
showToast("Report regenerated"); showToast("Report regenerated");
setSelectedId(created?.id ?? report.id); setSelectedId(report.id);
setViewerVersion((v) => v + 1); setViewerVersion((v) => v + 1);
load(); load();
} catch (e: any) { } catch (e: any) {
@@ -83,9 +76,9 @@ export default function Report() {
const summary = useMemo(() => { const summary = useMemo(() => {
const rows = reports ?? []; const rows = reports ?? [];
const granularities = new Set<string>(); const txnCount = rows.reduce((s, r) => s + (r.txn_count ?? 0), 0);
for (const r of rows) for (const g of r.query?.granularities ?? []) granularities.add(g); const total = rows.reduce((s, r) => s + (typeof r.metrics?.sum === "number" ? r.metrics.sum : 0), 0);
return { count: rows.length, granularities: [...granularities].join(", ") }; return { count: rows.length, txnCount, total };
}, [reports]); }, [reports]);
return ( return (
@@ -93,7 +86,7 @@ export default function Report() {
<PageHeader <PageHeader
crumbs={[{ label: "Home", path: "/" }, { label: "Reports" }]} crumbs={[{ label: "Home", path: "/" }, { label: "Reports" }]}
title="Reports" title="Reports"
subtitle="Build an immutable snapshot cube once, then slice by granularity, period, payee and tag at view time." subtitle="Generate period/payee snapshots from the reporting API and slice the cached data."
/> />
{error && ( {error && (
@@ -104,70 +97,37 @@ export default function Report() {
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}> <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
<StatCard label="Reports" value={summary.count.toLocaleString("en-IN")} /> <StatCard label="Reports" value={summary.count.toLocaleString("en-IN")} />
<StatCard label="Granularities covered" value={summary.granularities || "—"} /> <StatCard label="Transactions covered" value={summary.txnCount.toLocaleString("en-IN")} />
<StatCard label="Total" value={formatCurrency(summary.total, "INR")} />
</Box> </Box>
<GenerateReportPanel onGenerated={handleGenerated} /> <GenerateReportPanel onGenerated={handleGenerated} />
<Accordion <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em", mb: 1.5 }}>
disableGutters Saved reports
defaultExpanded </Typography>
sx={{
border: "1px solid", {reports !== null && reports.length === 0 ? (
borderColor: "divider", <Paper variant="outlined" sx={{ borderRadius: 3 }}>
borderRadius: 2, <EmptyState
overflow: "hidden", icon={<AssessmentIcon />}
boxShadow: "none", title="No reports yet"
backgroundColor: "background.paper", description="Generate your first report above — pick a granularity and payee (a payee-only or wildcard config snapshots weekly, monthly and quarterly)."
"&:before": { display: "none" }, />
mb: 4, </Paper>
}} ) : (
> <Box sx={{ display: "flex", flexDirection: "column", gap: 2.5, mb: 4 }}>
<AccordionSummary <ReportList
expandIcon={<ExpandMoreIcon />} reports={reports ?? []}
sx={{ loading={loading}
px: 2.5, fields={reportFields}
py: 1, selectedId={selectedId}
"& .MuiAccordionSummary-content": { onView={(id) => setSelectedId(id)}
alignItems: "center", onRegenerate={handleRegenerate}
gap: 1.5, onDelete={handleDelete}
minWidth: 0, />
}, </Box>
}} )}
>
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
Saved reports
</Typography>
{reports !== null && (
<Typography variant="caption" color="text.secondary">
{reports.length} report{reports.length === 1 ? "" : "s"}
</Typography>
)}
</AccordionSummary>
<AccordionDetails sx={{ px: 2.5, pb: 2.5, pt: 0 }}>
{reports !== null && reports.length === 0 ? (
<Paper variant="outlined" sx={{ borderRadius: 3 }}>
<EmptyState
icon={<AssessmentIcon />}
title="No reports yet"
description="Generate your first snapshot above — choose granularities and grouping dimensions, then slice the cached cube by period, payee and tag."
/>
</Paper>
) : (
<Box sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
<ReportList
reports={reports ?? []}
loading={loading}
fields={reportFields}
selectedId={selectedId}
onView={(id) => setSelectedId(id)}
onRegenerate={handleRegenerate}
onDelete={handleDelete}
/>
</Box>
)}
</AccordionDetails>
</Accordion>
{selectedId && ( {selectedId && (
<ReportViewer <ReportViewer

42
src/Reports/ReportList.tsx
View File

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

559
src/Reports/ReportViewer.tsx
View File

@@ -1,61 +1,29 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Box, Paper, Typography, Button, IconButton, Alert, Skeleton, Chip, MenuItem, Select, FormControl, InputLabel } from "@mui/material"; import {
Box,
Paper,
Typography,
Button,
IconButton,
Alert,
Skeleton,
TextField,
Autocomplete,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import CachedIcon from "@mui/icons-material/Cached"; import CachedIcon from "@mui/icons-material/Cached";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import { useAppContext, useResource, formatCurrency } from "../../react-openapi";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { FkMultiSelectField, useResource, formatCurrency } from "../../react-openapi";
import type { FieldConfig } from "../../react-openapi";
import { StatCard } from "../common/components/StatCard"; import { StatCard } from "../common/components/StatCard";
import { TransactionList } from "../common/components/TransactionList"; import { TransactionList } from "../common/components/TransactionList";
import type { TxnFieldConfigs } from "../common/types"; import type { TxnFieldConfigs } from "../common/types";
import type { ListPeriodGroup } from "../common/utils/transactions"; import { toPeriodGranularity } from "../common/utils/transactions";
import { buildDimensionBars, buildPeriodGroups, sliceSummary, FLOW_OPTIONS, apiErrorMessage } from "./types"; import { aggregateSlice, buildPivot, metricLabels } from "./types";
import type { ReportDim } from "./types";
const MAX_VISIBLE_BARS = 10;
const periodField: FieldConfig = {
name: "period",
label: "Period",
description: "",
type: "string",
order: 0,
hidden: {},
filterable: true,
sortable: false,
readOnly: false,
required: false,
isArray: true,
};
const payeeField: FieldConfig = {
name: "payee",
label: "Payee",
description: "",
type: "string",
order: 0,
hidden: {},
filterable: true,
sortable: false,
readOnly: false,
required: false,
isArray: true,
};
const tagField: FieldConfig = {
name: "tag",
label: "Tag",
description: "",
type: "string",
order: 0,
hidden: {},
filterable: true,
sortable: false,
readOnly: false,
required: false,
isArray: true,
};
interface ReportViewerProps { interface ReportViewerProps {
id: string; id: string;
@@ -65,60 +33,31 @@ interface ReportViewerProps {
onRegenerated: (report: any) => void; onRegenerated: (report: any) => void;
} }
function snapshotGranularities(report: any): string[] {
const fromQuery = report?.query?.granularities;
if (Array.isArray(fromQuery) && fromQuery.length) return fromQuery;
const fromResponse = report?.granularities;
if (Array.isArray(fromResponse) && fromResponse.length) return fromResponse;
const series = report?.buckets?.[0]?.series;
return series ? Object.keys(series) : [];
}
export function ReportViewer({ id, version, fields, onClose, onRegenerated }: ReportViewerProps) { export function ReportViewer({ id, version, fields, onClose, onRegenerated }: ReportViewerProps) {
const { schemas } = useAppContext();
const { get } = useResource("reports"); const { get } = useResource("reports");
const [report, setReport] = useState<any | null>(null); const [report, setReport] = useState<any | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [reload, setReload] = useState(0); const [reload, setReload] = useState(0);
const [granularity, setGranularity] = useState<string | null>(null); const [selectedPeriod, setSelectedPeriod] = useState("*");
const [flow, setFlow] = useState("outflows"); const [selectedPayee, setSelectedPayee] = useState("*");
const [dim, setDim] = useState<ReportDim>("period");
const [selectedPeriods, setSelectedPeriods] = useState<string[]>([]);
const [selectedPayees, setSelectedPayees] = useState<string[]>([]);
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const prevGranularity = useRef<string | null>(null);
const params = useMemo(() => {
const p: Record<string, any> = { flow };
if (granularity) p.granularity = [granularity];
if (selectedPeriods.length) p.period_ids = selectedPeriods;
// The active breakdown dim requests every cube value ("*") when its own
// filter is unselected, so bars show the full distribution.
if (selectedPayees.length) p.payee = selectedPayees;
else if (dim === "payee") p.payee = ["*"];
if (selectedTags.length) p.tags = selectedTags;
else if (dim === "tag") p.tags = ["*"];
return p;
}, [granularity, flow, dim, selectedPeriods, selectedPayees, selectedTags]);
useEffect(() => { useEffect(() => {
let mounted = true; let mounted = true;
setLoading(true); setLoading(true);
setError(null); setError(null);
const previous = prevGranularity.current; get(id)
get(id, params)
.then((res) => { .then((res) => {
if (!mounted) return; if (!mounted) return;
setReport(res); setReport(res);
const options = snapshotGranularities(res); setSelectedPeriod("*");
if (granularity === null && options.length) setGranularity(options[0]); setSelectedPayee("*");
if (previous !== null && previous !== granularity) setSelectedPeriods([]);
prevGranularity.current = granularity;
}) })
.catch((e: any) => { .catch((e: any) => {
if (!mounted) return; if (!mounted) return;
setError(apiErrorMessage(e)); setError(e?.response?.data?.detail ?? e?.message ?? "Failed to load report");
}) })
.finally(() => { .finally(() => {
if (mounted) setLoading(false); if (mounted) setLoading(false);
@@ -126,86 +65,47 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
return () => { return () => {
mounted = false; mounted = false;
}; };
}, [id, version, reload, params, get, granularity]); }, [id, version, reload, get]);
const granularityOptions = useMemo(() => snapshotGranularities(report), [report]); const data = useMemo(() => (Array.isArray(report?.data) ? report.data : null), [report]);
const periodOptions = useMemo( const groupOptions = useMemo(() => {
() => (Array.isArray(report?.period_ids) ? report.period_ids.map((label: string) => ({ value: label, label })) : []), const options = report?.metadata?.group_options;
[report], if (!options || typeof options !== "object") return { period: [], payee: [] };
); return {
const payeeOptions = useMemo( period: Array.isArray(options.period) ? options.period.map(String) : [],
() => (Array.isArray(report?.payees) ? report.payees.map((label: string) => ({ value: label, label })) : []), payee: Array.isArray(options.payee) ? options.payee.map(String) : [],
[report], };
); }, [report]);
const tagOptions = useMemo(
() => (Array.isArray(report?.tags) ? report.tags.map((label: string) => ({ value: label, label })) : []), const slice = useMemo(
[report], () => aggregateSlice(data ?? [], { period: selectedPeriod, payee: selectedPayee }),
[data, selectedPeriod, selectedPayee],
); );
const filter = useMemo( const pivot = useMemo(
() => ({ () => buildPivot(data ?? [], groupOptions.period, groupOptions.payee),
granularity: granularity ?? granularityOptions[0] ?? "", [data, groupOptions],
periods: selectedPeriods,
payees: selectedPayees,
tags: selectedTags,
}),
[granularity, granularityOptions, selectedPeriods, selectedPayees, selectedTags],
); );
const periodGroups = useMemo(() => buildPeriodGroups(report?.buckets ?? [], filter), [report, filter]); const metrics = useMemo(() => {
const slice = useMemo(() => sliceSummary(periodGroups), [periodGroups]); const labels = metricLabels(schemas);
const bars = useMemo(() => buildDimensionBars(report?.buckets ?? [], filter, dim), [report, filter, dim]); const displayKeys = ["sum", "count", "avg", "min", "max", "first_date", "last_date"];
const visibleBars = useMemo(() => bars.slice(0, MAX_VISIBLE_BARS), [bars]); return labels.filter((l) => displayKeys.includes(l.key));
const listGroups = useMemo<ListPeriodGroup[]>( }, [schemas]);
() =>
periodGroups.map((g) => ({
key: g.key,
label: g.key,
items: g.txns,
spent: g.metrics.outflows,
income: g.metrics.inflows,
currency: g.currency,
metrics: {
sum: g.metrics.sum,
count: g.metrics.count,
avg: g.metrics.avg,
min: g.metrics.min,
max: g.metrics.max,
cadence: g.metrics.cadence,
frequency: g.metrics.frequency,
},
})),
[periodGroups],
);
const barsListRef = useRef<HTMLDivElement>(null); const metricValue = (key: string): string | null => {
const [barScroll, setBarScroll] = useState({ canUp: false, canDown: false, overflow: false }); if (key === "sum") return formatCurrency(slice.sum, slice.currency);
if (key === "count") return slice.count.toLocaleString("en-IN");
if (key === "avg") return slice.avg == null ? null : formatCurrency(slice.avg, slice.currency);
if (key === "min") return slice.min == null ? null : formatCurrency(slice.min, slice.currency);
if (key === "max") return slice.max == null ? null : formatCurrency(slice.max, slice.currency);
if (key === "first_date") return slice.firstDate;
if (key === "last_date") return slice.lastDate;
return null;
};
const updateBarScroll = useCallback(() => { if (loading) {
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 ( return (
<Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3 }}> <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3 }}>
<Skeleton variant="text" width={220} height={28} /> <Skeleton variant="text" width={220} height={28} />
@@ -230,22 +130,6 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
if (!report) return null; if (!report) return null;
const activeGranularity = granularity ?? report.granularities?.[0] ?? "";
const maxBar = bars.reduce((m, b) => Math.max(m, Math.abs(b.sum)), 0);
const dimOptions: { id: ReportDim; label: string; count: number }[] = [
{ id: "period", label: "Period", count: report.period_ids?.length ?? 0 },
{ id: "payee", label: "Payees", count: report.payees?.length ?? 0 },
{ id: "tag", label: "Tags", count: report.tags?.length ?? 0 },
];
const activeDimIndex = Math.max(
0,
dimOptions.findIndex((d) => d.id === dim),
);
const range =
report.query?.start_date || report.query?.end_date
? `range ${report.query.start_date || "…"} → ${report.query.end_date || "…"}`
: null;
return ( return (
<Paper variant="outlined" sx={{ borderRadius: 3, overflow: "hidden" }}> <Paper variant="outlined" sx={{ borderRadius: 3, overflow: "hidden" }}>
<Box <Box
@@ -262,241 +146,146 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re
> >
<Box sx={{ flex: 1, minWidth: 0 }}> <Box sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}> <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
{report.name} {report.group_label}
</Typography> </Typography>
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}> <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
<Typography variant="caption" color="text.secondary"> <Typography variant="caption" color="text.secondary">
flow {report.flow} · generated {report.generated_at ?? report.created_at} {report.granularity} · {report.period_label} · {report.payee}
</Typography> </Typography>
{range && (
<Typography variant="caption" color="text.disabled">
{range}
</Typography>
)}
<Typography variant="caption" color="text.disabled"> <Typography variant="caption" color="text.disabled">
{report.payees?.length ?? 0} payees · {report.tags?.length ?? 0} tags {report.entity_count ?? 0} entities · {report.txn_count ?? 0} txns · {report.expense_count ?? 0} expenses
</Typography> </Typography>
{report.start_date || report.end_date ? (
<Typography variant="caption" color="text.disabled">
range {report.start_date || "…"} → {report.end_date || "…"}
</Typography>
) : null}
</Box> </Box>
</Box> </Box>
<IconButton aria-label="Regenerate report" onClick={() => onRegenerated(report)}>
<CachedIcon />
</IconButton>
<IconButton aria-label="Close report" onClick={onClose}> <IconButton aria-label="Close report" onClick={onClose}>
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</Box> </Box>
<Box sx={{ p: 2.5 }}> {data === null ? (
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center", mb: 2 }}> <Box sx={{ p: 3 }}>
<Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}> <Alert severity="info" sx={{ borderRadius: 2, mb: 2 }}>
{granularityOptions.map((g: string) => ( The cached data for this report has expired. Regenerate it to rebuild the snapshot.
<Chip </Alert>
key={g} <Button variant="contained" startIcon={<CachedIcon />} onClick={() => onRegenerated(report)}>
label={g} Regenerate
clickable </Button>
size="small"
color={activeGranularity === g ? "primary" : "default"}
variant={activeGranularity === g ? "filled" : "outlined"}
onClick={() => setGranularity(g)}
/>
))}
</Box>
<FormControl size="small" sx={{ width: 140 }}>
<InputLabel id="viewer-flow-label">Flow</InputLabel>
<Select labelId="viewer-flow-label" label="Flow" value={flow} onChange={(e) => setFlow(e.target.value)}>
{FLOW_OPTIONS.map((f) => (
<MenuItem key={f} value={f}>
{f}
</MenuItem>
))}
</Select>
</FormControl>
</Box> </Box>
) : (
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2.5 }}> <Box sx={{ p: 2.5 }}>
<Box sx={{ width: 260 }}> <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2.5 }}>
<FkMultiSelectField <Autocomplete
field={{ ...periodField, readOnly: periodOptions.length === 0 }} size="small"
fkOptions={periodOptions} sx={{ width: 220 }}
value={selectedPeriods} options={["*", ...groupOptions.period]}
onChange={setSelectedPeriods} 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>
<Box sx={{ width: 260 }}>
<FkMultiSelectField
field={{ ...payeeField, readOnly: payeeOptions.length === 0 }}
fkOptions={payeeOptions}
value={selectedPayees}
onChange={setSelectedPayees}
/>
</Box>
<Box sx={{ width: 260 }}>
<FkMultiSelectField
field={{ ...tagField, readOnly: tagOptions.length === 0 }}
fkOptions={tagOptions}
value={selectedTags}
onChange={setSelectedTags}
/>
</Box>
<Typography variant="body2" color="text.secondary" sx={{ alignSelf: "center" }}>
{slice.txns.length} transactions · {slice.count} rows
</Typography>
</Box>
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 2.5 }}> <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 2.5 }}>
<StatCard label="Outflows" value={formatCurrency(slice.outflows, slice.currency)} color="error.main" /> <StatCard label="Spent" value={formatCurrency(slice.spent, slice.currency)} color="error.main" />
<StatCard label="Inflows" value={formatCurrency(slice.inflows, slice.currency)} color="success.main" /> <StatCard label="Income" value={formatCurrency(slice.income, slice.currency)} color="success.main" />
<StatCard label="Net" value={formatCurrency(slice.inflows - slice.outflows, slice.currency)} color="info.main" /> <StatCard label="Transactions" value={slice.count.toLocaleString("en-IN")} />
<StatCard label="Transactions" value={slice.count.toLocaleString("en-IN")} /> </Box>
</Box>
<Box sx={{ mb: 2.5 }}> <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 3 }}>
<Box {metrics.map((m) => {
sx={{ const value = metricValue(m.key);
position: "relative", if (value == null) return null;
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 ( return (
<Box <Paper key={m.key} variant="outlined" sx={{ px: 1.5, py: 1, borderRadius: 2 }}>
key={d.id} <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
component="button" {m.label}
type="button" </Typography>
disabled={d.count <= 1} <Typography variant="body2" fontWeight={600}>
onClick={() => setDim(d.id)} {value}
sx={{ </Typography>
position: "relative", </Paper>
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" },
}}
>
{d.label}
</Box>
); );
})} })}
</Box> </Box>
{visibleBars.length === 0 ? ( {selectedPeriod === "*" && selectedPayee === "*" && pivot.rows.length > 0 && (
<Paper variant="outlined" sx={{ borderRadius: 2, p: 3, mt: 1.5 }}> <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>
)}
{slice.txns.length === 0 ? (
<Paper variant="outlined" sx={{ borderRadius: 2, p: 3 }}>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
No data for this slice. Try another granularity, period or payer. No transactions in this slice.
</Typography> </Typography>
</Paper> </Paper>
) : ( ) : fields ? (
<Paper variant="outlined" sx={{ borderRadius: 2, mt: 1.5 }}> <TransactionList items={slice.txns} fields={fields} granularity={toPeriodGranularity(report.granularity)} />
<Box sx={{ display: "flex", alignItems: "stretch" }}> ) : null}
<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>
)}
</Box>
</Paper>
)}
</Box> </Box>
)}
{slice.txns.length === 0 ? null : fields ? (
<TransactionList fields={fields} groups={listGroups} showMetrics />
) : null}
</Box>
</Paper> </Paper>
); );
} }

384
src/Reports/types.ts
View File

@@ -1,50 +1,63 @@
import type { FieldConfig, ResourceConfig } from "../../react-openapi"; import type { FieldConfig, ResourceConfig } from "../../react-openapi";
import { parseOccurredAt } from "../common/utils/dates"; import { parseDdmmyyyy } from "../common/utils/dates";
export interface PeriodMetricsVM { export interface ParsedGroupKey {
outflows: number; period?: { granularity: string; label: string };
inflows: number; payee?: { label: string };
sum: number; range?: { start?: string; end?: string };
count: number;
avg: number | null;
min: number | null;
max: number | null;
firstDate: string | null;
lastDate: string | null;
cadence: number | null;
frequency: number | null;
} }
export interface ReportPeriodGroup { export interface ReportGroupLike {
key: string; key: string;
metrics: PeriodMetricsVM; group_label?: string;
txns: any[]; metrics?: Record<string, any>;
currency: string; txns?: any[];
}
export interface SliceSummary {
outflows: number;
inflows: number;
sum: number;
count: number;
avg: number | null;
min: number | null;
max: number | null;
firstDate: string | null;
lastDate: string | null;
txns: any[];
currency: string;
} }
export interface SliceFilter { export interface SliceFilter {
granularity: string; period?: string;
periods?: string[]; payee?: string;
payees?: string[]; }
tags?: 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 ReportFieldConfigs { export interface ReportFieldConfigs {
name: FieldConfig; groupLabel: FieldConfig;
granularity: FieldConfig;
periodLabel: FieldConfig;
payee: FieldConfig;
entityCount: FieldConfig;
generatedAt: FieldConfig; generatedAt: FieldConfig;
} }
@@ -54,6 +67,23 @@ export interface MetricLabel {
order: number; 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 apiErrorMessage(e: any): string { export function apiErrorMessage(e: any): string {
if (e?.response?.data) { if (e?.response?.data) {
const d = e.response.data; const d = e.response.data;
@@ -65,7 +95,14 @@ export function apiErrorMessage(e: any): string {
return e?.message ?? "Request failed"; return e?.message ?? "Request failed";
} }
export const FLOW_OPTIONS = ["both", "inflows", "outflows"]; export function groupTypeEnum(schemas: Record<string, any>): string[] {
return schemas?.GroupSpec?.properties?.group_type?.enum ?? [];
}
export function groupValueFk(schemas: Record<string, any>): { resource?: string; prefetch?: boolean } | null {
const fk = schemas?.GroupSpec?.properties?.group_value?.["x-fk"];
return fk && typeof fk === "object" ? fk : null;
}
export function metricLabels(schemas: Record<string, any>): MetricLabel[] { export function metricLabels(schemas: Record<string, any>): MetricLabel[] {
const props: Record<string, any> = schemas?.ReportMetrics?.properties ?? {}; const props: Record<string, any> = schemas?.ReportMetrics?.properties ?? {};
@@ -79,210 +116,123 @@ export function metricLabels(schemas: Record<string, any>): MetricLabel[] {
.sort((a, b) => a.order - b.order); .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 { function dateVal(value: string): number {
try { try {
return parseOccurredAt(value).getTime(); return parseDdmmyyyy(value).getTime();
} catch { } catch {
return 0; return 0;
} }
} }
function bucketMatches(bucket: any, filter: SliceFilter): boolean { export function groupMatches(group: ReportGroupLike, filter: SliceFilter): boolean {
const gk = bucket?.group_key ?? {}; const key = parseCacheKey(group.key);
if (filter.payees?.length && !(gk.payee ?? []).some((p: string) => filter.payees?.includes(p))) return false; if (filter.period && filter.period !== "*") {
if (filter.tags?.length && !(gk.tag ?? []).some((t: string) => filter.tags?.includes(t))) return false; 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; return true;
} }
function num(v: any): number | null { export function aggregateSlice(groups: ReportGroupLike[], filter: SliceFilter): SliceSummary {
return typeof v === "number" && Number.isFinite(v) ? v : null; let sum = 0;
} let count = 0;
let spent = 0;
/** let income = 0;
* Groups cube periods by their canonical period_id, merging buckets per
* period. The server returns disjoint slices, so additive metric merge is
* safe; txn ids are deduped defensively. Metrics come verbatim from the API
* except when multiple buckets contribute to one period — then cadence and
* frequency are re-derived from the merged txn dates.
*/
export function buildPeriodGroups(buckets: any[], filter: SliceFilter): ReportPeriodGroup[] {
interface Acc {
metrics: PeriodMetricsVM;
txns: any[];
sources: number;
apiCadence: number | null;
apiFrequency: number | null;
}
const byPeriod = new Map<string, Acc>();
const seenTxnIds = new Set<string>();
let currency = "INR";
for (const bucket of buckets ?? []) {
if (!bucketMatches(bucket, filter)) continue;
for (const period of bucket.series?.[filter.granularity] ?? []) {
if (filter.periods?.length && !filter.periods.includes(period.period_id)) continue;
const m = period.metrics ?? {};
let acc = byPeriod.get(period.period_id);
if (!acc) {
acc = {
metrics: {
outflows: 0,
inflows: 0,
sum: 0,
count: 0,
avg: null,
min: null,
max: null,
firstDate: null,
lastDate: null,
cadence: null,
frequency: null,
},
txns: [],
sources: 0,
apiCadence: num(m.cadence),
apiFrequency: num(m.frequency),
};
byPeriod.set(period.period_id, acc);
}
acc.sources += 1;
const vm = acc.metrics;
vm.outflows += m.outflows ?? 0;
vm.inflows += m.inflows ?? 0;
vm.sum += m.sum ?? 0;
vm.count += m.count ?? 0;
const mn = num(m.min);
if (mn != null) vm.min = vm.min == null ? mn : Math.min(vm.min, mn);
const mx = num(m.max);
if (mx != null) vm.max = vm.max == null ? mx : Math.max(vm.max, mx);
if (m.first_date && (!vm.firstDate || dateVal(String(m.first_date)) < dateVal(vm.firstDate))) {
vm.firstDate = String(m.first_date);
}
if (m.last_date && (!vm.lastDate || dateVal(String(m.last_date)) > dateVal(vm.lastDate))) {
vm.lastDate = String(m.last_date);
}
for (const txn of period.txns ?? []) {
if (txn?.id != null) {
if (seenTxnIds.has(txn.id)) continue;
seenTxnIds.add(txn.id);
}
acc.txns.push(txn);
const c = txn?.account?.currency;
if (c) currency = c;
}
}
}
return [...byPeriod.entries()]
.map(([key, acc]) => {
const vm = acc.metrics;
vm.avg = vm.count ? Math.round((vm.sum / vm.count) * 100) / 100 : null;
if (acc.sources > 1) {
const dates = acc.txns
.map((t) => {
try {
return parseOccurredAt(t?.occurred_at).getTime();
} catch {
return NaN;
}
})
.filter((t) => !Number.isNaN(t))
.sort((a, b) => a - b);
if (dates.length >= 2) {
let gapSum = 0;
for (let i = 0; i < dates.length - 1; i += 1) gapSum += (dates[i + 1] - dates[i]) / 86400000;
const cadence = Math.round((gapSum / (dates.length - 1)) * 100) / 100;
vm.cadence = cadence > 0 ? cadence : null;
vm.frequency = cadence > 0 ? Math.round((1 / cadence) * 100) / 100 : null;
} else {
vm.cadence = null;
vm.frequency = null;
}
} else {
vm.cadence = acc.apiCadence;
vm.frequency = acc.apiFrequency;
}
return { key, metrics: vm, txns: acc.txns, currency };
})
.sort((a, b) => b.key.localeCompare(a.key));
}
export function sliceSummary(groups: ReportPeriodGroup[]): SliceSummary {
const outflows = groups.reduce((s, g) => s + g.metrics.outflows, 0);
const inflows = groups.reduce((s, g) => s + g.metrics.inflows, 0);
const sum = groups.reduce((s, g) => s + g.metrics.sum, 0);
const count = groups.reduce((s, g) => s + g.metrics.count, 0);
let min: number | null = null; let min: number | null = null;
let max: number | null = null; let max: number | null = null;
let firstDate: string | null = null; let firstDate: string | null = null;
let lastDate: string | null = null; let lastDate: string | null = null;
let currency = "INR"; let currency = "INR";
const txns: any[] = []; const txns: any[] = [];
for (const g of groups) { const seen = new Set<string>();
if (g.metrics.min != null) min = min == null ? g.metrics.min : Math.min(min, g.metrics.min);
if (g.metrics.max != null) max = max == null ? g.metrics.max : Math.max(max, g.metrics.max); for (const group of groups) {
if (g.metrics.firstDate && (!firstDate || dateVal(g.metrics.firstDate) < dateVal(firstDate))) { if (!groupMatches(group, filter)) continue;
firstDate = g.metrics.firstDate; const m = group.metrics ?? {};
if (typeof m.sum === "number") sum += m.sum;
if (typeof m.count === "number") count += m.count;
if (typeof m.min === "number") min = min === null ? m.min : Math.min(min, m.min);
if (typeof m.max === "number") max = max === null ? m.max : Math.max(max, m.max);
if (m.first_date && (!firstDate || dateVal(String(m.first_date)) < dateVal(firstDate))) {
firstDate = String(m.first_date);
} }
if (g.metrics.lastDate && (!lastDate || dateVal(g.metrics.lastDate) > dateVal(lastDate))) { if (m.last_date && (!lastDate || dateVal(String(m.last_date)) > dateVal(lastDate))) {
lastDate = g.metrics.lastDate; lastDate = String(m.last_date);
}
for (const txn of group.txns ?? []) {
if (txn?.id != null) {
if (seen.has(txn.id)) continue;
seen.add(txn.id);
}
txns.push(txn);
const amt = Number(txn?.amount ?? 0);
if (amt < 0) spent += Math.abs(amt);
else income += amt;
const c = txn?.account?.currency;
if (c) currency = c;
} }
if (g.currency) currency = g.currency;
txns.push(...g.txns);
} }
return { outflows, inflows, sum, count, avg: count ? sum / count : null, min, max, firstDate, lastDate, txns, currency };
return { sum, count, avg: count ? sum / count : null, min, max, firstDate, lastDate, txns, spent, income, currency };
}
export function buildPivot(groups: ReportGroupLike[], periodOrder: string[], payeeOrder: string[]): PivotTable {
const payees = payeeOrder.filter((payee) =>
groups.some((g) => parseCacheKey(g.key).payee?.label === payee),
);
const totals = payees.map((payee) => ({ payee, sum: 0, count: 0 }));
const rows: PivotRow[] = [];
for (const period of periodOrder) {
const periodGroups = groups.filter((g) => parseCacheKey(g.key).period?.label === period);
if (periodGroups.length === 0) continue;
const cells = payees.map((payee, i) => {
const cellGroups = periodGroups.filter((g) => parseCacheKey(g.key).payee?.label === payee);
const sum = cellGroups.reduce((s, g) => s + (g.metrics?.sum ?? 0), 0);
const count = cellGroups.reduce((s, g) => s + (g.metrics?.count ?? 0), 0);
totals[i].sum += sum;
totals[i].count += count;
return { payee, sum, count };
});
rows.push({
period,
cells,
periodSum: cells.reduce((s, c) => s + c.sum, 0),
periodCount: cells.reduce((s, c) => s + c.count, 0),
});
}
return { rows, payees, totals };
} }
export function buildReportFieldConfigs(resources: ResourceConfig[]): ReportFieldConfigs | null { export function buildReportFieldConfigs(resources: ResourceConfig[]): ReportFieldConfigs | null {
const reportsRes = resources.find((r) => r.name === "reports"); const reportsRes = resources.find((r) => r.name === "reports");
if (!reportsRes) return null; if (!reportsRes) return null;
const find = (name: string) => reportsRes.fields.find((f) => f.name === name); const find = (name: string) => reportsRes.fields.find((f) => f.name === name);
const name = find("name"); const groupLabel = find("group_label");
const granularity = find("granularity");
const periodLabel = find("period_label");
const payee = find("payee");
const entityCount = find("entity_count");
const generatedAt = find("generated_at"); const generatedAt = find("generated_at");
if (!name || !generatedAt) return null; if (!groupLabel || !granularity || !periodLabel || !payee || !entityCount || !generatedAt) return null;
return { name, generatedAt }; return { groupLabel, granularity, periodLabel, payee, entityCount, 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));
} }

114
src/common/components/TransactionList.tsx
View File

@@ -14,83 +14,21 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { formatCurrency } from "../../../react-openapi"; import { formatCurrency } from "../../../react-openapi";
import type { ExpenseItem, TxnFieldConfigs } from "../types"; import type { ExpenseItem, TxnFieldConfigs } from "../types";
import { computeTxnMetrics, groupByDate, groupByPeriod } from "../utils/transactions"; import { groupByDate, groupByPeriod } from "../utils/transactions";
import type { ListGroupMetrics, ListPeriodGroup, PeriodGranularity } from "../utils/transactions"; import type { PeriodGranularity } from "../utils/transactions";
import { TransactionRow } from "./TransactionRow"; import { TransactionRow } from "./TransactionRow";
import { StatCard } from "./StatCard";
interface TransactionListProps { interface TransactionListProps {
items?: ExpenseItem[]; items: ExpenseItem[];
fields: TxnFieldConfigs; fields: TxnFieldConfigs;
granularity?: PeriodGranularity; granularity?: PeriodGranularity;
showMetrics?: boolean;
groups?: ListPeriodGroup[];
} }
function cadenceRow(cadenceDays: number | null, frequency: number | null): { label: string; value: string } { export function TransactionList({ items, fields, granularity = "monthly" }: TransactionListProps) {
const fmt = (v: number) => (Number.isInteger(v) ? String(v) : v.toFixed(2));
if (cadenceDays != null && cadenceDays < 1) {
return { label: "Frequency", value: `${frequency == null ? "—" : fmt(frequency)} /day` };
}
return {
label: "Cadence",
value: cadenceDays == null ? "—" : `${fmt(cadenceDays)} days`,
};
}
function txnFallbackMetrics(items: ExpenseItem[]): ListGroupMetrics {
const t = computeTxnMetrics(items);
return {
sum: t.sum,
count: t.count,
avg: t.avg,
min: t.min,
max: t.max,
cadence: t.cadenceDays,
frequency: t.frequency,
};
}
function GroupMetrics({
items,
currency,
metrics,
}: {
items: ExpenseItem[];
currency: string;
metrics?: ListGroupMetrics;
}) {
const m = metrics ?? txnFallbackMetrics(items);
const rows: { label: string; value: string }[] = [
{ label: "Sum", value: formatCurrency(m.sum, currency) },
{ label: "Avg", value: m.avg == null ? "—" : formatCurrency(m.avg, currency) },
{ label: "Min", value: m.min == null ? "—" : formatCurrency(m.min, currency) },
{ label: "Max", value: m.max == null ? "—" : formatCurrency(m.max, currency) },
cadenceRow(m.cadence, m.frequency),
];
return (
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", width: "100%" }}>
{rows.map((row) => (
<StatCard key={row.label} label={row.label} value={row.value} />
))}
</Box>
);
}
export function TransactionList({
items,
fields,
granularity = "monthly",
showMetrics = false,
groups: externalGroups,
}: TransactionListProps) {
const [activeMonth, setActiveMonth] = useState<string | null>(null); const [activeMonth, setActiveMonth] = useState<string | null>(null);
const [openMonth, setOpenMonth] = useState<string | null>(null); const [openMonth, setOpenMonth] = useState<string | null>(null);
const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null); const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
const groups = useMemo<ListPeriodGroup[]>( const groups = useMemo(() => groupByPeriod(items, granularity), [items, granularity]);
() => externalGroups ?? groupByPeriod(items ?? [], granularity),
[externalGroups, items, granularity],
);
const listRef = useRef<HTMLDivElement>(null); const listRef = useRef<HTMLDivElement>(null);
const pillRef = useRef<HTMLDivElement>(null); const pillRef = useRef<HTMLDivElement>(null);
const didInitOpenMonth = useRef(false); const didInitOpenMonth = useRef(false);
@@ -198,34 +136,28 @@ export function TransactionList({
px: 2, px: 2,
py: 1, py: 1,
"& .MuiAccordionSummary-content": { "& .MuiAccordionSummary-content": {
flexDirection: "column", alignItems: "center",
alignItems: "stretch", gap: 1.5,
gap: 0.75,
minWidth: 0, minWidth: 0,
}, },
}} }}
> >
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5, minWidth: 0 }}> <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}> {group.label}
{group.label} </Typography>
</Typography> <Typography variant="caption" color="text.secondary">
<Typography variant="caption" color="text.secondary"> {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
{group.items.length} transaction{group.items.length === 1 ? "" : "s"} </Typography>
</Typography> <Box sx={{ flex: 1 }} />
<Box sx={{ flex: 1 }} /> <Typography variant="body2" fontWeight={700} color="error.main">
<Typography variant="body2" fontWeight={700} color="error.main"> {formatCurrency(group.spent, group.currency)}
{formatCurrency(group.spent, group.currency)} </Typography>
</Typography> <Typography variant="body2" color="text.disabled">
<Typography variant="body2" color="text.disabled"> /
/ </Typography>
</Typography> <Typography variant="body2" fontWeight={700} color="success.main">
<Typography variant="body2" fontWeight={700} color="success.main"> {formatCurrency(group.income, group.currency)}
{formatCurrency(group.income, group.currency)} </Typography>
</Typography>
</Box>
{showMetrics && (
<GroupMetrics items={group.items} currency={group.currency} metrics={group.metrics} />
)}
</AccordionSummary> </AccordionSummary>
<AccordionDetails sx={{ p: 1.5, pt: 1 }}> <AccordionDetails sx={{ p: 1.5, pt: 1 }}>
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}> <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>

60
src/common/utils/transactions.ts
View File

@@ -40,19 +40,10 @@ export interface PeriodGroup {
currency: string; currency: string;
} }
/** Metrics verbatim from the API's ReportMetrics (camelCased). */ export function toPeriodGranularity(value?: string): PeriodGranularity {
export interface ListGroupMetrics { return value === "weekly" || value === "monthly" || value === "quarterly" || value === "yearly"
sum: number; ? value
count: number; : "monthly";
avg: number | null;
min: number | null;
max: number | null;
cadence: number | null;
frequency: number | null;
}
export interface ListPeriodGroup extends PeriodGroup {
metrics?: ListGroupMetrics;
} }
function isoWeekKey(d: Date): string { function isoWeekKey(d: Date): string {
@@ -116,46 +107,3 @@ export function groupByPeriod(items: ExpenseItem[], granularity: PeriodGranulari
}) })
.sort((a, b) => b.key.localeCompare(a.key)); .sort((a, b) => b.key.localeCompare(a.key));
} }
export interface TxnMetrics {
sum: number;
count: number;
avg: number | null;
min: number | null;
max: number | null;
cadenceDays: number | null;
frequency: number | null;
}
/** Mirrors backend ReportMetrics.compute_metrics over a list of transactions. */
export function computeTxnMetrics(items: ExpenseItem[]): TxnMetrics {
const amounts = items.filter((it) => typeof it.amount === "number").map((it) => it.amount as number);
const empty = { sum: 0, count: 0, avg: null, min: null, max: null, cadenceDays: null, frequency: null };
if (amounts.length === 0) {
return empty;
}
const dates = items
.map((it) => it.occurred_at)
.filter((d): d is string => !!d)
.map((d) => parseOccurredAt(d).getTime())
.sort((a, b) => a - b);
const sum = amounts.reduce((s, a) => s + a, 0);
let cadenceDays: number | null = null;
if (dates.length >= 2) {
const gaps: number[] = [];
for (let i = 0; i < dates.length - 1; i += 1) {
gaps.push((dates[i + 1] - dates[i]) / 86400000);
}
cadenceDays = Math.round((gaps.reduce((s, g) => s + g, 0) / gaps.length) * 100) / 100;
}
const frequency = cadenceDays != null && cadenceDays > 0 ? Math.round((1 / cadenceDays) * 100) / 100 : null;
return {
sum,
count: amounts.length,
avg: sum / amounts.length,
min: Math.min(...amounts),
max: Math.max(...amounts),
cadenceDays,
frequency,
};
}

2
src/features/fetch-requests/fetch-requests.models.ts
View File

@@ -26,7 +26,7 @@ export interface EmailSource {
txn_dicts_count?: number; txn_dicts_count?: number;
} }
export type PipelineType = "heuristic" | "llm" | "llama_parse"; export type PipelineType = "heuristic" | "llm" | "llama_parser";
export interface FetchRequestCreate { export interface FetchRequestCreate {
source: FileSource | EmailSource; source: FileSource | EmailSource;