NBA Calculator: practitioner web app

The web version of the practitioner app for Nigerian lawyers and NBA branches. A practitioner calculates the prescribed minimum fee under the Legal Practitioners (Remuneration) Order, 2023, issues an invoice their client pays into the branch account, uploads the payment slip, and receives a Certificate of Compliance that anyone can verify by its RBIN.

It mirrors the Expo mobile app in the NBA APP repository, which is the source of truth for fee rules and screen design. The database (Supabase: auth, PostgreSQL, row-level security, storage) is shared with that app and the branch admin console, and its schema lives in NBA APP/supabase/migrations, not here.

Setup

Node 24.

npm ci
cp .env.example .env.local   # Windows PowerShell: Copy-Item .env.example .env.local
npm run dev                  # http://localhost:3000

.env.local needs three public values:

Variable	What it is
NEXT_PUBLIC_SUPABASE_URL	Project URL, from Supabase settings
NEXT_PUBLIC_SUPABASE_ANON_KEY	Publishable (anon) key. Never a service-role key
NEXT_PUBLIC_VERIFICATION_URL	Host printed into certificate QR codes. Must match mobile's EXPO_PUBLIC_VERIFICATION_URL and must not change once real certificates are issued

In Supabase Auth, allow /auth/callback and /auth/callback?flow=recovery as redirect URLs for each origin.

Scripts

Command	Does
npm run dev	Development server
npm run typecheck	Generates route types and runs TypeScript
npm run lint	ESLint
npm test	Unit tests (node --test, TypeScript run natively by Node 24)
npm run build / npm run start	Production build and server

Run all four checks before a pull request. Creating an invoice writes to the shared database, so test with a test account.

Where things live

Path	Holds
app/	Pages and server routes: calculator (/), transactions and invoices, certificates, profile, /verify, /membership, /administrator-account, /offline
proxy.ts	Sign-in check, and the membership and administrator redirects
components/mobile/	The design system ported from mobile: screen, card, button, fields, badges, states, dialog, stepper, app shell, offline banner
components/<feature>/	Screens by feature: auth, calculator, transactions, certificates, profile, membership, verify, onboarding
lib/fees/	The fee engine (ported from mobile) and its tests
lib/pdf/	Server-drawn invoice and certificate PDFs
lib/ (other)	Data loading and validation per feature, access rules, helpers
public/sw.js	The service worker
prompts/	The plan and verification record for each piece of work (git-ignored; add with git add -f)

Design tokens (colours, text sizes, radii, fonts) are in app/globals.css. Use the token classes (bg-primary, text-body, rounded-card) and the components/mobile kit rather than hard-coded sizes or colours.

Installable and offline

• The app has a web manifest (app/manifest.ts), so browsers offer to install it. Installed, it opens in its own window with the NBA icon.
• public/sw.js runs in production builds only (set NEXT_PUBLIC_ENABLE_SW=true to try it under next dev).
• Cached: the /offline page and static files (build assets, fonts, icons, onboarding images).
• Never cached: signed-in pages, API responses, PDFs and uploads, because they hold personal data and payment status changes.
• Offline, any page shows /offline, where the fee calculator works in full. Actions that need the server are disabled with an "Offline" label, and a banner explains what still works.
• Fonts and icons are served from this origin; nothing is fetched from Google at runtime.

Roles

Practitioners use this app. Branch administrators and super administrators are separate accounts that work in the admin console; this app sends them to /administrator-account. The database, not this app, is what enforces that.