# Note d'intention — Design Récré > Destinataire : designer. Statut : `ready`. Date : 2026-08-20. > Sources : `docs/specs/*.md`, `docs/decisions/*.md`, code existant. ## 1. Le produit en une phrase **Récré** est une caisse et un suivi de stock pour les associations d'un lycée : des élèves vendent des snacks et des boissons sur un stand, des profs administrent les produits, le stock et les statistiques. ## 2. Qui s'en sert, et dans quelles conditions | Rôle | Qui | Où | Sur quoi | |---|---|---|---| | `ROLE_VENDEUR` | Élèves de lycée | Au stand, debout, pendant la récré | Leur téléphone, ou la tablette du stand | | `ROLE_ADMIN` | Prof responsable de l'asso | Salle des profs, entre deux cours | Ordinateur portable | | `ROLE_SUPER_ADMIN` | Administrateur de l'outil | — | Ordinateur | Les conditions du stand dictent le design du front de vente : **debout, pressé, une file d'attente devant soi, du bruit, parfois dehors**. Une récré dure 15 minutes. Chaque seconde gagnée par vente compte, et une erreur de saisie se paye en monnaie réelle. ## 3. Ce que le design doit produire Une maquette **cliquable** couvrant les deux surfaces, avec priorité au front de vente. ### Surface A — Front de vente (mobile-first, prioritaire) 1. **Connexion** — email + mot de passe. Sobre, rapide. 2. **Choix de la caisse** — liste des caisses de l'asso. Chacune indique si une session est déjà ouverte (on la rejoint) ou non (on l'ouvre). 3. **Ouverture de session** — saisie du fond de caisse initial en euros. Un seul champ. 4. **Écran de vente** — le cœur du produit. Voir §4. 5. **Clôture de session** — affiche les espèces attendues, saisie du comptage réel, calcul et affichage de l'écart. ### Surface B — Back-office (bureau, secondaire) 6. **Liste des produits** — nom, prix de vente, stock. Colonnes optionnelles (voir §6). 7. **Formulaire produit** — nom, prix de vente, plus champs conditionnels. 8. **Statistiques** — quatre tableaux et une barre de filtres. Voir §5. 9. **Mouvements de stock** — historique filtrable, formulaire d'entrée/ajustement. Le back-office tourne sur EasyAdmin (thème Bootstrap). On ne le refond pas : on lui donne une identité cohérente avec le front, et on soigne la page statistiques qui est un gabarit maison. ## 4. L'écran de vente, en détail C'est l'écran qui justifie le projet. Parcours attendu : 1. Le vendeur voit la grille des produits de son asso — nom, prix, stock restant. 2. **Il tape sur le produit pour l'ajouter au panier.** Quantité par défaut 1, incrémentable en tapant à nouveau. ⚠️ Aujourd'hui il faut viser de petits boutons `+`/`-` : c'est le principal point de friction à corriger. 3. Il peut retirer un produit ou corriger une quantité. 4. Le total s'affiche en temps réel, toujours visible. 5. Il choisit le moyen de paiement : **Espèces** ou **SumUp**. 6. Il valide. La vente est enregistrée. 7. Le panier se vide, prêt pour le client suivant. ### Règles et cas limites à représenter - **Produit à stock 0** : grisé, non ajoutable, visuellement distinct sans être illisible. - **Stock insuffisant à la validation** : un autre vendeur a pris le dernier article entre l'affichage et la validation. Message d'erreur explicite — *« Stock insuffisant pour « Café » : 3 demandé(s), 1 en stock. »* La vente entière est refusée, c'est tout ou rien. - **Session déjà ouverte** par un autre vendeur au moment d'ouvrir la caisse : message *« Une session est déjà ouverte sur la caisse « Caisse A ». »* - **Session fermée** : vente impossible. - **Panier vide** : le bouton de validation est désactivé. - Pas de rendu de monnaie calculé. L'élève se débrouille avec la monnaie physique. ## 5. La page statistiques Une barre de filtres — période (aujourd'hui / cette semaine / ce mois-ci / plage personnalisée), plus un sélecteur de caisse qui ne s'applique qu'aux écarts. Puis : 1. **Résumé** — total des ventes, nombre de transactions, dont espèces, dont SumUp. 2. **Ventes par vendeur** — transactions, total généré. Trié par total décroissant. 3. **Ventes par produit** — quantité vendue, chiffre d'affaires, et marge si activée. 4. **Écarts de caisse** — caisse, date de clôture, qui a clôturé, attendu, compté, écart, plus le total des écarts en pied de tableau. Les écarts sont **signés** : positif = surplus, négatif = manque. Un manque doit se voir. Pas de graphiques en v1 : des tableaux propres suffisent. ## 6. Éléments conditionnels Deux options par association, **désactivées par défaut** — pensées pour un recyclage futur vers un client commercial, elles resteront éteintes pour une asso scolaire : - **Suivi marge** : fait apparaître le prix d'achat sur le produit, la marge unitaire, et une colonne marge dans les stats. - **Gestion TVA** : fait apparaître le taux de TVA et le prix HT. Le prix de vente saisi est le prix **TTC**, le HT en est déduit. Prévoir les deux états dans les maquettes de la liste produits. ## 7. Parti pris visuel demandé **Simple et moderne, pour des lycéens.** Ce qui veut dire : - Ni enfantin ni corporate. Le registre des applis que les lycéens utilisent déjà. - Des **cibles tactiles généreuses** : on tape vite, debout, parfois à une main. - Une **hiérarchie très lisible** : le prix et le total sont les informations reines. - Un **feedback immédiat** à chaque interaction — ajouter au panier doit se voir et se sentir. - Une **couleur d'accent franche** pour l'action principale, du neutre pour le reste. - Des états d'erreur qui se remarquent sans faire peur. - Lisible en extérieur, contraste élevé. - Accessible : contrastes AA minimum, pas d'information portée par la seule couleur (les écarts positifs et négatifs doivent se distinguer autrement que par le vert et le rouge). Le nom du produit est **Récré**. Pas de charte existante, pas de logo imposé : la proposition d'identité fait partie du travail. ## 8. Contraintes techniques à respecter - Front de vente : **Twig + CSS + Stimulus**. Pas de framework JS lourd, pas de React. - Back-office : **EasyAdmin 4** sur Bootstrap 5. Ce qu'on peut faire est du thème, pas de la refonte structurelle. - Mobile-first réel : le premier écran ciblé est un téléphone, la tablette vient ensuite. - L'application **n'encaisse pas** : elle enregistre un moyen de paiement, elle ne traite aucun flux monétaire. Aucun élément d'interface ne doit laisser croire le contraire. - Fonctionne en ligne uniquement, pas de mode hors-ligne en v1. - Interface entièrement en français. ## 9. Données réalistes pour les maquettes Produits vendus par l'asso : Chips 2,00 € · Boissons 1,00 € · Bonbons 1,00 € · Sucette 0,20 € · Kinder Bueno 1,00 € · Kinder Country 0,50 € · Capri Sun 0,50 €. Caisses : « Caisse A », « Caisse B ». Vendeurs : des prénoms d'élèves. Fond de caisse typique : 20 à 50 €. Panier typique : 1 à 4 articles, moins de 5 €. ## 10. Ce qu'on attend en retour Des écrans cliquables permettant de dérouler le parcours complet du vendeur — connexion, choix de caisse, ouverture, plusieurs ventes, clôture — plus les écrans back-office. Les états d'erreur et les cas limites du §4 doivent être représentés, pas seulement le chemin heureux.