diff --git a/docs/superpowers/session-2026-04-04-ux-overhaul.md b/docs/superpowers/session-2026-04-04-ux-overhaul.md new file mode 100644 index 0000000..edeb6c6 --- /dev/null +++ b/docs/superpowers/session-2026-04-04-ux-overhaul.md @@ -0,0 +1,148 @@ +# Session 04-05 avril 2026 — Refonte UX/UI complète Inventory + +## Contexte +L'utilisateur (gestionnaire) remonte que les utilisateurs novices se perdent dans l'app Inventory (gestion d'inventaire industriel : machines, composants, pièces, produits). Ils découvrent le domaine ET l'app en même temps, remplissent les machines depuis de la documentation papier/PDF. + +## Ce qui a été fait + +### 1. Analyse UX/UI complète +- Exploration en profondeur des 65+ composants, toutes les pages, composables et patterns +- Diagnostic : navigation top-down uniquement, pas de liens inverses, pas de breadcrumbs, navbar mélange tout, pages trop longues, mode lecture ressemble à un formulaire disabled +- Identification de 23 améliorations organisées en 4 phases + +### 2. Spec rédigée +**Fichier :** `docs/superpowers/specs/2026-04-04-ux-overhaul-design.md` + +23 sections couvrant : +- Réorganisation navbar par domaine métier +- Breadcrumbs contextuels +- Liaisons inverses "Utilisé dans" +- Liens cliquables dans la hiérarchie machine +- Système d'onglets partagé (machine + composant + pièce + produit) +- Pages catalogue unifiées (catalogue + catégories en onglets) +- Recherche globale (**retirée** à la demande de l'utilisateur) +- Raccourcis clavier (**retirés** à la demande) +- Mode lecture texte brut, empty states, toasts, responsive, etc. + +### 3. Phase 1 — Quick wins (9 améliorations, 0 backend) + +**Plan :** `docs/superpowers/plans/2026-04-04-ux-quick-wins.md` + +| Changement | Fichiers modifiés | +|-----------|-------------------| +| Liens cliquables dans hiérarchie machine | ComponentItem, PieceItem, MachineProductsCard | +| Site → machines (badge cliquable) | SiteCard, index.vue | +| Retour contextuel (NuxtLink au lieu de router.back) | DetailHeader | +| Confirmations sur toutes les suppressions | CommentSection, machine/[id].vue | +| Header sticky composants expanded | ComponentItem | +| DataTable fixedLayout opt-in + minWidth | DataTable.vue, dataTable.ts | +| Mode lecture texte brut (26 div-inputs → `
`) | MachineInfoCard, 3 pages détail | +| Compteurs titres sections machine | MachineComponentsCard, MachinePiecesCard, MachineDocumentsCard | +| Cohérence fiches (liens catégorie + EntityVersionList) | 3 pages détail entité | + +**Review Phase 1 :** a détecté 4 issues corrigées : +- `component.entityId` → `component.composantId` (property n'existait pas) +- `piece.entityId` → `piece.pieceId` +- `table-fixed` global → opt-in via prop `fixedLayout` +- NuxtLinks sans `?from=machine&machineId=xxx` → ajouté + +### 4. Phase 2 — Refactoring structurel (7 améliorations) + +**Plan :** `docs/superpowers/plans/2026-04-04-ux-phase2-structural.md` + +| Changement | Fichiers créés/modifiés | +|-----------|------------------------| +| EntityTabs composant partagé | `components/common/EntityTabs.vue` (nouveau) | +| Onglets page machine + header compact | machine/[id].vue, MachineDetailHeader.vue | +| Onglets composant/pièce/produit | 3 pages détail | +| Pages catalogue unifiées /catalogues/* | 3 nouvelles pages + ManagementView modifié | +| Navbar réorganisée (Catalogues + Administration) | AppNavbar.vue | +| Breadcrumbs contextuels | `components/layout/AppBreadcrumb.vue` (nouveau), app.vue | +| Redirections legacy URLs | `middleware/legacy-redirects.global.ts` (nouveau) | +| Guard modifications non sauvegardées | `composables/useUnsavedGuard.ts` (nouveau) | + +### 5. Phase 3 — Harmonisation visuelle (3 améliorations) + +| Changement | Fichiers | +|-----------|----------| +| EmptyState composant partagé | `components/common/EmptyState.vue` (nouveau), 3 pages | +| Toasts erreur persistent + barre progression | useToast.ts, ToastContainer.vue | +| Responsive mobile (breadcrumbs tronqués, tabs scroll) | AppBreadcrumb, EntityTabs, vérification grids | + +### 6. Phase 4 — Backend + reverse links (6 améliorations) + +| Changement | Fichiers | +|-----------|----------| +| Endpoint `/api/{entity}/{id}/used-in` | `src/Controller/UsedInController.php` (nouveau) | +| UsedInSection frontend | `composables/useUsedIn.ts` + `components/common/UsedInSection.vue` (nouveaux), 3 pages détail | +| Endpoint `/api/constructeurs/stats` | `src/Controller/ConstructeurStatsController.php` (nouveau) | +| Page fournisseurs enrichie (compteurs cliquables) | constructeurs.vue | +| Endpoint `/api/model_types/{id}/related-items` | `src/Controller/ModelTypeRelatedItemsController.php` (nouveau) | +| Modal catégorie enrichie (machine count + liens) | RelatedItemsModal.vue | + +## Bugs découverts et corrigés en cours de route + +| Bug | Cause | Fix | +|-----|-------|-----| +| `