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.
| Field | Details |
|---|---|
| Task code | DES-03 |
| Phase | P0 — Foundations (cadrage, UX/UI, architecture & contract) |
| Product scope | V1 |
| Status | Planned |
| Start | Tue 20 Oct 2026 |
| Due | Tue 20 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 | MOB-04 |
| Milestones | — |
Summary
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.
Description
Day 3 builds every row of the mobile components table (/docs/design/design-system#mobile-components) as design-system components in Claude Design with variants and states, bound to tokens v0.9. The library is the direct input of Imad's MOB-04 (hoco_ui theme, components and widget gallery), which starts right after this day, and of MOB-05 (app shells and system states). It must include everything the 17 Oct decisions require: the guest price lock, customer-type cards, an availability pill that never shows a quantity, a quantity stepper capped by the per-order limit, the advanced-filter sheet parts, active-filter chips, the regional WhatsApp button, the live indicator and order tracker, and the return / after-sales line picker. Scope: reseller and delegate mobile components only; the web layer is DES-04. Screen days 6–14 then only assemble these parts.
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | Actions: button (primary / secondary / tertiary / danger / accent / WhatsApp × lg 52, md 44, sm 36 dp; loading keeps the width), icon button with badge 1–99 and 99+, 56 dp FAB | Akram |
| 2 | Inputs: text field (label above; +213 prefix; password; multiline with counter; search pill), phone field (shows 0555 12 34 56), OTP 6 boxes (« Renvoyer le code dans 0:42 », error, expired), pickers (single, multi, searchable communes, cascading wilaya → commune « 31 — Oran »; offline cached), date picker, multi-select chips field | Akram |
| 3 | Selection: checkbox, radio, switch; chips (filter, input ×, category tile, brand with count, disabled (0)); segmented control with tone variant Faible / Moyen / Élevé; tabs with counts; customer-type radio cards ×3 (Super-gros, Demi-gros, Détail; selected, error, read-only « Contactez HOCO pour modifier ») | Akram |
| 4 | Commerce: product card (grid / list / mini; skeleton, out of stock, in cart, guest lock, promo −20 %). Price block (« Votre prix · Demi-gros », promo struck, locked « Créez un compte pour voir les prix », no quantity tiers). Availability pill En stock / En rupture, never a number. Stepper (at min → delete, at max « Max : 20 pièces par commande », updating, error). Cart line (price changed, « Ajuster » / « Retirer »). Order summary (minimum progress, free delivery, Total TTC, dont TVA). Payment-method cards (CREDIT disabled with the available credit) | Akram |
| 5 | Filter sheet parts: category tree with counts, brand list with logos, two-handle range slider with min/max DA inputs (signed-in only), attribute chips (USB-C / Lightning / Micro-USB, colour swatches), number range with unit (W, mAh, m) and presets « 20 W et plus », yes/no toggle « Charge rapide », toggles En stock uniquement / En promotion / Nouveautés, sort list, sticky footer « Réinitialiser » + « Voir 128 produits ». Active-filter chips row with « Tout effacer » | Akram |
| 6 | Orders and support: order card (live-changed highlight, assisted and first-order badges). Progress tracker: 5 steps Envoyée → Validée → En préparation → Expédiée → Livrée, vertical timeline, En attente hold, Refusée / Annulée / Retournée branches. Live indicator « En direct » / « Reconnexion… » / « Mise à jour en pause — tirez pour actualiser ». Return/after-sales line picker (quantity ≤ delivered; photo required). Message bubbles with resolution card. PDF document row | Akram |
| 7 | Field: visit row (planned, next, done, not done; late, Prioritaire, pending sync; sequence badge, « à 1,2 km »), KPI tile, objective bar, GPS validation banner in its 6 states (acquiring, « Position confirmée · ± 12 m », « Vous êtes à 420 m du point de vente », weak accuracy, GPS off, permission denied), checklist item, photo tile (queued, uploading %, sent, failed, required), QR card, share row, 6-step activation funnel, sync badge (Synchronisé / En attente (n) / Erreur (n) / Hors ligne), map pins | Akram |
| 8 | Navigation: app bar (home greeting, pushed, search, contextual). Bottom nav RA (Accueil · Catalogue · Panier · Commandes · Compte) and DA (Accueil · Tournée · Prospects · Rapports · Compte), with badges and guest-locked items. Bottom sheet, dialog (destructive with reason), snackbar (undo 6 s). WhatsApp support button as FAB, app-bar icon and card (region resolved, closed hours, region unknown → wilaya picker, offline). Sign-up prompt sheet « Commandez aux prix revendeur » | Akram |
| 9 | Feedback and System, built today for MOB-05: status pill (8 tones, sm 20 / md 24), inline alert in 4 tones, empty state (first use vs filtered « Réinitialiser les filtres »), error state with « Réessayer » and the requestId, skeletons, offline banners (reseller « Hors ligne — catalogue en cache, commande impossible », delegate « Hors ligne — vos actions seront synchronisées »), maintenance and forced-update pages, permission rationale. First 5 empty-state illustrations: empty cart, no orders, no results, no tour today, offline | Akram |
| 10 | RTL mirror test on 5 components (app bar, product card, cart line, progress tracker, visit row): direction flipped, chevrons mirrored, check marks, QR codes and phone numbers not mirrored | Akram |
| 11 | Compose a sample screen only from library parts: RA-12 catalog grid with the RA-13 filter sheet open | Akram |
| 12 | Feasibility review: tag each component themed Material widget or custom widget and estimate the custom ones (range slider with facet counts, stepper, tracker, GPS banner, pins, OTP) | Imad |
Deliverables
- Claude Design › Components-Mobile with the sections Actions, Inputs, Selection, Commerce, Orders, Field, Feedback, Navigation, System, used as the shared component library
- Variant properties named like the Flutter parameters (
variant,size,state,tone), with a usage note per component - Imad's Material-vs-custom mapping table with estimates, attached to the Components-Mobile cover
- Sample frame
RA-12 · Catalog · sample-from-library
Acceptance criteria
- Every row of the mobile components table exists with default, pressed, focused and disabled states plus its listed extra states
- No component uses a raw hex, radius or font size: everything is bound to variables or text styles
- Touch targets are 48 × 48 dp or more with 8 dp between them, and informational text is 13 sp or more
- The availability indicator has exactly two values and no quantity variant, the price block has the locked guest variant, and the library has no loyalty or points component
- Five components pass the RTL mirror test
- Imad has tagged and estimated every component
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| NFR-07 | Accessibility: readable contrast, reachable buttons, consistent text sizes, explicit messages | V1 |
Test measures
- Run the design review checklist on the library: responsive layout, states, naming, token binding
- Contrast checks on pills, buttons (including disabled) and selected or unselected chips
- 130 % text scale on the product card, cart line, visit row and KPI tile: prices and status labels are never truncated
Risks
- About 60 components in one day — build MOB-04/05/06's first (actions, inputs, navigation, system, customer-type cards, price lock); finish the Field family by the morning of Day 4.
- Custom widgets turn out more expensive than expected (facet range slider, GPS banner, tracker) — Imad estimates them today; simplify to platform widgets where the requirement allows.
KPI
- Delivered by Tue 20 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-02 — Day 2 — Foundations & design tokens
Colour (brand, neutral, semantic, one colour per lifecycle status), typography (Latin + Arabic pairing), spacing, grid, radii, elevation, icons; tokens exported as JSON for Flutter and Tailwind.
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.