ERP_Distribution/distribution_fe/docs/plan.md

Distribution System — Frontend Plan

Stack

• Framework: Next.js (App Router)
• UI: shadcn/ui + Base UI primitives
• Icons: Hugeicons (@hugeicons/react)
• Fonts: Outfit (body), Nunito Sans (headings), Geist Mono (mono)
• Auth: Mock context now → real API once backend is ready

---

Done

Area	Details
Project scaffold	Next.js + shadcn/ui initialised
Layout	Dashboard shell with collapsible sidebar, mobile bottom nav
Navigation	All module groups and routes defined in config/nav.ts
Auth context	Role-based permission system (admin / warehouse / sales) with mock users
Data table shell	Reusable DataTable, TableToolbar, TablePagination components
404 page	app/not-found.tsx with user assurance copy and navigation CTAs
API types	Full backend contract in types/api.ts — all response shapes, enums, PaginatedResponse<T>
API client	lib/api.ts (axios instance, auth headers, 401 redirect, error helper) + lib/api/ module functions for all 11 domains

---

Module Build-out

Ordered by data dependency — each module can only work once the modules above it have data. Each needs: list page → create form → edit form.

1. Network — no dependencies

• Regions — list, create, edit
• Routes — list, create, edit (depends on: Regions)
• Vehicles — list, create, edit
• Warehouses — list, create, edit

2. Catalogue — no dependencies

• Categories — list, create, edit
• Brands — list, create, edit
• UOMs — list, create, edit (with conversion factors)
• Items — list, create, edit (depends on: Categories, Brands, UOMs)

3. Suppliers — no dependencies

• Suppliers — list, create, edit

4. Users & Access — no dependencies

• Roles — list, create, edit (with permission assignment)
• Users — list, create, edit (depends on: Roles)

5. Stores — depends on: Routes

• Stores — list, create, edit

6. Drivers — depends on: Users

• Driver Profiles — list, create, edit
• Compliance — manage enforcement config

7. Pricing — depends on: Regions, Items

• Price Lists — list, create, edit
• Schemes — list, create, edit

8. Procurement — depends on: Suppliers, Items, Warehouses

• Purchase Orders — list, create, view
• Goods Receipt (GRN) — list, receive against PO

9. Operations — depends on: Vehicles, Drivers, Routes, Warehouses

• Rides — list, view, manage status
• Loading Sheets — list, dispatch, receive (depends on: Rides, Items)
• Delivery Tasks — list, view (depends on: Rides, Stores)

10. Sales & Orders — depends on: Stores, Items, Rides

• Sales — list, create, view
• Orders — list, view
• Payments — list, record

11. Stock — depends on: all above

• Stock Balances — list, filter by location/item
• Stock Movements — list, filter by type

---

Pending Infrastructure

• Real auth — wire login page to backend, store JWT, refresh flow
• API client — typed fetch wrapper with auth headers and error handling
• Toast / notification system — shadcn toast component (Toaster in root layout, toast.add / toast.promise API)
• Form validation library — react-hook-form + zod + @hookform/resolvers; shadcn field component; lib/form.ts barrel; components/shared/form-field.tsx reusable Controller wrapper
• Dashboard — KPI cards and summary widgets (depends on backend)

---

Conventions

• All collection endpoints must have pagination — no exceptions (server-side preferred).
• Pages live in app/(dashboard)/<module>/page.tsx.
• Shared UI goes in components/shared/, module-specific UI stays co-located with the page.
• Permissions are checked via useAuth() — never hard-code role names in pages.