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.
Avec un proxy_pass entièrement basé sur une variable, nginx ne remplace
plus le préfixe de location par le reste de l'URI comme il le fait pour
une valeur statique : toutes les requêtes /api/* étaient réécrites en
exactement /api/ (sans /auth/login, /users, etc.), d'où les 404 sur
toutes les routes. Fix : $request_uri est maintenant explicitement
ajouté au proxy_pass pour transmettre le chemin et la query string
d'origine.
Reproduit et vérifié avec un vrai nginx local + un faux backend qui
échoue le chemin reçu : le bug était bien présent avec l'ancienne
config, et absent avec la nouvelle.
- 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.
- 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 précédent remplacement du mot de passe Postgres n'avait touché que
la clé POSTGRES_PASSWORD du service db, laissant le backend avec
l'ancien mot de passe sous la clé PGPASSWORD — cause de l'échec
d'authentification systématique malgré la réinitialisation du volume.
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.
Permet à un reverse proxy nginx déjà en place (sur le réseau
nginx_default) d'atteindre les containers de Presencia directement.
Le réseau doit déjà exister sur l'hôte avant docker compose up.
Supprime le fichier .env racine : ports, mot de passe Postgres,
JWT_SECRET et identifiants admin sont désormais définis en dur dans
docker-compose.yml, à éditer avant le premier démarrage.
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