Reporting SPA
A reporting SPA for filtering, charting, and exporting large datasets.
A company-scoped reporting SPA where multiple report pages share the same table, filter, and chart building blocks wired through reusable composables.
The TypeScript client is auto-generated from OpenAPI on every build (NSwag), so DTOs, enums, and endpoints stay typed end to end.
Tables and charts render from generic API DTOs. New report types need page-level wiring, not new implementations.
Resident waste collection reporting with shared filters, charts, and tables:
Extension-Based Authentication
Auth via a companion browser extension on the government portal: a `useToken` composable requests a JWT through `postMessage`, caches it in `sessionStorage`, and gates routes. Every API call injects Bearer token and company ID automatically.
Schema-Driven Tables
One schema-driven table renders any `TableDto`. Column metadata drives formatting, sticky summary rows, server-side pagination and sorting. Column visibility persists in `localStorage` per route so consultants keep their layout.
Filter Drawer & Saved Templates
A reusable side drawer with expandable filters, date ranges, and saved templates. Large option sets use search, select-all with indeterminate state, and scroll-triggered lazy rendering, staying responsive with thousands of filter values.
CSV Export & Chart Components
CSV exports stream as binary responses without loading data into the DOM, enabling memory-safe exports beyond paginated limits. Chart.js wrappers add custom tooltips, HSL color scales, and scrollable legends, the heaviest page syncs six doughnut charts, a stacked bar, and dual tables through shared filter state.
Deployment Version Checking
A `useVersionCheck` composable polls `/version.json` against a compile-time build timestamp and prompts users to reload when a new deployment lands, so long-lived sessions avoid stale bundles.
Reusable auth, tables, filters, and charts from generic DTOs. Adding a report means wiring building blocks, not rebuilding export or filter logic.