add confirm

client/src/components/trans-routes/RouteEdit.js

@@ -43,19 +43,53 @@ const RouteEdit = () => {
   const [unassignedCustomers, setUnassignedCustomers] = useState([]);
   const [addCustomerToRoute, setAddCustomerToRoute] = useState(null);
   const [attendanceAbsentCustomers, setAttendanceAbsentCustomers] = useState([]); // customers with attendance notes on route date
+  const initialCustomerListRef = useRef(null);
   const paramsQuery = new URLSearchParams(window.location.search);
   const scheduleDate = paramsQuery.get('dateSchedule');
   const editSection = paramsQuery.get('editSection')
-  const redirectToView = () => {
-    if (scheduleDate) {
-      navigate(`/trans-routes/${params.id}?dateSchedule=${scheduleDate}`);
+  const hasUnsavedCustomerChanges = () => {
+    if (!initialCustomerListRef.current || editSection !== 'assignment') return false;
+    const current = JSON.stringify(
+      (newCustomerList || []).map(c => c.customer_id).sort()
+    );
+    return current !== initialCustomerListRef.current;
+  };
+
+  const confirmNavigate = (navigateFn) => {
+    if (hasUnsavedCustomerChanges()) {
+      if (window.confirm('You have unsaved changes to the customer assignment. Are you sure you want to leave without saving?')) {
+        navigateFn();
+      }
     } else {
-      navigate(`/trans-routes/${params.id}`);
+      navigateFn();
     }
+  };
+
+  // Warn on browser refresh / tab close
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      if (hasUnsavedCustomerChanges()) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [newCustomerList, editSection]);
+
+  const redirectToView = () => {
+    const go = () => {
+      if (scheduleDate) {
+        navigate(`/trans-routes/${params.id}?dateSchedule=${scheduleDate}`);
+      } else {
+        navigate(`/trans-routes/${params.id}`);
+      }
+    };
+    confirmNavigate(go);
   }
 
   const redirectToDashboard = () => {
-    navigate(`/trans-routes/dashboard`);
+    confirmNavigate(() => navigate(`/trans-routes/dashboard`));
   }
 
   const softDeleteCurrentRoute = () => {
@@ -118,6 +152,9 @@ const RouteEdit = () => {
           payload = Object.assign({}, payload, {fromSchedule: true});
         }
       }
+      initialCustomerListRef.current = JSON.stringify(
+        (newCustomerList || []).map(c => c.customer_id).sort()
+      );
       payload.callback = redirectToView;
       dispatch(updateRoute(payload));
       // TransRoutesService.updateInProgress(data);
@@ -250,6 +287,9 @@ const RouteEdit = () => {
       setNewRouteType(data?.data?.type);
       setEstimatedStartTime(data?.data?.estimated_start_time && new Date(data?.data?.estimated_start_time));
       setNewCustomerList(data?.data?.route_customer_list);
+      initialCustomerListRef.current = JSON.stringify(
+        (data?.data?.route_customer_list || []).map(c => c.customer_id).sort()
+      );
       setErrorMessage(undefined);
     })