From 55de887f87d981e2b8ebb7706ec4bd78116b5b93 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 21:30:41 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20nh=E1=BA=A5n=20n=C3=BAt=20toggle=20stat?=
 =?UTF-8?q?us=20=C4=91=E1=BB=83=20chuy=E1=BB=83n=20=C4=91=E1=BA=BFn=20b?=
 =?UTF-8?q?=E1=BA=A3n=20=C4=91=E1=BB=93=20di=20chuy=E1=BB=83n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ItineraryTimeline.tsx | 11 +++++++----
 frontend/src/pages/TourDetailPage.tsx         | 13 +++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ItineraryTimeline.tsx b/frontend/src/components/ItineraryTimeline.tsx
index b2ab74d..08e5db1 100644
--- a/frontend/src/components/ItineraryTimeline.tsx
+++ b/frontend/src/components/ItineraryTimeline.tsx
@@ -42,12 +42,14 @@ export const ItineraryTimeline = ({
   onAddLocation, 
   onEditLocation,
   onQuickNote,
+  onNavigate,
   onSuccess,
   isPublicView = false
 }: { 
   onAddLocation?: (legId: string, isStart?: boolean, isEnd?: boolean) => void, 
   onEditLocation?: (location: any) => void, 
   onQuickNote?: (name: string) => void,
+  onNavigate?: (location: any) => void,
   onSuccess?: () => void,
   isPublicView?: boolean 
 }) => {
@@ -113,9 +115,10 @@ export const ItineraryTimeline = ({
     endDate: '' 
   });
 
-  const toggleComplete = async (locationId: string) => {
-    // Gọi API PATCH /api/v1/locations/:id để cập nhật trạng thái
-    console.log("Toggle status for location:", locationId);
+  const handleStatusClick = (location: any) => {
+    if (onNavigate) {
+      onNavigate(location);
+    }
   };
 
   const handleAddLeg = async () => {
@@ -371,7 +374,7 @@ export const ItineraryTimeline = ({
                             {/* Timeline Node */}
                             <div className="z-10 mt-1.5 mr-4">
                               <button 
-                                onClick={() => toggleComplete(location.id)}
+                                onClick={() => handleStatusClick(location)}
                                 className={`transition-colors duration-200 ${location.status === 'COMPLETED' ? 'text-green-500' : 'text-gray-300 hover:text-blue-500'}`}
                               >
                                 {location.status === 'COMPLETED' ? (
diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 1db666d..bb1afd9 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -748,6 +748,18 @@ export const TourDetailPage = ({
     };
   }, [routes, selectedRouteIndex]);
 
+  const handleNavigateToLocation = (location: any) => {
+    setViewMode('map');
+    setMapCenter([location.latitude, location.longitude]);
+    setLocateTrigger(prev => prev + 1);
+    
+    notify({
+      title: 'Bắt đầu chỉ đường',
+      message: `Đang hiển thị lộ trình từ vị trí của bạn đến ${location.name}`,
+      type: 'info'
+    });
+  };
+
   useEffect(() => {
     if (initialViewState) {
       setMapCenter(initialViewState.center);
@@ -1378,6 +1390,7 @@ export const TourDetailPage = ({
                 onQuickNote={(locName: string) => handleQuickNote(locName)}
                 onSuccess={() => fetchTour(tourId)}
                 isPublicView={isPublicView} 
+                onNavigate={handleNavigateToLocation}
               />
               ) : (
                 <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">