Composants
Les composants du design system, tels qu'ils sont dans Figma. Chacun existe en variantes (un style, un rôle, un état), et chacun a son équivalent dans le code du web et du mobile.
Boutons
| Style | Usage | État survol |
|---|---|---|
| Primary | L'action principale d'un écran : Enregistrer, Envoyer | Vert plus foncé |
| Secondary | Une action secondaire : Annuler, Retour | Fond gris clair |
| Danger | Une action destructrice : Supprimer, Retirer de l'équipe | Fond rouge très clair |
| White | Le bouton de pointage du site web, sur la carte verte | Fond sable clair |
| Clock out | Le bouton de pointage quand le service est en cours | Rouge plus foncé |
| Outline white | Une action secondaire sur fond vert | Contour plus marqué |
Sur l'image, la première ligne montre les six styles au repos, puis les survols (Primary, Secondary, Danger) ; la deuxième ligne les survols de White, Clock out et Outline white.
| Code | Composant |
|---|---|
| Web | Classes Tailwind dans chaque composant Vue |
| Mobile | Button avec variant : primary, secondary, danger, accent |
Statuts
Un statut est toujours une icône et un texte, jamais une couleur seule.
| Famille | Statuts |
|---|---|
| Journée | Complet · Heures supplémentaires · Départ manquant · Corrigé |
| Rôle | General Manager · Manager · Employé · Invitation en attente |
| Demande de correction | En attente · Approuvée · Refusée |
| Absence | Congé · Maladie · Autre absence |
| Semaine | Validée · Non validée · En cours |
Les absences et les états de semaine sont en gris ou en vert, jamais en couleur d'alerte : une absence n'est pas un problème.
| Code | Composant |
|---|---|
| Mobile | Status avec kind, dans src/components/ui/status.tsx |
Avatars
Les initiales, en Share Tech Mono, dans un rond.
| Variante | Usage |
|---|---|
| Nav | Dans la barre de navigation, sur fond vert |
| Row | Au début d'une ligne de liste (membre, utilisateur) |
| Stack | Plusieurs avatars qui se chevauchent (membres d'une équipe) |
| Invited | Un compte pas encore activé, en pointillés |
Barre de navigation du site web
La navigation change avec le rôle :
| Rôle | Liens |
|---|---|
| Employé | Dashboard · Clocking · My Working Times · My Changes |
| Manager | + Team · Requests |
| General manager | + Users |
À droite, pour tout le monde : la cloche des notifications, l'avatar et le nom, et le menu du profil (réglages, mes données, déconnexion). Sur petit écran, les liens passent dans un menu burger.
Barre d'onglets mobile
Sur mobile, le menu burger est remplacé par une barre d'onglets en bas, à portée du pouce. Elle suit la même logique de rôle :
| Rôle | Onglets |
|---|---|
| Employé | Clock · Dashboard · Times · Account |
| Manager | Clock · Dashboard · Times · Team · Account |
| General manager | Clock · Dashboard · Times · Team · More |
Cinq onglets est le maximum confortable : pour le general manager, Account passe dans More, à côté de l'administration.
| Code | Composant |
|---|---|
| Mobile | TabBar dans src/components/navigation/tab-bar.tsx. Voir Navigation. |
Bouton de pointage
Le cœur de l'application. Deux boutons (Service et Pause), chacun avec deux états :
| État | Apparence | Signification |
|---|---|---|
| Service au repos | Cercle blanc, contour vert, icône lecture | Appuyer pour commencer |
| Service en cours | Disque rouge, icône stop | Appuyer pour terminer |
| Pause au repos | Cercle blanc, contour vert, icône lecture | Appuyer pour prendre une pause |
| Pause en cours | Disque sable, icône stop | Appuyer pour reprendre |
Sous chaque bouton, le chronomètre (0h 00m 00s), en gras quand il tourne.
Sur mobile, il faut maintenir le bouton une seconde : un anneau se remplit autour et le téléphone vibre. Voir Exemple complet : pointer.
Invitations : les adresses collées
Le general manager peut coller plusieurs adresses d'un coup pour inviter. Chaque adresse devient une pastille avec son état :
| État | Apparence |
|---|---|
| Prête | Coche verte : l'invitation partira |
| A déjà un compte | Icône personne, « has an account » : elle sera ignorée |
| Invalide | Bordure et texte rouges, « not an email » |
Les autres composants
Le fichier Figma contient aussi :
| Composant | Rôle |
|---|---|
| NavLink | Un lien de la barre web : normal, actif, survol |
| NavBar (small screens) | La barre web sur petit écran, menu fermé et ouvert |
| Logo | Voir Identité |
| Status bar (iOS) | La barre d'état d'un iPhone, pour les maquettes |
| App bar | La barre du haut des écrans mobiles : titre, retour, action |
| Tab | Un onglet mobile : normal et actif |
| Break row | Une ligne de pause dans le détail d'une journée |