DSH-01 — Back-office foundation — shell, auth, navigation, data patterns
Next.js shell with role-based navigation, sign-in/reset, oRPC + TanStack Query client, HOCO tokens in the UI kit, DataTable/filters/forms/detail patterns, French messages.
| Field | Details |
|---|---|
| Task code | DSH-01 |
| Phase | P1 — V1 build & integration |
| Product scope | V1 |
| Status | Planned |
| Start | Mon 9 Nov 2026 |
| Due | Tue 10 Nov 2026 |
| Responsible | Anis — Full-stack developer |
| Co-responsible | — |
| Effort | 1.25 person-day(s) planned · 5 from scratch · size S |
| Area · app | Back-office · dashboard |
| Depends on | SRV-06, DES-15 |
| Unblocks | DSH-03, DSH-04, DSH-06, DSH-08, DSH-07, DSH-09, DSH-10, DSH-02, DSH-11, DSH-12, WEB-01 |
| Milestones | — |
Summary
Next.js shell with role-based navigation, sign-in/reset, oRPC + TanStack Query client, HOCO tokens in the UI kit, DataTable/filters/forms/detail patterns, French messages.
Description
Every back-office page builds on a common shell and data patterns, so this task sets them up once (AUTH-01, ACL-05, NFR-05…NFR-07; BO-01, BO-02, BO-03, BO-68), using Akram's design system (DES-15). It delivers the Next.js 16 App Router app under [locale] (French in V1, Arabic RTL and English prepared through next-intl), the sign-in page (email or phone + password, lockout message), forgot/reset password, the app shell with navigation filtered by the user's permissions from me.get, global search (admin.search), the notifications bell, Mon profil with sessions list and revocation, and the shared building blocks: oRPC client with TanStack Query, error-envelope toasts, DataTable with server pagination (page, pageSize, sort, order) and URL-synced filters, TanStack Form + Zod forms from packages/contracts, detail layouts, EnumPill from enums.json tones and reason dialogs. Out of scope: module pages (DSH-02…DSH-13).
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | HOCO tokens (colours, typography, spacing, radii, status tones) in @hoco/ui with Tailwind 4 theme, from DES-15 | Anis |
| 2 | BO-01 sign-in (« Se connecter »), BO-02 forgot/reset password, middleware redirects, session cookie on .hoco.dz, re-auth dialog for sensitive actions | Anis |
| 3 | BO-03 shell: sidebar navigation per permission (<Can permission>), breadcrumb, global search command palette (admin.search), notifications bell | Anis |
| 4 | oRPC client in @hoco/api-client with TanStack Query (query keys per module, invalidation helpers) and error toasts from the envelope | Anis |
| 5 | DataTable (TanStack Table): server pagination, sort, column visibility, row selection, bulk actions, CSV export trigger, URL-synced filters | Anis |
| 6 | Form kit: TanStack Form + Zod schemas from contracts, field errors from 422 details, unsaved-changes guard | Anis |
| 7 | Detail page layout, tabs, timeline component, EnumPill, reason dialog fed by reference lists, empty/loading/error states | Anis |
| 8 | BO-68 Mon profil: personal data, password change, sessions list and revoke | Anis |
| 9 | next-intl setup with fr messages, RTL-ready layout for ar, date/money formatting (1 250,00 DA, Africa/Algiers) | Anis |
| 10 | Design review of the shell, table and form patterns against the Claude Design handoff | Akram |
Deliverables
- apps/dashboard/src/app/[locale]/(auth)/{login,forgot-password,reset-password}/page.tsx
- apps/dashboard/src/app/[locale]/(app)/{layout.tsx,profile/page.tsx}
- packages/ui/src/{tokens,data-table,form,enum-pill,reason-dialog,detail-layout}/
- apps/dashboard/messages/{fr,ar,en}.json
Acceptance criteria
- A STOCK_MANAGER sees only the menu entries their permissions allow, and direct navigation to a forbidden page shows a 403 page (ACL-05)
- Five wrong passwords show the lockout message from the AUTH_LOCKED error (AUTH-01)
- Tables paginate, sort and filter on the server and the state survives a page reload through the URL
- A 422 response highlights the faulty fields with the localised messages
- Pages are usable at 1024 px tablet width and on large screens (NFR-05); text contrast meets WCAG AA (NFR-07)
- Revoking a session from Mon profil signs that device out
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| AUTH-01 | Back-office staff sign-in (email or phone + password) | V1 |
| ACL-05 | Every API operation enforces permission and scope server-side; UI hides what the user cannot do | V1 |
| NFR-05 | Back-office usable on desktop, tablet and large screens | V1 |
| NFR-06 | French in V1; Arabic (RTL) and English prepared from day one | V1 |
| NFR-07 | Accessibility: readable contrast, reachable buttons, consistent text sizes, explicit messages | V1 |
Screens
| Screen | Name | App |
|---|---|---|
| BO-01 | Sign in | BO |
| BO-02 | Forgot / reset password | BO |
| BO-03 | App shell: navigation by role, global search, notifications | BO |
| BO-68 | My profile & sessions | BO |
API surface
| Endpoint group | Operations |
|---|---|
| Authentication & sessions | 10 |
| Me, devices, app config & reference data | 9 |
Test measures
- Component tests for DataTable, form kit and Can gating (Vitest + Testing Library)
- Playwright e2e: sign in, navigate by role, sign out
- Visual check against the Claude Design shell with Akram
Risks
- Design system arrives late (DES-15) — start with neutral tokens and swap values; components only consume tokens
KPI
- Delivered by Tue 10 Nov 2026 within 1.25 person-day(s).
- Every acceptance criterion above demonstrated before hand-off; linked requirements' acceptance criteria pass.
- Zero open critical defects, permission gaps or data-integrity regressions at sign-off.
Generated from content/plan/tasks.json by scripts/generate-team-tasks.mjs. Dates are computed by the scheduler (Sunday–Thursday weeks, holidays excluded) — change the plan, not this page.
SRV-42 — Store the fields the API defines but the database approximated
Give every V1 field the API reference defines its own column and enforce its rules, instead of approximating it from other data.
DSH-03 — Back-office CRM pages
Resellers list and map, reseller 360°, create/edit with duplicate check, validation queue, follow-ups, segments.