Skip to content

feat: rebuild usager module with shadcn/Tailwind design system

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

Summary

  • Rebuild the usager (passenger) module using shadcn/ui components and Tailwind CSS
  • Create 18 new reusable shadcn components for table, form, tabs, and dialog patterns
  • Migrate 15 existing usager sub-tab components from MUI layout/icons to Tailwind + lucide-react
  • Migrate establishment modal to shadcn Dialog
  • Replace all hardcoded HSL color values with CSS variable references
  • Merge VSN-2270 shared component fixes into this branch

Changes

New: shadcn Components (src/shared/sections/usager/shadcn/components/)

  • form-field — Universal field renderer (text, select, date, combobox, checkbox, textarea)
  • form-container — Card wrapper with sticky header for form pages
  • tabbed-form — Pill-style animated tab bar
  • table-control-bar — Toolbar with search, filter, export, import
  • table-head — Sortable/filterable table header
  • table-pagination — Pagination with rows-per-page selector
  • action-buttons — Save/Cancel/Back/Next button group
  • status-badge — CVA-based status chip with semantic colors
  • confirm-dialog — Generic confirmation dialog
  • tabs-custom — Animated tab bar with close buttons
  • tab-content-container — Tab panel wrapper
  • table-action-column — Row action buttons (edit, copy, delete, toggle)
  • toggle-activation-dialog — Passenger activation/deactivation dialog
  • representative-schedule-table — Representative schedule grid

New: shadcn Views (src/shared/sections/usager/shadcn/view/)

  • usager-list-view — List page with table, filters, pagination
  • usager-new-view — Form page with 8 tabs and full CRUD

New: shadcn Table (src/shared/sections/usager/shadcn/components/)

  • usager-table — Usager table with horizontal scroll sync and loading skeletons
  • usager-table-row — Row with department color indicator and status badge

Migrated: Usager Sub-Tab Components

  • usager-form — Main form container (MUI Grid/Stack → Tailwind grid)
  • autres-interlocuteurs — Other contacts tab
  • avenants-horaires-list — Amendment list with tab management
  • avenants-horaires-new — Amendment form with useCallback/useRef optimizations
  • avenant-representative — Representative assignment form
  • horaires-specifique-tabs — Specific schedule configuration
  • depot-document — Document upload tab
  • representant-tabs — Representative tab navigation
  • unified-representantForm — Representative form
  • suivi-dossier — Document tracking table
  • usager-horaires-tab — Schedule configuration
  • mobile-schedule-config-table-row — Mobile schedule row
  • passenger-schedule-history-table-row — Schedule history row
  • passenger-schedule-history-view — Schedule history view

Updated: Establishment Components

  • create-etablissement-modal — Migrated to shadcn Dialog
  • establishment-details — Replaced hardcoded HSL with CSS variables
  • establishment-form-view — Added entity navigation arrows, shadcn imports

Updated: Shared Components

  • form-container — Border color uses CSS variable
  • edit-export-buttons — Border colors use CSS variables
  • loading-screen — SVG stroke uses CSS variable
  • css.ts — Replaced hardcoded bgcolor and border with CSS variables

Fixes

  • Replaced all hardcoded hsl(220 14% 89-92%) with hsl(var(--border))
  • Replaced hsl(232 18% 90%) with hsl(var(--border))
  • Replaced hsl(240 20% 99%) gradient values with hsl(var(--background))
  • Replaced setTimeout focus calls with requestAnimationFrame
  • Removed console.log placeholder in suivi-dossier
  • Resolved merge conflicts with VSN-2270

Rapports de requête de fusion