Reprend la maquette Presencia.dc.html sur l'application réelle : thème
clair chaud à accent vert forêt, navigation latérale groupée par rôle et
tableau de bord, en conservant l'intégralité du fonctionnel existant.
Frontend
- Écran de connexion en deux panneaux (argumentaire + formulaire).
- Tableau de bord par rôle : compteurs du mois et liste « à faire
maintenant » (sociétés prêtes à valider, cadres en retard, saisie à
compléter), plus l'état du mois par société côté admin.
- Planning : saisie rapide au pinceau, trois affichages (grille, compact,
liste), sélecteur avec raccourcis clavier (1–4, ⌫, ↵ pour appliquer à
la journée), barre d'état de verrouillage, « Tout effacer ».
- Nouvelle vue Historique pour les cadres (totaux par mois et statut).
- Validation & export : barre de progression et compteurs de
demi-journées par cadre.
- Mobile : liste verticale, navigation en barre basse, cibles 44 px.
Backend
- GET /api/validations/overview — état de toutes les sociétés d'un mois.
- GET /api/attendance/history — totaux par mois et par statut.
- DELETE /api/attendance/month — effacement d'un mois (mêmes verrous).
- Compteur de demi-journées saisies par cadre dans /validations/company.
Polices et icônes servies localement (Inter, sous-ensemble de 18 icônes
Phosphor) au lieu de Google Fonts et unpkg : l'application ne fait plus
aucune requête externe au chargement.
Vérifié de bout en bout via la vraie configuration nginx : 62 contrôles
Playwright (desktop et mobile), tous passants, sur base réinitialisée et
rejoués deux fois pour garantir le déterminisme.
Vérification de bout en bout via la vraie config nginx (21 checks
Playwright, tous passants) : parcours admin complet, saisie cadre,
double validation, verrouillages, exports, erreurs de connexion.
Bugs corrigés découverts par ce contrôle :
- La création d'utilisateur via l'interface était cassée depuis le
début : l'id "user-role" existait en double (badge de l'en-tête +
select de la modale), getElementById renvoyait le span du header et
le rôle n'était jamais envoyé (400 systématique). Le badge devient
user-role-badge.
- Les toasts de notification interceptaient les clics sur les boutons
situés dessous pendant 4 s (pointer-events: none ajouté).
Améliorations UI :
- « Absent » renommé « Non-présent » partout (légende, popover,
exports PDF et Excel — code NP au lieu de A).
- Récapitulatif mensuel : tuiles de compteurs par statut au-dessus du
calendrier, mises à jour à chaque saisie.
- Bouton « Remplir les jours ouvrés en Présent » : renseigne en un clic
toutes les demi-journées vides du lundi au vendredi (nouvel endpoint
PUT /api/attendance/bulk, transactionnel, mêmes contrôles de
verrouillage), sans toucher aux saisies existantes.
- Jour actuel mis en évidence dans le calendrier.
- Favicon.
- Calendrier : sous 640px, la grille 7 colonnes devient une liste
verticale (une ligne pleine largeur par jour), boutons AM/PM en
cibles tactiles de 44px minimum.
- Popover de statut : positionnement recalculé pour rester dans
l'écran (bascule au-dessus de la cellule et se recale à gauche si
besoin) au lieu de pouvoir déborder hors viewport.
- Tableaux admin (sociétés, utilisateurs, validation) : scroll
horizontal indépendant pour ne pas casser la mise en page sur petit
écran.
- Nav admin et en-tête compactés sur mobile.
Testé avec Playwright en viewport mobile (375x812) : calendrier liste,
popover, connexion et vues admin.
Application complète : API Node/Express + PostgreSQL, frontend HTML/JS
mono-page, et déploiement Docker sur ports non standards (8781/4790/6543).
- Cadres : calendrier mensuel, saisie de présence par demi-journée
(présent/absent/congé/RTT), validation de fin de mois qui verrouille
leurs propres saisies.
- Admin : gestion des sociétés et utilisateurs (rattachement société <->
cadre), consultation de tous les plannings, validation d'une société
entière une fois tous ses cadres validés, réouverture en cas de
correction, export PDF et Excel par société/mois.
Claude