Vishesh 'ironeagle' Bangotra
2add23efe7
# MR: Reports frontend — spec-driven generate form, sliceable viewer, dimension bars
**Branch:** `cached-reporting` → **Target:** `main`
## Summary
Reports UI rebuilt to treat the backend OpenAPI spec as the source of truth: the
generate-report form renders generically from `ReportQuery`, and the viewer displays
API-computed metrics verbatim instead of recomputing them client-side.
## Changes
### react-openapi (library)
- `MultiEnumField` renderer for array-of-enum fields; dispatch branch in
`FormFieldRenderer`
- `useFkFieldOptions` hook + `FKFieldConfig.value` (FK options keyed by a non-PK
field — accounts resolve by `name`)
- `FieldConfig.defaultValue` seeding in `extractFields`; enum lift for
`items.enum` arrays; sanitize-payload bypasses FK resolution when `fk.value` is set
### Reports page
- **GenerateReportPanel**: rewritten (~275 → ~110 lines) — fields extracted from the
served `ReportQuery` schema (labels, order, defaults, multi-enum, account picker);
server-side validation only
- **ReportViewer**:
- Period groups built from cube buckets keyed by canonical `period_id`; buckets
merged per period (disjoint slices), txn ids deduped
- Cards/bars/metric strips read `metrics` verbatim (outflows/inflows/sum/count/
avg/min/max/cadence/frequency); Net = one subtraction at render
- Dimension-switchable bar strip (Period / Payees / Tags): segmented pill control
with sliding indicator; pills disabled when the report has ≤1 distinct value;
top-10 bars in a fixed view paged by chevrons (hidden scrollbar)
- Active dim requests the full distribution via `payee=*` / `tags=*` when its own
filter is unselected; explicit selections always slice normally
- **TransactionList**: shared component with optional `groups` prop (API periods +
metrics) used by the viewer; Expense page keeps the client-side fallback path;
group strip shows Sum · Avg · Min · Max · Cadence (or Frequency /day when
cadence < 1)
### Fixes
- Strict DD-MM-YYYY parsing (`parseOccurredAt`) in period merges and date ordering —
`new Date()` mis-read dates as MM-DD-YYYY and corrupted merged cadence
(Aug Zomato: 12.89 days displayed vs 0.76 actual)
- Bar widths magnitude-based so all-outflow slices render at proper width
Reviewed-on: #16
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
const DDMMYYYY = /^(\d{2})-(\d{2})-(\d{4})$/;
|
|
|
|
export function parseOccurredAt(value?: string): Date {
|
|
const m = value?.match(DDMMYYYY);
|
|
if (!m) {
|
|
throw new Error(`Expense occurred_at is not DD-MM-YYYY: ${value}`);
|
|
}
|
|
const [, dd, mm, yyyy] = m;
|
|
const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
|
|
if (
|
|
Number.isNaN(d.getTime()) ||
|
|
d.getDate() !== Number(dd) ||
|
|
d.getMonth() !== Number(mm) - 1 ||
|
|
d.getFullYear() !== Number(yyyy)
|
|
) {
|
|
throw new Error(`Invalid expense occurred_at date: ${value}`);
|
|
}
|
|
return d;
|
|
}
|
|
|
|
export function isDdmmyyyy(value?: string): boolean {
|
|
if (!value) return true;
|
|
const m = value.match(DDMMYYYY);
|
|
if (!m) return false;
|
|
const [, dd, mm, yyyy] = m;
|
|
const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
|
|
return !(
|
|
Number.isNaN(d.getTime()) ||
|
|
d.getDate() !== Number(dd) ||
|
|
d.getMonth() !== Number(mm) - 1 ||
|
|
d.getFullYear() !== Number(yyyy)
|
|
);
|
|
}
|
|
|
|
export function parseDdmmyyyy(value: string): Date {
|
|
const m = value.match(DDMMYYYY);
|
|
if (!m) throw new Error(`Date is not DD-MM-YYYY: ${value}`);
|
|
const [, dd, mm, yyyy] = m;
|
|
const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
|
|
if (
|
|
Number.isNaN(d.getTime()) ||
|
|
d.getDate() !== Number(dd) ||
|
|
d.getMonth() !== Number(mm) - 1 ||
|
|
d.getFullYear() !== Number(yyyy)
|
|
) {
|
|
throw new Error(`Invalid date: ${value}`);
|
|
}
|
|
return d;
|
|
}
|
|
|
|
export function monthKey(value?: string): string {
|
|
const d = parseOccurredAt(value);
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
|
|
}
|
|
|
|
export function currentMonthKey(): string {
|
|
const now = new Date();
|
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
|
|
}
|
|
|
|
export function monthLabel(key: string): string {
|
|
const [y, m] = key.split("-").map(Number);
|
|
if (!y || !m) return key;
|
|
const d = new Date(y, m - 1, 1);
|
|
return d.toLocaleDateString("en-IN", { month: "long", year: "numeric" });
|
|
}
|
|
|
|
export function dateLabel(value: string): string {
|
|
const d = parseOccurredAt(value);
|
|
return d.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
|
|
} |