From 288b40ad1219d14a29adfab674a1eed1592a3644 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 19:14:18 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20th=C3=AAm=20t=C3=ADnh=20n=C4=83ng=20t?=
 =?UTF-8?q?=C3=ACm=20t=C3=B4i=20=C4=91=E1=BB=83=20t=E1=BB=B1=20=C4=91?=
 =?UTF-8?q?=E1=BB=99ng=20di=20chuy=E1=BB=83n=20b=E1=BA=A3n=20=C4=91?=
 =?UTF-8?q?=E1=BB=93=20v=E1=BB=81=20v=E1=BB=8B=20tr=C3=AD=20c=E1=BB=A7a=20?=
 =?UTF-8?q?ng=C6=B0=E1=BB=9Di=20d=C3=B9ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TourDetailPage.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 2b9bc1d..58e643d 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -27,6 +27,7 @@ import {
   Map as MapIconLucide,
   MapPin,
   Search,
+  LocateFixed,
   Loader2,
   Car,
   Bike,
@@ -87,6 +88,16 @@ const MapTourBounds = ({ locations }: { locations: any[] }) => {
 
   return null;
 };
+// Component Helper để di chuyển tâm bản đồ về vị trí người dùng khi nhấn nút
+const RecenterUser = ({ position, trigger }: { position: [number, number] | null, trigger: number }) => {
+  const map = useMap();
+  useEffect(() => {
+    if (position && trigger > 0) {
+      map.setView(position, 16, { animate: true });
+    }
+  }, [trigger, position, map]);
+  return null;
+};
 // Menu ngữ cảnh cho bản đồ
 const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.LatLng) => void }) => {
   const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null);
@@ -297,6 +308,7 @@ export const TourDetailPage = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<any[]>([]);
   const [isSearching, setIsSearching] = useState(false);
+  const [locateTrigger, setLocateTrigger] = useState(0);
   const [isRoutingLoading, setIsRoutingLoading] = useState(false);
   const [travelMode, setTravelMode] = useState<'driving' | 'bike' | 'foot'>('driving');
   const [routes, setRoutes] = useState<any[]>([]);
@@ -1202,6 +1214,9 @@ export const TourDetailPage = ({
                     {/* Tự động đóng khung Start và End khi dữ liệu thay đổi */}
                     <MapTourBounds locations={allLocations} />
 
+                    {/* Xử lý di chuyển tâm bản đồ về phía người dùng */}
+                    <RecenterUser position={userLocation} trigger={locateTrigger} />
+
                     {/* Hiển thị vị trí hiện tại của người dùng */}
                     {userLocation && (
                       <Marker position={userLocation} icon={mapIcons.user} zIndexOffset={1000}>
@@ -1386,6 +1401,16 @@ export const TourDetailPage = ({
                       >
                         <Footprints className="w-4 h-4" />
                       </button>
+
+                      {/* Nút Tìm tôi */}
+                      <button 
+                        onClick={() => setLocateTrigger(prev => prev + 1)}
+                        disabled={!userLocation}
+                        className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${!userLocation ? 'opacity-30 cursor-not-allowed' : 'text-blue-600 hover:bg-blue-50'}`}
+                        title="Vị trí của tôi"
+                      >
+                        <LocateFixed className="w-4 h-4" />
+                      </button>
                     </div>
                     
                     {/* Chỉ báo đang tìm đường */}