Skip to content

VSN-2835 — Migration shadcn : module Préparation (liste, fiche, circuits, paramètres) + alignement pages auth

yahya.elmokhtari a demandé de fusionner VSN-2835 vers develop

Architecture & Navigation

  • Périmètre : module Préparation (/dashboard/exploitation/preparation/list, /[id], /parametrage) + pages auth (/auth/jwt/change-password, /auth/forgot-password).
  • Drawer Circuits ancré sous la barre Usagers/Circuits via topOffset sur CustomDrawer.
  • Page Paramétrages en pleine largeur.

Module Features

  • Liste des préparations : table MUI → pattern shadcn unifié.
  • Fiche Préparation – Usagers : bascule sur usager-list-view shadcn + wrapper carte blanche.
  • Fiche Préparation – Circuits : refonte Command Center (header stats, lanceur stratégies, drawer ré-haussé, ribbon d'action unifié).
  • Fiche Circuit préparé : FormContainer + TabbedForm + FormField shadcn, nouveau stepper minimal animé.
  • Optimisation IA — Paramètres : Dialog + card réécrits en shadcn.
  • Mass-import : ExportTemplate et MassUploadFile migrés en shadcn (API préservée).
  • Auth : reset / forgot-password alignés sur le design dark du login, GuestGuard bogué retiré sur forgot-password.

Components Architecture

  • Nouveaux (scopés au module) : PreparationCircuitHeader, PreparationCircuitDrawerTable, preparation-optimization-settings-view.
  • Partagés enrichis (rétro-compatibles) : CustomDrawer.topOffset?, TabsCustom.shape?.
  • Supprimé : preparation-table-row.tsx (legacy MUI).
  • Pattern unifié : TableHeadCustom + buildGridTemplate + useSyncedHorizontalScroll + TablePagination.

Key Features

  • Tris, filtres colonne, pagination et scroll horizontal synchronisé sur la liste préparations.
  • Stepper Circuit : markers + soulignement gradient animé (framer-motion layoutId).
  • Hero gradient Paramétrages + CTA blanc mat (variant="secondary").
  • Toasts Sonner remplacent les Snackbar MUI sur mass-import.
  • Pages auth : inputs sombres, gradient submit + spinner, bannières success/error teintées.

Technical Implementation

  • MUI → shadcn (Box, Grid, TextField, Dialog, Snackbar, IconButton…).
  • Icônes : FontAwesome / MUI → Lucide React.
  • Forms : Formik → React-Hook-Form + Yup ; OptimizationSettingsCard passe en useState contrôlé.
  • Sentinelle SELECT_ALL = '__all__' côté filtres Paramétrages (Radix interdit value="").
  • Animation refresh : rotate-[-360deg] + couleurs orange du TableControlBar.
  • Tokens couleurs respectés (--p-100, --primary, --p-500/600/700, --neo-shadow-*, gradient-primary).
  • Aucune dépendance ajoutée ; style.ts partagé non touché ; TypeScript strict + ESLint clean.

Closes VSN-2835

Rapports de requête de fusion