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
This commit is contained in:
@@ -34,6 +34,7 @@ interface HeaderProps {
|
||||
const NAV_LINKS = [
|
||||
{ label: "Home", path: "/" },
|
||||
{ label: "Expenses", path: "/expenses" },
|
||||
{ label: "Reports", path: "/reports" },
|
||||
{ label: "Fetch Requests", path: "/fetch-requests" },
|
||||
];
|
||||
|
||||
|
||||
210
src/Reports/GenerateReportPanel.tsx
Normal file
210
src/Reports/GenerateReportPanel.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Paper,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
Select,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Autocomplete,
|
||||
Alert,
|
||||
} from "@mui/material";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
|
||||
import { useResource, useAppContext, applyDisplayFormat } from "../../react-openapi";
|
||||
import { useToast } from "../ui/Toast";
|
||||
import { apiErrorMessage, groupTypeEnum, isDdmmyyyy, periodHints } from "./types";
|
||||
|
||||
interface GroupRow {
|
||||
id: number;
|
||||
group_type: string;
|
||||
group_value: string;
|
||||
}
|
||||
|
||||
interface GenerateReportPanelProps {
|
||||
onGenerated: (reports: any[]) => void;
|
||||
}
|
||||
|
||||
export function GenerateReportPanel({ onGenerated }: GenerateReportPanelProps) {
|
||||
const { schemas, resources } = useAppContext();
|
||||
const { create } = useResource("reports");
|
||||
const { list: listEntities } = useResource("entities");
|
||||
const { showToast } = useToast();
|
||||
|
||||
const [rows, setRows] = useState<GroupRow[]>([{ id: 1, group_type: "monthly", group_value: "*" }]);
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [entityNames, setEntityNames] = useState<string[]>([]);
|
||||
const [dateErrors, setDateErrors] = useState<{ start?: string; end?: string }>({});
|
||||
|
||||
const types = useMemo(() => groupTypeEnum(schemas), [schemas]);
|
||||
const entitiesRes = resources.find((r) => r.name === "entities");
|
||||
const entitiesFormat = entitiesRes?.displayFormat ?? "{name}";
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
listEntities({ limit: 0 }).then((res) => {
|
||||
if (!mounted) return;
|
||||
const names = (res.items ?? [])
|
||||
.map((it: any) => applyDisplayFormat(it, entitiesFormat))
|
||||
.filter((n: string) => n);
|
||||
setEntityNames([...new Set(names)].sort((a, b) => a.localeCompare(b)));
|
||||
});
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [listEntities, entitiesFormat]);
|
||||
|
||||
const isPayee = (type: string) => type === "payee";
|
||||
|
||||
const valueOptions = (row: GroupRow): string[] => ["*", ...(isPayee(row.group_type) ? entityNames : [])];
|
||||
|
||||
const valueHint = (row: GroupRow): string =>
|
||||
isPayee(row.group_type) ? "Entity name, or * for all payees" : `e.g. ${periodHints(row.group_type).join(", ")}, or *`;
|
||||
|
||||
const nextRowId = () => Math.max(0, ...rows.map((r) => r.id)) + 1;
|
||||
|
||||
const addRow = () => setRows((rs) => [...rs, { id: nextRowId(), group_type: "monthly", group_value: "*" }]);
|
||||
|
||||
const removeRow = (id: number) => setRows((rs) => rs.filter((r) => r.id !== id));
|
||||
|
||||
const updateRow = (id: number, patch: Partial<GroupRow>) =>
|
||||
setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
|
||||
|
||||
const validateDates = (): boolean => {
|
||||
const errs: { start?: string; end?: string } = {};
|
||||
if (startDate && !isDdmmyyyy(startDate)) errs.start = "Use DD-MM-YYYY";
|
||||
if (endDate && !isDdmmyyyy(endDate)) errs.end = "Use DD-MM-YYYY";
|
||||
setDateErrors(errs);
|
||||
return Object.keys(errs).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!validateDates()) return;
|
||||
setError(null);
|
||||
const groups = rows
|
||||
.filter((r) => r.group_type && r.group_value.trim())
|
||||
.map(({ group_type, group_value }) => ({ group_type, group_value: group_value.trim() }));
|
||||
if (groups.length === 0) {
|
||||
setError("At least one group is required");
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
const payload: Record<string, any> = { groups };
|
||||
if (startDate.trim()) payload.start_date = startDate.trim();
|
||||
if (endDate.trim()) payload.end_date = endDate.trim();
|
||||
try {
|
||||
const created = await create(payload);
|
||||
const list = Array.isArray(created) ? created : created ? [created] : [];
|
||||
showToast(`Generated ${list.length} report${list.length === 1 ? "" : "s"}`);
|
||||
onGenerated(list);
|
||||
} catch (e: any) {
|
||||
setError(apiErrorMessage(e));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, mb: 4 }}>
|
||||
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
|
||||
Generate report
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 2 }}>
|
||||
Choose the dimensions to snapshot. At least one group is required — with no period dimension the server
|
||||
snapshots weekly, monthly and quarterly.
|
||||
</Typography>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2, borderRadius: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{rows.map((row) => (
|
||||
<Box key={row.id} sx={{ display: "flex", gap: 1.5, alignItems: "flex-start" }}>
|
||||
<FormControl size="small" sx={{ width: 180, flexShrink: 0 }}>
|
||||
<InputLabel id={`group-type-${row.id}`}>Type</InputLabel>
|
||||
<Select
|
||||
labelId={`group-type-${row.id}`}
|
||||
label="Type"
|
||||
value={row.group_type}
|
||||
onChange={(e) => updateRow(row.id, { group_type: e.target.value, group_value: "*" })}
|
||||
>
|
||||
{types.map((t) => (
|
||||
<MenuItem key={t} value={t}>
|
||||
{t}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
size="small"
|
||||
sx={{ flex: 1, minWidth: 240 }}
|
||||
options={valueOptions(row)}
|
||||
value={row.group_value}
|
||||
onInputChange={(_, newVal) => updateRow(row.id, { group_value: newVal ?? "" })}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Value" helperText={valueHint(row)} />
|
||||
)}
|
||||
/>
|
||||
<IconButton
|
||||
aria-label="Remove group"
|
||||
disabled={rows.length === 1}
|
||||
onClick={() => removeRow(row.id)}
|
||||
sx={{ mt: 0.25 }}
|
||||
>
|
||||
<RemoveCircleOutlineIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Button startIcon={<AddIcon />} size="small" sx={{ mt: 1 }} onClick={addRow}>
|
||||
Add dimension
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 1.5, mt: 2, flexWrap: "wrap" }}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Start date"
|
||||
placeholder="DD-MM-YYYY"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
error={Boolean(dateErrors.start)}
|
||||
helperText={dateErrors.start ?? "Inclusive start (empty = unbounded)"}
|
||||
sx={{ width: 200 }}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="End date"
|
||||
placeholder="DD-MM-YYYY"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
error={Boolean(dateErrors.end)}
|
||||
helperText={dateErrors.end ?? "Inclusive end (empty = unbounded)"}
|
||||
sx={{ width: 200 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? "Generating…" : "Generate"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
122
src/Reports/ReportList.tsx
Normal file
122
src/Reports/ReportList.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React from "react";
|
||||
import { Box, Paper, Typography, Button, IconButton, Skeleton, Tooltip } from "@mui/material";
|
||||
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
import CachedIcon from "@mui/icons-material/Cached";
|
||||
import { ListCellRenderer, formatCurrency } from "../../react-openapi";
|
||||
import type { ReportFieldConfigs } from "./types";
|
||||
|
||||
interface ReportListProps {
|
||||
reports: any[];
|
||||
loading: boolean;
|
||||
fields: ReportFieldConfigs | null;
|
||||
selectedId: string | null;
|
||||
onView: (id: string) => void;
|
||||
onRegenerate: (report: any) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export function ReportList({ reports, loading, fields, selectedId, onView, onRegenerate, onDelete }: ReportListProps) {
|
||||
if (loading && reports.length === 0) {
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<Skeleton key={i} variant="rounded" height={88} sx={{ borderRadius: 2 }} />
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{reports.map((report) => {
|
||||
const sum = typeof report.metrics?.sum === "number" ? report.metrics.sum : null;
|
||||
const range =
|
||||
report.start_date || report.end_date
|
||||
? `range ${report.start_date || "…"} → ${report.end_date || "…"}`
|
||||
: null;
|
||||
return (
|
||||
<Paper
|
||||
key={report.id}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 2,
|
||||
borderColor: selectedId === report.id ? "primary.main" : "divider",
|
||||
transition: "border-color 160ms ease",
|
||||
"&:hover": { borderColor: "primary.light" },
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
|
||||
<Box sx={{ flex: "1 1 260px", minWidth: 0 }}>
|
||||
<Typography variant="body1" fontWeight={600} noWrap sx={{ fontSize: "0.9375rem" }}>
|
||||
{report.group_label}
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", mt: 0.25 }}>
|
||||
{fields && (
|
||||
<ListCellRenderer field={fields.granularity} value={report.granularity} />
|
||||
)}
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{report.period_label}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
/
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{report.payee}
|
||||
</Typography>
|
||||
{range && (
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
{range}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", gap: 1.5, mt: 0.5 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{report.entity_count ?? 0} entities
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{report.txn_count ?? 0} txns
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{report.expense_count ?? 0} expenses
|
||||
</Typography>
|
||||
{fields && (
|
||||
<Box sx={{ color: "text.secondary" }}>
|
||||
<ListCellRenderer field={fields.generatedAt} value={report.generated_at} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexShrink: 0, textAlign: "right" }}>
|
||||
<Typography variant="body1" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
|
||||
{sum != null ? formatCurrency(sum, "INR") : "—"}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 0.5, flexShrink: 0 }}>
|
||||
<Button size="small" variant="contained" startIcon={<VisibilityIcon />} onClick={() => onView(report.id)}>
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<CachedIcon />}
|
||||
onClick={() => onRegenerate(report)}
|
||||
>
|
||||
Regenerate
|
||||
</Button>
|
||||
<Tooltip title="Delete">
|
||||
<IconButton aria-label="Delete report" onClick={() => onDelete(report.id)}>
|
||||
<DeleteOutlineIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
438
src/Reports/ReportViewer.tsx
Normal file
438
src/Reports/ReportViewer.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Paper,
|
||||
Typography,
|
||||
Button,
|
||||
IconButton,
|
||||
Alert,
|
||||
Skeleton,
|
||||
TextField,
|
||||
Autocomplete,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import CachedIcon from "@mui/icons-material/Cached";
|
||||
import { useAppContext, useResource, ListCellRenderer, CurrencyField, applyDisplayFormat, formatCurrency } from "../../react-openapi";
|
||||
import { groupByMonth } from "../Expense/ExpenseList";
|
||||
import type { ExpenseItem, ExpenseFieldConfigs } from "../Expense/types";
|
||||
import { monthLabel } from "../Expense/types";
|
||||
import type { TxnFieldConfigs } from "./types";
|
||||
import { aggregateSlice, buildPivot, metricLabels } from "./types";
|
||||
|
||||
interface ReportViewerProps {
|
||||
id: string;
|
||||
version: number;
|
||||
fields: TxnFieldConfigs | null;
|
||||
onClose: () => void;
|
||||
onRegenerated: (report: any) => void;
|
||||
}
|
||||
|
||||
function StatCard({ label, value, color }: { label: string; value: string; color?: string }) {
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 150 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="h6" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em", color }}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
const ReportTxnRow = React.memo(function ReportTxnRow({
|
||||
item,
|
||||
currency,
|
||||
fields,
|
||||
}: {
|
||||
item: ExpenseItem;
|
||||
currency: string;
|
||||
fields: ExpenseFieldConfigs;
|
||||
}) {
|
||||
const itemCurrency = item.account?.currency ?? currency;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
px: 2,
|
||||
py: 1.25,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
borderRadius: 2,
|
||||
backgroundColor: "background.paper",
|
||||
transition: "background-color 160ms ease, border-color 160ms ease",
|
||||
"&:hover": {
|
||||
backgroundColor: "action.hover",
|
||||
borderColor: "primary.light",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{item.entity?.logo ? (
|
||||
<ListCellRenderer field={fields.logo} value={item.entity.logo} />
|
||||
) : (
|
||||
<Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: "action.hover" }} />
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ flex: "0 1 auto", minWidth: 0 }}>
|
||||
<Typography variant="body1" fontWeight={600} noWrap sx={{ fontSize: "0.9375rem", lineHeight: 1.3 }}>
|
||||
{item.entity ? applyDisplayFormat(item.entity, fields.formats.entity) : "Unknown"}
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
||||
<Box sx={{ color: "text.secondary" }}>
|
||||
<ListCellRenderer field={fields.occurredAt} value={item.occurred_at} />
|
||||
</Box>
|
||||
{item.account?.name && (
|
||||
<ListCellRenderer field={fields.account} value={item.account} displayFormat={fields.formats.account} />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1 }} />
|
||||
<CurrencyField value={item.amount} currency={itemCurrency} large />
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
export function ReportViewer({ id, version, fields, onClose, onRegenerated }: ReportViewerProps) {
|
||||
const { schemas } = useAppContext();
|
||||
const { get } = useResource("reports");
|
||||
|
||||
const [report, setReport] = useState<any | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [reload, setReload] = useState(0);
|
||||
const [selectedPeriod, setSelectedPeriod] = useState("*");
|
||||
const [selectedPayee, setSelectedPayee] = useState("*");
|
||||
const [openMonth, setOpenMonth] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
get(id)
|
||||
.then((res) => {
|
||||
if (!mounted) return;
|
||||
setReport(res);
|
||||
setSelectedPeriod("*");
|
||||
setSelectedPayee("*");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
if (!mounted) return;
|
||||
setError(e?.response?.data?.detail ?? e?.message ?? "Failed to load report");
|
||||
})
|
||||
.finally(() => {
|
||||
if (mounted) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [id, version, reload, get]);
|
||||
|
||||
const data = useMemo(() => (Array.isArray(report?.data) ? report.data : null), [report]);
|
||||
|
||||
const groupOptions = useMemo(() => {
|
||||
const options = report?.metadata?.group_options;
|
||||
if (!options || typeof options !== "object") return { period: [], payee: [] };
|
||||
return {
|
||||
period: Array.isArray(options.period) ? options.period.map(String) : [],
|
||||
payee: Array.isArray(options.payee) ? options.payee.map(String) : [],
|
||||
};
|
||||
}, [report]);
|
||||
|
||||
const slice = useMemo(
|
||||
() => aggregateSlice(data ?? [], { period: selectedPeriod, payee: selectedPayee }),
|
||||
[data, selectedPeriod, selectedPayee],
|
||||
);
|
||||
|
||||
const months = useMemo(() => groupByMonth(slice.txns), [slice.txns]);
|
||||
|
||||
const pivot = useMemo(
|
||||
() => buildPivot(data ?? [], groupOptions.period, groupOptions.payee),
|
||||
[data, groupOptions],
|
||||
);
|
||||
|
||||
const metrics = useMemo(() => {
|
||||
const labels = metricLabels(schemas);
|
||||
const displayKeys = ["sum", "count", "avg", "min", "max", "first_date", "last_date"];
|
||||
return labels.filter((l) => displayKeys.includes(l.key));
|
||||
}, [schemas]);
|
||||
|
||||
const metricValue = (key: string): string | null => {
|
||||
if (key === "sum") return formatCurrency(slice.sum, slice.currency);
|
||||
if (key === "count") return slice.count.toLocaleString("en-IN");
|
||||
if (key === "avg") return slice.avg == null ? null : formatCurrency(slice.avg, slice.currency);
|
||||
if (key === "min") return slice.min == null ? null : formatCurrency(slice.min, slice.currency);
|
||||
if (key === "max") return slice.max == null ? null : formatCurrency(slice.max, slice.currency);
|
||||
if (key === "first_date") return slice.firstDate;
|
||||
if (key === "last_date") return slice.lastDate;
|
||||
return null;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3 }}>
|
||||
<Skeleton variant="text" width={220} height={28} />
|
||||
<Skeleton variant="rounded" height={120} sx={{ my: 2, borderRadius: 2 }} />
|
||||
<Skeleton variant="rounded" height={240} sx={{ borderRadius: 2 }} />
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ p: 3, borderRadius: 3 }}>
|
||||
<Alert severity="error" sx={{ borderRadius: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
<Button size="small" sx={{ mt: 2 }} onClick={() => setReload((r) => r + 1)}>
|
||||
Retry
|
||||
</Button>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
if (!report) return null;
|
||||
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ borderRadius: 3, overflow: "hidden" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
px: 2.5,
|
||||
py: 2,
|
||||
borderBottom: "1px solid",
|
||||
borderColor: "divider",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
|
||||
{report.group_label}
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{report.granularity} · {report.period_label} · {report.payee}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
{report.entity_count ?? 0} entities · {report.txn_count ?? 0} txns · {report.expense_count ?? 0} expenses
|
||||
</Typography>
|
||||
{report.start_date || report.end_date ? (
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
range {report.start_date || "…"} → {report.end_date || "…"}
|
||||
</Typography>
|
||||
) : null}
|
||||
</Box>
|
||||
</Box>
|
||||
<IconButton aria-label="Close report" onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{data === null ? (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Alert severity="info" sx={{ borderRadius: 2, mb: 2 }}>
|
||||
The cached data for this report has expired. Regenerate it to rebuild the snapshot.
|
||||
</Alert>
|
||||
<Button variant="contained" startIcon={<CachedIcon />} onClick={() => onRegenerated(report)}>
|
||||
Regenerate
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ p: 2.5 }}>
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2.5 }}>
|
||||
<Autocomplete
|
||||
size="small"
|
||||
sx={{ width: 220 }}
|
||||
options={["*", ...groupOptions.period]}
|
||||
value={selectedPeriod}
|
||||
onChange={(_, v) => setSelectedPeriod(v ?? "*")}
|
||||
disabled={groupOptions.period.length === 0}
|
||||
renderInput={(params) => <TextField {...params} label="Period" />}
|
||||
/>
|
||||
<Autocomplete
|
||||
size="small"
|
||||
sx={{ width: 220 }}
|
||||
options={["*", ...groupOptions.payee]}
|
||||
value={selectedPayee}
|
||||
onChange={(_, v) => setSelectedPayee(v ?? "*")}
|
||||
disabled={groupOptions.payee.length === 0}
|
||||
renderInput={(params) => <TextField {...params} label="Payee" />}
|
||||
/>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ alignSelf: "center" }}>
|
||||
Showing {slice.count} transactions across {slice.txns.length} rows
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 2.5 }}>
|
||||
<StatCard label="Spent" value={formatCurrency(slice.spent, slice.currency)} color="error.main" />
|
||||
<StatCard label="Income" value={formatCurrency(slice.income, slice.currency)} color="success.main" />
|
||||
<StatCard label="Transactions" value={slice.count.toLocaleString("en-IN")} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 3 }}>
|
||||
{metrics.map((m) => {
|
||||
const value = metricValue(m.key);
|
||||
if (value == null) return null;
|
||||
return (
|
||||
<Paper
|
||||
key={m.key}
|
||||
variant="outlined"
|
||||
sx={{ px: 1.5, py: 1, borderRadius: 2 }}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
|
||||
{m.label}
|
||||
</Typography>
|
||||
<Typography variant="body2" fontWeight={600}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{selectedPeriod === "*" && selectedPayee === "*" && pivot.rows.length > 0 && (
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
variant="outlined"
|
||||
sx={{ borderRadius: 2, mb: 3, overflowX: "auto" }}
|
||||
>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 700 }}>Period</TableCell>
|
||||
{pivot.payees.map((payee) => (
|
||||
<TableCell key={payee} align="right" sx={{ fontWeight: 700 }}>
|
||||
{payee}
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell align="right" sx={{ fontWeight: 700 }}>
|
||||
Total
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{pivot.rows.map((row) => (
|
||||
<TableRow key={row.period} sx={{ "&:last-child td": { borderBottom: 0 } }}>
|
||||
<TableCell sx={{ fontWeight: 600 }}>{row.period}</TableCell>
|
||||
{row.cells.map((cell) => (
|
||||
<TableCell key={cell.payee} align="right">
|
||||
{cell.sum === 0 ? "—" : formatCurrency(cell.sum, slice.currency)}
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell align="right" sx={{ fontWeight: 700 }}>
|
||||
{formatCurrency(row.periodSum, slice.currency)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 700 }}>Total</TableCell>
|
||||
{pivot.totals.map((t) => (
|
||||
<TableCell key={t.payee} align="right" sx={{ fontWeight: 700 }}>
|
||||
{formatCurrency(t.sum, slice.currency)}
|
||||
</TableCell>
|
||||
))}
|
||||
<TableCell align="right" sx={{ fontWeight: 700 }}>
|
||||
{formatCurrency(pivot.rows.reduce((s, r) => s + r.periodSum, 0), slice.currency)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{months.length === 0 ? (
|
||||
<Paper variant="outlined" sx={{ borderRadius: 2, p: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No transactions in this slice.
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{months.map((group) => (
|
||||
<Accordion
|
||||
key={group.key}
|
||||
disableGutters
|
||||
expanded={openMonth === group.key}
|
||||
onChange={(_, isExpanded) => setOpenMonth(isExpanded ? group.key : null)}
|
||||
TransitionProps={{ unmountOnExit: true }}
|
||||
sx={{
|
||||
border: "1px solid",
|
||||
borderColor: openMonth === group.key ? "primary.main" : "divider",
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
boxShadow: "none",
|
||||
backgroundColor: "background.paper",
|
||||
"&:before": { display: "none" },
|
||||
"&:hover": { borderColor: "primary.light" },
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
"& .MuiAccordionSummary-content": { alignItems: "center", gap: 1.5, minWidth: 0 },
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
|
||||
{monthLabel(group.key)}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{group.items.length} transaction{group.items.length === 1 ? "" : "s"}
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1 }} />
|
||||
<Typography variant="body2" fontWeight={700} color="error.main">
|
||||
{formatCurrency(group.spent, group.currency)}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.disabled">
|
||||
/
|
||||
</Typography>
|
||||
<Typography variant="body2" fontWeight={700} color="success.main">
|
||||
{formatCurrency(group.income, group.currency)}
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails sx={{ p: 1.5, pt: 1 }}>
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
{fields &&
|
||||
group.items.map((item) => (
|
||||
<ReportTxnRow
|
||||
key={item.id ?? `${group.key}-${item.occurred_at}-${item.amount}`}
|
||||
item={item}
|
||||
currency={group.currency}
|
||||
fields={fields as ExpenseFieldConfigs}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
160
src/Reports/Reports.tsx
Normal file
160
src/Reports/Reports.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Container, Box, Paper, Typography, Alert } from "@mui/material";
|
||||
import AssessmentIcon from "@mui/icons-material/Assessment";
|
||||
import { useResource, useAppContext, formatCurrency } from "../../react-openapi";
|
||||
import { useToast } from "../ui/Toast";
|
||||
import { PageHeader } from "../ui/PageHeader";
|
||||
import { EmptyState } from "../ui/EmptyState";
|
||||
import { GenerateReportPanel } from "./GenerateReportPanel";
|
||||
import { ReportList } from "./ReportList";
|
||||
import { ReportViewer } from "./ReportViewer";
|
||||
import { apiErrorMessage, buildReportFieldConfigs, buildTxnFieldConfigs } from "./types";
|
||||
|
||||
function StatCard({ label, value, hint }: { label: string; value: string; hint?: string }) {
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 180 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="h5" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em" }}>
|
||||
{value}
|
||||
</Typography>
|
||||
{hint && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{hint}
|
||||
</Typography>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Reports() {
|
||||
const { resources } = useAppContext();
|
||||
const { showToast } = useToast();
|
||||
const { list, loading, error } = useResource("reports");
|
||||
const { create, remove } = useResource("reports");
|
||||
|
||||
const [reports, setReports] = useState<any[] | null>(null);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [viewerVersion, setViewerVersion] = useState(0);
|
||||
|
||||
const reportFields = useMemo(() => buildReportFieldConfigs(resources), [resources]);
|
||||
const txnFields = useMemo(() => buildTxnFieldConfigs(resources), [resources]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const res = await list({ limit: 200 });
|
||||
setReports(res.items ?? []);
|
||||
}, [list]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
const handleGenerated = useCallback(
|
||||
(created: any[]) => {
|
||||
load();
|
||||
if (created?.[0]?.id) setSelectedId(created[0].id);
|
||||
},
|
||||
[load],
|
||||
);
|
||||
|
||||
const handleRegenerate = useCallback(
|
||||
async (report: any) => {
|
||||
const payload: Record<string, any> = { groups: report.groups ?? [] };
|
||||
if (report.start_date) payload.start_date = report.start_date;
|
||||
if (report.end_date) payload.end_date = report.end_date;
|
||||
try {
|
||||
await create(payload);
|
||||
showToast("Report regenerated");
|
||||
setSelectedId(report.id);
|
||||
setViewerVersion((v) => v + 1);
|
||||
load();
|
||||
} catch (e: any) {
|
||||
showToast(apiErrorMessage(e), "error");
|
||||
}
|
||||
},
|
||||
[create, load, showToast],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(
|
||||
async (id: string) => {
|
||||
try {
|
||||
await remove(id);
|
||||
showToast("Report deleted");
|
||||
if (selectedId === id) setSelectedId(null);
|
||||
load();
|
||||
} catch (e: any) {
|
||||
showToast(apiErrorMessage(e), "error");
|
||||
}
|
||||
},
|
||||
[remove, load, selectedId, showToast],
|
||||
);
|
||||
|
||||
const summary = useMemo(() => {
|
||||
const rows = reports ?? [];
|
||||
const txnCount = rows.reduce((s, r) => s + (r.txn_count ?? 0), 0);
|
||||
const total = rows.reduce((s, r) => s + (typeof r.metrics?.sum === "number" ? r.metrics.sum : 0), 0);
|
||||
return { count: rows.length, txnCount, total };
|
||||
}, [reports]);
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||||
<PageHeader
|
||||
crumbs={[{ label: "Home", path: "/" }, { label: "Reports" }]}
|
||||
title="Reports"
|
||||
subtitle="Generate period/payee snapshots from the reporting API and slice the cached data."
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
|
||||
Failed to load reports: {error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
|
||||
<StatCard label="Reports" value={summary.count.toLocaleString("en-IN")} />
|
||||
<StatCard label="Transactions covered" value={summary.txnCount.toLocaleString("en-IN")} />
|
||||
<StatCard label="Total" value={formatCurrency(summary.total, "INR")} />
|
||||
</Box>
|
||||
|
||||
<GenerateReportPanel onGenerated={handleGenerated} />
|
||||
|
||||
<Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em", mb: 1.5 }}>
|
||||
Saved reports
|
||||
</Typography>
|
||||
|
||||
{reports !== null && reports.length === 0 ? (
|
||||
<Paper variant="outlined" sx={{ borderRadius: 3 }}>
|
||||
<EmptyState
|
||||
icon={<AssessmentIcon />}
|
||||
title="No reports yet"
|
||||
description="Generate your first report above — pick a granularity and payee (a payee-only or wildcard config snapshots weekly, monthly and quarterly)."
|
||||
/>
|
||||
</Paper>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2.5, mb: 4 }}>
|
||||
<ReportList
|
||||
reports={reports ?? []}
|
||||
loading={loading}
|
||||
fields={reportFields}
|
||||
selectedId={selectedId}
|
||||
onView={(id) => setSelectedId(id)}
|
||||
onRegenerate={handleRegenerate}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{selectedId && (
|
||||
<ReportViewer
|
||||
key={selectedId}
|
||||
id={selectedId}
|
||||
version={viewerVersion}
|
||||
fields={txnFields}
|
||||
onClose={() => setSelectedId(null)}
|
||||
onRegenerated={handleRegenerate}
|
||||
/>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
302
src/Reports/types.ts
Normal file
302
src/Reports/types.ts
Normal file
@@ -0,0 +1,302 @@
|
||||
import type { FieldConfig, ResourceConfig } from "../../react-openapi";
|
||||
|
||||
const DDMMYYYY = /^(\d{2})-(\d{2})-(\d{4})$/;
|
||||
|
||||
export interface ParsedGroupKey {
|
||||
period?: { granularity: string; label: string };
|
||||
payee?: { label: string };
|
||||
range?: { start?: string; end?: string };
|
||||
}
|
||||
|
||||
export interface ReportGroupLike {
|
||||
key: string;
|
||||
group_label?: string;
|
||||
metrics?: Record<string, any>;
|
||||
txns?: any[];
|
||||
}
|
||||
|
||||
export interface SliceFilter {
|
||||
period?: string;
|
||||
payee?: string;
|
||||
}
|
||||
|
||||
export interface SliceSummary {
|
||||
sum: number;
|
||||
count: number;
|
||||
avg: number | null;
|
||||
min: number | null;
|
||||
max: number | null;
|
||||
firstDate: string | null;
|
||||
lastDate: string | null;
|
||||
txns: any[];
|
||||
spent: number;
|
||||
income: number;
|
||||
currency: string;
|
||||
}
|
||||
|
||||
export interface PivotCell {
|
||||
payee: string;
|
||||
sum: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface PivotRow {
|
||||
period: string;
|
||||
cells: PivotCell[];
|
||||
periodSum: number;
|
||||
periodCount: number;
|
||||
}
|
||||
|
||||
export interface PivotTable {
|
||||
rows: PivotRow[];
|
||||
payees: string[];
|
||||
totals: PivotCell[];
|
||||
}
|
||||
|
||||
export interface TxnFieldConfigs {
|
||||
entity: FieldConfig;
|
||||
amount: FieldConfig;
|
||||
account: FieldConfig;
|
||||
occurredAt: FieldConfig;
|
||||
logo: FieldConfig;
|
||||
formats: { entity: string; account: string };
|
||||
}
|
||||
|
||||
export interface ReportFieldConfigs {
|
||||
groupLabel: FieldConfig;
|
||||
granularity: FieldConfig;
|
||||
periodLabel: FieldConfig;
|
||||
payee: FieldConfig;
|
||||
entityCount: FieldConfig;
|
||||
generatedAt: FieldConfig;
|
||||
}
|
||||
|
||||
export interface MetricLabel {
|
||||
key: string;
|
||||
label: string;
|
||||
order: number;
|
||||
}
|
||||
|
||||
/** Split a concrete cache key into its dimension parts, e.g. `period:monthly:2026-Jan|payee:Zepto`. */
|
||||
export function parseCacheKey(key: string): ParsedGroupKey {
|
||||
const out: ParsedGroupKey = {};
|
||||
for (const dim of key.split("|")) {
|
||||
if (!dim) continue;
|
||||
const [name, ...rest] = dim.split(":");
|
||||
if (name === "period" && rest.length >= 2) {
|
||||
out.period = { granularity: rest[0], label: rest.slice(1).join(":") };
|
||||
} else if (name === "payee" && rest.length >= 1) {
|
||||
out.payee = { label: rest.join(":") };
|
||||
} else if (name === "range" && rest.length >= 1) {
|
||||
out.range = { start: rest[0] || undefined, end: rest[1] || undefined };
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export function isDdmmyyyy(value?: string): boolean {
|
||||
if (!value) return true;
|
||||
const m = value.match(DDMMYYYY);
|
||||
if (!m) return false;
|
||||
const [, dd, mm, yyyy] = m;
|
||||
const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
|
||||
return !(
|
||||
Number.isNaN(d.getTime()) ||
|
||||
d.getDate() !== Number(dd) ||
|
||||
d.getMonth() !== Number(mm) - 1 ||
|
||||
d.getFullYear() !== Number(yyyy)
|
||||
);
|
||||
}
|
||||
|
||||
export function parseDdmmyyyy(value: string): Date {
|
||||
const m = value.match(DDMMYYYY);
|
||||
if (!m) throw new Error(`Date is not DD-MM-YYYY: ${value}`);
|
||||
const [, dd, mm, yyyy] = m;
|
||||
const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
|
||||
if (
|
||||
Number.isNaN(d.getTime()) ||
|
||||
d.getDate() !== Number(dd) ||
|
||||
d.getMonth() !== Number(mm) - 1 ||
|
||||
d.getFullYear() !== Number(yyyy)
|
||||
) {
|
||||
throw new Error(`Invalid date: ${value}`);
|
||||
}
|
||||
return d;
|
||||
}
|
||||
|
||||
export function apiErrorMessage(e: any): string {
|
||||
if (e?.response?.data) {
|
||||
const d = e.response.data;
|
||||
if (Array.isArray(d)) return d.map((x: any) => x?.msg ?? String(x)).join("; ");
|
||||
if (typeof d.detail === "string") return d.detail;
|
||||
if (typeof d.detail?.msg === "string") return d.detail.msg;
|
||||
if (typeof d === "string") return d;
|
||||
}
|
||||
return e?.message ?? "Request failed";
|
||||
}
|
||||
|
||||
export function groupTypeEnum(schemas: Record<string, any>): string[] {
|
||||
return schemas?.GroupSpec?.properties?.group_type?.enum ?? [];
|
||||
}
|
||||
|
||||
export function groupValueFk(schemas: Record<string, any>): { resource?: string; prefetch?: boolean } | null {
|
||||
const fk = schemas?.GroupSpec?.properties?.group_value?.["x-fk"];
|
||||
return fk && typeof fk === "object" ? fk : null;
|
||||
}
|
||||
|
||||
export function metricLabels(schemas: Record<string, any>): MetricLabel[] {
|
||||
const props: Record<string, any> = schemas?.ReportMetrics?.properties ?? {};
|
||||
return Object.entries(props)
|
||||
.filter(([, p]) => p && typeof p === "object")
|
||||
.map(([key, p]) => ({
|
||||
key,
|
||||
label: (p as any)["x-label"] ?? key,
|
||||
order: (p as any)["x-order"] ?? Infinity,
|
||||
}))
|
||||
.sort((a, b) => a.order - b.order);
|
||||
}
|
||||
|
||||
export function periodHints(granularity: string): string[] {
|
||||
const y = new Date().getFullYear();
|
||||
switch (granularity) {
|
||||
case "weekly":
|
||||
return [`${y}-W01`, `${y}-W26`];
|
||||
case "monthly":
|
||||
return [`${y}-Jan`, `${y}-Feb`];
|
||||
case "quarterly":
|
||||
return [`${y}-Jan-Mar`, `${y}-Apr-Jun`];
|
||||
case "yearly":
|
||||
return [`${y - 1}`, `${y}`];
|
||||
default:
|
||||
return [`${y}-Jan`, `${y}-W01`, `${y}-Jan-Mar`, `${y}`];
|
||||
}
|
||||
}
|
||||
|
||||
function dateVal(value: string): number {
|
||||
try {
|
||||
return parseDdmmyyyy(value).getTime();
|
||||
} catch {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
export function groupMatches(group: ReportGroupLike, filter: SliceFilter): boolean {
|
||||
const key = parseCacheKey(group.key);
|
||||
if (filter.period && filter.period !== "*") {
|
||||
if (!key.period || key.period.label !== filter.period) return false;
|
||||
}
|
||||
if (filter.payee && filter.payee !== "*") {
|
||||
if (!key.payee || key.payee.label !== filter.payee) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export function aggregateSlice(groups: ReportGroupLike[], filter: SliceFilter): SliceSummary {
|
||||
let sum = 0;
|
||||
let count = 0;
|
||||
let spent = 0;
|
||||
let income = 0;
|
||||
let min: number | null = null;
|
||||
let max: number | null = null;
|
||||
let firstDate: string | null = null;
|
||||
let lastDate: string | null = null;
|
||||
let currency = "INR";
|
||||
const txns: any[] = [];
|
||||
const seen = new Set<string>();
|
||||
|
||||
for (const group of groups) {
|
||||
if (!groupMatches(group, filter)) continue;
|
||||
const m = group.metrics ?? {};
|
||||
if (typeof m.sum === "number") sum += m.sum;
|
||||
if (typeof m.count === "number") count += m.count;
|
||||
if (typeof m.min === "number") min = min === null ? m.min : Math.min(min, m.min);
|
||||
if (typeof m.max === "number") max = max === null ? m.max : Math.max(max, m.max);
|
||||
if (m.first_date && (!firstDate || dateVal(String(m.first_date)) < dateVal(firstDate))) {
|
||||
firstDate = String(m.first_date);
|
||||
}
|
||||
if (m.last_date && (!lastDate || dateVal(String(m.last_date)) > dateVal(lastDate))) {
|
||||
lastDate = String(m.last_date);
|
||||
}
|
||||
for (const txn of group.txns ?? []) {
|
||||
if (txn?.id != null) {
|
||||
if (seen.has(txn.id)) continue;
|
||||
seen.add(txn.id);
|
||||
}
|
||||
txns.push(txn);
|
||||
const amt = Number(txn?.amount ?? 0);
|
||||
if (amt < 0) spent += Math.abs(amt);
|
||||
else income += amt;
|
||||
const c = txn?.account?.currency;
|
||||
if (c) currency = c;
|
||||
}
|
||||
}
|
||||
|
||||
return { sum, count, avg: count ? sum / count : null, min, max, firstDate, lastDate, txns, spent, income, currency };
|
||||
}
|
||||
|
||||
export function buildPivot(groups: ReportGroupLike[], periodOrder: string[], payeeOrder: string[]): PivotTable {
|
||||
const payees = payeeOrder.filter((payee) =>
|
||||
groups.some((g) => parseCacheKey(g.key).payee?.label === payee),
|
||||
);
|
||||
const totals = payees.map((payee) => ({ payee, sum: 0, count: 0 }));
|
||||
const rows: PivotRow[] = [];
|
||||
|
||||
for (const period of periodOrder) {
|
||||
const periodGroups = groups.filter((g) => parseCacheKey(g.key).period?.label === period);
|
||||
if (periodGroups.length === 0) continue;
|
||||
const cells = payees.map((payee, i) => {
|
||||
const cellGroups = periodGroups.filter((g) => parseCacheKey(g.key).payee?.label === payee);
|
||||
const sum = cellGroups.reduce((s, g) => s + (g.metrics?.sum ?? 0), 0);
|
||||
const count = cellGroups.reduce((s, g) => s + (g.metrics?.count ?? 0), 0);
|
||||
totals[i].sum += sum;
|
||||
totals[i].count += count;
|
||||
return { payee, sum, count };
|
||||
});
|
||||
rows.push({
|
||||
period,
|
||||
cells,
|
||||
periodSum: cells.reduce((s, c) => s + c.sum, 0),
|
||||
periodCount: cells.reduce((s, c) => s + c.count, 0),
|
||||
});
|
||||
}
|
||||
|
||||
return { rows, payees, totals };
|
||||
}
|
||||
|
||||
export function buildTxnFieldConfigs(resources: ResourceConfig[]): TxnFieldConfigs | null {
|
||||
const expensesRes = resources.find((r) => r.name === "expenses");
|
||||
const entitiesRes = resources.find((r) => r.name === "entities");
|
||||
const accountsRes = resources.find((r) => r.name === "accounts");
|
||||
const find = (res: ResourceConfig | undefined, name: string) => res?.fields.find((f) => f.name === name);
|
||||
const entity = find(expensesRes, "entity");
|
||||
const amount = find(expensesRes, "amount");
|
||||
const account = find(expensesRes, "account");
|
||||
const occurredAt = find(expensesRes, "occurred_at");
|
||||
const logo = find(entitiesRes, "logo");
|
||||
if (!entity || !amount || !account || !occurredAt || !logo) return null;
|
||||
return {
|
||||
entity,
|
||||
amount,
|
||||
account,
|
||||
occurredAt,
|
||||
logo,
|
||||
formats: {
|
||||
entity: entitiesRes?.displayFormat ?? "{name}",
|
||||
account: accountsRes?.displayFormat ?? "{name}",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function buildReportFieldConfigs(resources: ResourceConfig[]): ReportFieldConfigs | null {
|
||||
const reportsRes = resources.find((r) => r.name === "reports");
|
||||
if (!reportsRes) return null;
|
||||
const find = (name: string) => reportsRes.fields.find((f) => f.name === name);
|
||||
const groupLabel = find("group_label");
|
||||
const granularity = find("granularity");
|
||||
const periodLabel = find("period_label");
|
||||
const payee = find("payee");
|
||||
const entityCount = find("entity_count");
|
||||
const generatedAt = find("generated_at");
|
||||
if (!groupLabel || !granularity || !periodLabel || !payee || !entityCount || !generatedAt) return null;
|
||||
return { groupLabel, granularity, periodLabel, payee, entityCount, generatedAt };
|
||||
}
|
||||
@@ -18,6 +18,7 @@ import Home from './Home';
|
||||
import FetchRequests from './FetchRequest/FetchRequestCreate';
|
||||
import FetchRequestDetail from './FetchRequest/FetchRequestDetail';
|
||||
import Expense from './Expense/Expense';
|
||||
import Reports from './Reports/Reports';
|
||||
import { AppProvider, useAppContext, Admin, ProfileRoutes } from '../react-openapi';
|
||||
import { AuthProvider, AuthPage, useAuth, ProfileCreate, ProfileEdit, ProfileView } from "../react-auth";
|
||||
import Header from './Header';
|
||||
@@ -80,6 +81,7 @@ const routerMapping = [
|
||||
{ path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
|
||||
{ path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
|
||||
{ path: "/expenses", component: Expense, headerTitle: "Expenses" },
|
||||
{ path: "/reports", component: Reports, headerTitle: "Reports" },
|
||||
{ path: "/admin/*", component: Admin, headerTitle: "Admin" },
|
||||
{ path: "/profile/*", component: ProfileRoutes, headerTitle: "Profile" },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user