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.
- Renomme les services (db/backend/frontend -> presencia-db/
presencia-backend/presencia-frontend) : sur le réseau externe partagé
nginx_default, un nom générique comme "db" peut entrer en collision
avec un service du même nom dans une autre stack, et Docker résout
alors le nom en round-robin vers le mauvais container. Confirmé en
prod : le bootstrap réussissait puis une requête suivante échouait
avec une erreur d'authentification alors que le mot de passe était
correct.
- nginx résout maintenant le backend dynamiquement (resolver + variable)
au lieu de résoudre une seule fois au démarrage, pour survivre à une
recréation du container backend.
- Ajoute express-async-errors : une erreur dans une route async (ex. la
requête pg qui échoue) était une rejection non gérée et faisait
planter tout le process Node au lieu de renvoyer une 500 propre.
Testé en local : avant le fix, une erreur d'auth pg tuait le process ;
après le fix, il répond 500 et reste opérationnel.
Le message générique masquait la cause (ex: mot de passe désynchronisé
avec un volume Postgres déjà initialisé). On affiche maintenant le
message d'erreur pg à chaque tentative et dans l'erreur finale.
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