Composants
Référence vivante de l'itération 7 : cartes, boutons, badges, navigation, zones d'actions fixes et états. Source des tokens : src/app/globals.css ; règles détaillées : docs/design-system.md.
Cartes
- Une carte = une surface blanche, sans bordure ni ombre, rayon 20 px. Pas de carte dans une carte : à l'intérieur, séparer par des filets (line) ou de l'espace.
- Un seul bloc teinté par carte, réservé au message qui compte (synthèse, alerte).
- Une seule carte sombre (inverse) par écran : le moment clé — pointage en cours, chantiers en alerte.
- Panneau sunken (rayon 28 px) seulement pour regrouper plusieurs cartes sur grand écran.
CardRénovation électrique Dupont
Famille Dupont · 1000 Bruxelles
Filet interne plutôt qu'une seconde carte.
InverseCard — une par écranTemps travaillé
3 h 45
Secondaire on-inverse-muted : 6,8:1
KpiTile — chiffre + accès expliciteHeures cette semaine
61 h 30
Voir le détail →
Panel — regroupe des cartes (≥ 1024 px)Carte A
Carte B
Boutons
- Pilules. Une seule action principale (pétrole plein) par zone ; les autres en secondaire ou tertiaire.
- Zone tactile ≥ 48 × 48 px partout (sm et md : 48 px) ; 56 px pour l'action principale d'une barre fixée.
- Action importante = icône + libellé. Icône seule tolérée uniquement pour fermer, précédent/suivant, menu « … » — toujours avec aria-label.
- Un bouton indisponible dit pourquoi, et propose l'action qui débloque quand elle existe (ButtonWithReason).
variantsize — sm 48 · md 48 · lg 56 (pleine largeur)ButtonWithReason — cause + action qui débloqueTermine ton pointage en cours avant de soumettre ta semaine.
IconButton — fermer, menu — 48 px, aria-label obligatoireBadges
- Toujours icône (ou point) + texte : jamais la couleur seule.
- Palette fermée : ok, warn (seul ambre), err, neutral. Pas de ton « info ».
- Statuts de feuille : pilule neutre + point (Brouillon anneau, Soumise encre, Retournée ambre, Approuvée vert).
StatusBadgePosition vérifiée au démarrageHors zoneConflitBudget dépasséSaisie manuelleDisponible
SheetStatusBadgeBrouillonSoumiseRetournéeApprouvée
TodayTag · onInverseAujourd'huiEn pause
Navigation
- Technicien : barre d'onglets fixe en bas (4 entrées, icône + libellé, 64 px), safe area comprise.
- Gestionnaire : barre latérale sombre ≥ 1024 px, tiroir en dessous.
- Onglets en pilules ; au-delà de 3 onglets, un sélecteur de section remplace les onglets sous 640 px (plus d'onglets tronqués).
- Bascule de vue (Mois / Semaine / Jour) : contrôle segmenté pleine largeur sur mobile, aria-pressed.
Tabs — réduire la fenêtre sous 640 px pour voir le sélecteurContenu de l'onglet sélectionné.
Contrôle segmentéSelect — filtre, sélecteur de sectionZones d'actions fixes
- ActionDock : fixé juste au-dessus de la barre d'onglets ; Pause/Reprendre (principal, 56 px) + Terminer (secondaire).
- Hauteurs réelles mesurées (ResizeObserver) et publiées en --worker-nav-h et --dock-h ; le contenu réserve leur somme + 24 px (pb-fixed-bars). Vérifié à 360 px, police à 130 %.
- Le retour d'action (« Pause commencée à 17:56 ») vit DANS le dock, au-dessus des boutons : il ne recouvre jamais le contenu.
- Barre d'approbation (gestionnaire) : sticky en bas du détail, case « anomalies consultées » juste à côté d'Approuver.
ActionDock — reproduction statiquePause commencée à 17:56
États
- Chaque écran gère Données · Vide · Chargement · Erreur · Hors ligne (pastille « Maquette »).
- Hors ligne : les actions sont « Enregistrées sur ce téléphone » ; après envoi : « Pointage enregistré · reçu au serveur ». Jamais de succès fictif.
- Erreur : cause + « Réessayer ». Vide : explication + action utile.
Pas de réseau. Tes actions sont enregistrées sur ce téléphone et seront envoyées au retour du réseau.
Impossible de charger tes interventions.
Dernières données reçues ce matin à 07:12.
Aucune intervention prévue aujourd'hui
Tu peux quand même pointer sur un de tes chantiers.
Accusés de pointage Enregistré sur ce téléphone · en attente d'envoi au serveur Pointage enregistré · reçu au serveur 1 action à synchroniser