# 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 <html>
```

## 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.
