Save SAO AG Grid work

AG_GRID_COMPATIBILITY_ANALYSIS.md

@@ -0,0 +1,478 @@
+# Analyse de compatibilite SAO / AG Grid
+
+## Objectif
+
+Evaluer si la vue `tree` de SAO peut etre rendue compatible avec une grille open source gratuite, en particulier AG Grid Community, sans React, en JavaScript pur.
+
+## Conclusion courte
+
+Oui, c'est faisable, mais pas comme un simple remplacement visuel de `<table>` par AG Grid.
+
+La vue `tree` actuelle de SAO embarque a la fois:
+
+- le rendu HTML du tableau
+- la logique de selection
+- l'expansion arborescente
+- l'edition inline
+- des widgets de cellule lies aux champs Tryton
+- le tri
+- les colonnes optionnelles
+- les boutons d'action
+- le drag-and-drop
+- les chargements asynchrones de champs
+
+La bonne approche est donc de creer une couche d'adaptation entre:
+
+- le modele Tryton/SAO existant
+- et un moteur de rendu "grid"
+
+Autrement dit: il faut decoupler `Sao.View.Tree` de son rendu DOM actuel, puis brancher AG Grid comme renderer alternatif.
+
+## Ce que fait aujourd'hui la vue tree
+
+### 1. Parsing XML des colonnes
+
+La vue `tree` est construite depuis le XML Tryton via `Sao.View.TreeXMLViewParser`, qui instancie des colonnes specialisees selon `attributes.widget`.
+
+References:
+
+- `tryton-sao.js:21678` `Sao.View.TreeXMLViewParser`
+- `tryton-sao.js:24807` `Sao.View.TreeXMLViewParser.WIDGETS`
+
+Implication:
+
+- la definition des colonnes est deja structuree
+- c'est un bon point d'entree pour produire des `columnDefs` AG Grid
+
+### 2. La vue Tree est tres couplee au DOM table
+
+`Sao.View.Tree` construit directement:
+
+- `div.tree-container`
+- `table`
+- `colgroup`
+- `thead`
+- `tbody`
+- `tfoot`
+
+References:
+
+- `tryton-sao.js:21755`
+- `tryton-sao.js:21796`
+- `tryton-sao.js:21803`
+- `tryton-sao.js:21810`
+- `tryton-sao.js:21908`
+
+Implication:
+
+- aujourd'hui, `Tree` n'est pas un controleur de donnees avec un renderer interchangeable
+- c'est deja le renderer
+
+### 3. Les lignes encapsulent elles aussi rendu + comportement
+
+`Sao.View.Tree.Row` construit chaque `<tr>` et tous les `<td>`, gere les clics, doubles clics, la selection, l'expansion, et le rendu cellule par cellule.
+
+References:
+
+- `tryton-sao.js:23219` `Sao.View.Tree.Row`
+- `tryton-sao.js:23270` `_construct`
+- `tryton-sao.js:23378` `redraw`
+- `tryton-sao.js:23528` `toggle_row`
+- `tryton-sao.js:23536` `expand_row`
+- `tryton-sao.js:23575` `expand_children`
+
+Implication:
+
+- remplacer seulement `table` ne suffit pas
+- il faut aussi contourner ou remplacer `Row`
+
+### 4. Le rendu cellule depend fortement des classes Column
+
+Chaque type de colonne sait:
+
+- charger les donnees au besoin
+- formatter la valeur
+- masquer selon l'etat du champ
+- ouvrir des liens Tryton
+- afficher des icones/prefixes/suffixes
+- gerer des actions particuliere
+
+References:
+
+- `tryton-sao.js:24089` `Sao.View.Tree.CharColumn`
+- `tryton-sao.js:24204` `BooleanColumn`
+- `tryton-sao.js:24239` `Many2OneColumn`
+- `tryton-sao.js:24365` `SelectionColumn`
+- `tryton-sao.js:24630` `BinaryColumn`
+- `tryton-sao.js:24755` `ButtonColumn`
+
+Implication:
+
+- ces classes sont reutilisables
+- mais aujourd'hui elles renvoient surtout du DOM jQuery, pas des objets de configuration AG Grid
+
+### 5. L'edition inline repose sur les widgets Form existants
+
+L'edition tree editable utilise `Sao.View.EditableTree.*`, qui reutilise les widgets formulaire SAO dans les cellules.
+
+References:
+
+- `tryton-sao.js:23737` `Sao.View.Tree.RowEditable`
+- `tryton-sao.js:24834` `Sao.View.EditableTree`
+
+Implication:
+
+- c'est une excellente nouvelle pour un POC
+- on peut probablement injecter ces widgets dans des `cellEditor` / `cellRenderer` AG Grid custom
+- mais il faudra un pont entre le cycle de vie AG Grid et le cycle de vie jQuery/SAO
+
+## Fonctionnalites compatibles assez directement
+
+### Faisable avec une couche d'adaptation raisonnable
+
+- affichage tabulaire
+- tri simple sur colonne
+- affichage/masquage de colonnes
+- selection simple ou multiple
+- rendu des types de base: texte, nombre, booleen, date, selection
+- boutons de ligne
+- copier les lignes selectionnees
+
+Pourquoi:
+
+- SAO a deja les meta-donnees de colonnes
+- AG Grid sait tres bien rendre et mettre a jour ces cas
+
+## Fonctionnalites plus sensibles
+
+### 1. Arborescence
+
+SAO gere le mode arbre via `children_field`, expansion paresseuse et chemins de lignes.
+
+References:
+
+- `tryton-sao.js:21836`
+- `tryton-sao.js:23479`
+- `tryton-sao.js:23575`
+
+Risque:
+
+- il faut mapper cela soit sur le mode tree data AG Grid, soit sur un flattening manuel
+- le comportement exact Tryton devra etre conserve, surtout avec chargement lazy
+
+### 2. Edition inline riche
+
+Le flux actuel depend de:
+
+- validation Tryton
+- focus clavier
+- navigation tab/up/down/enter
+- creation de nouvelle ligne a la volee
+- sauvegarde conditionnelle
+
+References:
+
+- `tryton-sao.js:23122` `save_row`
+- `tryton-sao.js:23163` `edit_row`
+- `tryton-sao.js:23893` `key_press`
+
+Risque:
+
+- AG Grid a son propre cycle d'edition
+- si on force trop AG Grid, on peut casser le comportement SAO historique
+
+### 3. Chargement asynchrone champ par champ
+
+Le rendu actuel charge les champs a la demande:
+
+- `record.load(...)`
+- puis rendu de cellule
+
+References:
+
+- `tryton-sao.js:23204`
+- `tryton-sao.js:24120`
+- `tryton-sao.js:24681`
+
+Risque:
+
+- AG Grid prefere un modele de `rowData` deja exploitable
+- il faudra soit pre-hydrater les lignes, soit supporter des renderers asynchrones
+
+### 4. Drag-and-drop
+
+Le drag-and-drop actuel est tres metier:
+
+- reordonnancement
+- changement de parent
+- mise a jour des groupes Tryton
+- sequence
+
+References:
+
+- `tryton-sao.js:22193` `_add_drag_n_drop`
+- `tryton-sao.js:22229` `drag_data_received`
+
+Risque:
+
+- il vaut mieux le repousser a une phase 2
+
+### 5. Sommes de colonnes
+
+Les aggregats sont calcules cote SAO avec prise en compte de la selection.
+
+References:
+
+- `tryton-sao.js:23000`
+- `tryton-sao.js:22799`
+
+Risque:
+
+- simple a refaire
+- mais il faut decider si l'on garde le footer SAO ou si l'on utilise un footer AG Grid
+
+## Niveau de couplage actuel
+
+Le couplage le plus fort est ici:
+
+1. `Tree` construit la structure HTML complete
+2. `Row` construit la structure HTML de chaque ligne
+3. `Column.render()` renvoie des fragments DOM jQuery
+4. `EditableTree` suppose une presence directe dans le DOM de la cellule
+
+Donc:
+
+- brancher AG Grid directement dans `Sao.View.Tree` sans abstraction serait fragile
+- mieux vaut introduire une interface de rendu
+
+## Architecture recommandee
+
+## Option A: remplacement direct de `Sao.View.Tree`
+
+Creer `Sao.View.AGGridTree` qui:
+
+- reutilise `TreeXMLViewParser`
+- produit des `columnDefs`
+- produit des `rowData`
+- delegue a AG Grid pour le rendu
+- conserve les appels metier SAO sur `screen`, `record`, `field`
+
+Avantages:
+
+- architecture propre
+- bon potentiel a long terme
+
+Inconvenients:
+
+- investissement initial important
+- beaucoup de points de compatibilite a reproduire
+
+Verdict:
+
+- meilleur choix si vous voulez un vrai basculement progressif vers une grid moderne
+
+## Option B: mode hybride avec adaptateur de cellules
+
+Conserver `Sao.View.Tree` comme source de verite fonctionnelle, mais:
+
+- remplacer le rendu des lignes par AG Grid
+- encapsuler les `Column.render()` existants dans des `cellRenderer`
+- encapsuler `EditableTree.*` dans des `cellEditor`
+
+Avantages:
+
+- permet un POC plus vite
+- reutilise plus de logique existante
+
+Inconvenients:
+
+- couche d'adaptation plus complexe
+- risque de double logique DOM
+
+Verdict:
+
+- meilleur choix pour prouver la faisabilite rapidement
+
+## Option C: simple relooking du tableau actuel
+
+Ne pas utiliser AG Grid, seulement moderniser la table SAO actuelle.
+
+Verdict:
+
+- utile pour du cosmetique
+- ne repond pas a l'objectif
+
+## Recommandation concrete
+
+Je recommande une strategie en 3 phases.
+
+### Phase 1: abstraction minimale
+
+Introduire une couche d'adaptation dans SAO:
+
+- `TreeDataAdapter`
+- `TreeColumnAdapter`
+- `TreeSelectionAdapter`
+
+But:
+
+- separer les donnees et comportements du rendu HTML actuel
+
+### Phase 2: POC AG Grid Community
+
+Cibler uniquement:
+
+- vue tree non hierarchique
+- non editable dans un premier temps
+- tri
+- selection
+- affichage/masquage colonnes
+- boutons simples
+- rendu texte/nombre/date/booleen/selection
+
+Ne pas viser tout de suite:
+
+- tree data
+- drag-and-drop
+- edition inline riche
+- aggregats complexes
+
+### Phase 3: extension progressive
+
+Ajouter ensuite:
+
+- edition inline
+- tree data
+- aggregates
+- drag-and-drop
+- compatibilite complete des widgets speciaux
+
+## POC minimal realiste
+
+Le plus petit POC utile serait:
+
+1. Ajouter AG Grid Community dans `index.html`
+2. Introduire une option de feature flag, par exemple:
+   - `Sao.config.use_ag_grid`
+3. Si activée et si la vue est `tree` sans `children_field` et sans `editable`:
+   - construire une vue AG Grid
+4. Mapper les colonnes SAO vers `columnDefs`
+5. Mapper `screen.group` vers `rowData`
+6. Reconnecter:
+   - clic ligne -> `screen.current_record`
+   - double clic -> `screen.row_activate()`
+   - tri -> `screen.order` puis `screen.search_filter(...)`
+
+## Mapping propose
+
+### Colonnes SAO -> AG Grid
+
+- `attributes.name` -> `field`
+- `attributes.string` -> `headerName`
+- `column.sortable` -> `sortable`
+- `column.attributes.width` -> `width`
+- `column.attributes.readonly` -> `editable: false`
+- `column.render(...)` -> `cellRenderer`
+
+### Lignes SAO -> AG Grid
+
+Chaque ligne doit garder:
+
+- le `record` Tryton original
+- un `id`
+- des valeurs calculees affichables
+
+Exemple de forme:
+
+```js
+{
+  __record: record,
+  __id: record.id,
+  customer: "...",
+  amount: "...",
+  state: "..."
+}
+```
+
+Important:
+
+- ne pas perdre la reference vers `record`, car toute la logique SAO en depend
+
+## Points d'attention AG Grid
+
+D'apres la documentation officielle AG Grid:
+
+- AG Grid Community existe bien en JavaScript pur
+- elle peut etre instanciee sans React avec `agGrid.createGrid(...)`
+- elle peut etre chargee par bundle/CDN
+
+Sources:
+
+- https://www.ag-grid.com/javascript-data-grid/getting-started/
+- https://www.ag-grid.com/javascript-data-grid/installation/
+
+Inference:
+
+- techniquement, votre environnement SAO charge deja des librairies JS globales via `index.html`, donc l'integration sans React est coherent avec l'architecture actuelle
+
+## Risques principaux
+
+### Risque 1: regressions fonctionnelles
+
+Le danger n'est pas le rendu brut, mais les details de comportement Tryton:
+
+- selection exacte
+- edition
+- navigation clavier
+- chargement lazy
+- etats invisibles/readonly
+
+### Risque 2: dette de double implementation
+
+Pendant la transition, vous aurez probablement:
+
+- la vue tree legacy
+- la vue tree AG Grid
+
+Il faut donc mutualiser au plus vite:
+
+- les colonnes
+- l'acces aux valeurs
+- la selection
+
+### Risque 3: AG Grid Community vs besoins reels
+
+Certaines fonctions avancees existent surtout en Enterprise selon les versions et editions.
+
+A verifier au moment du POC, fonctionnalite par fonctionnalite, sans supposer que tout le comportement tree legacy est couvert nativement.
+
+## Estimation honnete
+
+### Faisabilite
+
+- POC non editable, liste plate: elevee
+- grille utilisable sur plusieurs vues simples: bonne
+- compatibilite complete avec toutes les vues tree SAO: moyenne a difficile
+
+### Cout relatif
+
+- POC: faible a moyen
+- integration propre: moyen
+- remplacement complet: eleve
+
+## Recommendation finale
+
+Oui, il est pertinent de tenter AG Grid Community en JavaScript pur, mais il faut:
+
+- commencer par les vues tree plates
+- introduire un adaptateur plutot qu'un remplacement brutal
+- traiter l'edition inline et l'arborescence dans un second temps
+
+Le meilleur prochain pas est de realiser un POC isole sur:
+
+- une vue tree non editable
+- sans `children_field`
+- avec 3 a 5 types de colonnes
+- selection + tri + double-clic ouverture
+
+Si ce POC marche bien, on pourra ensuite brancher l'edition et les widgets complexes.

AG_GRID_PROGRESS.md

@@ -0,0 +1,704 @@
+# Avancement du projet AG Grid / SAO
+
+## Contexte
+
+Objectif: rendre le client web SAO compatible avec une grille open source gratuite, en commencant par AG Grid Community en JavaScript pur, sans React.
+
+Depot analyse: `Sao`
+
+Date de cet etat: 2026-03-28
+
+## Documents deja crees
+
+- `AG_GRID_COMPATIBILITY_ANALYSIS.md`
+- `AG_GRID_PROGRESS.md`
+
+## Ce qui a ete decouvert dans le projet
+
+### Fichiers principaux
+
+- `tryton-sao.js`: coeur applicatif monolithique, inclut les vues `tree`
+- `tryton-sao.css`: styles globaux SAO
+- `index.html`: charge les dependances et les fichiers dist en production
+
+### Point d'entree des vues
+
+La creation des vues se fait dans:
+
+- `tryton-sao.js` autour de `Sao.View.parse`
+
+Le type `tree` etait instancie directement par:
+
+- `new Sao.View.Tree(view_id, screen, xml, children_field)`
+
+Cela a ete modifie pour permettre un branchement conditionnel vers une vue AG Grid.
+
+### Architecture tree actuelle dans SAO
+
+Les vues `tree` sont fortement couplees au DOM.
+
+Points importants:
+
+- `Sao.View.TreeXMLViewParser` parse le XML Tryton et construit les colonnes
+- `Sao.View.Tree` construit directement la table HTML et orchestre le comportement
+- `Sao.View.Tree.Row` construit les `<tr>` et les `<td>`
+- les `Column` gerent le rendu des cellules
+- `EditableTree` reutilise les widgets de formulaire pour l'edition inline
+
+Conclusion utile:
+
+- le parsing XML et la logique metier de colonnes sont reutilisables
+- le rendu tabulaire natif ne l'est pas tel quel pour une integration propre AG Grid
+
+### Comportements SAO importants a ne pas perdre
+
+- `screen.current_record`
+- `screen.row_activate()`
+- `screen.order`
+- `screen.search_filter(...)`
+- `selected_records`
+- `get_selected_paths()`
+- `get_expanded_paths()`
+- colonnes optionnelles
+- widgets de colonne speciaux
+
+## Ce qui a ete implemente
+
+### 1. Feature flag
+
+Ajout de:
+
+- `Sao.config.use_ag_grid = true`
+
+But:
+
+- pouvoir desactiver facilement le POC si besoin
+
+### 2. Selection conditionnelle du renderer tree
+
+Ajout d'un branchement dans:
+
+- `Sao.View.parse`
+
+Via:
+
+- `Sao.View.get_tree_view(...)`
+
+Cette fonction choisit:
+
+- `Sao.View.AGGridTree` si le contexte est supporte
+- sinon retour a `Sao.View.Tree`
+
+### 3. Nouvelle vue POC
+
+Ajout de:
+
+- `Sao.View.AGGridTree`
+
+Etat actuel:
+
+- vise uniquement les vues `tree` plates
+- pas de support `children_field`
+- pas de support edition inline
+- pas de drag-and-drop
+
+### 4. Conditions de support actuelles
+
+Le POC AG Grid ne s'active que si:
+
+- `Sao.config.use_ag_grid` est actif
+- `children_field` est absent
+- la vue n'est pas editable
+- AG Grid est charge dans la page
+
+Sinon:
+
+- fallback automatique sur la vue SAO historique
+
+### 5. Integration HTML/CSS
+
+Dans `index.html`:
+
+- ajout du script AG Grid Community via CDN
+- ajout des feuilles de style AG Grid via CDN
+- conservation des chemins de production:
+  - `dist/tryton-sao.js`
+  - `dist/tryton-sao.css`
+
+Dans `tryton-sao.css`:
+
+- ajout d'un style minimal pour accueillir la grille
+
+### 6. Fonctions reliees dans le POC
+
+Deja branche:
+
+- affichage d'une grille AG Grid
+- mapping basique des colonnes SAO
+- mapping des lignes SAO vers `rowData`
+- double clic ligne -> `screen.row_activate()`
+- synchronisation partielle de la selection
+- copie des lignes selectionnees
+- lecture partielle du tri depuis AG Grid vers `screen.order`
+
+## Ce qui a ete observe lors du premier essai
+
+D'apres le retour utilisateur et la capture:
+
+### Fonctionne deja
+
+- affichage general de la grille
+- resize des colonnes
+- rendu global suffisamment bon pour un premier POC
+
+### Probleme observes
+
+1. Les delimitations visuelles entre colonnes ne sont pas visibles
+
+Interpretation:
+
+- surtout un probleme de style / theme
+
+2. La selection de ligne ne fonctionne pas correctement
+
+Observation:
+
+- une petite image etrange apparait a la place de la checkbox
+
+Interpretation probable:
+
+- conflit CSS entre le theme AG Grid et les styles globaux SAO
+- ou mauvaise utilisation du `checkboxSelection` sur la premiere colonne
+
+3. Le tri par colonne est absent ou incomplet
+
+Interpretation probable:
+
+- certaines colonnes ne sont pas effectivement triables dans le `columnDef`
+- ou l'etat de tri est perdu a cause du cycle `display()`
+
+4. L'ordre manuel des colonnes ne persiste pas
+
+Observation:
+
+- les colonnes peuvent etre inversees
+- mais reviennent a l'ordre initial apres un tri / refresh
+
+Interpretation:
+
+- la vue reconstruit les `columnDefs` a chaque `display()`
+- l'etat local AG Grid n'est pas encore sauvegarde/restaure
+
+## Ce qui est normal a ce stade
+
+Pour la phase 1 / POC:
+
+- pas de support arbre
+- pas d'edition inline
+- pas de drag-and-drop
+- style encore tres basique
+- persistance de l'etat de colonnes non faite
+
+## Ce qui n'est pas considere comme "normal final"
+
+Ces points doivent etre corriges rapidement:
+
+- la fausse checkbox / icone etrange
+- le tri incomplet
+- la perte d'ordre des colonnes apres refresh
+
+## Hypotheses techniques importantes pour la suite
+
+### Sur la selection
+
+Le plus probable est qu'il faut:
+
+- utiliser une vraie colonne dediee a la selection
+- ou desactiver certains styles globaux SAO qui polluent les controles AG Grid
+
+### Sur la persistance des colonnes
+
+Il faudra stocker et restaurer:
+
+- `columnState`
+- ordre des colonnes
+- largeur des colonnes
+- tri actif
+
+Soit:
+
+- dans l'instance de vue elle-meme
+- soit dans un cache SAO proche de `tree_states`
+
+### Sur le tri
+
+Le tri ne doit pas seulement etre visuel.
+
+Il faut conserver la logique metier SAO:
+
+- mettre a jour `screen.order`
+- relancer `screen.search_filter(...)`
+- puis restaurer l'etat de la grille sans perdre l'ordre utilisateur
+
+## Plan conseille pour la prochaine session
+
+### Passe 2 prioritaire
+
+1. Corriger la colonne de selection AG Grid
+2. Ajouter une vraie persistance de `columnState`
+3. Corriger le tri par colonne
+4. Ajouter un style leger:
+   - separateurs verticaux
+   - header plus lisible
+   - checkbox visible
+
+### Passe 3 ensuite
+
+1. Filtres de colonne
+2. Support de plus de types de colonnes speciaux
+3. Sommes / footer
+4. Eventuelle persistance serveur ou locale des preferences de colonnes
+
+## Session du 2026-03-30
+
+### Objectif de la session
+
+Faire passer le POC d'un renderer AG Grid "utilisable" a une vraie vue de travail avec:
+
+- persistance de configuration utilisateur
+- panneau de colonnes exploitable
+- grouping multi-level avec agregations et sous-totaux
+- correction des bugs de state qui bloquaient le debug
+
+### Ce qui a ete ajoute
+
+#### 1. Persistance de l'etat de grille par user/vue
+
+Le POC memorise maintenant dans `localStorage`, par base/utilisateur/modele/vue:
+
+- ordre des colonnes
+- largeur des colonnes
+- visibilite des colonnes
+- tri actif
+- configuration de grouping
+
+La persistance est reappliquee a l'ouverture de la vue et a chaque `display()` pour eviter la perte d'etat quand SAO reconstruit la vue.
+
+#### 2. Panneau `Columns` custom
+
+Le panneau `Columns` a ete implemente comme un panneau custom, attache au `body`, et non plus comme un dropdown Bootstrap.
+
+But:
+
+- eliminer les interferences de layout/overflow du socle legacy
+- garder un comportement previsible
+- permettre un vrai controle de largeur/scroll
+
+Le panneau permet:
+
+- masquer/afficher les colonnes
+- synchroniser l'etat avec la logique SAO des colonnes optionnelles quand c'est applicable
+
+#### 3. Harmonisation visuelle
+
+Ajouts/corrections de session:
+
+- harmonisation de la couleur des checkboxes avec `accent-color: #145369`
+- remplacement des icones toolbar `Columns` et `Grouping` par des SVG inline plus sobres
+- retrait du bouton `COPY SELECTED ROWS` de la toolbar
+
+#### 4. Grouping V1 cote client
+
+Ajout d'un panneau `Grouping` avec:
+
+- grouping multi-level
+- reordonnancement des niveaux
+- suppression d'un niveau
+- agregations client-side:
+  - `sum`
+  - `avg`
+  - `count`
+  - `min`
+  - `max`
+- affichage optionnel des sous-totaux
+- affichage optionnel du grand total
+- persistance de l'etat de grouping
+
+Implementation retenue:
+
+- generation de lignes synthetiques `group` et `total` dans `rowData`
+- pas de dependance au grouping Enterprise
+- comportement borne aux lignes effectivement chargees dans la vue
+
+#### 5. Corrections de bugs importantes pendant l'integration
+
+Les points suivants ont bloque puis ete corriges:
+
+- crash d'initialisation quand `this.screen` n'etait pas encore pret au chargement du state
+- panneau `Columns` trop etroit tant qu'il dependait du dropdown Bootstrap
+- clic sur le bouton de groupe qui ne repliait pas toujours le groupe
+- erreurs de selection car les lignes synthetiques `group` / `total` n'ont pas de `__record`
+- `Remove` dans le panneau `Grouping` qui semblait agir mais ne supprimait pas vraiment le state
+
+Cause cle de ce dernier point:
+
+- `jQuery.extend(true, ...)` preservait l'ancien contenu des tableaux de state, notamment `groupBy`
+
+Correction retenue:
+
+- construction explicite du state `grouping`
+- remplacement complet de la propriete `grouping` dans le state persiste
+- eviter les deep-merges pour cette partie
+
+### Traces de debug ajoutees
+
+Cette session a confirme qu'il faut instrumenter plus tot les bugs resistants.
+
+Traces ajoutees au fil de la session:
+
+- `COLUMNS_MENU_LAYOUT`
+- `COLUMNS_MENU_LAYOUT_FLAT_JSON`
+- `GROUPING_ACTION_FLAT_JSON`
+- `GROUPING_STATE_FLAT_JSON`
+- `GROUPING_PERSISTED_FLAT_JSON`
+- `ROW_DATA_KIND_FLAT_JSON`
+
+Lecon importante:
+
+- les traces doivent etre plus frequentes
+- elles doivent arriver plus tot dans la boucle de debug
+- pour tout partage dans le chat, il faut une variante `..._FLAT_JSON`
+
+### Etat du POC apres cette session
+
+Le POC couvre maintenant correctement:
+
+- vues `tree` plates non editables
+- selection de lignes
+- tri
+- filtres popup
+- persistance locale du layout utilisateur
+- panneau `Columns`
+- grouping multi-level client-side
+- agregations
+- sous-totaux
+- grand total
+
+Les limitations actuelles restent:
+
+- pas de `children_field`
+- pas d'edition inline
+- pas de drag-and-drop metier
+- agregations calculees uniquement sur les lignes chargees localement
+
+### Next steps memorises
+
+#### Priorite produit logique
+
+1. Presets / bookmarks d'affichage par user/vue
+
+Objectif:
+
+- donner au user plusieurs configurations nommees et choisissables
+
+Contenu d'un preset:
+
+- ordre des colonnes
+- largeur des colonnes
+- visibilite des colonnes
+- tri
+- grouping
+- agregations
+- options d'affichage associees
+
+Important:
+
+- a ce stade, le bookmark SAO existant memorise surtout des filtres/domaines
+- il faut probablement separer:
+  - bookmark de recherche/metier
+  - preset d'affichage grille
+
+2. Ajouter un vrai `Reset layout / Reset grouping`
+
+3. Ajouter `Expand all / Collapse all` explicite dans le panneau `Grouping`
+
+4. Mieux cadrer le rendu des lignes de sous-total et du grand total
+
+5. Mieux diagnostiquer les vues qui restent sur l'ancien tree
+
+Objectif:
+
+- rendre visible la raison du fallback:
+  - `children_field`
+  - vue editable
+  - AG Grid non charge
+
+#### Next steps logiques apres grouping et sous-totaux
+
+- presets d'affichage nommes par user/vue
+- integration UX plus propre entre bookmark de filtre et preset de grille
+- support de plus de colonnes speciales non editables
+- footer/indicateurs numeriques plus riches
+- export des vues en respectant layout/grouping actif
+- instrumentation de fallback plus visible
+- ensuite seulement: evaluation d'un grouping/agregation cote backend pour des totaux "vrais" sur tout le dataset filtre
+
+### Plus tard
+
+1. Edition inline
+2. Tree data
+3. Drag-and-drop metier
+
+## Fichiers modifies pendant ce travail
+
+- `index.html`
+- `tryton-sao.js`
+- `tryton-sao.css`
+
+## Notes de deploiement
+
+En production:
+
+- `index.html` reste a la racine
+- `tryton-sao.js` doit etre copie vers `./dist/tryton-sao.js`
+- `tryton-sao.css` doit etre copie vers `./dist/tryton-sao.css`
+
+Le `index.html` a ete remis avec les chemins `dist/...`.
+
+## Point d'attention environnement local
+
+Dans cette copie locale du depot:
+
+- le dossier `dist/` n'existait pas
+- `node` n'etait pas disponible
+- `git status` etait bloque par un probleme `safe.directory`
+
+Cela n'empeche pas la continuation du travail, mais limite la verification locale automatisee.
+
+## Resume ultra court pour reprise rapide
+
+Nous avons un premier POC AG Grid branche sur les vues `tree` plates non editables, avec fallback automatique vers la vue historique SAO. L'affichage de base fonctionne, mais la selection, le tri et la persistance de l'ordre des colonnes doivent etre corriges dans la prochaine passe.
+
+## Derniere session
+
+Depuis ce premier resume, une grosse passe supplementaire a ete faite sur le POC AG Grid.
+
+### Ce qui a ete stabilise
+
+- colonne de selection avec checkbox visibles
+- tri fonctionnel sans vider la liste quand un filtre local est actif
+- popup filtre repositionne sous la bonne colonne
+- style du popup rapproche du rendu AG Grid standard
+- icones header plus propres
+- etat visuel "filtre actif" sur l'icone menu
+- gros nettoyage des glyphes parasites lies au vieux CSS SAO
+
+### Ce qui a coute du temps
+
+- conflits entre le theme AG Grid et les styles globaux SAO
+- pseudo-elements `::before` / `::after`
+- controles `radio` / `checkbox` pollues par le theme historique
+- corrections visuelles faites trop tot sans dump cible du vrai noeud DOM
+
+### Lecture recommandee avant la prochaine session
+
+1. [AG_GRID_SESSION_INDEX.md](c:\DataS\OpenSquared\Tradon\Source\Sao\AG_GRID_SESSION_INDEX.md)
+2. [AG_GRID_STYLING_NOTES.md](c:\DataS\OpenSquared\Tradon\Source\Sao\AG_GRID_STYLING_NOTES.md)
+
+### Resume pratique
+
+Le POC est maintenant beaucoup plus abouti visuellement et fonctionnellement. Le prochain gain de temps viendra surtout d'une meilleure isolation entre AG Grid et le vieux socle CSS SAO, plutot que de nouvelles micro-corrections ponctuelles.
+
+## Session du 2026-03-30
+
+### Ce qui a ete ajoute
+
+- persistance locale par base/utilisateur/modele/vue de l'etat AG Grid
+- panneau `Columns` custom attache au `body`
+- gestion de la visibilite des colonnes
+- memorisation de l'ordre, des largeurs et du tri
+- harmonisation visuelle des checkboxes
+- suppression du bouton `Copy Selected Rows` de la toolbar
+- nouvelles icones toolbar plus propres pour `Columns` et `Grouping`
+- panneau `Grouping` custom attache au `body`
+- grouping multi-level client-side sans dependre d'AG Grid Enterprise
+- aggregations client-side:
+  - `sum`
+  - `avg`
+  - `count`
+  - `min`
+  - `max`
+- sous-totaux sur lignes de groupe
+- total global optionnel
+- persistance de l'etat de grouping
+
+### Ce qui a demande plusieurs passes
+
+- stabilisation du panneau `Columns`
+- remplacement du dropdown Bootstrap par un panneau custom
+- correction du clic sur le bouton expand/collapse des groupes
+- correction des merges profonds sur le state `grouping`
+- correction de la synchronisation de selection avec les lignes synthetiques `group` / `total`
+
+### Ce qu'on a appris aujourd'hui
+
+- pour les panneaux flottants SAO/AG Grid, si le rendu est incoherent mais que les mesures sont bonnes, il faut soupconner le conteneur Bootstrap / stacking context avant le contenu lui-meme
+- les tableaux dans le state ne doivent pas etre reconstruits avec `jQuery.extend(true, ...)` si l'on veut vraiment remplacer leur contenu
+- sur ce POC, les lignes synthetiques `group` / `total` doivent etre traitees explicitement partout:
+  - selection
+  - row click
+  - row id
+  - copy
+  - refresh
+
+### Discipline de debug a garder
+
+- mettre des traces plus frequentes des qu'un bug resiste a une premiere correction
+- produire une variante `..._FLAT_JSON` pour toute trace destinee a etre copiee dans le chat
+- preferer un log "avant/apres state" plutot qu'un seul snapshot final
+- si le probleme touche le rendu, logger aussi:
+  - type de lignes envoye a AG Grid
+  - largeur/hauteur reelles
+  - proprietaire du click
+
+### Next steps prioritaires
+
+1. Bookmarks de configuration d'affichage
+   - objectif: permettre a l'utilisateur de memoriser plusieurs setups
+   - contenu typique:
+     - colonnes visibles
+     - ordre des colonnes
+     - tailles
+     - tri
+     - grouping
+     - aggregations
+   - recommandation: ne pas melanger brutalement avec le bookmark SAO actuel qui memorise surtout un filtre
+   - meilleure piste: introduire des "bookmarks de vue" ou "presets d'affichage" distincts, puis eventuellement les relier a l'UI bookmark plus tard
+
+2. Reset / gestion des presets
+   - bouton `Reset Columns`
+   - bouton `Reset Grouping`
+   - bouton `Reset View`
+   - duplication / renommage / suppression d'un preset
+
+3. Expansion globale du grouping
+   - `Expand all`
+   - `Collapse all`
+   - meilleure iconographie de repli/depli
+
+### Next steps logiques apres grouping et sous-totaux
+
+- presets nommes de vue par utilisateur
+- bookmark de tri et de config au sens "choisir une vue memorisee"
+- footer de totaux plus explicite si besoin metier
+- support d'autres types de colonnes dans les aggregations
+- export des donnees dans la configuration active
+- instrumentation claire du fallback vers l'ancien tree
+- indicateur visuel de mode:
+  - vue AG Grid
+  - vue legacy
+
+### Point de vigilance pour la prochaine session
+
+- penser a retirer les traces `GROUPING_*` et `ROW_DATA_KIND_*` une fois la stabilisation terminee
+- conserver cependant le patron de log JSON plat pour les prochains sujets difficiles
+
+## Session du 2026-03-31
+
+### Ce qui a ete ajoute
+
+- trace de decision renderer:
+  - `TREE_VIEW_DECISION_FLAT_JSON`
+- diagnostic de fallback plus riche:
+  - `useAgGrid`
+  - `hasChildrenField`
+  - `agGridLoaded`
+  - `editable`
+  - `xmlEditable`
+  - `screenReadonly`
+  - `excludeField`
+  - `preValidate`
+  - `hasParentGroup`
+  - `childName`
+  - `parentName`
+  - `selectedRenderer`
+  - `fallbackReason`
+
+### Garde-fou ajoute sur le fallback
+
+Le POC AG Grid ne doit plus seulement exclure:
+
+- les vues avec `children_field`
+- les vues `editable`
+
+Il doit aussi exclure les sous-listes embarquees de type relationnel / `one2many` qui paraissent "plates" mais restent editables par contexte.
+
+Raison de fallback ajoutee:
+
+- `embedded_relation_tree`
+
+Signaux utilises:
+
+- `screen.group.parent`
+- `screen.group.child_name`
+- `screen.exclude_field`
+- `screen.pre_validate`
+
+But:
+
+- eviter qu'une sous-liste embarquee comme `purchase.line` parte en AG Grid alors qu'elle vit en realite dans un contexte de saisie relationnelle
+
+### Dark mode V1 safe
+
+Ajout d'une V1 prudente du dark mode, sans toucher aux composants legacy les plus fragiles.
+
+Infrastructure:
+
+- toggle global pres du logo
+- persistance locale via `localStorage`
+- attribut `html[data-theme-mode="light|dark"]`
+
+Zones couvertes:
+
+- topbar globale
+- onglets principaux
+- menu gauche
+- shell principal
+- header de filtres modernise
+- toolbar de formulaire
+- AG Grid
+- panneaux `Columns` / `Grouping`
+
+Zones volontairement non traitees en profondeur:
+
+- modales complexes
+- vieux dropdowns peu maitrises
+- widgets speciaux rares
+
+### Logo dark
+
+Branchement automatique selon le theme:
+
+- light -> `tradon.png`
+- dark -> `tradon-dark.png`
+
+Le switch du theme met maintenant aussi a jour le logo sans attendre un nouveau chargement logique.
+
+### Ajustements dark mode deja stabilises
+
+- menu gauche:
+  - hover/active dark corrige
+- shell formulaire:
+  - bandeau clair residuel du header corrige
+- grille:
+  - alternance de lignes plus visible
+  - hover et selection plus lisibles
+  - checkbox dark custom plus coherente
+- toolbar de formulaire:
+  - boutons et fond passes en dark
+
+### Memo pour la prochaine session
+
+- continuer a garder le dark mode dans un perimetre "safe" tant que les composants les plus fragiles ne sont pas inventories
+- si un nouveau bloc reste clair en dark mode, le traiter par zone locale au lieu de surcharger tout le theme global
+- si un fallback AG Grid semble anormal, commencer par lire `TREE_VIEW_DECISION_FLAT_JSON`

AG_GRID_SESSION_INDEX.md

@@ -0,0 +1,162 @@
+# AG Grid Session Index
+
+## Point d'entree
+
+Ce fichier sert de synthese rapide pour reprendre le projet AG Grid / SAO a la prochaine session.
+
+## Documents a lire dans l'ordre
+
+1. [AG_GRID_COMPATIBILITY_ANALYSIS.md](c:\DataS\OpenSquared\Tradon\Source\Sao\AG_GRID_COMPATIBILITY_ANALYSIS.md)
+   - vision d'ensemble
+   - contraintes structurelles SAO / AG Grid
+   - architecture cible et risques
+
+2. [AG_GRID_PROGRESS.md](c:\DataS\OpenSquared\Tradon\Source\Sao\AG_GRID_PROGRESS.md)
+   - etat d'avancement du POC
+   - ce qui est deja branche dans le code
+   - ce qui restait a faire apres les premieres passes
+
+3. [AG_GRID_STYLING_NOTES.md](c:\DataS\OpenSquared\Tradon\Source\Sao\AG_GRID_STYLING_NOTES.md)
+   - retour d'experience de la grosse session de debug CSS
+   - ce qui a fait perdre du temps
+   - ce qui a vraiment aide
+   - methode recommandee pour les prochaines retouches visuelles
+
+## Synthese globale
+
+### 1. Ce qui est valide
+
+- POC AG Grid Community en JavaScript pur branche dans SAO
+- fallback historique SAO conserve
+- selection de lignes fonctionnelle
+- tri fonctionnel
+- filtres popup fonctionnels
+- rendu visuel fortement rapproche du style AG Grid standard
+- persistance locale du layout utilisateur
+- panneau `Columns` custom stable
+- grouping multi-level avec agregations, sous-totaux et grand total
+
+### 2. Ce qu'on a appris
+
+- le principal risque n'est pas AG Grid, mais le vieux CSS global SAO
+- les pseudo-elements et les styles globaux sur les controles natifs peuvent casser le theme AG Grid
+- les retouches visuelles doivent etre debuggees avec des traces DOM/cascade, pas seulement "a l'oeil"
+- les bugs de state doivent eux aussi etre traces tres tot
+- les traces utiles a partager doivent etre en JSON plat
+- si 1 ou 2 corrections "intuitives" ne suffisent pas, il faut instrumenter immediatement
+
+### 3. Strategie pour la prochaine session
+
+- ne pas repartir de zero
+- relire d'abord cette page puis la section la plus recente de `AG_GRID_PROGRESS.md`
+- relire ensuite `AG_GRID_STYLING_NOTES.md`
+- si un bug visuel resiste a 1 ou 2 corrections, passer tout de suite a un dump cible
+- si un bug de state ou de rendering resiste a 1 ou 2 corrections, ajouter tout de suite une trace `..._FLAT_JSON`
+- eviter les gros changements globaux de priorite CSS sans isolation claire
+
+## Point de reprise apres la session du 2026-03-30
+
+Le POC a franchi un palier important:
+
+- panneau `Columns` hors Bootstrap, stable et persiste
+- configuration utilisateur locale de la grille
+- panneau `Grouping`
+- grouping multi-level client-side
+- agregations
+- sous-totaux
+- grand total
+- toolbar simplifiee et icones plus propres
+
+Les traces suivantes ont ete introduites pour accelerer le debug:
+
+- `COLUMNS_MENU_LAYOUT_FLAT_JSON`
+- `GROUPING_ACTION_FLAT_JSON`
+- `GROUPING_STATE_FLAT_JSON`
+- `GROUPING_PERSISTED_FLAT_JSON`
+- `ROW_DATA_KIND_FLAT_JSON`
+
+Memo important:
+
+- produire les traces plus frequemment
+- preferer des JSON plats des le debut
+- ne pas attendre plusieurs tentatives "a l'aveugle" quand un symptome resiste
+
+## Point de reprise apres la session du 2026-03-31
+
+Deux chantiers supplementaires ont ete consolides:
+
+- diagnostic de fallback AG Grid plus riche
+- dark mode V1 safe sur le shell principal et la grille
+
+### Fallback renderer
+
+La trace a lire en premier est maintenant:
+
+- `TREE_VIEW_DECISION_FLAT_JSON`
+
+Elle permet de savoir immediatement si une vue part sur:
+
+- `ag_grid`
+- `legacy_tree`
+
+Et pourquoi, avec notamment:
+
+- `children_field`
+- `editable_view`
+- `embedded_relation_tree`
+
+Le nouveau garde-fou `embedded_relation_tree` est important:
+
+- il evite que des sous-listes embarquees de type `one2many` ou relationnelles partent par erreur sur AG Grid
+
+### Dark mode V1
+
+Le dark mode est maintenant present dans une version prudente:
+
+- toggle global pres du logo
+- persistance locale
+- logo light/dark dedie
+- topbar, menu, shell, filtres modernises, toolbar de formulaire et AG Grid traites
+
+Ne pas supposer que tout legacy est theme en dark:
+
+- les composants fragiles n'ont pas encore tous ete traites
+- il faut continuer par zones locales
+
+## Next steps produit memorises
+
+### Priorite probable
+
+- presets / bookmarks d'affichage par user/vue
+
+Idee retenue:
+
+- permettre au user de choisir une configuration nommee de grille
+- separer si besoin:
+  - bookmark de filtre SAO
+  - preset de layout/tri/grouping AG Grid
+
+### Suite logique apres grouping / sous-totaux
+
+- `Reset layout`
+- `Reset grouping`
+- `Expand all / Collapse all`
+- presets nommes de vue
+- support de plus de colonnes speciales
+- meilleure visibilite des raisons de fallback vers l'ancien tree
+- plus tard: agregations backend sur tout le dataset filtre
+
+### Suite logique dark mode
+
+- finir le perimetre safe du dark mode
+- verifier les toolbars / panneaux encore heterogenes
+- traiter ensuite les modales et dropdowns les plus utilises
+- garder la bascule light/dark strictement non destructive
+
+## Recommandation long terme
+
+Si AG Grid doit devenir central dans les vues `tree`, il faudra probablement:
+
+- mieux isoler AG Grid du CSS global SAO
+- ou rationaliser les anciennes regles SAO sur `input/select/radio/checkbox`
+- ou definir une vraie zone de styles AG Grid maitrisee

AG_GRID_STYLING_NOTES.md

@@ -0,0 +1,281 @@
+# AG Grid Styling Notes In SAO
+
+## Contexte
+
+Cette note sert de memo pour les prochaines retouches AG Grid dans SAO/Tryton.
+Le point cle de la session: AG Grid fonctionnait bien cote logique, mais son rendu etait fortement perturbe par le vieux socle CSS global de SAO.
+
+## Probleme racine
+
+Le vrai probleme n'etait pas AG Grid lui-meme.
+Le probleme etait la collision entre:
+
+- le theme AG Grid
+- les styles globaux SAO sur `input`, `select`, `radio`, `checkbox`
+- les pseudo-elements `::before` / `::after`
+- les wrappers de formulaires anciens
+- les popups AG Grid rendus hors du conteneur principal
+
+En pratique, on avait plusieurs couches CSS qui essayaient de controler les memes primitives HTML.
+
+## Symptomes observes
+
+- glyphes bizarres a la place des icones AG Grid
+- checkbox et radios au mauvais rendu
+- filtre popup mal positionne
+- styles natifs AG Grid partiellement casses
+- interactions radio `AND / OR` visuellement instables
+- tri et filtre avec affichage incoherent
+- barre de scroll horizontale parasite dans le popup
+- ecarts visuels tres differents du style AG Grid standard
+
+## Ce qui a marche
+
+### 1. Remplacer les icones AG Grid critiques par des icones custom simples
+
+Ce qui a aide:
+
+- redefinir `grid_options.icons`
+- utiliser un SVG simple pour le bouton menu
+- utiliser des symboles HTML simples pour certains etats
+
+Pourquoi:
+
+- ca evitait la dependance aux polices/glyphes natifs qu'un vieux CSS pouvait casser
+
+### 2. Utiliser des logs DOM cibles au lieu de corriger "a l'oeil"
+
+Les logs qui ont vraiment aide:
+
+- `HEADER_DEBUG`
+- `FILTER_POPUP_DEBUG`
+- `FILTER_CLICK_PROBE`
+- `FILTER_RADIO_NODE_DEBUG_JSON`
+- `FILTER_LAYOUT_DEBUG_JSON`
+- `HEADER_LAYOUT_DEBUG_JSON`
+
+Regle pratique a garder:
+
+- preferer un JSON plat pour les traces a copier-coller depuis la console
+- eviter les objets imbriques quand le but est un partage rapide dans le chat
+- si besoin, garder en plus un log riche pour le debug local, mais toujours ajouter une variante `..._FLAT_JSON`
+- produire ces traces plus frequemment et plus tot dans la boucle de debug
+- si 1 ou 2 corrections "a l'oeil" ne suffisent pas, instrumenter tout de suite
+- ne pas reserver cette methode aux seuls bugs CSS: l'utiliser aussi pour les bugs de state et de rendering
+
+Pourquoi:
+
+- ils ont permis d'identifier le vrai noeud responsable
+- ils ont evite de corriger le mauvais element
+- sur la session `Columns` / `Grouping`, c'est la combinaison `action/state/rowData` en JSON plat qui a permis d'identifier les vrais problemes de state
+
+### 3. Diagnostiquer les pseudo-elements avec `getComputedStyle(..., '::before')` et `::after`
+
+Tres utile pour trouver:
+
+- les icones parasites du header
+- le residu devant `OR`
+
+Constat important:
+
+- dans un des cas, le glyphe parasite etait porte par
+  `.ag-radio-button-input-wrapper::after`
+- pas par l'input
+- pas par le texte
+- pas par un vrai noeud visible dans le HTML dump
+
+### 4. Mesurer les layouts reels
+
+Le dump `FILTER_LAYOUT_DEBUG_JSON` a permis de voir:
+
+- qui portait encore `overflow-x: auto`
+- quelle hauteur avaient reellement les selects
+- quelle largeur avait vraiment le popup
+
+Le dump `HEADER_LAYOUT_DEBUG_JSON` a permis de voir:
+
+- que le decalage a corriger concernait surtout le bouton/menu header visible
+- pas seulement le conteneur de tri
+
+### 5. Corriger avec des regles tres specifiques
+
+Exemples utiles:
+
+- viser `html[theme="default"] .ag-popup ...`
+- viser `.ag-header-label-icon.ag-filter-icon`
+- viser `.ag-radio-button-input-wrapper::after`
+
+Pourquoi:
+
+- plusieurs regles generales plus anciennes battaient nos premiers overrides
+
+## Ce qui n'a pas marche ou a fait perdre du temps
+
+### 1. Essayer de "prioriser AG Grid globalement"
+
+On a tente de donner plus de priorite globale au CSS AG Grid.
+Resultat:
+
+- regression visuelle
+- retour de vieux styles
+- interactions plus difficiles a stabiliser
+
+Conclusion:
+
+- ne pas faire de grand changement de priorite CSS sans isolation claire
+
+### 2. Corriger des symptomes sans identifier le noeud exact
+
+On a perdu du temps quand on corrigeait:
+
+- `ag-icon`
+- puis `input[type=radio]`
+- puis des wrappers
+
+alors que le probleme venait parfois d'un pseudo-element plus precis.
+
+Conclusion:
+
+- si un glyphe resiste plus de 1 ou 2 passes, faire tout de suite un dump cible
+
+### 3. Masquer completement les inputs radios
+
+On a essaye `display: none` ou une neutralisation trop agressive.
+Resultat:
+
+- perte de l'interaction
+- rendu incoherent
+
+Conclusion:
+
+- garder l'input pour la logique
+- neutraliser seulement son rendu visuel ou piloter explicitement l'etat visuel
+
+### 4. S'appuyer sur des hypotheses sur l'etat AG Grid
+
+Par exemple:
+
+- supposer qu'une classe AG Grid serait toujours presente
+- supposer que le popup utile etait toujours `params.ePopup`
+
+Conclusion:
+
+- verifier avec logs si l'etat/classe existe vraiment
+
+## Methode recommandee pour la prochaine fois
+
+### Etape 1. Classer le probleme
+
+Identifier si le probleme est:
+
+- logique
+- positionnement
+- rendu visuel
+- overflow/layout
+- icone/glyphe/pseudo-element
+
+### Etape 2. Si c'est visuel et resistant, mesurer avant de modifier
+
+Faire directement:
+
+- dump du HTML reel
+- dump des dimensions reelles
+- dump des `::before` / `::after`
+- variante `..._FLAT_JSON` pour tout ce qui doit etre partage rapidement
+
+### Etape 2 bis. Si c'est un bug de state, tracer avant de retoucher encore l'UI
+
+Faire directement:
+
+- trace de l'action utilisateur
+- trace du state avant/apres
+- trace de la donnee effectivement envoyee au composant
+
+Format recommande:
+
+- JSON plat
+- une trace par etape cle
+- noms explicites du type `ACTION_FLAT_JSON`, `STATE_FLAT_JSON`, `ROW_DATA_KIND_FLAT_JSON`
+
+### Etape 3. Chercher le vrai proprietaire du rendu
+
+Verifier si le rendu vient de:
+
+- l'input
+- le wrapper
+- le parent
+- une icone AG Grid
+- un pseudo-element
+- une regle globale SAO
+
+### Etape 4. Ecrire la regle la plus locale possible
+
+Preferer:
+
+- un selecteur specifique AG Grid popup/header
+- une correction locale
+
+Eviter:
+
+- les gros changements globaux de priorite
+- les surcharges larges sur tout AG Grid si un seul noeud est fautif
+
+### Etape 5. Enlever les logs une fois le sujet stabilise
+
+Garder au maximum:
+
+- les dumps de layout reactivables
+
+Retirer:
+
+- les probes tres bavards
+- les logs de clic temporaires
+
+Exception pratique:
+
+- garder quelques points de trace reactivables sur les zones historiquement fragiles comme `Columns`, `Grouping` et les popups AG Grid, tant que le POC continue a bouger rapidement
+
+## Memo supplementaire apres le dark mode V1
+
+Le dark mode a confirme une autre regle utile:
+
+- quand un bloc entier "reste clair", il faut d'abord identifier le conteneur parent exact qui porte encore le fond legacy
+- dans SAO/Tryton, ce n'est pas toujours le composant visible qui porte vraiment la couleur, mais un wrapper `panel`, `panel-body`, `toolbar` ou `container-fluid`
+
+Approche qui a fonctionne:
+
+- corriger d'abord le shell principal
+- puis les toolbars locales
+- puis les composants modernes comme AG Grid
+- laisser les composants fragiles hors perimetre tant qu'ils ne sont pas inventories
+
+Pour les prochaines retouches dark mode:
+
+- preferer des overrides locaux sous `html[data-theme-mode="dark"]`
+- eviter les modifications globales du theme light existant
+- garder le mode light strictement identique tant que possible
+
+## Signaux d'alerte a retenir
+
+Si on revoit l'un de ces symptomes:
+
+- glyphe bizarre persistant
+- style qui ne repond pas a un override simple
+- radio/checkbox visuellement faux
+- popup qui n'obeit pas a son CSS apparent
+
+alors il faut supposer tres tot:
+
+- conflit de pseudo-elements
+- conflit de cascade avec le theme SAO
+- mauvais noeud cible
+
+## Recommandation structurelle
+
+Pour gagner du temps a long terme, il faudrait idealement:
+
+- isoler davantage AG Grid du CSS global SAO
+- ou etablir une zone de styles AG Grid plus clairement encapsulee
+- ou nettoyer les vieilles regles globales SAO qui touchent fortement les formulaires natifs
+
+Sinon, chaque nouveau composant AG Grid complexe risque de reouvrir le meme type de debugging.

index.html

@@ -22,14 +22,31 @@ this repository contains the full copyright notices and license terms. -->
         <script type="text/javascript" src="bower_components/mousetrap/mousetrap.js"></script>
         <script type="text/javascript" src="bower_components/mousetrap/plugins/pause/mousetrap-pause.js"></script>
         <script type="text/javascript" src="bower_components/Sortable/Sortable.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/ag-grid-community.min.js"></script>
 
         <link rel="stylesheet" href="bower_components/c3/c3.css">
         <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/styles/ag-grid.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/styles/ag-theme-alpine.css">
 
         <script type="text/javascript" src="dist/tryton-sao.js"></script>
         <link rel="stylesheet" type="text/css" href="dist/tryton-sao.css" media="screen"/>
         <script type="text/javascript" src="custom.js"></script>
         <link rel="stylesheet" type="text/css" href="custom.css" media="screen"/>
+        <script type="text/javascript">
+            (function() {
+                try {
+                    var storedMode = window.localStorage &&
+                        localStorage.getItem('sao_theme_mode');
+                    document.documentElement.setAttribute(
+                        'data-theme-mode',
+                        storedMode || 'light');
+                } catch (error) {
+                    document.documentElement.setAttribute(
+                        'data-theme-mode', 'light');
+                }
+            }());
+        </script>
     </head>
     <body>
         <noscript>
@@ -52,6 +69,25 @@ this repository contains the full copyright notices and license terms. -->
                             </span>
                             <span id="title">Tryton</span>
                         </a>
+                        <button type="button" id="theme-mode-toggle"
+                                class="btn btn-default navbar-btn theme-mode-toggle"
+                                title="Toggle dark mode"
+                                aria-label="Toggle dark mode"
+                                aria-pressed="false">
+                            <span class="theme-mode-toggle-icon" aria-hidden="true">
+                                <svg viewBox="0 0 20 20" focusable="false">
+                                    <path d="M10 2.5v2.1"></path>
+                                    <path d="M10 15.4v2.1"></path>
+                                    <path d="M4.7 4.7l1.5 1.5"></path>
+                                    <path d="M13.8 13.8l1.5 1.5"></path>
+                                    <path d="M2.5 10h2.1"></path>
+                                    <path d="M15.4 10h2.1"></path>
+                                    <path d="M4.7 15.3l1.5-1.5"></path>
+                                    <path d="M13.8 6.2l1.5-1.5"></path>
+                                    <circle cx="10" cy="10" r="3.3"></circle>
+                                </svg>
+                            </span>
+                        </button>
                     </div>
                     <div class="collapse navbar-collapse" id="main_navbar">
                         <form class="navbar-form navbar-left flip" role="search" id="global-search" style="border-style: none;">
@@ -92,6 +128,40 @@ this repository contains the full copyright notices and license terms. -->
                 document.querySelector('body').innerHTML = '<strong>sao is not fully installed. Please refer to <a href="README.md">README</a></strong>';
             } else {
                 jQuery(function() {
+                    function applyThemeMode(mode) {
+                        var isDark = mode === 'dark';
+                        document.documentElement.setAttribute(
+                            'data-theme-mode', isDark ? 'dark' : 'light');
+                        try {
+                            if (window.localStorage) {
+                                localStorage.setItem(
+                                    'sao_theme_mode', isDark ? 'dark' : 'light');
+                            }
+                        } catch (error) {
+                        }
+                        var toggle = jQuery('#theme-mode-toggle');
+                        toggle.attr('aria-pressed', isDark ? 'true' : 'false');
+                        toggle.attr(
+                            'title',
+                            isDark ? 'Switch to light mode' :
+                                'Switch to dark mode');
+                        var logo = jQuery('#title-logo');
+                        if (logo.length) {
+                            logo.attr(
+                                'src',
+                                isDark ? 'dist/tradon-dark.png' :
+                                    'dist/tradon.png');
+                        }
+                    }
+
+                    jQuery('#theme-mode-toggle').click(function() {
+                        var current = document.documentElement.getAttribute(
+                            'data-theme-mode');
+                        applyThemeMode(current === 'dark' ? 'light' : 'dark');
+                    });
+
+                    applyThemeMode(
+                        document.documentElement.getAttribute('data-theme-mode'));
                     jQuery('.body').show();
                     jQuery('[data-toggle="offcanvas"]').click(function() {
                         jQuery('.row-offcanvas').toggleClass('active');