V5.0.0 //

-> Refonte du système de GESTION DES ROULEMENTS de matériels roulants
-> Optimisation rendue BDD

package.json

@@ -48,5 +48,8 @@
   },
   "devDependencies": {
     "supabase": "^2.115.0"
+  },
+  "overrides": {
+    "webpack": "^5.0.0"
   }
 }

src/pages/perturbations/CreerPerturbation.js

@@ -317,7 +317,7 @@ export default function CreerPerturbation() {
         }
       ];
 
-      const { data, error } = await updateHoraireComposition(horaireTarget.id, newComp);
+      const { error } = await updateHoraireComposition(horaireTarget.id, newComp);
       if (error) throw error;
 
       setHoraires(prev => prev.map(h => h.id === horaireTarget.id ? { ...h, composition_train: newComp } : h));
@@ -362,7 +362,7 @@ export default function CreerPerturbation() {
     try {
       for (const h of selectedHoraires) {
         const arrets = perturbationsArretsMap[h.id] || [];
-        const payload = buildPayload({
+        const { payload, modificationsParcours } = buildPayload({
           selectedHoraire: h,
           cause,
           causeDetails,
@@ -374,7 +374,7 @@ export default function CreerPerturbation() {
           scopedRegionId,
         });
 
-        const { error } = await createPerturbation(payload);
+        const { error } = await createPerturbation(payload, modificationsParcours);
         if (error) {
           alert(`Erreur lors de la création pour le train ${h.numero_train} : ` + (error.message || 'Erreur'));
           setSaving(false);

src/pages/perturbations/ModifierPerturbation.js

@@ -275,7 +275,7 @@ export default function ModifierPerturbation() {
         }
       ];
 
-      const { data, error } = await updateHoraireComposition(horaireTarget.id, newComp);
+      const { error } = await updateHoraireComposition(horaireTarget.id, newComp);
       if (error) throw error;
 
       setHoraires(prev => prev.map(h => h.id === horaireTarget.id ? { ...h, composition_train: newComp } : h));
@@ -315,7 +315,7 @@ export default function ModifierPerturbation() {
 
     setSaving(true);
     try {
-      const payload = buildPayload({
+      const { payload, modificationsParcours } = buildPayload({
         selectedHoraire,
         cause,
         causeDetails,
@@ -327,7 +327,7 @@ export default function ModifierPerturbation() {
         scopedRegionId,
       });
 
-      const { error } = await updatePerturbation(perturbationId, payload);
+      const { error } = await updatePerturbation(perturbationId, payload, modificationsParcours);
       if (error) {
         alert('Erreur lors de la mise à jour : ' + (error.message || 'Erreur'));
       } else {

src/pages/travaux/CreerTravaux.js

@@ -70,16 +70,27 @@ export default function CreerTravaux() {
     const el = tabsRef.current;
     if (!el) return;
     const handleTabChange = (e) => {
-      if (e.detail?.selectedKey) {
-        setActiveTabKey(e.detail.selectedKey);
+      const key = e.detail?.selectedKey || e.detail?.tabName || e.detail?.value;
+      if (key) {
+        setActiveTabKey(key);
       }
     };
+    el.addEventListener('tabChange', handleTabChange);
+    el.addEventListener('wcsTabsChange', handleTabChange);
     el.addEventListener('wcsChange', handleTabChange);
     return () => {
+      el.removeEventListener('tabChange', handleTabChange);
+      el.removeEventListener('wcsTabsChange', handleTabChange);
       el.removeEventListener('wcsChange', handleTabChange);
     };
   }, []);
 
+  useEffect(() => {
+    if (tabsRef.current) {
+      tabsRef.current.selectedKey = activeTabKey;
+    }
+  }, [activeTabKey]);
+
   const handleSearchHoraires = useCallback(async () => {
     setLoadingHoraires(true);
     setShowResults(true);
@@ -231,10 +242,10 @@ export default function CreerTravaux() {
 
           {/* Navigation par Onglets WCS */}
           <div className="mb-4">
-            <wcs-tabs ref={tabsRef} selected-key={activeTabKey}>
-              <wcs-tab header="1. Général & Ligne" item-key="general"></wcs-tab>
-              <wcs-tab header="2. Calendrier & Période" item-key="calendrier"></wcs-tab>
-              <wcs-tab header={`3. Substitutions (${horairesSelectionnes.length})`} item-key="substitutions"></wcs-tab>
+            <wcs-tabs ref={tabsRef} selected-key={activeTabKey} headers-only="true">
+              <wcs-tab header="1. Général & Ligne" item-key="general" onClick={() => setActiveTabKey('general')}></wcs-tab>
+              <wcs-tab header="2. Calendrier & Période" item-key="calendrier" onClick={() => setActiveTabKey('calendrier')}></wcs-tab>
+              <wcs-tab header={`3. Substitutions (${horairesSelectionnes.length})`} item-key="substitutions" onClick={() => setActiveTabKey('substitutions')}></wcs-tab>
             </wcs-tabs>
           </div>
 
@@ -289,6 +300,17 @@ export default function CreerTravaux() {
                       placeholder="Détaillez les impacts prévus, motifs techniques, gares concernées..."
                     />
                   </div>
+
+                  <div className="d-flex justify-content-end mt-4 pt-3 border-top">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-primary"
+                      onClick={() => setActiveTabKey('calendrier')}
+                    >
+                      <span>Étape suivante : Calendrier & Période</span>
+                      <wcs-mat-icon icon="arrow_forward" size="s" class="ml-1"></wcs-mat-icon>
+                    </wcs-button>
+                  </div>
                 </wcs-card-body>
               </wcs-card>
             )}
@@ -382,6 +404,25 @@ export default function CreerTravaux() {
                       })}
                     </div>
                   </div>
+
+                  <div className="d-flex justify-content-between mt-4 pt-3 border-top">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-secondary"
+                      onClick={() => setActiveTabKey('general')}
+                    >
+                      <wcs-mat-icon icon="arrow_back" size="s" class="mr-1"></wcs-mat-icon>
+                      <span>Précédent : Général</span>
+                    </wcs-button>
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-primary"
+                      onClick={() => setActiveTabKey('substitutions')}
+                    >
+                      <span>Étape suivante : Substitutions</span>
+                      <wcs-mat-icon icon="arrow_forward" size="s" class="ml-1"></wcs-mat-icon>
+                    </wcs-button>
+                  </div>
                 </wcs-card-body>
               </wcs-card>
             )}
@@ -534,6 +575,17 @@ export default function CreerTravaux() {
                       )}
                     </div>
                   )}
+
+                  <div className="d-flex justify-content-start mt-4 pt-3 border-top">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-secondary"
+                      onClick={() => setActiveTabKey('calendrier')}
+                    >
+                      <wcs-mat-icon icon="arrow_back" size="s" class="mr-1"></wcs-mat-icon>
+                      <span>Précédent : Calendrier & Période</span>
+                    </wcs-button>
+                  </div>
                 </wcs-card-body>
               </wcs-card>
             )}

src/pages/travaux/ModifierTravaux.js

@@ -73,16 +73,27 @@ export default function ModifierTravaux() {
     const el = tabsRef.current;
     if (!el) return;
     const handleTabChange = (e) => {
-      if (e.detail?.selectedKey) {
-        setActiveTabKey(e.detail.selectedKey);
+      const key = e.detail?.selectedKey || e.detail?.tabName || e.detail?.value;
+      if (key) {
+        setActiveTabKey(key);
       }
     };
+    el.addEventListener('tabChange', handleTabChange);
+    el.addEventListener('wcsTabsChange', handleTabChange);
     el.addEventListener('wcsChange', handleTabChange);
     return () => {
+      el.removeEventListener('tabChange', handleTabChange);
+      el.removeEventListener('wcsTabsChange', handleTabChange);
       el.removeEventListener('wcsChange', handleTabChange);
     };
   }, []);
 
+  useEffect(() => {
+    if (tabsRef.current) {
+      tabsRef.current.selectedKey = activeTabKey;
+    }
+  }, [activeTabKey]);
+
   const loadTravail = useCallback(async () => {
     setLoading(true);
     try {
@@ -290,10 +301,10 @@ export default function ModifierTravaux() {
 
           {/* Navigation par Onglets WCS */}
           <div className="mb-4">
-            <wcs-tabs ref={tabsRef} selected-key={activeTabKey}>
-              <wcs-tab header="1. Général & Ligne" item-key="general"></wcs-tab>
-              <wcs-tab header="2. Calendrier & Période" item-key="calendrier"></wcs-tab>
-              <wcs-tab header={`3. Substitutions (${horairesSelectionnes.length})`} item-key="substitutions"></wcs-tab>
+            <wcs-tabs ref={tabsRef} selected-key={activeTabKey} headers-only="true">
+              <wcs-tab header="1. Général & Ligne" item-key="general" onClick={() => setActiveTabKey('general')}></wcs-tab>
+              <wcs-tab header="2. Calendrier & Période" item-key="calendrier" onClick={() => setActiveTabKey('calendrier')}></wcs-tab>
+              <wcs-tab header={`3. Substitutions (${horairesSelectionnes.length})`} item-key="substitutions" onClick={() => setActiveTabKey('substitutions')}></wcs-tab>
             </wcs-tabs>
           </div>
 
@@ -348,6 +359,17 @@ export default function ModifierTravaux() {
                       placeholder="Détaillez les impacts prévus, motifs techniques, gares concernées..."
                     />
                   </div>
+
+                  <div className="d-flex justify-content-end mt-4 pt-3 border-top">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-primary"
+                      onClick={() => setActiveTabKey('calendrier')}
+                    >
+                      <span>Étape suivante : Calendrier & Période</span>
+                      <wcs-mat-icon icon="arrow_forward" size="s" class="ml-1"></wcs-mat-icon>
+                    </wcs-button>
+                  </div>
                 </wcs-card-body>
               </wcs-card>
             )}
@@ -441,6 +463,25 @@ export default function ModifierTravaux() {
                       })}
                     </div>
                   </div>
+
+                  <div className="d-flex justify-content-between mt-4 pt-3 border-top">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-secondary"
+                      onClick={() => setActiveTabKey('general')}
+                    >
+                      <wcs-mat-icon icon="arrow_back" size="s" class="mr-1"></wcs-mat-icon>
+                      <span>Précédent : Général</span>
+                    </wcs-button>
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-primary"
+                      onClick={() => setActiveTabKey('substitutions')}
+                    >
+                      <span>Étape suivante : Substitutions</span>
+                      <wcs-mat-icon icon="arrow_forward" size="s" class="ml-1"></wcs-mat-icon>
+                    </wcs-button>
+                  </div>
                 </wcs-card-body>
               </wcs-card>
             )}
@@ -593,6 +634,17 @@ export default function ModifierTravaux() {
                       )}
                     </div>
                   )}
+
+                  <div className="d-flex justify-content-start mt-4 pt-3 border-top">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-secondary"
+                      onClick={() => setActiveTabKey('calendrier')}
+                    >
+                      <wcs-mat-icon icon="arrow_back" size="s" class="mr-1"></wcs-mat-icon>
+                      <span>Précédent : Calendrier & Période</span>
+                    </wcs-button>
+                  </div>
                 </wcs-card-body>
               </wcs-card>
             )}