fff-risk-web
A Next.js 16 (Pages Router) risk & compliance dashboard for Funded Futures Family — trader risk, payouts, exposure/hedging reports, and a large security-flag / compliance-case governance suite.
Next.js 16React 19TypeScriptMUI 6Redux ToolkitReact Query 5Axiosecharts / recharts
Because it uses the Next.js Pages Router, pages/** does double duty: it defines the browser-facing routes and hosts the BFF (backend-for-frontend) API layer under pages/api/**.
Three layers, three docs sections
| Layer | What it does | Where it's documented |
|---|---|---|
| Data layer | React Query hooks → Axios → Next.js API routes → upstream Django "Risk API" | API & BFF layer |
| Authorization layer | Live, capability-keyed RBAC that treats cookies/Redux as bootstrap-only and fails closed on anything high-risk | Auth & session |
| UI layer | A generic ui/ kit + MUI theme, a large components/ library of business/domain widgets, and per-feature pages | Domain components, UI kit & theming |
Other architecture pages:
- State management — Redux Toolkit, React Query config, utility hooks
- Dashboard module & routing — how routes map to feature modules
- Config, types & tooling — constants, shared types, build/lint/test config
Diagrams
- User flow — the login → 2FA → live capability check → gated dashboard entry mechanism, with every fail-closed branch
- Full system flow — how this frontend fits into the wider FFF backend ecosystem
Reference
- Page & Action Catalog — every route in the app, its sub-modules, and every button/filter/mutation available on it (31 pages across 6 clusters)
:::tip Convention
Nearly every feature follows the same triad: a use<Feature> hook (data + local state), a <Feature>UI.tsx component (presentation), and one or more React Query hooks in api/hooks/dashboard/*.hook.ts. Once you've read one feature folder, most others read the same way.
:::