Thêm tính năng sửa tính năng pending bị lỗi

ItineraryTimeline.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { format, differenceInMinutes, parseISO } from 'date-fns';
 import { CheckCircle2, Circle, Clock, MapPin, AlertCircle, Zap, Navigation, Edit2, Trash2, Plus, List } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
+import { ConfirmModal } from './ConfirmModal.js';
 
 const TimeVariance = ({ planned, actual }: { planned: string, actual: string | null }) => {
   if (!actual) return null;
@@ -40,6 +41,7 @@ export const ItineraryTimeline = ({
   onEditLocation 
 }: { onAddLocation?: (legId: string) => void, onEditLocation?: (location: any) => void }) => {
   const { currentTour, legs, optimizeRouting, userRole, addLeg, updateLeg, deleteLeg, initializeLegs, deleteLocation } = useTourStore();
+  const [confirmState, setConfirmState] = useState<{ open: boolean; title?: string; message?: string; onConfirm?: () => void }>({ open: false });
 
   const toggleComplete = async (locationId: string) => {
     // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
@@ -69,21 +71,35 @@ export const ItineraryTimeline = ({
   };
 
   const handleDeleteLeg = async (legId: string) => {
-    if (window.confirm("Bạn có chắc chắn muốn xóa chặng này?")) {
-      try {
-        await deleteLeg(legId);
-      } catch (err: any) {
-        alert(err.message);
-      }
-    }
+    setConfirmState({
+      open: true,
+      title: 'Xóa chặng',
+      message: 'Bạn có chắc chắn muốn xóa chặng này?',
+      onConfirm: async () => {
+        try {
+          await deleteLeg(legId);
+        } catch (err: any) {
+          alert(err.message);
+        } finally {
+          setConfirmState({ open: false });
+        }
+      },
+    });
   };
 
   const handleDeleteLocation = async (id: string) => {
-    if (window.confirm("Bạn có chắc chắn muốn xóa địa điểm này?")) {
-      try {
-        await deleteLocation(id);
-      } catch (err: any) { alert(err.message); }
-    }
+    setConfirmState({
+      open: true,
+      title: 'Xóa địa điểm',
+      message: 'Bạn có chắc chắn muốn xóa địa điểm này?',
+      onConfirm: async () => {
+        try {
+          await deleteLocation(id);
+        } catch (err: any) { alert(err.message); } finally {
+          setConfirmState({ open: false });
+        }
+      },
+    });
   };
 
   return (
@@ -338,6 +354,13 @@ export const ItineraryTimeline = ({
           </div>
         )}
       </div>
+      <ConfirmModal
+        isOpen={confirmState.open}
+        title={confirmState.title}
+        message={confirmState.message}
+        onConfirm={() => confirmState.onConfirm?.()}
+        onCancel={() => setConfirmState({ open: false })}
+      />
     </div>
   );
 };