# Brief de refonte UI/UX — Écran « Commande client »

> **À l'attention de l'IA de refonte.** Tu n'as pas accès au code source. Base-toi sur ce document + les captures d'écran jointes. Objectif : **refonte UI/UX** de cet écran (améliorer lisibilité, hiérarchie, ergonomie, responsive, accessibilité) **sans changer les fonctionnalités ni les règles métier** décrites en section 11. Domaine : **ERP de distribution pharmaceutique** (grossiste-répartiteur). Langue de l'interface : **français**.

---

## 1. Rôle de l'écran

C'est **l'écran de saisie / prise d'une commande client** — l'outil de travail principal du vendeur. Il sert à **créer, compléter, modifier, mettre en attente, annuler et valider** une commande client (un en-tête + des lignes de produits) avant qu'elle ne parte en préparation/facturation.

Particularité importante : **la commande est enregistrée au fil de l'eau** (dès la 1ʳᵉ ligne ajoutée, puis à chaque modification). Il n'y a pas de gros bouton « Enregistrer » final classique : « Valider » sert à **clôturer** la commande, pas à la sauvegarder.

## 2. Utilisateurs & contextes d'usage

- **Télévendeur (mode « distribution »)** : reçoit des appels de pharmacies via un **carnet d'appel** (file de clients à appeler par tournée), saisit très vite au clavier, surveille le **crédit du client** (plafond / encours / solde).
- **Vendeur au comptoir (mode « guichet » / GETRACO)** : vente directe, **encaissement immédiat**, édition de **proforma**, gestion **multi-devises**.

Exigences transverses : **rapidité de saisie au clavier**, gestion de **beaucoup de lignes** par commande, feedback immédiat (stock, crédit, totaux).

## 3. Les deux modes d'affichage (déterminant pour la refonte)

Le même écran se présente différemment selon un paramètre système (`ModeGpharma`). **La refonte doit gérer les deux variantes.**

| Élément | Mode Distribution (≠ 2) | Mode Guichet / GETRACO (= 2) |
|---|---|---|
| Cartes crédit (Solde dispo, Plafond, Encours) | **Affichées** | **Masquées** |
| Total multi-devises | Non | **Affiché** (Total TTC converti par devise) |
| Carnet d'appel / Appel unique | **Oui** (télévente) | Non |
| Bouton principal | « Valider » (ou « Encaisser et facturer ») | « Valider » + « Mettre en attente » + « Enregistrer proforma » |
| Colonnes Lot / Péremption dans le tableau | Masquées | **Affichées** |
| Types de commande | Normale, Spéciale, Garde, Mise en place, Renforcement, Call out | Normale, Spéciale |
| Prix produit affiché en devises | Non | **Oui** (prix cession par devise) |

## 4. Anatomie de l'écran principal (à faire correspondre aux captures)

De haut en bas :

- **Zone A — Barre d'actions (en-tête, alignée à droite).** Boutons : **Valider** (libellé « Encaisser et facturer » si facturation immédiate), **Mettre en attente** (guichet), **Annuler**, **Appel unique** (distribution) / **Enregistrer proforma** (guichet), et un menu **« Autres actions »** (Exporter en Excel, Carnet d'appel, Intégrer un CSV).
- **Zone B — Bandeau client + indicateurs.** À gauche : encart **client** (nom, état du compte, téléphone, pastille « commentaires » cliquable). À droite : **cartes chiffres** — Total TTC, Nombre de lignes, puis (distribution) Solde dispo, Plafond, Encours ; (guichet) Total TTC multi-devises.
- **Zone C — Accordéon « Infos client / commande ».** Formulaire d'en-tête : **Client** (champ de recherche), Code client, État compte, Valeur mini commande, Délai de règlement, Téléphone/Adresse, Type de commande, Taux de remise exceptionnelle, Montant remise, Mode de commande, N° commande, cases **« Ne pas fusionner »** / **« Récupérer sur site »**, Commentaire.
- **Zone D — Tableau des lignes de commande.** Liste des produits commandés + barre d'outils du tableau (**Ajouter produit**, **Supprimer les lignes cochées**, préférences de colonnes).

## 5. Champs de l'en-tête (Zone C) — signification métier

- **Client** : recherche par saisie (autocomplétion) — nom/adresse. Obligatoire avant tout ajout de produit.
- **Code client / État compte** : identifiant + statut **ACTIF / BLOQUÉ** (un client bloqué interdit la commande, à signaler visuellement fort).
- **Valeur mini commande** : montant minimum attendu pour ce client.
- **Délai de règlement** : condition de paiement.
- **Téléphone de commande** (distribution) / **Adresse client** (guichet).
- **Type de commande** : nature commerciale (voir tableau §3).
- **Taux remise exceptionnelle (%) / Montant remise** : remise plafonnée par un droit utilisateur (au-delà du max autorisé → refus + message).
- **Mode de commande** : Téléphone / Guichet.
- **N° commande** : généré automatiquement à la création.
- **Ne pas fusionner / Récupérer sur site** : options logistiques de la commande.
- **Commentaire** : note libre sur le bon de commande.

## 6. Colonnes du tableau des lignes (Zone D)

Action (case à cocher + corbeille) · Désignation produit · Lot · Exp. (péremption) · **Qté commandée** (éditable) · **Qté affectée** (éditable) · % Remise · U.G (unités gratuites) · **Stock** · Prix cession HT · Total HT net · TVA · Total TTC.

- **Qté commandée** = ce que le client demande ; **Qté affectée** = ce qu'on lui réserve réellement (≤ commandée). Les deux sont **modifiables directement dans la cellule**, avec recalcul immédiat des totaux.
- **Stock** affiché = **stock disponible** (déjà diminué des réservations).

## 7. Écrans secondaires (fenêtres modales)

1. **Modal « Ajout / recherche produit »** (le plus utilisé, cœur de la productivité) :
   - Bandeau récap (client, n° cde, date, solde dispo, nb lignes, totaux).
   - **Recherche produit** par saisie (autocomplétion) affichant pour chaque résultat : **disponible**, **indisponible** (barré), **prix cession**, **prix public** (distribution), **colisage/cartonnage**, promos.
   - Champs de saisie : Ligne, Stock, **Qté commandée**, **Qté affectée**, **Remise %**, **U.G**, **Qté à livrer**, bouton **+** (ajouter).
   - Sous-tableaux : liste des **U.G / promotions** du produit ; (guichet) **prix par devise** ; **packs promo** (produits groupés).
2. **Modal « Carnet d'appel »** (distribution) : file de clients à appeler, filtrable par **agence, tournée, plage (matin/soir/nuit), critère de garde**, et par statut (**en attente, à rappeler, pas de commande, tous**). Chaque ligne : bouton « prendre l'appel », état compte, heure d'appel souhaitée/rappel, nb lignes, observations.
3. **Modal « Carnet d'appel unique »** : vue focalisée sur **un** client à appeler (téléphone, tournée, délai, heures), **rafraîchie automatiquement** ; bouton d'appel géant.
4. **Modal « Commentaires client »** : historique des commentaires (nom, date, texte).
5. **Modal « Encaissement de la facture »** (si facturation immédiate) : saisie de **règlements multi-modes** (espèces, mobile money avec opérateur, etc.) et **multi-devises**, avec **Total TTC**, **Total réglé**, **Solde**, **Montant rendu**, et tableau des règlements ; bouton **« Poursuivre la validation »**.

## 8. États d'une commande

- **EN SAISIE** (1) : en cours de création.
- **NON COLLECTÉE** (2) : validée, en attente de préparation.
- **PROFORMA** (-2) : devis (guichet).
- **Au-delà (en collecte / facturée)** : l'écran devient **non modifiable** (accès refusé + redirection).

## 9. Parcours types (user flows)

**A. Guichet (vente comptoir)** : rechercher le client → ouvrir le modal produit → chercher/ajouter chaque produit (qté, remise) → « Encaisser et facturer » → modal encaissement (règlements) → « Poursuivre la validation » → impression.

**B. Télévente (distribution)** : ouvrir le **carnet d'appel** → « prendre l'appel » d'un client (le client se charge dans l'écran) → saisir les lignes → « Valider » → la commande passe **NON COLLECTÉE** → impression du bon.

**C. Modification** : ouverture d'une commande existante (si état ≤ NON COLLECTÉE) → ajout/suppression/édition de lignes → re-valider.

**D. Import en masse** : « Intégrer CSV » (format `Code CIP; Qté; Désignation`) pour créer beaucoup de lignes d'un coup.

## 10. Interactions & raccourcis clavier (à PRÉSERVER — critiques pour la vitesse)

- **`+` (pavé numérique)** : ouvre le modal d'ajout produit / ajoute la ligne en cours.
- **`Entrée`** dans le modal produit : enchaîne les champs **code → ligne → qté commandée → qté affectée → ajouter**.
- **Autocomplétion** partout (client et produit) : le vendeur tape, choisit, enchaîne sans souris.
- **Édition en cellule** des quantités directement dans le tableau.
- Sélection multi-lignes (cases à cocher + « tout sélectionner ») pour suppression groupée.

> La refonte doit **conserver un usage 100 % clavier fluide** : c'est le point le plus sensible pour les utilisateurs à haut volume.

## 11. Règles métier / contraintes à NE PAS casser

1. **Client obligatoire** (et compte non bloqué) avant d'ajouter un produit.
2. **Qté affectée ≤ qté commandée** ; quantités > 0.
3. **Remise plafonnée** par un droit utilisateur (message si dépassement).
4. **Stock affiché = disponible** (réservations déduites) ; réserver un produit = « affecter » une quantité.
5. **Persistance incrémentale** : chaque ajout/modif est enregistré immédiatement ; « Valider » clôture.
6. Commande **verrouillée** une fois en collecte/facturée.
7. Opération **interdite sur l'agence « pays »**.
8. Les **deux modes** (distribution / guichet) doivent rester supportés.

## 12. Indicateurs affichés

Crédit client (solde dispo, plafond, encours), total TTC, montant remise, nombre de lignes ; en guichet : total TTC converti par devise et prix produit par devise.

## 13. Points de douleur UX actuels (pistes de refonte — à confirmer via les captures)

- **Densité d'information élevée** : beaucoup de champs et de cartes côte à côte, hiérarchie visuelle faible.
- **En-tête en accordéon** replié pendant la saisie → informations client parfois peu visibles.
- **Modal produit chargé** (recherche + 4-5 champs + 2-3 sous-tableaux + packs) : central mais dense.
- **Multiplicité des cartes chiffres** (crédit + totaux) peu différenciées visuellement.
- **Deux modes dans un même écran** → risque d'incohérence visuelle selon le contexte.
- **Responsive** : écran clairement pensé desktop large ; comportement sur petits écrans à revoir.
- **Feedback / statuts** (client bloqué, stock nul, dépassement crédit) à rendre plus lisibles.
- **Gros tableau de lignes** : lisibilité, colonnes nombreuses, actions par ligne.

## 14. Objectifs de la refonte & garde-fous

**Améliorer** : hiérarchie visuelle et lisibilité, clarté des statuts (client bloqué / stock / crédit), ergonomie du modal produit, différenciation des indicateurs, cohérence entre les deux modes, responsive, accessibilité (contrastes, focus clavier), réduction de la charge cognitive.

**Préserver impérativement** : la saisie clavier ultra-rapide (§10), la logique des deux modes (§3), toutes les règles métier (§11), la persistance incrémentale, et l'ensemble des données/actions listées (§4-8) — aucune fonctionnalité ne doit disparaître sans validation.

## 15. Cadre technique (pour cadrer les propositions)

Interface web actuelle : **Bootstrap 5** (thème admin), **jQuery**, **DataTables** (tableaux), **jQuery-UI autocomplete** (recherches), **SweetAlert** (confirmations), **select2** (quelques listes). Application **mono-page** avec appels **AJAX** (pas de rechargement). Les propositions de refonte peuvent conserver ce socle ou proposer une évolution de composants, mais doivent rester **intégrables** dans une application server-rendered (Blade/Laravel).

## 16. Captures à joindre (recommandé)

1. Écran principal complet (mode distribution), en-tête déplié.
2. Écran principal complet (mode guichet), en-tête déplié.
3. Cartes indicateurs (crédit + totaux) en gros plan.
4. Tableau des lignes rempli (plusieurs produits).
5. Modal d'ajout produit (avec un résultat de recherche visible).
6. Modal carnet d'appel (liste) et carnet d'appel unique.
7. Modal d'encaissement de la facture.
8. États visuels notables : client bloqué, produit sans stock, dépassement de crédit.