# Audit de contenu total de l'application Syndic

## Table des matières

- [1. Introduction](#1-introduction)
- [2. Méthodologie de l'audit](#2-méthodologie-de-laudit)
- [3. Vue d'ensemble de l'application](#3-vue-densemble-de-lapplication)
- [4. Navigation globale](#4-navigation-globale)
- [5. Rôles, droits et permissions](#5-rôles-droits-et-permissions)
- [6. Audit détaillé page par page](#6-audit-détaillé-page-par-page)
- [7. Audit détaillé des actions utilisateur](#7-audit-détaillé-des-actions-utilisateur)
- [8. Audit responsive desktop / mobile](#8-audit-responsive-desktop--mobile)
- [9. Audit UI / UX visuel](#9-audit-ui--ux-visuel)
- [10. Logique métier visible côté utilisateur](#10-logique-métier-visible-côté-utilisateur)
- [11. Parcours utilisateurs principaux](#11-parcours-utilisateurs-principaux)
- [12. États particuliers de l'interface](#12-états-particuliers-de-linterface)
- [13. Glossaire des termes visibles dans l'application](#13-glossaire-des-termes-visibles-dans-lapplication)
- [14. Points factuels à vérifier manuellement](#14-points-factuels-à-vérifier-manuellement)

## 1. Introduction

Ce document décrit uniquement ce qu'un utilisateur voit et peut faire dans l'application `syndic`.
Il ne décrit ni la base de données, ni les requêtes, ni les composants techniques internes.

La lecture s'appuie sur les routes, vues, feuilles de style et scripts présents dans le code.
Quand un point n'est pas certain ou pas déductible à 100 %, il est signalé comme
**Information à vérifier manuellement**.

## 2. Méthodologie de l'audit

- Inventaire des routes accessibles.
- Lecture des vues, des contrôleurs et du layout global.
- Relevé des éléments visibles, des boutons, des liens, des tableaux, des formulaires et des menus.
- Analyse séparée du rendu desktop et mobile.
- Relevé des messages visibles, des états vides, des erreurs et des confirmations.

## 3. Vue d'ensemble de l'application

L'application est organisée autour de 4 espaces visibles :

| Espace | Rôle utilisateur | Fonction visible |
| --- | --- | --- |
| Connexion | non connecté | se connecter |
| Tableau de bord | connecté | choisir un module |
| Module Technicien | technicien, gestion, admin | urgences, à faire, tâches, historique, entretiens, étapes |
| Module Gestion | gestion, admin | finances et chantiers |
| Module Syndic | syndic | ascenseurs, factures, offres, travaux |

L'entrée ` / ` redirige vers `/dashboard`. Si l'utilisateur n'est pas connecté, il est renvoyé vers `/login`.

Le branding visible utilise `MaxpironSRL` dans la navigation, tandis que la métadonnée de l'application indique `Syndic`.

## 4. Navigation globale

### Desktop / écran large

- Une sidebar fixe apparaît pour les utilisateurs connectés.
- La barre du haut (`appbar`) est masquée quand la sidebar est visible.
- La sidebar contient :
  - le nom `MaxpironSRL`,
  - un bouton pour réduire/étendre la sidebar,
  - la navigation du module courant,
  - un accès `Accueil`,
  - les autres modules autorisés,
  - le bloc compte avec nom utilisateur et rôle/module,
  - `Déconnexion`.
- Le bouton de réduction mémorise l'état de la sidebar.
- Les éléments actifs sont surlignés en bleu clair avec un repère vertical bleu.
- Les éléments désactivés sont grisés et non cliquables.

### Mobile / petit écran

- La sidebar disparaît.
- Une barre du haut sticky reste visible.
- Sur les pages profondes, un bouton retour remplace le logo.
- Sur le tableau de bord multi-modules, un bouton de changement de module s'affiche.
- Sur les pages de module, la navigation principale se fait avec une tabbar fixe en bas.
- Un bouton compte ouvre un menu coulissant avec l'accueil, les modules autorisés et la déconnexion.
- Sur les pages avec documents, un panneau ou une feuille coulissante s'ouvre depuis l'écran.

### Liens et menus visibles

| Élément | Comportement |
| --- | --- |
| Logo `MaxpironSRL` | renvoie vers `/` |
| `Accueil` | va vers `/dashboard` |
| `Déconnexion` | envoie un POST vers `/logout` |
| Bouton compte | ouvre le menu utilisateur mobile |
| Bouton module | ouvre le sélecteur de modules du tableau de bord |
| Bouton retour | appelle l'historique du navigateur |

### États de navigation

- L'élément actif dépend de la route courante.
- Les menus secondaires changent selon le module et le rôle.
- Le menu syndic contient un item désactivé `Termes à venir`.

### Contenu de la navigation selon l'écran

| Contexte | Liens visibles |
| --- | --- |
| Dashboard technicien | cartes `Technicien`, `Mes étapes` si présent |
| Dashboard gestion / admin | cartes `Technicien` et `Gestion`, plus `Mes étapes` si présent |
| Dashboard syndic | cartes `Ascenseurs sous contrat`, `Factures`, `Offres en cours`, `Travaux programmés`, `Termes à venir` désactivée |
| Module Technicien | `Accueil`, `Entretiens`, `Urgences`, `À faire`, `Tâches`, `Étapes` si présent, `Interventions` si autorisé |
| Module Gestion | `Comptes`, `Chantiers` |
| Module Syndic | `Ascenseurs sous contrat`, `Factures`, `Termes à venir`, `Offres en cours`, `Travaux programmés` |
| Mobile compte | `Accueil`, les modules autorisés et `Déconnexion` |

### Tabbar mobile par module

| Module | Onglets visibles |
| --- | --- |
| Technicien | `Accueil`, `Entretiens`, `Étapes` si présent, `Tâches`, `Historique` |
| Gestion | `Comptes`, `Chantiers` |
| Syndic | `Ascenseurs`, `Factures`, `Offres`, `Travaux` |

## 5. Rôles, droits et permissions

| Rôle visible | Droit legacy | Pages accessibles | Particularités visibles |
| --- | --- | --- | --- |
| Technicien | 1 | Tableau de bord, module Technicien | voit les écrans techniques, les étapes si un rattachement existe |
| Gestion | 2 | Tableau de bord, module Technicien, module Gestion | voit aussi les finances et les chantiers |
| Administrateur | 4 | Tableau de bord, module Technicien, module Gestion | peut modifier les étapes et les états de chantier |
| Syndic | 5 | Tableau de bord, module Syndic | ne voit que les écrans syndic |

### Exceptions et différences visibles

- Le module `Étapes` n'apparaît que si le compte a un rattachement technicien.
- Dans le module Technicien, certains écrans et actions dépendent encore d'une logique legacy très ciblée.
- Dans le module Gestion, les changements d'état complets sont réservés à l'administrateur.
- Le module Syndic ne comporte pas d'action de création ou de modification visible : lecture et ouverture de documents.
- Si le périmètre syndic ne peut pas être résolu, la page affiche `Périmètre syndic non résolu.`.

## 6. Audit détaillé page par page

### 6.1 Connexion

| Élément | Détail |
| --- | --- |
| Route | `/login` |
| Accès | visiteurs non connectés ; un utilisateur déjà connecté est renvoyé vers le tableau de bord |
| Objectif | saisir un identifiant et un mot de passe |

**Ce que l'utilisateur voit**

- Une carte centrée intitulée `Connexion`.
- Un avatar rond avec une icône de compte.
- Le sous-texte `Accès réservé aux utilisateurs autorisés.`
- Un message d'erreur rouge si une session `error` existe.
- Le champ `Login` avec placeholder `Votre identifiant`.
- Le champ `Mot de passe` avec placeholder `Votre mot de passe`.
- Un bouton `Afficher le mot de passe` / `Masquer le mot de passe`.
- Le bouton principal `Se connecter`.
- Le pied de carte `Connexion sécurisée`.

**Desktop**

- Carte de largeur limitée, centrée sur la page.
- Bord arrondi, ombre douce, fond blanc sur fond gris bleuté.
- Les deux champs sont empilés verticalement.

**Mobile**

- La carte garde la même structure.
- Le padding diminue.
- La hauteur utile est adaptée à la barre du haut et à la tabbar si elle existe.

**Actions**

- Cliquer dans `Login` puis `Mot de passe`.
- Cliquer sur l'icône œil pour afficher ou masquer le mot de passe.
- Cliquer sur `Se connecter`.

**Comportement**

- L'icône de visibilité bascule l'attribut `aria-pressed`.
- Le mot de passe passe de `password` à `text` puis inversement.
- Si les identifiants sont invalides, un message d'erreur rouge s'affiche.
- Si le compte n'est pas migré, le message visible est `Compte non migré. Contactez un administrateur.`
- Si le rôle n'est pas reconnu, le message visible est `Rôle utilisateur inconnu.`
- En cas de succès, l'utilisateur est redirigé vers `/dashboard`.

**États particuliers**

- Erreur de connexion : alert rouge en haut de carte.
- Champ requis absent : validation navigateur.
- Aucun indicateur de chargement dédié n'est visible.

### 6.2 Tableau de bord

| Élément | Détail |
| --- | --- |
| Route | `/dashboard` |
| Accès | utilisateur connecté |
| Objectif | choisir un module et accéder aux principaux raccourcis |

**Ce que l'utilisateur voit**

- Un titre `Bonjour ...`.
- Un sous-titre de contexte du type `Espace Technicien`, `Espace Gestion`, `Espace Administrateur` ou `Espace Syndic`.
- Un texte d'aide variable :
  - `Sélectionnez un module pour commencer.` si plusieurs modules sont disponibles.
  - `Accédez à votre espace de travail.` si un seul module est proposé.
- Des cartes module cliquables.
- Selon le rôle :
  - Technicien : carte `Technicien`.
  - Mes étapes si un rattachement technicien existe.
  - Gestion : carte `Gestion`.
  - Syndic : cartes `Ascenseurs sous contrat`, `Factures`, `Offres en cours`, `Travaux programmés`, et `Termes à venir` désactivée.

**Desktop**

- Sidebar complète avec les raccourcis du ou des modules.
- Contenu centré avec largeur confortable.
- Les cartes module sont verticales, espacées, avec icône à gauche et chevron à droite.

**Mobile**

- Barre du haut avec titre ou bouton module.
- Les cartes restent empilées.
- Le bouton compte ouvre le menu utilisateur.
- Aucun tabbar n'apparaît sur le dashboard.

**Actions**

- Cliquer sur une carte module pour entrer dans l'espace correspondant.
- Cliquer sur la carte `Termes à venir` n'est pas possible.

**États particuliers**

- Si aucun module n'est disponible, aucun bloc n'est affiché.  
  **Information à vérifier manuellement** : ce cas n'est pas décrit par une interface dédiée dans le code.

### 6.3 Accueil Technicien

| Élément | Détail |
| --- | --- |
| Route | `/technicien` |
| Accès | technicien, gestion, admin |
| Objectif | vue synthétique des urgences, à faire, tâches et étapes |

**Ce que l'utilisateur voit**

- Une page de synthèse avec `Bonjour ...`.
- Quatre KPI cliquables :
  - `Urgences`
  - `À faire`
  - `Mes tâches`
  - `Mes étapes` si le rattachement existe
- Une rangée de raccourcis :
  - `Entretiens`
  - `Historique`
  - `Mes étapes` si disponible
  - `Interventions` pour le droit 1 ou l'administrateur
- Une section `Urgences ouvertes`.
- Une section `À faire`.
- Une section `Mes tâches ouvertes`.

**Desktop**

- Carte KPI en grille.
- Raccourcis sous forme de boutons-pastilles.
- Les listes utilisent des cartes avec bord gauche coloré.

**Mobile**

- Les KPI restent visibles sous forme de grille compacte.
- Les listes s'empilent.
- Le contenu est principalement en lecture.

**Actions**

- Cliquer sur un KPI pour ouvrir la liste correspondante.
- Cliquer sur un raccourci pour ouvrir l'écran ciblé.

**États particuliers**

- Chaque liste peut afficher un état vide :
  - `Aucune urgence ouverte.`
  - `Aucune demande à faire ouverte.`
  - `Aucune tâche ouverte pour votre compte.`

### 6.4 Entretiens

| Élément | Détail |
| --- | --- |
| Route | `/technicien/entretiens` |
| Accès | technicien, gestion, admin |
| Objectif | consulter les contrats actifs et leurs délais d'entretien |

**Ce que l'utilisateur voit**

- Le titre `Entretiens`.
- Un texte indiquant que les délais sont calculés comme dans le legacy.
- Deux liens de navigation :
  - `Historique`
  - `Retour`
- Des chips de filtre :
  - `Tout`
  - `À faire`
- Un tableau desktop avec colonnes :
  - Ascenseur
  - Visites
  - Dernier entretien
  - Délai
  - État
- Un mode mobile sous forme de liste de cartes.

**Desktop**

- Le nom de l'ascenseur est cliquable.
- Le statut visuel est présenté par badge :
  - `Rouge`
  - `À faire`
  - `OK`
- Le tableau est lisible en lignes.

**Mobile**

- Le tableau laisse place à des cartes cliquables.
- La ligne entière devient l'élément de navigation.
- Les dates clés sont condensées dans la meta de la carte.

**Actions**

- Cliquer sur un filtre.
- Cliquer sur un ascenseur pour ouvrir son historique.

**États particuliers**

- `Aucun entretien pour ce filtre.`
- Une date absente est affichée `JAMAIS`.

### 6.5 Historique des contrats

| Élément | Détail |
| --- | --- |
| Route | `/technicien/historique` |
| Accès | technicien, gestion, admin |
| Objectif | choisir un contrat pour consulter l'historique détaillé d'un ascenseur |

**Ce que l'utilisateur voit**

- Le titre `Contrats`.
- Les liens `Entretiens` et `Retour`.
- Un tableau desktop ou une liste mobile.
- Chaque ligne affiche :
  - ascenseur,
  - dernier entretien,
  - visites.

**Actions**

- Cliquer sur un ascenseur pour ouvrir l'historique détaillé.

**États particuliers**

- `Aucun contrat actif.`

### 6.6 Historique ascenseur

| Élément | Détail |
| --- | --- |
| Route | `/technicien/historique/{id}` |
| Accès | technicien, gestion, admin |
| Objectif | voir la fiche d'un ascenseur, son historique et ses documents |

**Ce que l'utilisateur voit**

- Le titre `Historique`.
- L'adresse ou le nom de l'ascenseur.
- Un bouton `Ajouter`.
- Un bouton `Documents`.
- Deux liens rapides :
  - `Contrats`
  - `Entretiens`
- Une carte de fiche avec :
  - adresse,
  - numéro d'ascenseur,
  - fabricant,
  - paliers,
  - charge,
  - vitesse.
- Quatre blocs d'historique :
  - `URGENCE`
  - `À FAIRE`
  - `HISTORIQUE INTERNE`
  - `HISTORIQUE DOSSIER DE SÉCURITÉ`

**Desktop**

- La fiche est une carte unique.
- Les blocs historiques sont des listes denses.
- Les actions sont en haut dans une barre.

**Mobile**

- Le bouton `Documents` ouvre une feuille coulissante.
- Le bouton `Ajouter` mène au formulaire de remarque.
- Les blocs historiques restent empilés verticalement.

**Actions**

- Cliquer sur `Ajouter` pour ouvrir le formulaire de remarque.
- Cliquer sur `Documents` pour ouvrir une feuille avec trois liens :
  - `QR code`
  - `Étiquettes`
  - `PDF dossier sécurité`
- Cliquer sur une entrée d'`URGENCE` ou `À FAIRE` pour ouvrir l'écran de clôture correspondant.

**Comportement**

- La feuille `Documents` se ferme en cliquant sur le fond, sur la croix, sur un lien ou avec `Escape`.
- Les blocs `HISTORIQUE INTERNE` et `HISTORIQUE DOSSIER DE SÉCURITÉ` sont en lecture seule.

**États particuliers**

- Chaque bloc peut afficher `Aucun élément.`

### 6.7 Remarques

| Élément | Détail |
| --- | --- |
| Route | `/technicien/historique/{id}/intervention/ajouter` |
| Accès | technicien, gestion, admin |
| Objectif | ajouter une remarque d'intervention sur un ascenseur |

**Ce que l'utilisateur voit**

- Le titre `Remarques`.
- Le nom de l'ascenseur.
- Une carte `Intervention`.
- Une étiquette `Interne + public`.
- Un formulaire avec :
  - `Date`
  - `Commentaire`
- Deux boutons :
  - `Modifier`
  - `Retour`

**Comportement**

- Les champs conservent les valeurs précédentes après une erreur de validation.
- Un message d'alerte rouge peut s'afficher en cas d'erreur globale.
- En cas de succès, l'utilisateur revient sur l'historique de l'ascenseur avec un message de succès visible après redirection.

**États particuliers**

- L'alerte de validation s'affiche en liste.
- Aucun champ de mail n'est visible.

### 6.8 Urgences

| Élément | Détail |
| --- | --- |
| Route | `/technicien/urgences` |
| Accès | technicien, gestion, admin |
| Objectif | consulter les urgences ouvertes |

**Ce que l'utilisateur voit**

- Le titre `Urgences`.
- Une barre d'action `Ajouter` si l'utilisateur peut créer.
- Un lien `Retour`.
- Un résumé du nombre d'éléments ouverts.
- Un tableau desktop ou une liste mobile.
- Colonnes visibles :
  - Date
  - Ascenseur
  - Commentaire
  - État
  - Action si la clôture est autorisée

**Actions**

- Cliquer sur `Ajouter` pour ouvrir le formulaire.
- Cliquer sur `Clôturer` sur une urgence quand le lien est affiché.

**Comportement**

- La liste affiche `Urgent`.
- Le bouton de clôture est rouge.
- Si la clôture est autorisée, l'écran suivant demande une date et un commentaire.

**États particuliers**

- `Aucune urgence ouverte.`

### 6.9 Ajouter une urgence

| Élément | Détail |
| --- | --- |
| Route | `/technicien/urgences/ajouter` |
| Accès | uniquement si l'écran de création est autorisé |
| Objectif | encoder une urgence |

**Ce que l'utilisateur voit**

- Le titre `Ajouter une urgence`.
- Une carte `Urgence`.
- Un badge `Urgent`.
- Un formulaire avec :
  - `Date`
  - `Immeuble`
  - `Destinataire`
  - `Commentaire`
- Les boutons `Enregistrer` et `Retour`.

**Comportement**

- Les options `Immeuble` et `Destinataire` sont des listes déroulantes.
- Un retour d'erreur s'affiche si un champ est invalide.
- En cas de validation correcte, l'utilisateur revient à la liste des urgences avec un message de succès.

**États particuliers**

- Les erreurs sont listées au-dessus du formulaire.
- Les valeurs saisies sont conservées après erreur.

### 6.10 Clôturer une urgence

| Élément | Détail |
| --- | --- |
| Route | `/technicien/urgences/{id}/cloturer` |
| Accès | lié à une permission de clôture très ciblée |
| Objectif | fermer une urgence |

**Ce que l'utilisateur voit**

- Le titre `Clôturer une urgence`.
- Le nom de l'ascenseur concerné.
- Une carte `Résolution`.
- Un badge `Urgent`.
- Un formulaire avec :
  - `Date`
  - `Commentaire`
- Les boutons `Clôturer` et `Retour`.

**Comportement**

- L'action transforme la demande en urgence clôturée.
- Le commentaire est renvoyé dans l'historique visible.
- Un succès s'affiche après redirection.

**États particuliers**

- Validation en liste si la date est absente ou invalide.

### 6.11 À faire

| Élément | Détail |
| --- | --- |
| Route | `/technicien/afaire` |
| Accès | technicien, gestion, admin |
| Objectif | consulter les demandes à faire ouvertes |

**Ce que l'utilisateur voit**

- Le titre `À faire`.
- Une barre d'action `Ajouter` si la création est autorisée.
- Un tableau desktop ou une liste mobile.
- Le même type de colonnes que sur les urgences.
- Des badges `À faire`.

**Actions**

- Cliquer sur `Ajouter`.
- Cliquer sur `Transformer` sur une ligne.

**États particuliers**

- `Aucune demande à faire ouverte.`

### 6.12 Ajouter une demande à faire

| Élément | Détail |
| --- | --- |
| Route | `/technicien/afaire/ajouter` |
| Accès | conditionné par la permission de création |
| Objectif | encoder une demande à faire |

**Ce que l'utilisateur voit**

- Le titre `Ajouter une demande à faire`.
- Le formulaire avec :
  - `Date`
  - `Immeuble`
  - `Destinataire`
  - `Commentaire`
- Les boutons `Enregistrer` et `Retour`.

**Comportement**

- Les erreurs de validation sont affichées en haut du formulaire.
- La création réussie renvoie à la liste `À faire`.

### 6.13 Transformer une demande à faire

| Élément | Détail |
| --- | --- |
| Route | `/technicien/afaire/{id}/cloturer` |
| Accès | technicien, gestion, admin |
| Objectif | transformer une demande à faire en tâche |

**Ce que l'utilisateur voit**

- Le titre `Transformer en tâche`.
- Le nom de l'ascenseur.
- Une carte `Transformation en tâche`.
- Un badge `À faire`.
- Un formulaire avec `Date` et `Commentaire`.
- Les boutons `Transformer` et `Retour`.

**Comportement**

- Après validation, l'utilisateur revient à la liste `À faire` avec un succès visible.

### 6.14 Tâches

| Élément | Détail |
| --- | --- |
| Route | `/technicien/taches` |
| Accès | technicien, gestion, admin |
| Objectif | consulter et clôturer ses tâches ouvertes |

**Ce que l'utilisateur voit**

- Le titre `Mes tâches`.
- Une action `Ajouter`.
- Un filtre par chips :
  - `Tout`
  - les filtres existants
- Un compteur d'éléments ouverts.
- Des cartes de tâches avec :
  - sujet,
  - date,
  - demandeur,
  - badge de filtre,
  - commentaire,
  - bouton de clôture à droite.

**Desktop**

- Les tâches sont sous forme de cartes empilées.
- Le bouton de clôture est un bouton icône avec un pictogramme de validation.

**Mobile**

- La structure reste très proche.
- Les filtres sont horizontaux et défilent si nécessaire.

**Actions**

- Cliquer sur une chip filtre les tâches.
- Cliquer sur `Ajouter` ouvre le formulaire.
- Cliquer sur le bouton icône clôture marque la tâche terminée.

**Comportement**

- La clôture est réservée à la tâche de l'utilisateur courant.
- Le retour affiché est `Tâche clôturée.`

**États particuliers**

- `Aucune tâche ouverte pour ce filtre.`

### 6.15 Tâches globales

| Élément | Détail |
| --- | --- |
| Route | `/technicien/taches/global` |
| Accès | gestion, admin |
| Objectif | voir toutes les tâches ouvertes |

**Ce que l'utilisateur voit**

- Le titre `Toutes les tâches`.
- Le bouton `Mes tâches`.
- Le même filtre par chips.
- Les cartes affichent en plus le destinataire.
- L'action visible est `Modification`.

**Comportement**

- Le bouton `Modification` ouvre l'écran d'édition de la tâche.

### 6.16 Ajouter une tâche

| Élément | Détail |
| --- | --- |
| Route | `/technicien/taches/ajouter` |
| Accès | technicien, gestion, admin |
| Objectif | créer une tâche manuelle |

**Ce que l'utilisateur voit**

- Le titre `Encodage`.
- Une carte `Informations de la tâche`.
- Un formulaire avec :
  - `Date`
  - `Titre`
  - `Filtre`
  - `Destinataire`
  - `Commentaire`
- Les boutons `Enregistrer` et `Retour`.

**Comportement**

- Les listes déroulantes proposent les valeurs disponibles.
- Les erreurs s'affichent dans une liste rouge.
- La réussite affiche `Tâche enregistrée.`

### 6.17 Modifier une tâche

| Élément | Détail |
| --- | --- |
| Route | `/technicien/taches/global/{id}/modifier` |
| Accès | gestion, admin |
| Objectif | modifier une tâche existante |

**Ce que l'utilisateur voit**

- Le titre `Modification`.
- Le même formulaire que la création, avec valeurs préremplies.
- Les boutons `Enregistrer` et `Retour`.

**Comportement**

- Les champs sont repopulés après erreur.
- La réussite affiche `Tâche modifiée.`

### 6.18 Mes étapes

| Élément | Détail |
| --- | --- |
| Route | `/technicien/etapes` |
| Accès | technicien, gestion, admin, mais seulement si un rattachement technicien existe |
| Objectif | suivre et changer l'avancement des étapes de paiement |

**Ce que l'utilisateur voit**

- Le titre `Mes étapes`.
- La liste des techniciens rattachés.
- Un compteur d'étapes.
- Des cartes avec :
  - immeuble,
  - localité,
  - devis,
  - badge d'état,
  - bloc d'information `Terme`,
  - `Pourcentage`,
  - `Montant`,
  - `Date repère`.
- Trois boutons d'état :
  - `Vu`
  - `En cours`
  - `Terminé`

**Desktop**

- Les cartes sont en grille.
- Les boutons d'état sont segmentés en une ligne.
- Le badge change selon l'état.

**Mobile**

- Les cartes restent empilées.
- Sous 400 px, les icônes des boutons d'état disparaissent, mais les libellés restent.

**Actions**

- Cliquer sur un des trois boutons d'état.

**Comportement**

- L'état change sans rechargement visible.
- Un toast s'affiche :
  - `État de l'étape enregistré.`
  - ou `Erreur, état non modifié.`
- Le badge et la couleur de bordure latérale se mettent à jour.

**États particuliers**

- Si aucun rattachement n'existe : `Accès refusé.`
- Si aucune étape n'est disponible : `Aucune étape affectée à vos techniciens.`

### 6.19 Finances

| Élément | Détail |
| --- | --- |
| Route | `/gestion/comptes` |
| Accès | gestion, admin |
| Objectif | consulter les factures non terminées |

**Ce que l'utilisateur voit**

- Le titre `Finances`.
- Un sous-texte indiquant que les factures sont filtrées selon le legacy.
- Deux boutons PDF :
  - `Liste factures`
  - `Contrat résumé`
- Un lien `Chantiers`.
- Deux indicateurs :
  - nombre de factures en attente,
  - total HTVA.
- Un tableau desktop et une version mobile en cartes.

**Colonnes visibles**

- Date
- No
- Montant TVAC
- Référence
- Immeuble
- Syndic
- PDF

**Actions**

- Cliquer sur `Liste factures`.
- Cliquer sur `Contrat résumé`.
- Cliquer sur `Devis` si la ligne en propose un.
- Cliquer sur l'icône PDF pour ouvrir la facture.
- Cliquer sur `Note de crédit` si l'action est présente.

**États particuliers**

- `Aucune facture non terminée.`

### 6.20 Chantiers

| Élément | Détail |
| --- | --- |
| Route | `/gestion/chantiers` |
| Accès | gestion, admin |
| Objectif | préparer les contrats, suivre les chantiers et les affectations |

**Ce que l'utilisateur voit**

- Le titre `Chantiers`.
- Un lien `Comptes`.
- Un flash vert en cas de succès.
- Une section `Contrats à préparer`.
- Une section `Chantiers en cours`.
- En bas, un résumé :
  - nombre de jours réservés,
  - date à annoncer.

**Contrats à préparer**

- Chaque carte contient le nom de l'immeuble / localité.
- Un bouton rond `Prêt` permet de marquer le contrat préparé.
- Après validation, le message visible est `Contrat préparé.`

**Chantiers en cours**

- Une barre d'action contient :
  - `Générer les tâches du jour`
  - un champ de recherche `Rechercher un chantier`
- Chaque chantier est présenté dans une grande carte planning.
- L'en-tête résume :
  - immeuble,
  - syndic,
  - devis / payé le,
  - chantier début / fin,
  - délai de communication,
  - jours chantier,
  - mise en préparation.
- La zone de détail affiche les lignes :
  - facture / devis,
  - date,
  - libellé,
  - montant,
  - état,
  - PDF,
  - étape,
  - technicien.

**Actions**

- Cliquer sur `Générer les tâches du jour`.
- Cliquer sur `Prêt`.
- Cliquer sur l'icône PDF d'un chantier.
- Modifier un technicien via la liste déroulante.
- Modifier l'état via la liste déroulante si l'utilisateur est administrateur.
- Cocher ou décocher `Étape réalisée` si l'utilisateur est administrateur.
- Saisir du texte dans la recherche pour filtrer les cartes.

**Comportement**

- La recherche filtre en direct les cartes visibles.
- Si aucune carte ne correspond, un message `Aucun chantier ne correspond.` apparaît.
- Les changements sur les listes déroulantes et cases à cocher déclenchent un envoi asynchrone et un toast :
  - `Modification enregistrée`
  - ou `Erreur, modification annulée`
- Les contrôles se désactivent temporairement pendant l'envoi.

**États particuliers**

- `Aucun contrat à préparer.`
- `Aucun chantier.`
- Certaines lignes affichent `Non payée`.
- Les cartes changent d'apparence selon le contexte : préparation, retard, en attente.

### 6.21 Ascenseurs sous contrat

| Élément | Détail |
| --- | --- |
| Route | `/syndic/ascenseurs` |
| Accès | syndic |
| Objectif | consulter les ascenseurs actifs du périmètre syndic |

**Ce que l'utilisateur voit**

- Le titre `Ascenseurs sous contrat`.
- Un compteur d'ascenseurs.
- Un tableau desktop.
- Une version mobile en cartes.

**Colonnes visibles**

- Immeuble
- Localité
- Adresse
- Contrat
- Visites
- Montant
- Dossier sécurité

**Actions**

- Cliquer sur le lien Google Drive du dossier sécurité.

**Comportement**

- Le lien s'ouvre dans un nouvel onglet.
- Si aucun lien n'est présent, le texte `Non renseigné` ou `Dossier securite non renseigne` est affiché.

**États particuliers**

- `Aucun ascenseur sous contrat actif pour ce syndic.`

### 6.22 Factures

| Élément | Détail |
| --- | --- |
| Route | `/syndic/factures` |
| Accès | syndic |
| Objectif | consulter les factures en cours et payées |

**Ce que l'utilisateur voit**

- Le titre `Factures`.
- Deux sections :
  - `Factures en cours`
  - `Factures payees`
- Chaque section affiche son compteur.
- Chaque section propose un tableau desktop et une liste mobile en cartes.

**Colonnes visibles**

- No
- Date
- Montant
- Immeuble
- Statut
- PDF

**Actions**

- Cliquer sur l'icône PDF pour ouvrir la facture.

**Comportement**

- Les factures en cours sont marquées `En cours`.
- Les factures payées sont marquées `Payee` / `Payée`.

**États particuliers**

- `Aucune facture en cours pour ce syndic.`
- `Aucune facture payee pour ce syndic.`

### 6.23 Offres en cours

| Élément | Détail |
| --- | --- |
| Route | `/syndic/offres` |
| Accès | syndic |
| Objectif | consulter les devis/offres ouverts |

**Ce que l'utilisateur voit**

- Le titre `Offres en cours`.
- Un compteur d'offres.
- Un tableau desktop.
- Une version mobile en cartes.
- Le statut visible est `Offre en cours`.

**Actions**

- Cliquer sur l'icône PDF pour ouvrir le devis.

**États particuliers**

- `Aucune offre en cours pour ce syndic.`

### 6.24 Travaux programmés

| Élément | Détail |
| --- | --- |
| Route | `/syndic/travaux` |
| Accès | syndic |
| Objectif | consulter les documents de travaux planifiés |

**Ce que l'utilisateur voit**

- Le titre `Travaux programmés`.
- Un compteur de documents.
- Les documents sont regroupés par ascenseur.
- Chaque groupe affiche :
  - le libellé de l'ascenseur,
  - la localité,
  - une liste de documents.
- Chaque document affiche une date et le nom de fichier `Devis-{id}.pdf`.

**Actions**

- Cliquer sur l'icône PDF pour ouvrir le document.

**Comportement**

- Le document s'ouvre dans le navigateur.
- Si le fichier est une image, la page affichée montre l'image centrée sur fond gris.

**États particuliers**

- `Aucun travail programmé.`

## 7. Audit détaillé des actions utilisateur

| Action | Où | Qui | Résultat visible |
| --- | --- | --- | --- |
| Se connecter | `/login` | visiteur | redirection vers le tableau de bord |
| Se déconnecter | sidebar / menu mobile | utilisateur connecté | session détruite, retour à `/login` |
| Ouvrir le menu mobile | barre du haut | utilisateur connecté | menu coulissant avec accueil, modules et déconnexion |
| Ouvrir le sélecteur de modules | tableau de bord mobile | rôles multi-modules | panneau de choix des modules |
| Réduire la sidebar | desktop | utilisateur connecté | sidebar plus étroite, texte masqué |
| Filtrer une liste | `Entretiens`, `Tâches`, `Chantiers` | rôles autorisés | liste recalculée ou filtrée en direct |
| Ouvrir un PDF | factures, offres, chantiers, historiques | selon la page | document affiché dans le navigateur |
| Ouvrir un Drive | `Ascenseurs sous contrat` | syndic | nouvel onglet |
| Marquer un contrat prêt | `Chantiers` | gestion, admin | flash `Contrat préparé.` |
| Générer les tâches du jour | `Chantiers` | gestion, admin | flash avec le nombre de tâches générées |
| Affecter un technicien | `Chantiers` | gestion, admin | toast ou flash `Technicien affecté.` |
| Changer l'avancement | `Mes étapes` | rôle autorisé | toast `État de l'étape enregistré.` |
| Clôturer une tâche | `Mes tâches` | propriétaire de la tâche | flash `Tâche clôturée.` |
| Modifier une tâche | `Tâches globales` | gestion, admin | flash `Tâche modifiée.` |
| Ajouter une tâche | formulaire tâche | technicien, gestion, admin | flash `Tâche enregistrée.` |
| Ajouter une remarque | historique ascenseur | technicien, gestion, admin | retour à l'historique avec succès |
| Ajouter / fermer urgence ou à faire | écrans legacy | selon permission | retour à la liste correspondante |

## 8. Audit responsive desktop / mobile

### Desktop / écran large

- Sidebar fixe à gauche.
- Barre du haut masquée pour les utilisateurs connectés.
- Contenu centré dans une largeur maximale plus large.
- Les tableaux sont affichés en tables classiques.
- Les pages `Entretiens`, `Finances`, `Ascenseurs`, `Factures`, `Offres` utilisent des tableaux horizontaux.
- Les pages `Historique`, `Tâches`, `Mes étapes`, `Chantiers` utilisent des cartes denses.

### Mobile / petit écran

- Sidebar masquée.
- Barre du haut sticky.
- Bouton retour à la place du logo sur les pages profondes.
- Menu utilisateur en sheet.
- Tabbar fixe en bas sur les pages de module.
- Les tableaux se transforment le plus souvent en cartes avec `data-label`.
- Le formulaire passe en une colonne.
- Les boutons deviennent plus larges et plus faciles à toucher.

### Cas particuliers

- `Demandes` utilise une vraie liste mobile séparée.
- `Historique` utilise une feuille coulissante pour les documents.
- `Étapes` garde les boutons d'état en ligne, avec suppression des icônes sous 400 px.
- `Chantiers` garde une grille complexe mais la réorganise en mini-cartes sur mobile.

## 9. Audit UI / UX visuel

- Palette principale :
  - bleu primaire `#2563EB`
  - bleu clair `#EEF4FF`
  - danger `#DC2626`
  - danger clair `#FDECEC`
  - succès `#16A34A`
  - succès clair `#E8F7EE`
  - warning `#D97706`
  - warning clair `#FBF1E2`
- Texte principal : bleu-gris foncé.
- Fond général : gris bleuté très clair.
- Cartes :
  - fond blanc,
  - bord fin clair,
  - ombre discrète,
  - rayon 14 px.
- Boutons :
  - hauteur minimale 44 px,
  - rayon 10 px,
  - versions primaire, danger et succès en couleur pleine.
- Badges :
  - arrondis en pilule,
  - police petite,
  - variantes visuelles selon l'état.
- Tableaux :
  - en-têtes en majuscules petites,
  - fond d'en-tête gris très clair,
  - lignes survolées légèrement.
- Formulaires :
  - champs arrondis,
  - bord clair,
  - focus bleu avec contour visible.
- Navigation :
  - menus en survol gris clair,
  - état actif bleu clair.
- Typographie :
  - police système sans-serif,
  - titres plus grands et plus serrés,
  - labels plus petits, en capitales sur certaines zones.
- Cohérence :
  - cartes, badges, boutons, tableaux et menus reprennent les mêmes couleurs et rayons sur tous les écrans.

## 10. Logique métier visible côté utilisateur

### États lisibles par l'utilisateur

| Domaine | États visibles | Sens utilisateur |
| --- | --- | --- |
| Entretiens | `Rouge`, `À faire`, `OK` | délai dépassé, à traiter, conforme |
| Étapes | `À voir`, `Vu`, `En cours`, `Terminé` | suivi d'avancement |
| Urgences / À faire | `Urgent`, `À faire` | priorités de demande |
| Interventions | `Urgent`, `À faire`, `Interne`, `Public` | visibilité et typologie de note |
| Finances | `En cours`, `Payee` / `Payée` | facture encore ouverte ou réglée |
| Chantiers | `Non payée`, `En attente`, `Préparation`, `Chantier` | position du dossier dans le cycle |

### Ce que le métier laisse comprendre

- Le tableau de bord sert d'entrée par rôle.
- Le technicien travaille sur les urgences, les demandes, les tâches et les entretiens.
- La gestion suit les factures et la planification de chantier.
- Le syndic lit des documents et des listes de suivi.
- Les actions de modification sont limitées à certains rôles et parfois à un utilisateur très précis sur les écrans legacy.
- Certaines opérations déclenchent un message de confirmation après redirection ou via toast.

## 11. Parcours utilisateurs principaux

### Parcours 1 : connexion et entrée dans un module

1. Ouvrir `/`.
2. Être redirigé vers `/login` si non connecté.
3. Saisir identifiant et mot de passe.
4. Arriver sur `/dashboard`.
5. Cliquer sur la carte du module souhaité.

### Parcours 2 : technicien

1. Ouvrir le tableau de bord.
2. Aller sur `Urgences`, `À faire` ou `Tâches`.
3. Ouvrir un contrat depuis `Entretiens`.
4. Consulter les documents depuis `Historique`.
5. Ajouter une remarque si nécessaire.

### Parcours 3 : gestion

1. Ouvrir `Finances`.
2. Consulter les PDF de devis, facture ou note de crédit.
3. Aller sur `Chantiers`.
4. Préparer un contrat.
5. Générer les tâches du jour.
6. Ajuster les affectations visibles.

### Parcours 4 : syndic

1. Ouvrir `Ascenseurs sous contrat`.
2. Consulter les factures en cours et payées.
3. Ouvrir une offre en PDF.
4. Ouvrir un document de travaux.

## 12. États particuliers de l'interface

| Type d'état | Visible où | Texte / comportement |
| --- | --- | --- |
| Vide | nombreuses listes | `Aucun ...` selon l'écran |
| Validation | formulaires | liste d'erreurs rouge au-dessus du formulaire |
| Succès | plusieurs écrans | flash vert ou toast |
| Erreur de connexion | login | alerte rouge |
| Accès refusé | filtres et gardes | `Accès refusé.` ou `Acces refuse.` |
| Périmètre syndic absent | écrans syndic | `Périmètre syndic non résolu.` |
| État invalide | étape de paiement | `État invalide.` |
| Enregistrement impossible | remarque historique | `Enregistrement impossible.` |
| Chargement | AJAX chantier / étapes | aucun loader visible, seulement désactivation temporaire des contrôles |

### Chargement

- Aucun skeleton ni spinner n'est rendu dans le code.
- Lors des requêtes asynchrones, les contrôles sont désactivés temporairement.
- Les documents PDF s'ouvrent via le navigateur sans état intermédiaire dédié dans l'interface.

## 13. Glossaire des termes visibles dans l'application

| Terme | Sens visible |
| --- | --- |
| `Accueil` | point d'entrée du module ou du tableau de bord |
| `Urgence` | demande prioritaire à traiter |
| `À faire` | demande classique à convertir ou clôturer |
| `Tâche` | élément de travail assigné à un utilisateur |
| `Entretiens` | suivi des visites d'entretien |
| `Historique` | liste et détail des interventions passées |
| `Documents` | accès aux PDF et aux pièces associées |
| `Dossier sécurité` | document externe de suivi |
| `Prêt` | contrat préparé |
| `En cours` | facture ou étape en cours |
| `Payée` | facture réglée |
| `Terminé` | étape achevée |
| `Non renseigné` | donnée absente |
| `JAMAIS` | date d'entretien inexistante |

## 14. Points factuels à vérifier manuellement

- Le rendu exact du lecteur PDF du navigateur.
- Le contenu exact des PDF générés.
- Le rendu exact des pages 404 du framework en cas d'identifiant invalide.
- La disponibilité effective des liens Google Drive et des documents sur disque.
- Le comportement exact des cas legacy basés sur des utilisateurs précis lorsque l'environnement de production diffère du jeu de données observé.