Design plan (21 days)

Akram designs every interface of the ecosystem in Claude Design: the reseller app (RA, Flutter), the delegate app (DA, Flutter, offline-first), the back-office (BO, Next.js) and the reseller web (RW, Next.js). The screen inventory lists 155 screens — 146 in V1, 9 in V2. The V1 screens are designed in 21 working days (tasks DES-01 to DES-21, phase 2 "UX/UI" of the cahier §14); the V2 screens follow later in DES-30.

These 21 days are the first third of V1. Design, development and deployment of V1 fit in three months, and production go-live and the two-week pilot close that frame (see the timeline). Nothing downstream can absorb a design slip, so the plan is built to protect the 21 days: see why the 21 days cannot slip.

The plan has three blocks:

Why the design system comes firstCopy Anchor Link

1. Imad starts building it right after Day 3. MOB-04 (Flutter design system: tokens, theme, components and a widget gallery) depends on DES-03 and starts while Akram is still on Days 4–5. The navigation shells and system states (MOB-05) and the authentication flows of both apps (MOB-06) follow before the reseller-app review. Each of these tasks needs components to exist, not screens.
2. Volume. 146 V1 screens over 15 screen days is almost 10 screens a day. That pace is only possible if Days 6–20 assemble existing components. In the back-office, 45 of the 66 V1 pages are template pages: a page template plus a filled page spec (see Back-office templates).
3. The client references disagree with each other. The 16 reference screens use two delegate navigation models, four back-button styles, three input styles and three money formats (see Reference screens). The design system settles each of these once.
4. Statuses are everywhere. enums.json defines over 50 enums. Every status carries a tone (neutral, info, progress, success, warning, danger, brand, muted) that must render the same in four apps. One status-pill component driven by the tone does this; picking colours screen by screen does not.
5. Accessibility and RTL are cheaper as tokens. Contrast, minimum text sizes, touch targets and logical (start/end) spacing are set on Days 2–3 (NFR-06, NFR-07), so they are never retrofitted screen by screen.
6. Two stacks, one source. Tokens are exported once as JSON and generated into Flutter ThemeExtensions (hoco_ui) and CSS variables (@hoco/ui). See token delivery.

Why the 21 days cannot slipCopy Anchor Link

The design days sit on the critical path of every build track:

• Imad builds while Akram designs. The Flutter design system starts after Day 3. The authentication flows of both apps start right after Day 6. The reseller-app screens (MRA-01 to MRA-05) are built while Akram is still on the back-office days. A late reseller day therefore delays Imad directly, not just Akram.
• Anis builds the back-office, then the reseller web, inside V1. DSH-01 needs Day 15. WEB-01 starts as soon as the back-office foundation exists and needs Day 20. The reseller web is deployed with the rest before the pilot, so Day 20 is real build input, not an early draft.
• The buffer is small. The only design buffer is DES-22, the client feedback round right after handoff, and it is already filled with HOCO's feedback.

How the plan protects the calendar:

DeliverablesCopy Anchor Link

Plan at a glanceCopy Anchor Link

Task	Name	Phase	Dates	Effort	Depends on
DES-01	Day 1 — Kickoff, reference audit & Claude Design setup	P0	Sun 18 Oct	1 d	—
DES-02	Day 2 — Foundations & design tokens	P0	Mon 19 Oct	1 d	DES-01
DES-03	Day 3 — Mobile component library	P0	Tue 20 Oct	1 d	DES-02
DES-04	Day 4 — Web & back-office components and page templates	P0	Wed 21 Oct	1 d	DES-02
DES-05	Day 5 — Screen inventory validation, user flows & wireframes	P0	Thu 22 Oct	1 d	DES-01
DES-06	Day 6 — Reseller app: onboarding & account	P0	Sun 25 Oct	1 d	DES-05
DES-07	Day 7 — Reseller app: home, search & catalog	P0	Mon 26 Oct	1 d	DES-06
DES-08	Day 8 — Reseller app: product, cart & checkout	P0	Tue 27 Oct	1 d	DES-07
DES-09	Day 9 — Reseller app: orders & finance	P0	Wed 28 Oct	1 d	DES-08
DES-10	Day 10 — Reseller app: promotions, notifications, account, support	P0	Thu 29 Oct	1 d	DES-09
DES-11	Day 11 — Delegate app: access, home, profile	P0	Mon 02 Nov	1 d	DES-10
DES-12	Day 12 — Delegate app: tour programme, map & POS sheet	P0	Tue 03 Nov	1 d	DES-11
DES-13	Day 13 — Delegate app: visit, report, prospects, follow-ups	P0	Wed 04 Nov	1 d	DES-12
DES-14	Day 14 — Delegate app: sign-up, invitation, first order, closing	P0	Thu 05 Nov	1 d	DES-13
DES-15	Day 15 — Back-office: shell, access & dashboards	P0	Sun 08 Nov	1 d	DES-14
DES-16	Day 16 — Back-office: CRM	P0	Mon 09 Nov	1 d	DES-15
DES-17	Day 17 — Back-office: catalog, pricing & stock	P0	Tue 10 Nov	1 d	DES-16
DES-18	Day 18 — Back-office: orders, delivery & finance	P0	Wed 11 Nov	1 d	DES-17
DES-19	Day 19 — Back-office: field ops, promotions, support, reports, admin	P0	Thu 12 Nov	1 d	DES-18
DES-20	Day 20 — Reseller web: responsive layouts	P0	Sun 15 Nov	1 d	DES-19
DES-21	Day 21 — Prototypes, design QA & handoff	P0	Mon 16 Nov	1 d	DES-20

21 tasks · 21 d of open effort. Dates are computed — Sunday–Thursday weeks, holidays excluded.

Day 12 has only four screens, but they are the hardest of the delegate app (map, tour programme). Day 19 has 29 pages, but 21 of them are template instances. See risks.

How every screen day worksCopy Anchor Link

Every day from 6 to 20 follows the same routine, so reviews never pile up:

1. Morning. Open the day's inventory rows, their requirements and the reference screens. Agree the list of states with the developer who builds them next (5 minutes, in chat).
2. Design. Assemble from the library. A new component is allowed only when no existing one fits; it goes to Components-Mobile or Components-Web first, never as a one-off frame.
3. Annotate. States, interactions, French copy, data sources (API operation ids), accessibility. Use the annotation conventions.
4. End of day. Move the section to Ready for review. Post the link in the team channel.
5. 15-minute feasibility check. Imad reviews mobile days and Anis reviews back-office and web days, the same afternoon or before 10:00 the next day. The answer is OK, OK with notes (left as comments on the shared design) or Needs change (fixed before the next day's work starts).

Day-by-day planCopy Anchor Link

Day 1 — Kickoff, reference audit & Claude Design setupCopy Anchor Link

Goal. Understand the product, the users and the client's visual intent. Make the Claude Design project ready for 21 days of work.

Inputs. The cahier (in full; screen pages §5–§6.9, non-functional §9, security §10). The 16 client reference screens. The PRD and user flows. The binding product decisions of 17 October: guest mode, three customer-type prices, availability-only stock, advanced filters, regional WhatsApp support, after-sales and returns in V1, live order status, explicit back-office confirmation of every order. The cadrage workshop with HOCO (PRJ-03) runs the same day, and Akram attends.

Work.

• Review the reference audit on Reference screens. Confirm or amend each keep and fix item.
• Send the brand-asset request to HOCO, due by Day 2. It covers: vector logos of HOCO, ACEFAST and BOROFONE (SVG or AI) and any usage rules; 20–30 product photos on a white background, at least 1 000 px square; any existing HOCO brand guide; the legal mentions printed on today's invoices (NIF, NIS, RC, AI), needed later for DQA-09.
• Create the Claude Design project and its pages (Cover, Foundations, Components-Mobile, Components-Web, Reseller App, Delegate App, Back-office, Reseller Web, Prototypes, Archive). Create the status badge component and the annotation kit, and the empty token groups Primitives, Semantic, Status, Spacing, Radius. See project structure.
• Confirm the five principles.

Done when. The Claude Design project is shared with Anis and Imad by link. The cover shows the status legend and naming rules. The asset request has been sent. Open questions from the workshop are logged in the decision register.

Review. Anis (15 minutes, file structure and naming). Feeds. DES-02 and DES-05.

Day 2 — Foundations & design tokensCopy Anchor Link

Goal. Every foundation token exists as a token in Claude Design and is exported as tokens v0.9. Imad starts the Flutter theme right after Day 3, so names must be stable today.

Inputs. The proposed tokens (colour, status tones, typography, spacing, grid, radii, elevation, motion). The provisional values in packages/ui/src/styles/globals.css (@hoco/ui). The tone values in enums.json. NFR-06 (French V1, Arabic RTL prepared) and NFR-07 (accessibility).

Work. Palette (blue, teal, orange, neutral 0–900, semantic colours, one tone per status), the Latin and Arabic type scales for mobile and web, a 4-point spacing scale, grids and breakpoints, radii, shadows, borders and focus ring, the icon set (Lucide, plus custom icons on the same grid), motion durations. Check contrast on every text and background pair.

Claude Design. Page Foundations, frames Colour, Status tones, Typography — Latin, Typography — Arabic, Spacing & grid, Radii & elevation, Icons, Motion.

Done when. Variable names match the naming convention. The contrast table is filled: every text pair is at least 4.5:1 and every UI boundary at least 3:1. hoco.tokens.json v0.9 is exported and sent to Anis, who commits it, and to Imad.

Review. Imad and Anis (15 minutes): do the token names map cleanly to ThemeExtension fields and CSS variables? Feeds. DES-03 and DES-04. The tokens reach MOB-04 and DSH-01.

Day 3 — Mobile component libraryCopy Anchor Link

Goal. Every mobile component exists with its variants and states. This is the input of Imad's Flutter design system.

Inputs. Tokens v0.9. The mobile components table. Reference screens for the product card, order card, visit row, KPI tile and bottom navigation.

Work.

• Build the components. Variant property names follow the Flutter parameter names (variant, size, state, tone).
• Include the components that the new product decisions require: price lock (guest), customer-type cards, availability indicator, the advanced filter sheet parts (range slider, category tree, attribute chips, active-filter chips, result-count button), the WhatsApp support button and the live-update indicator.
• Also build the system-state components now: offline banner, full-page error, maintenance, forced update, empty state and skeletons. MOB-05 builds the app shells and system states before Day 10, when the RA-36 frames are assembled.

Claude Design. Page Components-Mobile, one section per family: Actions, Inputs, Selection, Commerce, Orders, Field, Feedback, Navigation, System.

Done when.

• Every component has the default, pressed, focused, disabled, loading and error states that apply.
• Components resize with their content (no fixed sizes) everywhere.
• Five components pass a mirror test in RTL (layout direction flipped, icons checked).
• One sample screen (catalog grid with the filter sheet) is composed only from library parts.

Review. Imad (mobile feasibility) marks each component themed Material widget or custom widget, and estimates the custom ones. Feeds. MOB-04, Flutter design system and widget gallery.

Day 4 — Web & back-office components and page templatesCopy Anchor Link

Goal. Web components and the five back-office page templates (List, Detail with tabs, Form, Settings, Dashboard), plus the reseller-web layout shell.

Inputs. Tokens v0.9. The existing @hoco/ui components (button, badge, card, input, label, separator, skeleton; Base UI and Tailwind 4). The web components table. The template strategy. NFR-05: desktop, tablet and large screens.

Work.

• Navy sidebar with collapsed rail and tablet drawer, top bar, data table (sorting, selection, bulk actions, density, pagination), filter bar with saved views, forms, KPI card, chart card, drawer, modal, toast, timeline, kanban column, calendar, map panel, uploader, wizard stepper, permission matrix.
• The reseller-web header and the catalog filter sidebar (category tree, brand multi-select, price range, attribute filters, counts).
• Show each template at 1280, 1440 and 1920 px, and at tablet width.

Claude Design. Page Components-Web, sections Primitives, Data, Navigation, Overlays, Maps & planning, Templates, Reseller web shell.

Done when. The five templates are annotated with their slots (see the screen inventory). Every component is mapped to an existing @hoco/ui component or marked to build.

Milestone. Design system v1 ready (tokens + components), the first client checkpoint (see below).

Review. Anis (web feasibility). Feeds. No task depends on DES-04 directly in the plan. Its output is consumed by DSH-01 (HOCO tokens in the UI kit, DataTable, filter, form and detail patterns), which the plan gates on Day 15.

Day 5 — Screen inventory validation, user flows & wireframesCopy Anchor Link

Goal. Freeze the list of screens. Anis and Imad co-own this day.

Inputs. The screen inventory (155 screens), its coverage check, the requirements, the API catalogue and the acceptance scenarios (cahier §12).

Work.

• Walk the Day-5 checklist: counts, requirement coverage, data per screen, states, French names, navigation, the BO-31 price-list question.
• Draw four flows: reseller ordering (guest → sign-up → first order → live tracking), the delegate day, back-office order confirmation and delivery, and after-sales and returns.
• Wireframe the checkout (RA-17/RA-18), the visit flow (DA-08 → DA-10 → DA-12) and tour closing (DA-20) in low fidelity.

Claude Design. Section 00 · Flows & wireframes at the top of the Reseller App, Delegate App and Back-office pages.

Done when. The checklist is ticked. Anis has applied the agreed additions, merges and renames to screens.json. The inventory is frozen; later changes go through change requests.

Milestone. Screen inventory frozen, the second client checkpoint.

Review. Anis (BO, RW) and Imad (RA, DA) in the session itself. Feeds. DES-06 and every screen day.

Day 6 — Reseller app: onboarding, account & guest modeCopy Anchor Link

Goal. A visitor can browse as a guest, sign up (phone, OTP, store, customer type, password), wait for validation, sign in and recover a password.

Inputs. There is no client reference for the reseller onboarding: the reseller set skips number 2. Use the delegate sign-in reference (delegate-01) for the form pattern. Cahier §5 and §6.6. API: auth.otp.send, auth.otp.verify, auth.signup.reseller, auth.login, auth.password.reset, invitations.resolve, reference.wilayas, reference.communes, appConfig.get.

Requirements. ADM-07, AUTH-03, AUTH-04, AUTH-05, AUTH-07, AUTH-08, AUTH-09, AUTH-10, AUTH-11, CRM-01, CRM-09, GEO-01, IVT-04, PRC-02.

Screens.

• RA-01 Splash & version check — Démarrage
• RA-02 Welcome (sign in, sign up, browse as guest) — Bienvenue
• RA-03 Sign-up — phone & invitation code — Inscription — téléphone
• RA-04 OTP verification — Vérification du code
• RA-05 Sign-up — store details, customer type & password — Inscription — magasin
• RA-06 Account pending validation / rejected — Compte en attente
• RA-07 Sign in — Connexion
• RA-08 Forgot password — Mot de passe oublié
• RA-41 Guest mode — price lock and sign-up prompts — Mode invité

States to cover.

• RA-01: loading; forced update (426 UPGRADE_REQUIRED, store link); maintenance (503 MAINTENANCE with end time); offline at launch, with a cached session (home and offline banner) or without one.
• RA-02: first launch; opened from an invitation link, with the code pre-filled as AB12-CD34; the three exits « Créer un compte », « Se connecter » and « Découvrir le catalogue » (guest).
• RA-03:
  • The phone field shows 0555 12 34 56 and stores E.164.
  • Invalid number.
  • Number already registered (PHONE_ALREADY_EXISTS): offer sign-in, or the account claim of a prospect created in the field (AUTH-05). The OTP proves ownership and links the existing record, so no duplicate is created.
  • The optional invitation code is invalid or expired.
• RA-04: six digit boxes with SMS autofill; the code is valid for 5 minutes (countdown); resend unlocks after 60 s (OTP_RESEND_TOO_SOON); at most 5 sends per hour (RATE_LIMITED); 5 wrong attempts (TOO_MANY_ATTEMPTS); expired code.
• RA-05:
  • Store name, owner, wilaya then commune (cascading pickers), address and business type.
  • Customer type: required, three cards Super-gros, Demi-gros and Détail, each with a one-line description and the note « Vérifié par HOCO lors de la validation de votre compte ». It cannot be edited after submission (AUTH-11).
  • Password and confirmation with the rules shown, inline errors, submit loading.
• RA-06:
  • Pending: the reseller already sees the prices of their declared type (default, decision to confirm), but « Commander » is locked with an explanation (ACCOUNT_PENDING_VALIDATION).
  • Rejected: the reason, plus « Contacter l'assistance » with the WhatsApp button.
  • Suspended (ACCOUNT_SUSPENDED): an explicit message.
• RA-07: invalid credentials; 15-minute lockout after 5 failures; routing for pending and suspended accounts.
• RA-08: phone → OTP (reuses RA-04) → new password → success → sign-in.
• RA-41, guest mode: the price lock « Créez un compte pour voir les prix » on cards and product detail; the sign-up prompt sheet triggered by « Ajouter au panier », favourites, the Panier and Commandes tabs and the Compte tab; the guest banner on home; no price facet in filters; the WhatsApp button still available.

Claude Design. Page Reseller App, section RA · Onboarding & account. Example frames: RA-03 · Sign-up — phone & invitation code · error-phone-already-exists, RA-05 · Sign-up — store details, customer type & password · default, RA-41 · Guest mode — price lock and sign-up prompts · sign-up-sheet.

Also on Day 6. Draft the delegate sign-in and reset (DA-02, DA-03) and the delegate splash (DA-01) as variants of RA-07, RA-08 and RA-01: same components, delegate header, no sign-up link. MOB-06 builds the authentication of both apps right after Day 6, before the delegate days. Day 11 finalises these frames (suspended state, consent).

Done when. Every state above has a frame. Every error has its French message (see form patterns). The guest variant of each tab exists.

Review. Imad. The onboarding is built before the reseller-app client review, so HOCO also gets an asynchronous look on Day 7 (a link with 5 questions). Feeds. MOB-06 (RA-02…RA-08, RA-41, DA-02, DA-03) and MOB-05 (RA-01).

Day 7 — Reseller app: home, search, catalog & advanced filtersCopy Anchor Link

Goal. Find a product in under three taps or three seconds (NFR-01), as a guest or signed in.

Inputs. References reseller-01-home and reseller-02-catalog. Cahier §5 and §5.1. API: catalog.home, catalog.products.list, catalog.products.suggest, catalog.products.byBarcode, catalog.facets, catalog.categories, catalog.brands, banners.list, finance.summary, notifications.unreadCount, support.whatsapp.

Requirements. AUTH-10, CAT-07, CAT-10, CAT-11, CAT-12, CAT-13, FIN-10, NOT-01, PRC-05, PRM-05, STK-07, SUP-05.

Screens.

• RA-09 Home — Accueil
• RA-10 Search — Recherche
• RA-11 Barcode scanner — Scanner
• RA-12 Catalog — Catalogue
• RA-13 Advanced filters & sort (price range, category/sub-category, brand, attributes…) — Filtres avancés et tri

States to cover.

• RA-09:
  • Skeleton, then content.
  • Banner carousel with countdown chip (PRM-05).
  • Quick access: Catalogue, Commandes, Promotions, Assistance. The Points tile is removed (loyalty is V2).
  • Popular categories and recommended products.
  • Finance tiles Solde and Crédit disponible (signed-in only).
  • Pending-validation banner, guest banner, unread badge, offline (cached content).
  • The fixed WhatsApp button showing the resolved region.
• RA-10: recent searches, suggestions as you type, results count, no result (offer the scanner and the WhatsApp button), slow network (skeleton after 300 ms).
• RA-11: camera permission prompt, denied and permanently denied; scanning with torch; product found (opens RA-14); unknown barcode with manual entry.
• RA-12:
  • Tabs Nouveautés / Populaires / Promotions, category chips, 2-column grid with cursor pagination.
  • Availability only: En stock or En rupture, never a quantity.
  • Price, or the guest price lock; promo badge; add button that turns into a stepper; favourite toggle.
  • Out-of-stock card (add disabled).
  • Active-filter chips row with « Tout effacer »; empty result after filtering, with « Réinitialiser les filtres ».
• RA-13, a full-height sheet with these sections:
  • Category tree (category, then sub-category, with counts).
  • Brand multi-select with logos and counts.
  • Price range slider with min/max inputs (signed-in only).
  • Attribute filters by type: chips for lists (connector USB-C, Lightning, Micro-USB; colour), range sliders with units (power in W, capacity in mAh, cable length in m), toggles for booleans.
  • Toggles En stock uniquement, En promotion, Nouveautés.
  • Sort options (pertinence, prix croissant, prix décroissant, nouveauté, popularité; cahier §5.1).
  • Sticky footer « Réinitialiser » and « Voir 128 produits », with the live count from catalog.facets. Options with zero results show (0) and are disabled.

Claude Design. Section RA · Shopping. Example frames: RA-12 · Catalog · guest, RA-13 · Advanced filters & sort · attribute-range.

Done when. The guest and signed-in variants of RA-09 and RA-12 exist. The filter sheet is shown for at least two categories with different attribute sets (chargers, cables). The WhatsApp button placement is agreed (see the component).

Review. Imad: facet counts, slider widget, scanner. Feeds. MRA-01 (RA-09) and MRA-02 (RA-10…RA-13).

Day 8 — Reseller app: product, cart & checkoutCopy Anchor Link

Goal. From product to submitted order, with every validation message.

Inputs. References reseller-03-product-detail and reseller-04-cart-checkout. Cahier §5.2 and §5.3. Wireframe of Day 5. API: catalog.products.get, catalog.products.similar, favorites.*, cart.get, cart.items.add, cart.items.update, cart.items.remove, cart.checkoutOptions, cart.checkout, addresses.*.

Requirements. AUTH-10, CAT-08, CAT-09, DLV-06, FIN-02, FIN-05, GEO-01, ORD-01, ORD-02, ORD-03, PRC-05, PRM-04, STK-07.

Screens.

• RA-14 Product detail — Détail produit
• RA-15 Full specifications — Caractéristiques
• RA-16 Favorites — Favoris
• RA-17 Cart — Panier
• RA-18 Checkout — Validation de commande
• RA-19 Address book & address form — Adresses de livraison
• RA-20 Order confirmation — Commande envoyée

States to cover.

• RA-14:
  • Gallery (counter, thumbnails, zoom) and variant selector.
  • Price block: « Votre prix » with the customer type (e.g. Demi-gros), « Prix de vente conseillé », and the promo state (struck original price, discount badge). Guests see the lock instead.
  • Availability En stock or En rupture.
  • Quantity stepper with the minimum, step and maximum per order (« Max : 20 pièces par commande »). There are no quantity tiers in V1.
  • « Ajouter au panier » (primary) and « Commander maintenant ». The second one adds the item and opens the cart; it never checks out a partial cart.
  • Favourite, share, similar and complementary products, unavailable product (404).
• RA-15: specification groups in 14 sp text, never smaller.
• RA-16: list, empty state, an item that went out of stock.
• RA-17:
  • Lines show unit price × quantity = line total.
  • Remove with undo.
  • Price changed since added (PRC-05): a banner naming the lines.
  • Requested quantity no longer available (STOCK_INSUFFICIENT): a line error that never shows the stock figure.
  • Minimum amount not met (ORDER_MIN_AMOUNT_NOT_MET): progress « Plus que 1 250,00 DA pour atteindre le minimum ».
  • Promotions applied, empty cart, cart changed from another device (ORD-01), account pending (checkout locked).
• RA-18:
  • Default address (changes go to RA-19).
  • Delivery mode and fee, with the free-delivery threshold (DLV-06).
  • Payment method among the methods enabled in settings (FIN-02). When Crédit is chosen, the available credit is shown, and CREDIT_LIMIT_EXCEEDED keeps the button disabled with an explanation.
  • Optional note; totals with VAT included; submitting (no double submit, Idempotency-Key); re-validation errors on submit; offline (cannot submit).
• RA-19: list, default address, add and edit form (wilaya, commune, address line, phone), delete with confirmation.
• RA-20: number CMD-2026-000158, status Envoyée, and the explicit next step « HOCO va confirmer votre commande — vous serez notifié ». No order is confirmed automatically (ORD-14). Actions « Suivre ma commande » and « Continuer mes achats ».

Claude Design. Sections RA · Shopping (RA-14…16) and RA · Ordering (RA-17…20). Example frames: RA-17 · Cart · error-min-amount, RA-18 · Checkout · error-credit-limit-exceeded.

Done when. The amounts on every frame add up. Every API error a screen can receive has its message. The reseller-ordering prototype path (RA-12 → RA-14 → RA-17 → RA-18 → RA-20) is linked.

Review. Imad (also checks reuse in the delegate's assisted order, hoco_catalog). Feeds. MRA-03 (RA-14…16), MRA-04 (RA-17…20), and later MDA-09, which reuses the catalog and cart widgets.

Day 9 — Reseller app: orders, returns & financeCopy Anchor Link

Goal. Live order tracking, assisted-order confirmation, return requests, and the reseller's money: balance, credit, invoices, payments.

Inputs. Reference reseller-05-orders-tracking and the finance tiles of reseller-01. Cahier §5.4 and §4.7. API: orders.list, orders.summary, orders.get, orders.cancel, orders.confirmAssisted, orders.rejectAssisted, orders.reorder, orders.document, returns.create, returns.list, returns.get, events.stream, finance.summary, invoices.list, invoices.get, payments.list, payments.declare, files.createUpload.

Requirements. FIN-01, FIN-02, FIN-03, FIN-05, FIN-10, ORD-06, ORD-07, ORD-08, ORD-10, ORD-12, ORD-13, ORD-15, SUP-04.

Screens.

• RA-21 Orders — Commandes
• RA-22 Order detail & tracking — Suivi de commande
• RA-23 Assisted order confirmation — Commande assistée à confirmer
• RA-29 Balance & credit — Solde et crédit
• RA-30 Invoices — Factures
• RA-31 Payments & payment declaration — Paiements
• RA-40 Return request — Demande de retour

States to cover.

• RA-21:
  • Status counters that act as filters (Envoyée, Validée, En préparation, Expédiée, Livrée, plus Toutes). Refusée, Annulée and Retournée are in the filter sheet.
  • Order cards with a mini progress bar; search by number or product; empty; loading.
  • The live-update affordance (ORD-15): a « En direct » dot while the events.stream connection is open. A card whose status changes animates its pill and moves in the list. When the connection is lost: « Mise à jour en pause — tirez pour actualiser ».
• RA-22:
  • A full tracker mapping all 11 order statuses, with branches for Refusée, Annulée and Retournée, and En attente shown as a hold.
  • A dated history; lines changed by the back-office shown as « Quantité ajustée : 10 → 8 ».
  • Invoice and delivery-note PDFs.
  • Cancel with a reason (only while Envoyée or En attente).
  • Reorder, reporting unavailable items.
  • « Signaler un problème », which opens the after-sales claim (RA-33), and « Demander un retour », which opens RA-40 (delivered orders only).
  • Live status change while the screen is open: toast « Commande CMD-2026-000158 : Validée ».
• RA-23: the delegate's name, lines, total and address; expiry countdown (72 h by default), then the Expirée state; confirm, or reject with a reason; already validated by the back-office.
• RA-40:
  • Pick lines and quantities (at most the delivered quantity), a reason, photos.
  • Submit, then show number RET-2026-000012.
  • Tracker Demandé → Accepté → En retour → Reçu → Remboursé / avoir émis, or Refusé with a reason.
  • The credit note link once refunded.
• RA-29: balance, credit ceiling, used and available (bar); overdue warning.
• RA-30: invoice list with status pills; PDF opening (signed URL, loading).
• RA-31: payment list with À vérifier, Confirmé, Rejeté (with reason); declaration form (method, amount, date, reference, proof up to 10 MB), success.

Claude Design. Sections RA · Orders (RA-21…23, RA-40) and RA · Finance. Example frames: RA-22 · Order detail & tracking · live-status-changed, RA-40 · Return request · status-in-transit.

Done when. The tracker mapping table (status → step → tone) is annotated on RA-22. The returns tracker and the after-sales entry points are linked. Live, paused and reconnected states exist.

Review. Imad. Feeds. MRA-05 (RA-21…23), MRA-07 (RA-29…31) and MRA-10 (RA-40 and the live updates of RA-21 and RA-22).

Day 10 — Reseller app: promotions, notifications, account, support & system statesCopy Anchor Link

Goal. Close the reseller app, including the after-sales claim and the regional WhatsApp support.

Inputs. Reference reseller-06-promotions-loyalty, V1 parts only. Cahier §5, §5.5 (V1 part) and §2.1. API: promotions.list, promotions.get, banners.list, notifications.*, announcements.*, profile.*, tickets.*, support.contacts, support.whatsapp, auth.sessions.list, auth.sessions.revoke, auth.password.change.

Requirements. ADM-07, AUTH-06, CRM-01, CRM-10, FIN-10, NFR-06, NFR-07, NOT-01, NOT-02, NOT-06, NOT-07, PRM-01, PRM-04, PRM-05, SUP-01, SUP-03, SUP-04, SUP-05.

Screens.

• RA-24 Promotions & daily offers — Promotions
• RA-25 Promotion detail — Détail de l'offre
• RA-26 Notifications — Notifications
• RA-27 Account hub — Compte
• RA-28 Store profile & documents — Mon magasin
• RA-32 Support: tickets, after-sales claims & WhatsApp — Assistance
• RA-33 New ticket / after-sales claim — Nouvelle demande
• RA-34 Ticket conversation — Conversation
• RA-35 Settings — Paramètres
• RA-36 System states (offline, maintenance, forced update, errors, empty) — États système

States to cover.

• RA-24: banners with countdown; active promotions; « Aucune offre en ce moment »; an offer that ends while it is being viewed.
• RA-25: mechanics (PERCENT_OFF, AMOUNT_OFF, FIXED_PRICE, FREE_DELIVERY), dates, eligible products with add-to-cart, ended state.
• RA-26: unread and read; mark all as read; deep link to the target; empty; the push permission prompt (Android 13 and later).
• RA-27: store name, REV-000123, account status, menu, sign-out.
• RA-28:
  • Store data; fields that are locked after validation; documents (RC, NIF, NIS, AI, ID) with their upload states.
  • Customer type shown read-only, with « Pour le modifier, contactez HOCO » (AUTH-11).
• RA-32:
  • Ticket list with status pills.
  • Assistance WhatsApp card: region name, number, hours, open or closed now.
  • FAQ and phone contact.
• RA-33, two modes:
  • Question / problème: type, related order (optional), message, attachments.
  • After-sales claim (SUP-04): pick a delivered order, then the lines and quantities, the issue (Produit défectueux, Produit endommagé, Mauvais article, Article manquant, Non conforme, Autre), a description and photos. At least one photo is required for a defective, damaged or wrong item.
  • Submit, then show TKT-2026-000045.
• RA-34: messages, attachments; En attente de votre réponse; resolution card (Remplacement, Retour, Avoir, Réparation, Refusée) with a link to the replacement order, return or credit note; closed.
• RA-35: notification preferences (Commandes et compte and Sécurité locked on), sessions and devices with revoke, password change, language (French; Arabic and English shown as coming later), app version, privacy policy.
• RA-36: offline banner; maintenance; forced update; generic error with retry and request id; session expired; permission denied; the empty-state catalogue.

Claude Design. Sections RA · Promotions, RA · Account & support, RA · System. Example frames: RA-33 · New ticket / after-sales claim · after-sales, RA-32 · Support · whatsapp-closed-hours.

Milestone. Reseller app designs ready for client review (third checkpoint): the prototype from guest browsing to live tracking.

Done when. RA-36 is assembled from the Day-3 system components. Every V1 RA frame is at least Ready for review.

Review. Imad. Feeds. MRA-06 (RA-24, RA-25), MRA-07 (RA-27, RA-28, RA-35), MRA-08 (RA-26, RA-32…34), MOB-05 (RA-36).

Day 11 — Delegate app: access, home & profileCopy Anchor Link

Goal. A delegate signs in, gives informed location consent and sees their day at a glance.

Inputs. References delegate-01-login-profile and delegate-02-home. Cahier §6, §6.1 and §10 (geolocation consent). API: auth.login, auth.password.reset, delegate.home, delegate.profile, delegate.zone, delegate.objectives, delegate.tours.today, notifications.unreadCount.

Requirements. ADM-07, AUTH-02, AUTH-07, AUTH-08, AUTH-09, FLD-01, FLD-02, FLD-05, FLD-15, GEO-02, NOT-06, SEC-07.

Screens.

• DA-01 Splash & version check — Démarrage
• DA-02 Sign in — Connexion
• DA-03 Forgot password — Mot de passe oublié
• DA-04 Permissions & location consent — Autorisations et consentement
• DA-05 Home — Accueil délégué
• DA-22 Objectives — Mes objectifs
• DA-24 Profile hub — Compte
• DA-25 My zone — Ma zone
• DA-26 Settings — Paramètres

States to cover.

• DA-01 to DA-03: finalise the Day-6 variants. Add the suspended account with an explicit message (cahier §6 acceptance criterion) and the disabled account.
• DA-04: a rationale screen before the OS prompt. It states what is collected (position at check-in; while a tour is En cours, every 5 minutes or 200 m), how long it is kept (90 days, default) and who sees it. Then: granted, approximate-only (check-in impossible, explain), denied, permanently denied (link to settings); notification and camera permissions just in time.
• DA-05:
  • Greeting, zone, notification and sync badges; KPI tiles (visites prévues / réalisées / nouveaux prospects).
  • Today's tour card driven by TourStatus: Planifiée (no action), À démarrer (« Démarrer la tournée », cahier §6.1), En cours (« Continuer » and the next stop), Suspendue (« Reprendre »), Terminée (summary).
  • No tour today; objective and conversion bars; offline.
• DA-22: metrics (Visites, Inscriptions, Installations, Premières commandes, Commandes, Chiffre d'affaires) by period (Jour / Semaine / Mois): achieved, behind, no objective.
• DA-24: status pill, zone, menu.
• DA-25: wilayas and communes on a map and as a list; number of assigned resellers.
• DA-26: notification preferences, location status and the consent text again, sessions, language. Sign-out is blocked while items wait to sync: « 3 éléments non synchronisés ».

Claude Design. Page Delegate App, sections DA · Access, DA · Day, DA · Profile.

Done when. The consent copy is reviewed by Anis against the privacy policy (SEC-08). The home shows every TourStatus.

Review. Imad: permissions flow, foreground location. Feeds. MDA-01 (DA-05, DA-22, DA-24, DA-25), MOB-10 (DA-04), MDA-11 (DA-26). DA-01…DA-03 were built from the Day-6 variants (MOB-05, MOB-06).

Day 12 — Delegate app: tour programme, map & point-of-sale sheetCopy Anchor Link

Goal. The delegate sees the ordered stops, gets to them and checks in only within the GPS tolerance.

Inputs. References delegate-03-tour-program and delegate-04-map-navigation. Cahier §6.2 and §6.3. API: delegate.tours.list, delegate.tours.get, delegate.tours.start, delegate.tours.suspend, delegate.tours.resume, delegate.tours.reorder, delegate.tours.addVisit, delegate.visits.arrive, delegate.resellers.get.

Requirements. CRM-01, CRM-07, CRM-08, FLD-03, FLD-04, FLD-06, FLD-07, FLD-17, FLD-19, GEO-03.

Screens.

• DA-06 Tour programme — Programme de tournée
• DA-07 Tours calendar & history — Mes tournées
• DA-08 Map & navigation — Carte et navigation
• DA-09 Point-of-sale sheet — Fiche point de vente

States to cover.

• DA-06:
  • Header with date and tour status; counters (prévues, réalisées, en retard).
  • Tabs À visiter / Terminées.
  • List and mini-map show the same stops in the same order (FLD-06).
  • Ordering mode: Ordre imposé (no drag) or Ordre recommandé (drag to reorder, with a pending-sync badge).
  • Prioritaire flag; late stop (En retard, derived) with icon and label.
  • Add an unplanned visit; suspend with a reason and resume; start the tour (time and position recorded); offline with the cached tour.
• DA-07: month and week views with tour status dots; past tours with results.
• DA-08:
  • Current position, next destination card (ETA, distance as the crow flies), « Itinéraire » (opens the external navigation app).
  • « Je suis arrivé » gated by the GPS validation banner. It is valid within 150 m with an accuracy of 100 m or better. Out of tolerance (GPS_OUT_OF_TOLERANCE): « Vous êtes à 420 m du point de vente ». Weak accuracy: « Signal GPS faible — patientez ».
  • GPS off; permission denied; map tiles not loaded (list fallback).
• DA-09: store header (photo, ResellerStatus pill, potential), call and WhatsApp buttons, address and route, interaction history, open follow-ups, last visit reports, this reseller's orders (delegate scope), actions (start visit, invite, assisted order, edit).

Claude Design. Section DA · Tour. Example frames: DA-08 · Map & navigation · out-of-tolerance, DA-06 · Tour programme · recommended-order-dragging.

Done when. The map pin set is used everywhere. Pins never differ by colour alone. The GPS banner has all six states.

Review. Imad: maps package, drag and reorder offline, battery. Feeds. MDA-02 (DA-06, DA-07), MDA-03 (DA-08); DA-09 is built in MDA-04.

Day 13 — Delegate app: visit, report, prospects & follow-upsCopy Anchor Link

Goal. Run a visit end to end, offline, and leave a structured report that creates the follow-up.

Inputs. References delegate-05-visit-checkin and delegate-09-visit-report. Cahier §6.4 and §6.8. Visit-flow wireframe of Day 5. API: delegate.visits.*, delegate.resellers.list, delegate.tasks.*, reference.lists.

Requirements. ACL-03, CRM-04, CRM-08, FLD-08, FLD-09, FLD-10, GEO-03.

Screens.

• DA-10 Visit & check-in — Détail de la visite
• DA-11 Visit not done — reason — Visite non réalisée
• DA-12 Visit report — Rapport de visite
• DA-13 Prospects & resellers (list / map) — Prospects
• DA-19 Follow-ups & tasks — Relances

States to cover.

• DA-10, one primary action per VisitStatus:
  • À visiter: arrive.
  • Arrivé: start; arrival time shown.
  • En cours: timer, checklist, note, photos, end.
  • Visité: read-only (VISIT_LOCKED).
  • Non réalisée: the reason is shown.
  • Annulée.
  • Required photos per visit type (FLD-08): « Terminer » is disabled with « 1 photo de façade requise ». Each photo shows its upload state (queued, sending, sent, failed).
  • When a report is required, « Terminer la visite » leads to DA-12.
• DA-11: reason from the list (required), comment, optional photo.
• DA-12: person met (name, role), interest level (Faible / Moyen / Élevé), products and promotions presented (multi-select chips), issues (tags), next action and follow-up date (required unless Aucune), comment, attachments; draft autosaved; « Relance planifiée le 29 mai » confirmation.
• DA-13: list and map; filters (status, potential, commune, follow-up due); clusters; create; delegate scope only; offline cache.
• DA-19: groups En retard (derived), Aujourd'hui, À venir; complete; reschedule.

Claude Design. Section DA · Visit and DA · Prospects.

Done when. The visit prototype (DA-08 → DA-10 → DA-12) works. Every field of the report is annotated with its reference list (VISIT_NOT_DONE_REASON, VISIT_ISSUE_TAG, PERSON_ROLE).

Review. Imad: offline outbox, photo queue. Feeds. MDA-04 (DA-13), MDA-05 (DA-10, DA-11), MDA-06 (DA-12, DA-19).

Day 14 — Delegate app: sign-up, invitation, first order, closing & syncCopy Anchor Link

Goal. Conversion in the field (new reseller, invitation, assisted first order) and a clean end of day.

Inputs. References delegate-06-reseller-signup, delegate-07-invitation, delegate-08-first-order and delegate-10-tour-closing. Cahier §6.5–§6.7, §6.9 and §7.3. Tour-closing wireframe of Day 5. API: delegate.resellers.checkPhone, delegate.resellers.create, delegate.resellers.update, delegate.invitations.*, delegate.assisted.*, delegate.orders.*, delegate.tours.closingPreview, delegate.tours.close, delegate.reports, sync.batch, sync.delta.

Requirements. ACL-03, ADM-07, CRM-01, CRM-03, CRM-04, CRM-10, FLD-07, FLD-11, FLD-12, FLD-19, IVT-01, IVT-02, IVT-03, NOT-01, NOT-07, ORD-02, ORD-08, ORD-09, SYN-04, SYN-05, SYN-06.

Screens.

• DA-14 New reseller — Nouveau revendeur
• DA-15 Edit reseller / prospect — Modifier la fiche
• DA-16 Invite a reseller — Inviter un revendeur
• DA-17 First-order assistance — Aide à la 1ère commande
• DA-18 Assisted orders & orders of my resellers — Commandes
• DA-20 Tour closing & results — Clôture de tournée
• DA-21 Reports & performance — Rapports
• DA-23 Messages & notifications — Messages
• DA-27 Sync centre — Synchronisation
• DA-28 System states (offline, GPS off, out of tolerance, permission denied, forced update) — États système

States to cover.

• DA-14:
  • Labels above the fields (not beside them).
  • Duplicate phone found online: « Ce numéro existe déjà : Bazar du Centre (REV-000123) » with « Ouvrir la fiche ». When offline, the check is deferred and a conflict surfaces in DA-27.
  • GPS capture with accuracy (« ± 12 m ») and recapture; façade photo required.
  • Initial status limited to Nouveau prospect, À contacter, Intéressé, Non intéressé. The automatic statuses cannot be picked (CRM-04).
  • Saved offline (« Enregistré sur le téléphone — synchronisation en attente »); pending validation.
• DA-15: same form; locked fields; manual status changes allowed.
• DA-16:
  • QR code of https://app.hoco.dz/i/AB12CD34, code AB12-CD34 with copy.
  • Share via WhatsApp (primary), SMS or copied link.
  • Funnel Invitation envoyée → Application téléchargée → Compte créé → Téléphone vérifié → Catalogue consulté → Première commande, with timestamps.
  • Offline: the invitation needs the network to be created, so explain this.
• DA-17:
  • Reseller name and number in the header.
  • Steps Produits → Adresse → Envoi pour confirmation.
  • Shared catalog widgets with search and filters (CAT-07); the reseller's price is shown according to their customer type; availability only.
  • Cart rules (ORD-02).
  • « Envoyer au revendeur pour confirmation », then En attente du revendeur (expires after 72 h). The back-office can validate instead.
• DA-18: AssistedConfirmation and OrderStatus pills; discard a draft.
• DA-20:
  • Before closing, blockers are listed: visits with no reason, items not synced (« Synchroniser maintenant »).
  • Day summary: visits, sign-ups, installs, first orders, revenue, estimated km. Objectives and conversion (formulas annotated). End-of-day comment.
  • « Clôturer la tournée » with a confirmation: definitive unless the back-office reopens it.
  • After closing: read-only summary.
• DA-21: periods, history of closed tours, conversion funnel.
• DA-23: announcements and notifications, unread, deep links.
• DA-27: global state (Synchronisé / En attente (n) / En erreur (n)), last sync time, each item with its SyncItemResult (Synchronisé, Déjà synchronisé, Conflit, Rejeté, À réessayer), conflict resolution, photo queue, « Synchroniser maintenant ».
• DA-28: offline, GPS off, out of tolerance, permission denied, forced update. The update must keep unsynced items: « Vos 3 éléments en attente seront conservés ».

Claude Design. Sections DA · Prospects & conversion, DA · Day, DA · System.

Milestone. Delegate app designs ready for client review (fourth checkpoint): the visit-day prototype. Ideally a HOCO delegate supervisor attends.

Done when. The closing blockers and the sync centre states match SYN-05 and SYN-06.

Review. Imad. Feeds. MDA-07 (DA-14, DA-15), MDA-08 (DA-16), MDA-09 (DA-17, DA-18), MDA-10 (DA-20, DA-21), MDA-11 (DA-23, DA-27), MOB-10 (DA-28).

Day 15 — Back-office: shell, access & dashboardsCopy Anchor Link

Goal. The information architecture by role, plus the five dashboards.

Inputs. No client reference exists for the back-office: work from the tokens and templates. Cahier §3, §4 and §4.1. API: auth.login, me.get, admin.search, admin.dashboard.kpis, admin.dashboard.charts, admin.dashboard.layout.get, admin.dashboard.layout.update, admin.live.delegates, admin.events.stream.

Requirements. ACL-05, ANA-01, ANA-02, ANA-03, AUTH-01, AUTH-07, FIN-05, FLD-13, NFR-05, NOT-01, STK-05, SYN-07.

Screens.

• BO-01 Sign in · bespoke
• BO-02 Forgot / reset password · template
• BO-03 App shell: navigation by role, global search, notifications · bespoke
• BO-04 General dashboard · bespoke
• BO-05 Sales dashboard · template
• BO-06 Field dashboard & live map · bespoke
• BO-07 Stock dashboard · template
• BO-08 Finance dashboard · template

States to cover.

• BO-01: email or phone with password; errors; lockout; suspended or disabled account.
• BO-03:
  • Sidebar groups filtered by permission. Hidden means absent, not greyed out (ACL-05).
  • Counters on Commandes à confirmer, Validation des comptes, Retours et SAV.
  • Global search (Ctrl K) grouped by resellers, orders, products and invoices.
  • Live notification panel; « Connexion temps réel interrompue » indicator; environment badge (STAGING); collapsed rail; tablet drawer.
• BO-04: KPI cards and charts of ANA-01; filters (date, wilaya, commune, délégué, marque, catégorie); role-based card layout; no-permission card (absent); loading; live refresh after events.
• BO-06: delegates on tour on a live map, last position time and a stale state, tour progress, link to BO-23.
• BO-07: alerts en rupture and below threshold. Quantities are visible here (back-office only).
• BO-08: expected payments, credit used, unpaid. Permission-gated (ACL-04).

Claude Design. Page Back-office, sections BO · Shell, BO · Dashboards; frames at 1440, plus the shell at 1280 and at tablet width.

Done when. The sidebar map (inventory) is drawn and each role's navigation is shown: super admin, commercial admin, stock, finance, delivery, direction.

Review. Anis. Feeds. DSH-01 (BO-01…03), DSH-02 (BO-04, BO-05), DSH-08 (BO-06), DSH-05 (BO-07), DSH-07 (BO-08).

Day 16 — Back-office: CRMCopy Anchor Link

Goal. One place for every reseller and prospect, from first contact to active account, including validation of the declared customer type.

Inputs. Cahier §4.2 and §15.5. API: admin.resellers.*, admin.tasks.*, admin.segments.crud, admin.invitations.list.

Requirements. AUTH-11, CRM-01, CRM-02, CRM-03, CRM-04, CRM-06, CRM-07, CRM-08, CRM-09, CRM-11, CRM-12, FLD-14. Also carry CRM-05, CRM-10 and IVT-03: see the coverage check.

Screens.

• BO-09 Resellers & prospects list · bespoke
• BO-10 Resellers map · bespoke
• BO-11 Reseller 360° · bespoke
• BO-12 Reseller create / edit · template
• BO-13 Account validation queue · bespoke
• BO-14 Follow-ups & tasks · template
• BO-15 Segments · template

States to cover.

• BO-09: filters (status, zone, wilaya, commune, délégué, segment, potential, customer type, activity); saved views; bulk assign, status change and export; list and map toggle.
• BO-11:
  • Header: name, REV-000123, ResellerStatus and CustomerType pills, delegate, zone.
  • Tabs Aperçu, Commandes, Factures et paiements, Visites et rapports, Relances, SAV et retours, Historique, Documents et photos, Invitation.
  • The customer-type change action, with a reason, recorded in the history (AUTH-11).
• BO-12: duplicate phone check; wilaya and commune; GPS on a map picker; documents; customer type.
• BO-13: side-by-side review with photos, GPS on a map, declared customer type (confirm or correct), documents and a duplicate suspicion. Approve, or reject with a reason.
• BO-14: overdue, due and done tasks.
• BO-15: segment rules.

Claude Design. Section BO · CRM.

Done when. The 360° tabs list their data sources. The validation queue shows the customer-type review.

Review. Anis. Feeds. DSH-03 (BO-09…15).

Day 17 — Back-office: catalog, prices, attributes & stockCopy Anchor Link

Goal. Products with their three prices and their filterable attributes, and a stock ledger that only the back-office sees.

Inputs. Cahier §4.3 and §15.4. API: admin.products.*, admin.variants.*, admin.brands.crud, admin.categories.*, admin.attributes.crud, admin.products.import, admin.stock.*, admin.inventory.*, admin.warehouses.crud.

Requirements. CAT-01, CAT-02, CAT-03, CAT-04, CAT-05, CAT-06, CAT-12, CAT-13, PRC-01, PRC-02, STK-01, STK-02, STK-04, STK-05, STK-06.

Screens.

• BO-27 Products list · template
• BO-28 Product editor · bespoke
• BO-29 Brands · template
• BO-30 Categories · template
• BO-31 Price lists & agreements · template
• BO-32 Product import wizard · bespoke
• BO-33 Stock overview · template
• BO-34 Stock movements journal · template
• BO-35 Stock receipt / adjustment · template
• BO-36 Inventory sessions · template
• BO-37 Warehouses · template
• BO-71 Product attributes (filters) per category · template

States to cover.

• BO-28, with tabs Général, Variantes, Prix, Attributs, Images, Visibilité, Stock:
  • Prices per variant: Super-gros, Demi-gros, Détail (HT), VAT rate, recommended price, and the purchase price, which is masked without permission (ACL-04). Price history.
  • Attributes rendered from the category's definitions: number with unit, list, yes/no.
  • Images up to 5 MB, 1:1, ordered.
  • Visibility per reseller or segment.
• BO-30: a tree with sub-categories and reordering.
• BO-71: definitions per category with key, French label, type (list, number, yes/no), unit, allowed values, filter widget (chips, range, toggle) and display order. Changing a definition that is already used shows a warning.
• BO-32: upload → column mapping (including the three prices and the attributes) → validation report with row errors → confirm → result.
• BO-33 to BO-37: physical, reserved and available quantities with thresholds; ledger by movement type (including RETURN); receipt and adjustment with a reason; inventory variance; warehouses.
• BO-31: see the open question below.

Open question for Day 5. BO-31 Price lists & agreements is still V1 in screens.json. The 17 October decisions move price lists and per-reseller agreements to V2 (PRC-03). Either rename it to a bulk editor of the three prices (with change history), or move it to V2. Anis decides and updates screens.json.

Claude Design. Section BO · Catalog & stock.

Done when. The attribute definitions of BO-71 drive both the editor (BO-28) and the reseller filters (RA-13, RW-03), shown with one shared example category.

Review. Anis. Feeds. DSH-04 (BO-27…32, BO-71), DSH-05 (BO-33…37).

Day 18 — Back-office: orders, confirmation queue, delivery, returns & financeCopy Anchor Link

Goal. No order moves without an explicit confirmation. Delivery, returns, after-sales and payments are traceable.

Inputs. Cahier §4.4 and §4.7. API: admin.orders.toConfirm, admin.orders.validate, admin.orders.refuse, admin.orders.modify, admin.orders.transition, admin.orders.cancel, admin.orders.confirmAssisted, admin.orders.history, admin.deliveries.*, admin.carriers.crud, admin.returns.*, admin.invoices.*, admin.payments.*, admin.credit.*.

Requirements. DLV-01, DLV-02, DLV-03, DLV-04, FIN-01, FIN-03, FIN-04, FIN-05, ORD-04, ORD-05, ORD-06, ORD-08, ORD-11, ORD-12, ORD-13, ORD-14, STK-03, STK-08, SUP-04.

Screens.

• BO-38 Orders list · bespoke
• BO-39 Order detail (controls, actions, history) · bespoke
• BO-40 New order on behalf of a reseller · template
• BO-41 Orders to confirm (new, on hold, assisted) · template
• BO-42 Delivery board · bespoke
• BO-43 Carriers · template
• BO-44 Invoices · template
• BO-45 Payments & declarations · template
• BO-46 Credit accounts · template
• BO-69 Returns & after-sales claims · template

States to cover.

• BO-41, the queue of Envoyée and En attente orders, oldest first (ORD-14):
  • Control results as icons with text: stock, credit, price, minimum amount, address.
  • Age (« depuis 3 h »), channel (app, web, assisted, phone), first-order badge.
  • Row actions Confirmer, Mettre en attente, Refuser (with reason); bulk confirm only for orders whose controls all pass.
  • New orders arrive live (row highlight); empty queue « Aucune commande à confirmer ».
• BO-38: status tabs with counts, filters, first-order and assisted badges.
• BO-39: control panel; actions allowed by status; controlled modification with history; stock override with a recorded reason (STK-08); cancel with a reason (stock released automatically); documents; delivery block; links to SAV and returns.
• BO-42: kanban À préparer → En préparation → Prête → Expédiée → Livrée, plus Échec de livraison. Drops are allowed only on legal transitions. Picking list; proof of delivery (photo, recipient name).
• BO-69, returns and after-sales queue:
  • Returns: approve or reject with a reason, then En retour, then reception. Accepted quantities re-enter stock automatically, and the credit note is issued.
  • Claims: diagnosis, then the resolution Remplacement (creates a free order), Retour, Avoir, Réparation or Refusée with a reason.
• BO-45: verify declared payments with the proof viewer; confirm or reject with a reason; partial allocation.
• BO-46: ceiling changes with history.

Claude Design. Section BO · Orders & delivery, BO · Finance. Example frame: BO-41 · Orders to confirm · live-new-order.

Done when. The order state machine (see lifecycles) is annotated on BO-39: each action is shown with the statuses where it is available.

Review. Anis. Feeds. DSH-06 (BO-38…43), DSH-07 (BO-44…46), DSH-13 (BO-69 and the claim side of BO-56).

Day 19 — Back-office: field operations, promotions, support, reports & administrationCopy Anchor Link

Goal. The longest day: 29 pages, of which 8 are bespoke. Template pages are produced as filled page specs, not pixel mocks.

Inputs. Cahier §4.5, §4.6, §3.1, §10. API: admin.delegates.*, admin.zones.crud, admin.objectives.crud, admin.tours.*, admin.visits.*, admin.visitTypes.crud, admin.checklists.crud, admin.promotions.*, admin.banners.crud, admin.tickets.*, admin.announcements.*, admin.notifications.*, admin.reports.*, admin.exports.*, admin.users.*, admin.roles.*, admin.audit.list, admin.settings.*, admin.referenceLists.crud, admin.appVersions.crud, admin.imports.*, admin.supportRegions.crud.

Requirements. ACL-02, ADM-01, ADM-02, ADM-03, ADM-05, ADM-06, ADM-07, ADM-08, ANA-03, ANA-04, ANA-05, AUD-01, AUD-03, AUTH-06, FLD-01, FLD-02, FLD-03, FLD-04, FLD-08, FLD-09, FLD-10, FLD-12, FLD-13, FLD-14, FLD-16, FLD-17, GEO-02, NOT-04, NOT-07, PRM-01, PRM-02, PRM-03, PRM-04, PRM-05, SEC-06, SUP-02, SUP-04, SUP-05.

Screens.

• Field: BO-16 Delegates list · template, BO-17 Delegate detail & performance · bespoke, BO-18 Delegate create / edit · template, BO-19 Zones (list + map editor) · bespoke, BO-20 Objectives · template, BO-21 Tour planner (calendar) · bespoke, BO-22 Tour editor (stops, order, recommendation) · bespoke, BO-23 Tour live detail · bespoke, BO-24 Visits list · template, BO-25 Visit detail · template, BO-26 Visit types & checklist templates · template
• Promotions: BO-49 Promotions list · template, BO-50 Promotion editor · bespoke, BO-51 Banners & daily offers · template
• Support and communication: BO-55 Tickets list · template, BO-56 Ticket detail · template, BO-57 Announcements · template, BO-58 Notification templates & rules · template
• Reports: BO-59 Reports library · bespoke, BO-60 Export centre · template
• Administration: BO-61 Users · template, BO-62 Roles & permissions matrix · bespoke, BO-63 Activity log · template, BO-64 Business settings · template, BO-65 Reference lists · template, BO-66 Mobile app versions · template, BO-67 Data imports · template, BO-68 My profile & sessions · template, BO-70 Support regions & WhatsApp numbers · template

States to cover (bespoke pages first).

• BO-21 and BO-22 share one layout: a calendar or stop list on the left and the map on the right. Ordre imposé or recommandé; the « Recommander l'ordre » result is previewed before it is applied (FLD-17).
• BO-23 reuses the BO-06 live map: the track, visits progress, the closing report, « Rouvrir la tournée ».
• BO-19: assign wilayas and communes on a map; a commune already in another zone shows a warning.
• BO-50: type, value, dates, scope, audience (wilaya, segment, customer type, brand, volume), stacking and priority, stock cap, preview of the resulting price.
• BO-62: 18 modules × 7 actions; highlights changes; confirmation before saving.
• BO-56: the conversation and internal notes; for claims, a diagnosis panel and the resolution actions (admin.tickets.resolve).
• BO-64, settings sections: order minimums, reservation status, GPS tolerance, frequency and retention, credit policy, stacking, payment methods, delivery fees.
• BO-70, support regions: name, wilayas (each wilaya belongs to exactly one region, and a conflict shows a warning), WhatsApp number (E.164, displayed 0555 12 34 56), opening hours per day, default region for visitors whose location cannot be resolved.

Claude Design. Sections BO · Field, BO · Promotions, BO · Support & communication, BO · Reports, BO · Administration.

Milestone. Back-office designs ready for client review (fifth checkpoint).

Done when. The bespoke pages are fully designed. Each template page has a filled page spec: title, columns, filters, bulk and row actions, form fields, tabs, permission, empty-state copy.

Review. Anis. Feeds. DSH-08 (BO-16…26), DSH-09 (BO-49…51), DSH-10 (BO-55…58), DSH-11 (BO-59, BO-60), DSH-12 (BO-61…68, BO-70).

Day 20 — Reseller web: responsive layoutsCopy Anchor Link

Goal. Desktop and tablet layouts of the reseller experience. Phone widths reuse the mobile designs (RWA-01, same rules as the app per RWA-02).

Inputs. The RA frames of Days 6–10. The reseller-web shell and filter sidebar of Day 4. API: same operations as the app; the web uses the session cookie.

Requirements. AUTH-03, AUTH-04, AUTH-05, AUTH-10, AUTH-11, CAT-07, CAT-08, CAT-09, CAT-11, CAT-12, CAT-13, CRM-01, FIN-01, FIN-02, FIN-03, FIN-05, FIN-10, NOT-01, NOT-06, ORD-01, ORD-02, ORD-03, ORD-06, ORD-07, ORD-08, ORD-13, ORD-15, PRM-01, PRM-05, RWA-01, SUP-01, SUP-04, SUP-05.

Screens. RW-01 Sign in, sign-up (with customer type), OTP, password reset — and guest browsing · RW-02 Home · RW-03 Catalog with advanced sidebar filters & search · RW-04 Product detail · RW-05 Favorites · RW-06 Cart · RW-07 Checkout & confirmation · RW-08 Orders list · RW-09 Order detail, tracking & assisted-order confirmation · RW-10 Promotions & daily offers · RW-11 Notifications · RW-12 Profile, store, addresses & settings · RW-13 Invoices, payments & credit · RW-14 Support: tickets, after-sales claims, returns & WhatsApp.

States to cover.

• Web-specific behaviour:
  • Hover and visible focus; full keyboard navigation.
  • Filters synced to the URL; the filter sidebar applies instantly at 1024 px and wider, and becomes a drawer below.
  • Guest browsing with the price lock; the invitation landing https://app.hoco.dz/i/AB12CD34 opening sign-up with the code (IVT-04).
  • Session expired: sign-in with a return URL.
  • Live order updates while the page is open, as on mobile.
  • The fixed WhatsApp button at the bottom right.
• Everything else as in RA.

Claude Design. Page Reseller Web, frames at 1440 and 1024 (tablet landscape) and 768.

Done when. Every RW frame exists at 1440 and 768 at least. The breakpoint behaviour is annotated.

Review. Anis. Feeds. WEB-01 (RW-01), WEB-02 (RW-02…05), WEB-03 (RW-06, RW-07), WEB-04 (RW-08, RW-09, RW-13), WEB-05 (RW-10…12, RW-14). The reseller web is part of V1 (phase P1, not generalisation) and is deployed before the pilot. WEB-01 starts as soon as the back-office foundation (DSH-01) is in place, so Day 20 frames need the same Ready for dev rigour as the back-office: every breakpoint behaviour annotated, nothing left for later. Then DQA-05 reviews the build before the functional test campaign (QA-03).

Day 21 — Prototypes, design QA & handoffCopy Anchor Link

Goal. Close V1 design. Everything Imad and Anis need is findable without asking.

Work.

• Prototypes. Reseller ordering: RA-02 (guest) → RA-12 → RA-13 → RA-14 → RA-05 (sign-up) → RA-17 → RA-18 → RA-20 → RA-22 (live update). Delegate visit day: DA-05 → DA-06 → DA-08 → DA-10 → DA-12 → DA-14 → DA-16 → DA-20.
• Consistency pass, the design QA checklist run against the Claude Design project itself: detached components, raw hex values, missing states, copy.
• Exports. Icons and assets (assets).
• Tokens v1.0 tagged with a changelog (token releases).
• Client presentation: about 90 minutes, all three solutions.

Done when. The handoff checklist is ticked. Every V1 frame is Approved or Client review with its open items listed.

Milestone. Design handoff complete.

Review. Anis and Imad, in a 1-hour handoff walkthrough. Feeds. DES-22.

Client validation checkpointsCopy Anchor Link

Rules for every checkpoint:

• Anis records decisions in the decision register.
• Feedback is collected in one place, as comments on the shared design (on the frame) or one consolidated list per checkpoint, never scattered across WhatsApp threads.
• Assumption: HOCO answers within 3 working days.
• Feedback that fixes a screen in less than an hour is applied the next morning. Everything else is queued for DES-22.
• Silence is not approval. Frames stay Client review until HOCO answers.

3-month frame: design → development → deployment — deadline 17 Jan 2027.

Date	Milestone	Target	Reached when these tasks end
18 Oct 2026	Cadrage validated — validation sheet signed	—	PRJ-03
18 Oct 2026	API contract v1 published (OpenAPI + mock server)	—	SRV-03
19 Oct 2026	Server V1 feature-complete	—	SRV-26, SRV-40
21 Oct 2026	Design system v1 ready (tokens + components)	—	DES-04
22 Oct 2026	Screen inventory frozen	—	DES-05
29 Oct 2026	Reseller app designs ready for client review	—	DES-10
05 Nov 2026	Delegate app designs ready for client review	—	DES-14
08 Nov 2026	Mobile foundations ready	—	MOB-11
12 Nov 2026	Back-office designs ready for client review	—	DES-19
16 Nov 2026	Design handoff complete	—	DES-21
03 Dec 2026	Back-office and reseller web V1 feature-complete	—	DSH-12, WEB-05, WEB-06
15 Dec 2026	Mobile apps V1 feature-complete	—	MDA-12
22 Dec 2026	Staging integration complete	—	MOB-14, SRV-28
28 Dec 2026	Acceptance report (PV de recette) signed	—	QA-02
29 Dec 2026	Production go-live	on time — 17 Jan 2027	LCH-01
30 Dec 2026	Pilot starts	on time — 17 Jan 2027	LCH-02
14 Jan 2027	Pilot go / no-go	—	LCH-03, LCH-03B
21 Jan 2027	Generalisation complete	—	LCH-05
22 Feb 2027	V2 delivered	—	SRV-38, DSH-21, MDA-20, WEB-20, DQA-12

The design milestones are the six listed above. The table shows every milestone of the plan with its computed date.

After handoffCopy Anchor Link

Task	Name	Phase	Dates	Effort	Depends on
DES-22	Client feedback round & design revisions	P1	Tue 17 Nov → Wed 18 Nov	1.5 d	DES-21
DES-23	Smart notifications design — Notification Centre, action buttons, promotion tabs, flash-sale countdown	P1	Wed 18 Nov → Thu 19 Nov	1 d	DES-22
DQA-09	Document templates — invoice, delivery note, picking list, receipt	P1	Thu 19 Nov → Sun 22 Nov	1 d	DES-22
DQA-10	Notification & message copy — push, SMS, email, WhatsApp texts	P1	Sun 22 Nov → Mon 23 Nov	0.75 d	DES-22
DQA-01	Store assets — icons, splash, screenshots, feature graphics	P1	Mon 23 Nov → Tue 24 Nov	1 d	DES-22
DQA-06	Training materials — reseller guide, delegate field guide, admin reference	P1	Tue 24 Nov → Wed 25 Nov	1.5 d	DES-22
DQA-07	Field kit — invitation QR flyer & sticker	P1	Wed 25 Nov → Thu 26 Nov	0.5 d	DES-22
DES-30	V2 designs — loyalty, packs, returns, credit, analytics V2	P1	Thu 26 Nov → Sun 06 Dec	6 d	DES-22
DQA-02	Design QA — reseller app build	P1	Sun 06 Dec → Mon 07 Dec	1 d	MRA-09
DQA-03	Design QA — delegate app build	P1	Tue 15 Dec	1 d	MDA-11
DQA-04	Design QA — back-office	P1	Wed 16 Dec	1 d	DSH-12
DQA-05	Design QA — reseller web	P1	Thu 17 Dec	0.5 d	WEB-05, WEB-06
QA-03	Functional test campaign — scripted scenarios on staging	P1	Sun 20 Dec → Mon 21 Dec	2 d	DQA-04, MOB-12, DQA-05

13 tasks · 18.75 d of open effort. Dates are computed — Sunday–Thursday weeks, holidays excluded.

Risks to the 21-day planCopy Anchor Link

Related pagesCopy Anchor Link