Ce qui change par rapport à la page check-list relue

Contraste: La page est grisée (--surface), les cartes, listes et tuiles sont blanches avec filet et ombre (--shadow-card). Les menus et dialogues flottent avec une ombre plus marquée.
Champs: Un champ se voit avant d'être cliqué : filet à 3:1 au repos, plus foncé au survol, couleur métier au focus. Le titre et la description d'une check-list ont un filet pointillé et un crayon ; dans une ligne de tâche, le texte est nu au repos, devient un champ au survol de la ligne et s'édite au clic.
Vuetify: Les menus, sélecteurs, sélecteur de date, puces et dialogues restent ceux de Vuetify, habillés par les tokens (vuetify.scss). Plus de composant refait à la main.
Icônes: Neutres en gris encre, couleur métier dès qu'elles portent une action ou au survol. Le rouge n'apparaît qu'au survol d'une suppression. Tout bouton à icône seule porte une infobulle (v-tooltip) et un aria-label ; les boutons à libellé n'en ont pas.
Personnes: Assignés en puces avatar + nom, « +N » quand il y en a plus de deux, nom complet en infobulle.
État vide: Dans une liste, une ligne squelette à la place du cadre pointillé : la liste garde la forme d'une liste de tâches, les boutons d'ajout restent juste dessous.
Densité: Un seul jeu de tokens : 15 px par défaut, data-density="compact" pour crm-front (13,5 px, contrôles 34 px). Bouton en haut pour comparer.
Actions: Dans une carte ou un dialogue, Annuler / Fermer est toujours à gauche et l'action principale à droite, avec l'espace entre les deux ; la règle est portée par le CSS, sans spacer à poser.
En-tête: Les actions d'une fiche tiennent dans une barre d'icônes (imprimer, archiver) et un menu ⋮ pour le secondaire et le destructif ; la création d'un onglet est un « + » en bout de rangée, le filtre des archivées une puce à bascule. Les gros boutons à libellé restent pour les actions de pied de page.
Composants: v3.1 : radio, interrupteur, liste déroulante, recherche, compteur, grille de formulaire, contrôle segmenté, étapes, progression, anneau, pagination, fil d'Ariane, dépliant, séparateur, chronologie, infobulle CSS, pavé numérique, barre de validation, liste simple, dépôt de fichier, squelettes, points et pastilles, tri et totaux de tableau.
Titre: Titre de page et de check-list en Roboto semi-gras, couleur métier, comme les titres actuels de magasin. Paytone One ne sert qu'au mot-symbole.

Couleurs et surfaces

{{ s.label }}--{{ s.token }}

Typographie

Hublot

Titre de page (h1, couleur métier)

Titre de section ou de carte (h2)

Titre de ligne ou de tâche (h3)

Texte courant : « Vérifier les DLC du rayon libre-service avant 9 h et noter les retraits sur la fiche. »

Texte secondaire : créée le 05/11/2026 · 3 tâches, 1 faite

Libellé de champ PLU 164 · EAN 3250390001234

Boutons

Classes hb-btn

Dupliquer

Supprimer

Déplacer

Boutons à icône seule : gris au repos, métier au survol, rouge seulement au survol d'une suppression. Toujours une infobulle.

Vuetify v-btn

addAjouter une tâche

printImprimer

Annuler

content_copy

delete

Désactivé

Jour

Semaine

Mois

Champs et textes éditables

Classes hb-field

Intitulé

Quantité

kg

En erreur

La quantité doit être supérieure à zéro.

Désactivé

Vuetify outlined dense

Éditable en place (titre et description d'une check-list)

Au repos : filet pointillé et crayon. Survol : filet plein, crayon en couleur métier. Focus : bordure métier, le crayon disparaît. Cliquer sur « Ajouter une description » donne le focus au champ.

Badges, puces et personnes

Badges d'état

Faite À vérifier En retard Aujourd'hui Archivée Brouillon

Faite

À vérifier

En retard

Aujourd'hui

Brouillon

Personnes assignées (classes hb-chip)

{{ e.initiales }}{{ e.prenom }}

Duncan Mbaziira, Brice Sia Bohan

Assigner

Vuetify v-chip pill

+2

Cartes, tuiles et alertes

CA HT du jour{{ eur(12480.5) }}+4,2 % vs N-1

Marge31,8 %-0,6 pt vs semaine

Tâches faites7 / 12aujourd'hui

Dernière synchro{{ today }} · 17:25

Carte avec en-tête

filet sous l'en-tête

Corps de carte sur fond blanc, posée sur la page grisée avec une ombre légère.

Vuetify v-card

Même rendu : filet, ombre, coins à 10 px, actions en pied : Annuler à gauche, Enregistrer à droite.

Annuler

Enregistrer

Nouvelle version disponible sur la tablette.

Check-list supprimée.

3 DLC à vérifier avant 9 h.

Hors ligne depuis 12 min.

Menus, sélecteur de date et dialogue (Vuetify)

content_copy

Dupliquer

inventory_2

Archiver

delete

Supprimer

Supprimer la check-list ?

« Check-list du 05/11/2026 » et ses 3 tâches seront supprimées. Cette action est définitive.

Annuler

Composants Vuetify natifs : seuls les tokens changent (filet, ombre, couleur métier du jour choisi).

Tableau

Produit	PLU	Quantité	État
Moules bouchot BretagneDLC 08/11	164	12,500 kg	Conforme
Saumon entier NorvègeDLC 07/11	210	8,200 kg	À vérifier
Crevettes cuites Madagascar	305	3,000 kg	DLC dépassée

3 lignes

Navigation

Barre latérale sombre métier, entrée active en couleur d'accent avec barre, barre du haut blanche à filet. Le métier bascule tout d'un coup (bouton en haut de page).

Formulaires

Grille hb-form, liste déroulante, recherche, sélecteur de quantité

Fournisseur

Rayon

Produit

Colis

Prix d'achat

€/kg

Remarque

Visible sur le bon de livraison.

Radio, interrupteur, groupe avec légende

Mode de réception

Pesée à la réception Poids du bon de livraison Import ERP bientôt

Alertes

Prévenir quand une DLC approche {{ sw ? 'activé' : 'désactivé' }} Synchronisation automatique Imprimer l'étiquette à l'enregistrement

kg pièce colis

Même filet, même couleur métier et même taille tactile que la case à cocher : 22 px, 28 px en densité touch.

Sélection, progression et navigation secondaire

Contrôle segmenté, fil d'Ariane, pagination

26–50 sur 312

…

Étapes, barre de progression, anneau

Fournisseur
Produits
Pesée
Validation

Inventaire du rayon62 %

Stock de glace18 %

Synchronisationen cours

Listes, accordéons, chronologie

Liste simple hb-listing

ou

Détail du bon de livraison 12

12 lignes, 2 écarts de poids signalés, total 1 284,60 € HT.

Écarts de prix 2

Saumon entier : 12,40 → 13,10 €/kg. Crevettes cuites : 9,80 → 10,20 €/kg.

Historique

Créé le 05/11/2026 par A. Nguyen.

Chronologie hb-timeline

09:12
Relevé des températures par ANA. Nguyen
Vitrine 1 : 2,1 °C · Vitrine 2 : 1,8 °C · Chambre froide : 0,4 °C
08:40
Synchronisation réussie
42 lignes envoyées, 3 reçues.
08:05
DLC à J-1 sur 2 produits
Moules bouchot, crevettes cuites : à retirer ce soir.
Hier
Livraison Pomona réceptionnée
18 colis, 1 écart de poids.

hb-tip Raccourci : ⌘ K ANDMBS

Tablette : pavé numérique, barre de validation, dépôt de fichier, chargement

Saisie d'un poids

{{ keypad || '0' }}kg

Carte en chargement (hb-loading, squelette)

Chargement des factures…

Déposer la facture PDFou cliquer pour choisir un fichier · 10 Mo max

Contenu qui défile… la barre de validation reste collée en bas de la zone.

Total HT1 284,60 €

Tableau : tri, sélection, totaux

Produit	PLU	Quantité	Montant HT	État
Moules bouchot PomonaDLC 08/11	164	12,500 kg	60,00 €	Conforme
Saumon entier Marée OcéaneDLC 10/11	210	8,200 kg	107,42 €	À vérifier
Crevettes cuites PomonaDLC 07/11	318	4,000 kg	40,80 €	Écart de poids
3 produits		24,700 kg	208,22 €

1 sélectionné

Maquette : page check-list de magasin

Nouvelle check-list

Créée le {{ today }}·{{ tasks.filter(t => !t.comment).length }} tâches, {{ tasks.filter(t => t.done).length }} faite

Déplacer

Commentaire

Faite le {{ today }} à 09:12

Dupliquer

Supprimer

Dupliquer

Supprimer

Même page, check-list sans tâche : ligne squelette

Aucune tâche pour l'instant : ajoutez une tâche ou un commentaire.

Tablette : lignes de tâche compactes (hb-task)

Relever les températures des vitrines07:45 Vérifier les DLC libre-service09:00 Nettoyage du plan de travail13:30