Skip to content

VSN-2346: ShadCN card layout for infrastructure & class-level forms, UUID copy in tables, navigation fixes

yahya.elmokhtari a demandé de fusionner feature/VSN-2346 vers develop

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-2xl rows 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) returned undefined because s.id is a number but useEntityNavigation passes 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 ShadCN FormContainer (@/shared/components/shadcn/form-container)
  • Replaced MUI FormField (@/shared/components/form/form-field) with ShadCN FormField (@/shared/components/shadcn/form-field)
  • Replaced manual Pencil edit button + Tooltip with EditExportButtons component
  • 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 auto to minmax(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): added case 'id' with TruncatedUuid
  • Trajet (trajet-table-row.tsx): replaced clickable purple link with TruncatedUuid
  • Avenant (avenant-table-row.tsx): replaced plain <span> text with TruncatedUuid

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.tsx
  • trajet-table.tsx
  • avenant-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

Rapports de requête de fusion