# Brief de refonte UI/UX — Écran « Journal des modifications »

> **À l'attention de l'IA de refonte.** Tu n'as pas accès au code source. Base-toi sur ce document + les captures jointes. Objectif : **améliorer le style / l'UI-UX** de cet écran (lisibilité, hiérarchie, ergonomie, responsive, accessibilité) **sans changer les fonctionnalités ni la logique** décrites plus bas. Domaine : **ERP de distribution pharmaceutique** (module Administration système). Interface en **français**.

---

## 1. Rôle de l'écran

C'est un **journal d'audit** (traçabilité). Il permet de **consulter toutes les opérations d'écriture** — Ajout, Modification, Suppression — enregistrées automatiquement sur les données de l'ERP (clients, commandes, factures, produits, etc.). Pour chaque opération on peut voir **qui** l'a faite, **quand**, sur **quelle table** et **quel enregistrement**, avec le **détail avant / après**.

Écran **en lecture seule** : on filtre et on consulte, on ne saisit rien.

## 2. Utilisateurs & contexte d'usage

- **Administrateur système / DSI**, **contrôle interne / audit**, **support**.
- Cas d'usage typiques : « qui a modifié ce prix / cette commande ? », « qu'est-ce qui a changé sur ce client hier ? », enquêtes de sécurité, réconciliation, preuve d'audit.
- Volume potentiellement **très élevé** (des milliers de lignes/jour) → la lisibilité et le filtrage sont critiques.

## 3. Anatomie de l'écran (à faire correspondre aux captures)

- **Zone A — En-tête** : fil d'Ariane (« Administration système › Journal des modifications ») + un compteur **« Nbre ligne »** (nombre d'opérations affichées).
- **Zone B — Barre de filtres** (dans l'en-tête d'une carte) :
  - **Période** (sélecteur de plage de dates/heures — par défaut : aujourd'hui),
  - **Table (fichier)** (liste déroulante avec recherche),
  - **Utilisateur** (liste déroulante avec recherche),
  - **Opération** (Toutes / Ajout / Modification / Suppression),
  - bouton **Filtre**.
  - Sous la barre : un **message d'avertissement** qui apparaît si le résultat est tronqué (« Affichage limité aux 5 000 opérations les plus récentes… affinez les filtres »).
- **Zone C — Tableau des opérations** : une ligne par opération (voir colonnes §4).
- **Zone D — Détail en accordéon** : chaque ligne a un bouton **chevron** ; au clic, un **panneau se déplie juste sous la ligne** montrant le détail **avant / après** (voir §6). Plusieurs lignes peuvent être dépliées en même temps.

## 4. Colonnes du tableau

| Colonne | Contenu |
|---|---|
| Date | Date + heure de l'opération |
| Opération | **Badge coloré** : AJOUT / MODIFICATION / SUPPRESSION |
| Table (fichier) | Nom de la table concernée |
| Identifiant | Clé primaire de l'enregistrement (ex. `IDCLIENT = 167`) |
| Utilisateur | Nom de l'employé ; « Système / SQL » si opération hors interface |
| IP | Adresse IP d'origine |
| Champs modifiés | Nombre de champs changés (pertinent pour une modification) |
| Détail | Bouton **chevron** pour déplier / replier le détail |

## 5. Filtres (comportement)

- **Période** : borne les résultats (défaut = journée en cours). Indispensable vu le volume.
- **Table**, **Utilisateur** : listes déroulantes recherchables (beaucoup d'options).
- **Opération** : Ajout / Modification / Suppression / Toutes.
- Les filtres se combinent ; le bouton **Filtre** recharge le tableau.

## 6. Le détail avant / après (élément central)

Au dépliage d'une ligne, on affiche :
- une **ligne de récapitulatif** (opération, table, identifiant, date, utilisateur, IP) ;
- un **tableau à 3 colonnes : Champ | Avant | Après**.
  - **Modification** : seuls les **champs modifiés** sont visibles par défaut (surlignés ; **ancienne valeur en rouge**, **nouvelle en vert**) ; un **interrupteur** « Afficher les N champ(s) inchangé(s) » révèle le reste.
  - **Ajout** : uniquement la colonne « Après » (les nouvelles valeurs).
  - **Suppression** : uniquement la colonne « Avant » (les valeurs supprimées).
- Les valeurs peuvent être **longues** (texte, nombres, dates, booléens) — la mise en page doit rester lisible.

## 7. Codes visuels / états

- **Badges d'opération** : AJOUT (bleu/info), MODIFICATION (orange/warning), SUPPRESSION (rouge/danger).
- **Diff** : avant = rouge, après = vert, ligne modifiée surlignée (fond clair).
- **Utilisateur « Système / SQL »** en italique/atténué (opération non attribuée à un employé).
- **Ligne dépliée** : surlignée + chevron pivoté.
- États à soigner : **chargement**, **aucun résultat** sur la période, **résultat tronqué** (bandeau d'avertissement).

## 8. Interactions à préserver

- **Accordéon** (dépliage inline) avec **multi-ouverture** ; le détail est chargé à la demande et mis en cache.
- Filtrage combiné + rechargement du tableau.
- Listes déroulantes **recherchables** (table, utilisateur).
- **Pagination** côté client, tri par colonnes.
- Lecture seule (aucune action destructive).

## 9. Points de douleur UX actuels (pistes de refonte — à confirmer via les captures)

- **Densité** : tableau à 8 colonnes, beaucoup de texte technique (noms de tables/colonnes bruts en base, ex. `NomPrenomPersonnel`).
- **Lisibilité du diff** : le rouge/vert par cellule est basique ; un vrai « diff » (surlignage des portions de texte qui changent) ou une présentation avant→après plus visuelle aiderait.
- **Valeurs longues** : certaines valeurs JSON/texte débordent ; besoin d'un traitement (troncature + expansion, retour à la ligne maîtrisé, formatage des dates/booléens/montants).
- **Volume & feedback** : le plafond à 5 000 lignes et le filtre « aujourd'hui » par défaut doivent être **très visibles** (sinon l'utilisateur croit qu'il n'y a rien).
- **Hiérarchie visuelle** : distinguer d'un coup d'œil le type d'opération, l'utilisateur, la table.
- **Accessibilité** : ne pas reposer uniquement sur la couleur (ajouter icônes/libellés) ; contrastes.
- **Responsive** : conçu pour desktop large ; comportement sur petits écrans à revoir.
- **Repérage temporel** : regrouper par jour / par table / par utilisateur pourrait aider l'analyse.

## 10. Objectifs de la refonte & garde-fous

**Améliorer** : lisibilité et scannabilité du tableau, **présentation du diff avant/après** (plus visuelle, gestion des valeurs longues, formatage), clarté des états (vide / chargement / tronqué), différenciation des types d'opération (couleur **+** icône/texte), responsive, accessibilité, hiérarchie visuelle.

**Préserver impérativement** : les **filtres** (période/table/utilisateur/opération), le **détail avant/après** complet (champs modifiés + accès aux inchangés), le **code couleur des opérations**, la nature **lecture seule**, le **multi-dépliage**, et l'**avertissement de troncature**.

## 11. Cadre technique (pour cadrer les propositions)

Interface web : **Bootstrap 5** (thème admin), **jQuery**, **DataTables** (le tableau + l'accordéon via les *child rows*), **select2** (listes recherchables), sélecteur de **plage de dates**. Données fournies par le serveur en **AJAX/JSON**, page **mono-écran**. Les propositions doivent rester **intégrables** dans une application server-rendered (Blade/Laravel) — conserver ce socle ou proposer une évolution en le précisant.

## 12. Captures à joindre (recommandé)

1. Écran complet : barre de filtres + tableau rempli.
2. Une **ligne « Modification » dépliée** montrant le diff (avant rouge / après vert) et l'interrupteur des champs inchangés.
3. Un dépliage d'un **Ajout** et d'une **Suppression**.
4. Gros plan sur les **badges d'opération**.
5. Le **bandeau d'avertissement** de troncature (5 000 lignes).
6. L'**état « aucun résultat »** sur une période sans opération.