# 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>
142 lines
3.1 KiB
TypeScript
142 lines
3.1 KiB
TypeScript
export type FilterMode = "client" | "server";
|
|
|
|
export interface ResourceConfiguration {
|
|
filterOptions?: {
|
|
mode?: FilterMode;
|
|
};
|
|
/** Map of field name → uiType override (e.g. { amount: "currency" }). */
|
|
fieldTypes?: Record<string, string>;
|
|
}
|
|
|
|
export interface ProfileComponents {
|
|
create?: React.ComponentType<any>;
|
|
edit?: React.ComponentType<any>;
|
|
view?: React.ComponentType<any>;
|
|
}
|
|
|
|
export interface SpecConfiguration {
|
|
specUrl: string;
|
|
baseApiUrl?: string;
|
|
title?: string;
|
|
getToken?: () => string | null;
|
|
resourceConfig?: Record<string, ResourceConfiguration>;
|
|
profileComponents?: ProfileComponents;
|
|
}
|
|
|
|
/** Auth server config extracted from securitySchemes extensions. */
|
|
export interface AuthConfig {
|
|
serverUrl: string;
|
|
loginPath: string;
|
|
registerPath: string;
|
|
logoutPath: string;
|
|
mePath: string;
|
|
introspectPath: string;
|
|
}
|
|
|
|
/** Represents a single operation marked with `x-profile: true` in the spec. */
|
|
export interface ProfileOperation {
|
|
path: string;
|
|
method: string;
|
|
operationId: string;
|
|
summary?: string;
|
|
}
|
|
|
|
export interface ValidationMessage {
|
|
type: "error" | "warning" | "info";
|
|
message: string;
|
|
}
|
|
|
|
export interface ResourceRelationship {
|
|
fieldName: string;
|
|
config: FKFieldConfig;
|
|
targetSchemaName: string;
|
|
}
|
|
|
|
export interface ResourceConfig {
|
|
name: string;
|
|
schemaName: string;
|
|
displayName: string;
|
|
path: string;
|
|
primaryKey: string;
|
|
displayFormat: string;
|
|
listColumns: string[];
|
|
fields: FieldConfig[];
|
|
orderedFields: FieldConfig[];
|
|
operations: {
|
|
list: boolean;
|
|
get: boolean;
|
|
create: boolean;
|
|
update: boolean;
|
|
patch: boolean;
|
|
delete: boolean;
|
|
};
|
|
updateMethod: "put" | "patch";
|
|
pagination: {
|
|
limitParam: string;
|
|
offsetParam: string;
|
|
defaultLimit: number;
|
|
} | null;
|
|
relationships: ResourceRelationship[];
|
|
streaming?: boolean;
|
|
parent?: { resource: string; pathParam: string };
|
|
subResources?: string[];
|
|
}
|
|
|
|
export interface FKFieldConfig {
|
|
resource: string;
|
|
prefetch: boolean;
|
|
/** Target property used as the wire value (defaults to the target's primary key). */
|
|
value?: string;
|
|
}
|
|
|
|
export interface OneOfOption {
|
|
value: string;
|
|
label: string;
|
|
fields: FieldConfig[];
|
|
}
|
|
|
|
export interface FieldConfig {
|
|
name: string;
|
|
label: string;
|
|
description: string;
|
|
type: string;
|
|
format?: string;
|
|
order: number;
|
|
hidden: { form?: boolean; list?: boolean; detail?: boolean };
|
|
filterable: boolean;
|
|
sortable: boolean;
|
|
readOnly: boolean;
|
|
required: boolean;
|
|
enumValues?: string[];
|
|
/** Schema-level `default` used to seed create-form state. */
|
|
defaultValue?: any;
|
|
fk?: FKFieldConfig;
|
|
uiType?: string;
|
|
uploadUrl?: string;
|
|
upload?: { type: string; url: string };
|
|
refSchema?: string;
|
|
inlineDisplayFormat?: string;
|
|
isArray: boolean;
|
|
oneOfOptions?: OneOfOption[];
|
|
discriminatorProperty?: string;
|
|
autocomplete?: "text" | "token" | "email" | "phone";
|
|
}
|
|
|
|
export interface OpenApiSpec {
|
|
openapi: string;
|
|
info: {
|
|
title: string;
|
|
version: string;
|
|
};
|
|
servers?: { url: string }[];
|
|
components?: {
|
|
schemas?: Record<string, any>;
|
|
};
|
|
paths?: Record<string, any>;
|
|
}
|
|
|
|
export interface ParsedListResponse {
|
|
total?: number;
|
|
items?: any[];
|
|
}
|