VSN-2346: ShadCN card layout for infrastructure & class-level forms, UUID copy in tables, navigation fixes
Overview
This MR continues the ShadCN/Tailwind migration across the exploitation section. It migrates all infrastructure fiche forms and the class-level form to the card-based layout pattern (matching the établissement form), adds UUID copy-to-clipboard functionality to table ID columns, and fixes navigation arrow bugs.
Changes
1. Infrastructure Fiche Forms — Card Layout with Progressive Left Border
All 4 infrastructure forms now use section cards with a full-height left purple border that increases in opacity per section, providing visual hierarchy:
Fiche Secteur (sector-form.tsx)
- 2 sections: Identification (40%) → Localisation (65%)
- Fields: nom du secteur | adresse, description
- Sub-table "Agences" redesigned to ShadCN CSS grid with
rounded-2xlrows and neo-shadow
Fiche Agence (agency-form.tsx)
- 2 sections: Identification (40%) → Localisation (65%)
- Fields: secteur + nom d'agence | adresse, description
- Sub-table "Départements" redesigned to ShadCN CSS grid
Fiche Département (department-form.tsx)
- 3 sections: Identification (40%) → Localisation (65%) → Apparence (90%)
- Fields: agence + nom + code | adresse + zone | couleur + description
- Sub-table "Lots" redesigned to ShadCN CSS grid with add button
Fiche Lot (lot-form.tsx)
- 1 section: Informations générales (60%)
- Fields: départements + numéro | description
2. Navigation Arrows Fix
Fixed in all 4 infrastructure list views (sector-list-view.tsx, agency-list-view.tsx, department-list-view.tsx, lot-list-view.tsx) and class-level-list-view.tsx:
-
Bug:
filteredData.find((s) => s.id === id)returnedundefinedbecauses.idis a number butuseEntityNavigationpasses a string -
Fix: Changed to
filteredData.find((s) => String(s.id) === id)
3. Classe (Niveau de Classe) — Full ShadCN Migration
Form (class-level-new-view.tsx)
- Replaced MUI
FormContainer(@/layouts/form/form-container) with ShadCNFormContainer(@/shared/components/shadcn/form-container) - Replaced MUI
FormField(@/shared/components/form/form-field) with ShadCNFormField(@/shared/components/shadcn/form-field) - Replaced manual Pencil edit button + Tooltip with
EditExportButtonscomponent - Added card layout with left purple border at 60% opacity
- Removed unused imports:
FormikProvider,Pencil,ConditionalComponent,Tooltip
Table (class-level-table.tsx)
- Action column changed from
autotominmax(100px, auto)— prevents collapse when table has only 2 data columns
4. TruncatedUuid Copy in Circuit, Trajet & Avenant Tables
Added the TruncatedUuid component (already used in usager table) to the id column in:
-
Circuit (
circuit-table-row.tsx): addedcase 'id'withTruncatedUuid -
Trajet (
trajet-table-row.tsx): replaced clickable purple link withTruncatedUuid -
Avenant (
avenant-table-row.tsx): replaced plain<span>text withTruncatedUuid
Behavior: truncated UUID in the cell, hover shows a dark popover with full UUID + copy button.
5. ID Column Width Normalization
Reduced id column COLUMN_MIN_WIDTHS from 250px to 120px in:
circuit-table.tsxtrajet-table.tsxavenant-table.tsx
Now consistent with the usager table's DEFAULT_MIN_WIDTH of 120px, since TruncatedUuid handles truncation.
6. New Infrastructure Table Components
-
infrastructure-table.tsx— shared CSS grid table component for infrastructure lists -
sector-table-row.tsx,agency-table-row.tsx,department-table-row.tsx,lot-table-row.tsx— animated row components with checkbox selection, neo-shadow hover, and action buttons