# Frontend Architecture — Accounting ## Placement Accounting UI is a **module route** under the SuperApp: - Routes: `frontend/app/accounting/**` - Shell: `frontend/components/accounting/AccountingShell.tsx` - API client: `frontend/lib/accounting-api.ts` → `NEXT_PUBLIC_ACCOUNTING_API_URL` (default `:8002`) - Design system: `frontend/components/ds/*` It is **not** a separate Next.js app. ## Auth & Tenant 1. `AuthGuard` requires a valid platform JWT. 2. `useMe` / `useTenantId` resolve `current_tenant_id`. 3. Every accounting request sets `Authorization: Bearer …` and `X-Tenant-ID`. 4. Onboarding-required users are redirected to `/onboarding`. ## Layers ``` app/accounting/* → pages (server/client routes) components/accounting/* → module shell components/ds/* → shared design system lib/accounting-api.ts → typed HTTP client (no mocks) hooks/useTenantId.ts → tenant context providers/AppProviders → TanStack Query + toasts providers/ColorModeProvider → light/dark class on ``` ## Backend Contract | Area | Prefix | |------|--------| | Foundation | `/api/v1/accounts`, `/api/v1/fiscal` | | Posting | `/api/v1/posting` | | Ledger | `/api/v1/ledger` | | Treasury | `/api/v1/treasury` | | AR/AP | `/api/v1/ar-ap` | | Assets | `/api/v1/assets` | | Payroll | `/api/v1/payroll` | | Reporting | `/api/v1/reporting` | | Compliance | `/api/v1/compliance` | If a screen needs an endpoint that does not exist: **stop**, extend backend, then continue UI. ## ADR alignment - **ADR-010**: UI never invents journal entries; only voucher validate/post/reverse/cancel. - Multi-tenant isolation via header, never client-side filtering alone.