DES-04 — Day 4 — Web & back-office components and page templates
Sidebar, top bar, data table with filters/bulk actions, forms, KPI cards, chart styles, drawers, modals, timeline, map markers, uploaders; list/detail/form/settings/dashboard page templates.
| Field | Details |
|---|---|
| Task code | DES-04 |
| Phase | P0 — Foundations (cadrage, UX/UI, architecture & contract) |
| Product scope | V1 |
| Status | Planned |
| Start | Wed 21 Oct 2026 |
| Due | Wed 21 Oct 2026 |
| Responsible | Akram — UI/UX designer |
| Co-responsible | — |
| Effort | 1 person-day(s) planned · 1.25 from scratch · size S |
| Area · app | Design system · design |
| Depends on | DES-02 |
| Unblocks | — |
| Milestones | Design system v1 ready (tokens + components) |
Summary
Sidebar, top bar, data table with filters/bulk actions, forms, KPI cards, chart styles, drawers, modals, timeline, map markers, uploaders; list/detail/form/settings/dashboard page templates.
Description
Day 4 builds the web layer of the design system on top of @hoco/ui (Base UI primitives, Tailwind 4, class-variance-authority, Lucide). It covers every row of /docs/design/design-system#web-and-back-office-components, the five back-office page templates (List, Detail with tabs, Form, Settings, Dashboard) and the reseller-web shell with its catalog filter sidebar. 45 of the 66 V1 back-office pages are template pages, so these templates decide whether Days 15–19 fit. Inputs: tokens v0.9, the existing @hoco/ui components (button, badge, card, input, label, separator, skeleton) and NFR-05 (desktop, tablet, large screens). Consumers: Anis's DSH-01 (shell, DataTable, filter, form and detail patterns), then DSH-02…DSH-13 and WEB-01…WEB-05. The day ends with the milestone « Design system v1 ready (tokens + components) » and client checkpoint 1.
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | Navigation: ink sidebar (256 expanded, 72 rail at 1024–1279, drawer below 1024; items hidden without permission, never greyed; counters on Commandes à confirmer, Validation des comptes, Retours et SAV). Top bar 64 px (Ctrl K search, notifications, user menu, « Temps réel interrompu », STAGING badge). Page header (breadcrumbs, status pill, one primary action, tabs). Command palette. Notification panel | Akram |
| 2 | Data table: comfortable 52 / compact 40 rows; sort, select, expand, group; skeleton, empty, filtered-empty, error, new live row highlight; pinned first column; tabular right-aligned numbers; page sizes 25/50/100. Filter bar: search, 4 inline filters, « Plus de filtres » drawer, chips, saved views, URL-synced. Bulk bar « 3 sélectionnés » | Akram |
| 3 | Orders-to-confirm row (BO-41 queue variant): control icons with text for stock, credit, price, minimum amount and address; age « depuis 3 h »; channel; assisted and first-order badges; live new-row highlight | Akram |
| 4 | Forms: money input with a DA suffix (formats on blur, stores centimes), number with unit (W, mAh), async combobox (from 2 characters), date range with presets (Aujourd'hui, 7 derniers jours, Ce mois-ci, Mois dernier, Personnalisé), 1–2 column layout with a sticky « Enregistrer / Annuler » bar and a leave guard, uploader (1:1 product, 2:1 banner, document; type and size errors), wizard stepper (upload → mapping → rapport → confirmation → résultat) | Akram |
| 5 | Domain editors. Three-price editor: Super-gros / Demi-gros / Détail HT with TTC shown, VAT rate, recommended price, purchase price masked without permission, history. Attribute definition editor: key, libellé, type list / number / yes-no, unit, values, widget chips / range / toggle, order, in-use warning. Permission matrix 18 modules × 7 actions. Status transition menu showing allowed transitions only, with a reason dialog | Akram |
| 6 | Overlays and feedback: drawer 480/640, modal sm/md/lg including a required-reason variant, toast (at most 3; undo 6 s on order confirmation and account approval), inline alerts, activity timeline with diff « Quantité 10 → 8 », composer with an amber « Note interne », proof viewer (zoom, rotate, download) | Akram |
| 7 | KPI card (value, delta with arrow and sign « ▲ +12 % vs période précédente », sparkline, « Mis à jour à 10:32 », no-data « — ») and chart card (line, ranked bar, stacked and donut with 5 parts or fewer, table view) using the data-viz palette | Akram |
| 8 | Maps and planning: map panel (markers, clusters, zone polygons, live delegate avatars greyed when older than 15 min, track, legend), kanban column per DeliveryStatus (drop allowed or forbidden), week calendar (delegates × days) and month calendar with TourStatus-toned chips | Akram |
| 9 | Five templates with annotated slots at 1440, plus 1280, 1920 and tablet 1024/768: List (BO-27 sample), Detail with tabs (BO-11 skeleton), Form (BO-12), Settings (BO-64), Dashboard (BO-04) | Akram |
| 10 | Reseller-web shell: header for guest and signed-in (logo, search, categories menu, favourites, cart badge, live dot, account), catalog filter sidebar 280 px (category tree, brand multi-select, price range for signed-in users only, attribute filters with counts, « Afficher plus » after 6, drawer below 1024), WhatsApp button fixed bottom right, footer | Akram |
| 11 | Feasibility review: map each component to an existing @hoco/ui component, an extension of one, or to build | Anis |
| 12 | Client checkpoint 1 (30 min): colours, type, status pills, product card, order card, visit row, price lock, WhatsApp button, and what the reference audit keeps, fixes or postpones | Akram |
Deliverables
- Claude Design › Components-Web with the sections Primitives, Data, Navigation, Overlays, Maps & planning, Templates, Reseller web shell
- Five annotated page templates, each slot defined (title, filters, columns, row and bulk actions, tabs, permission, empty copy)
- A component →
@hoco/uimapping table (exists / extend / to build) reviewed by Anis - Checkpoint 1 notes in the decision register (direction on colours, density and tone)
Acceptance criteria
- Every web component row exists with default, hover, focus-visible and disabled states plus its extra states
- Templates are shown at 1280, 1440, 1920 and tablet widths; tables scroll inside their card, never the page
- Web status pills use the same Status variables as mobile (8 tones)
- The RW sidebar price filter is marked signed-in only, and no reseller-web component shows a stock quantity
- A focus ring is visible on every interactive web component, and click targets are 24 px or more (36 px in practice)
- Anis has reviewed the library and every component has a mapping status
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| NFR-05 | Back-office usable on desktop, tablet and large screens | V1 |
| NFR-07 | Accessibility: readable contrast, reachable buttons, consistent text sizes, explicit messages | V1 |
Test measures
- Keyboard walkthrough of a template prototype: tab order, focus trapped in modals, Esc closes
- Contrast checks on the sidebar (neutral.200 on ink, 13.71:1), table headers and disabled controls
- Responsive check of the templates at 1024 (rail) and 768 (drawer)
Risks
- Back-office pages drift from the templates on Days 15–19 — every template page must be a filled page spec on one of the five templates; a new layout needs Anis's agreement.
- Chart styling conflicts with the chart library Anis picks for DSH-02 — confirm the library before detailing chart tooltips and axes.
KPI
- Delivered by Wed 21 Oct 2026 within 1 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.
DES-03 — Day 3 — Mobile component library
Buttons, inputs, selects, steppers, chips, status badges, product/order/visit/KPI cards, list rows, app bars, bottom nav, tabs, sheets, dialogs, snackbars, skeletons, empty/error states.
DES-05 — Day 5 — Screen inventory validation, user flows & wireframes
Validate the inventory on this site (count, features per screen, states), draw the reseller, delegate and back-office flows, wireframe checkout, the visit flow and tour closing.