From f181009fa5ec278b9de64d4e9cc7640d40eab350 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Wed, 17 Jun 2026 20:08:28 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20s=E1=BB=ADa=20l=E1=BA=A1i=20c=C3=A1c=20n?=
 =?UTF-8?q?=C3=BAt=20hi=E1=BB=83n=20th=E1=BB=8B=20tr=C3=AAn=20m=C3=A0n=20h?=
 =?UTF-8?q?=C3=ACnh=20gom=20l=E1=BA=A1i=20th=C3=A0nh=201=20n=C3=BAt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ExploreMap.tsx     | 12 ++--
 frontend/src/pages/TourDetailPage.tsx | 98 +++++++++++++++------------
 2 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/frontend/src/pages/ExploreMap.tsx b/frontend/src/pages/ExploreMap.tsx
index 58fb0d1..1ab3b25 100644
--- a/frontend/src/pages/ExploreMap.tsx
+++ b/frontend/src/pages/ExploreMap.tsx
@@ -223,7 +223,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos
         <div className="flex items-center gap-3 pointer-events-auto">
           <button
             onClick={onBack}
-            className="bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100"
+            className="w-11 h-11 flex items-center justify-center bg-white rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100 shrink-0"
             title="Quay lại"
           >
             <X className="w-6 h-6 text-gray-800" />
@@ -233,7 +233,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos
           <div className="relative">
             <button
               onClick={() => setIsFilterDropdownOpen(prev => !prev)}
-              className="bg-white p-3 rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100 flex items-center justify-center"
+              className="w-11 h-11 bg-white rounded-full shadow-xl hover:bg-gray-50 transition-all border border-gray-100 flex items-center justify-center shrink-0"
               title="Lọc theo loại"
             >
               <Filter className="w-6 h-6 text-gray-800" />
@@ -318,7 +318,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos
                 console.log("Đang mở Ảnh của tôi...");
                 onOpenMyPhotos();
               }}
-              className="bg-white p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-blue-50 text-blue-600 transition-all flex items-center gap-2 font-bold border border-blue-100"
+              className="w-11 h-11 md:w-auto bg-white p-0 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-blue-50 text-blue-600 transition-all flex items-center justify-center md:justify-start gap-2 font-bold border border-blue-100 shrink-0"
               title="Ảnh của tôi"
             >
               <ImageIcon className="w-5 h-5" />
@@ -330,7 +330,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos
           {user && (
             <button
               onClick={() => setIsCreateModalOpen(true)}
-              className="bg-green-600 p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center gap-2 font-bold"
+              className="w-11 h-11 md:w-auto bg-green-600 p-0 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center justify-center md:justify-start gap-2 font-bold shrink-0"
               title="Tạo Tour mới"
             >
               <Navigation className="w-5 h-5" />
@@ -342,7 +342,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos
           {user?.isAdmin && (
             <button
               onClick={() => setIsAdminModalOpen(true)}
-              className="bg-blue-600 p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center gap-2 font-bold"
+              className="w-11 h-11 md:w-auto bg-blue-600 p-0 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center justify-center md:justify-start gap-2 font-bold shrink-0"
               title="Quản lý hệ thống"
             >
               <Settings className="w-5 h-5" />
@@ -354,7 +354,7 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour, onOpenMyPhotos
           {onLogout && (
             <button
               onClick={onLogout}
-              className="bg-white p-3 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-red-50 hover:text-red-600 transition-all flex items-center gap-2 font-bold text-gray-700 border border-gray-100"
+              className="w-11 h-11 md:w-auto bg-white p-0 md:px-4 md:py-3 rounded-2xl shadow-xl hover:bg-red-50 hover:text-red-600 transition-all flex items-center justify-center md:justify-start gap-2 font-bold text-gray-700 border border-gray-100 shrink-0"
               title="Đăng xuất"
             >
               <LogOut className="w-5 h-5" />
diff --git a/frontend/src/pages/TourDetailPage.tsx b/frontend/src/pages/TourDetailPage.tsx
index 8c75b0f..8dc35b3 100644
--- a/frontend/src/pages/TourDetailPage.tsx
+++ b/frontend/src/pages/TourDetailPage.tsx
@@ -524,12 +524,16 @@ export const TourDetailPage = ({
   const allLocations = useMemo(() => legs.flatMap(l => l.locations), [legs]);
 
   // Tạo key định danh cho lộ trình để buộc bản đồ vẽ lại khi dữ liệu thay đổi
-  const routeKey = useMemo(() => allLocations.map(l => `${l.id}-${l.latitude}-${l.longitude}`).join('|'), [allLocations]);
+  const routeKey = useMemo(() => {
+    const locsKey = allLocations.map(l => `${l.id}-${l.latitude}-${l.longitude}`).join('|');
+    const userKey = userLocation ? `${userLocation[0].toFixed(5)}-${userLocation[1].toFixed(5)}` : 'no-user';
+    return `${locsKey}-${userKey}`;
+  }, [allLocations, userLocation]);
 
   // Tự động tìm các quãng đường di chuyển thực tế theo phương tiện và vẽ lên bản đồ
   useEffect(() => {
     const fetchRoutes = async () => {
-      if (allLocations.length < 2) {
+      if (allLocations.length === 0 || (allLocations.length < 2 && !userLocation)) {
         setRoutes([]);
         setSelectedRouteIndex(0);
         setDrivingRoute([]);
@@ -537,14 +541,19 @@ export const TourDetailPage = ({
         return;
       }
 
-      const coordsString = allLocations
-        .map(loc => `${loc.longitude},${loc.latitude}`)
-        .join(';');
+      // Chèn vị trí người dùng vào đầu danh sách tọa độ nếu có
+      const coordsArray = allLocations.map(loc => `${loc.longitude},${loc.latitude}`);
+      
+      if (userLocation) {
+        coordsArray.unshift(`${userLocation[1]},${userLocation[0]}`);
+      }
+
+      const coordsString = coordsArray.join(';');
 
       setIsRoutingLoading(true);
       try {
-        // Thêm alternatives=true để yêu cầu các phương án lộ trình khác từ OSRM (Lưu ý: OSRM thường chỉ trả về lộ trình thay thế cho 2 điểm tọa độ)
-        const response = await fetch(`https://router.project-osrm.org/route/v1/${travelMode}/${coordsString}?overview=full&geometries=geojson&alternatives=true`);
+        // Yêu cầu tối đa 3 phương án lộ trình. Lưu ý: OSRM chỉ hỗ trợ alternatives cho hành trình 2 điểm.
+        const response = await fetch(`https://router.project-osrm.org/route/v1/${travelMode}/${coordsString}?overview=full&geometries=geojson&alternatives=3`);
         const data = await response.json();
         if (data.code === 'Ok' && data.routes.length > 0) {
           setRoutes(data.routes);
@@ -559,7 +568,7 @@ export const TourDetailPage = ({
     };
 
     fetchRoutes();
-  }, [allLocations, travelMode]);
+  }, [allLocations, travelMode, userLocation]);
 
   // Cập nhật dữ liệu lộ trình hiển thị khi người dùng chọn phương án khác
   useEffect(() => {
@@ -1208,18 +1217,18 @@ export const TourDetailPage = ({
                 <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">
                   {/* Search Bar Overlay - Thanh tìm kiếm địa điểm trên bản đồ lộ trình */}
                   {!isPublicView && (
-                    <div className="absolute top-4 right-4 z-[1001] w-64 md:w-80">
+                    <div className="absolute top-3 right-3 z-[1001] w-48 md:w-64">
                       <div className="relative group">
                         <input 
                           type="text"
-                          placeholder="Tìm địa điểm để ghim..."
-                          className="w-full pl-10 pr-10 py-3 bg-white/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm font-bold"
+                          placeholder="Tìm địa điểm..."
+                          className="w-full pl-8 pr-8 py-2 bg-white/95 backdrop-blur-md border border-white/20 rounded-xl shadow-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all text-xs font-bold"
                           value={searchQuery}
                           onChange={e => handleSearchLocation(e.target.value)}
                         />
-                        <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
+                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-blue-500" />
                         {isSearching ? (
-                          <Loader2 className="absolute right-3.5 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />
+                          <Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 animate-spin text-blue-500" />
                         ) : searchQuery && (
                           <button onClick={() => { setSearchQuery(''); setSearchResults([]); }} className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-red-500 transition-colors">
                             <X className="w-4 h-4" />
@@ -1296,11 +1305,11 @@ export const TourDetailPage = ({
                         })
                         .map(({ data, index }) => (
                         <Polyline 
-                          key={`route-${index}-${index === selectedRouteIndex ? 'active' : 'alt'}-${routeKey}-${routes.length}`}
+                          key={`polyline-${index}-${index === selectedRouteIndex ? 'active' : 'alt'}-${routeKey}`}
                           positions={data.geometry.coordinates.map((c: any) => [c[1], c[0]])} 
                           color={index === selectedRouteIndex ? "#2563eb" : "#94a3b8"} 
-                          weight={index === selectedRouteIndex ? 6 : 14} 
-                          opacity={index === selectedRouteIndex ? 1 : 0.4}
+                          weight={index === selectedRouteIndex ? 6 : 12} 
+                          opacity={index === selectedRouteIndex ? 1 : 0.35}
                           dashArray={index === selectedRouteIndex ? undefined : "15, 15"}
                           smoothFactor={1}
                           eventHandlers={{ 
@@ -1323,12 +1332,12 @@ export const TourDetailPage = ({
                             },
                             mouseover: (e) => {
                               if (index !== selectedRouteIndex) {
-                                (e.target as L.Polyline).setStyle({ opacity: 0.8, weight: 16, color: '#64748b' });
+                                (e.target as L.Polyline).setStyle({ opacity: 0.7, weight: 14, color: '#64748b' });
                               }
                             },
                             mouseout: (e) => {
                               if (index !== selectedRouteIndex) {
-                                (e.target as L.Polyline).setStyle({ opacity: 0.4, weight: 14, color: '#94a3b8' });
+                                (e.target as L.Polyline).setStyle({ opacity: 0.35, weight: 12, color: '#94a3b8' });
                               }
                             }
                           }}
@@ -1437,42 +1446,42 @@ export const TourDetailPage = ({
                   )}
                   
                   {/* Overlay điều khiển trên bản đồ */}
-                  <div className="absolute top-4 left-4 z-[1001] flex flex-col gap-2">
+                  <div className="absolute top-3 left-3 z-[1001] flex flex-col gap-1.5">
                     <button
                       onClick={() => setIsMapControlsOpen(!isMapControlsOpen)}
-                      className="bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-white text-blue-600 hover:bg-blue-50 transition-all active:scale-95 flex items-center justify-center"
+                      className="w-9 h-9 bg-white/90 backdrop-blur-md rounded-xl shadow-xl border border-white text-blue-600 hover:bg-blue-50 transition-all active:scale-95 flex items-center justify-center shrink-0"
                     >
                       {isMapControlsOpen ? (
-                        <X className="w-5 h-5 text-gray-400" />
+                        <X className="w-4 h-4 text-gray-400" />
                       ) : (
-                        travelMode === 'driving' ? <Car className="w-5 h-5" /> : 
-                        travelMode === 'bike' ? <Bike className="w-5 h-5" /> : 
-                        <Footprints className="w-5 h-5" />
+                        travelMode === 'driving' ? <Car className="w-4 h-4" /> : 
+                        travelMode === 'bike' ? <Bike className="w-4 h-4" /> : 
+                        <Footprints className="w-4 h-4" />
                       )}
                     </button>
 
                     {isMapControlsOpen && (
-                      <div className="bg-white/90 backdrop-blur-md p-1.5 rounded-2xl shadow-xl border border-white flex flex-col gap-1.5 animate-in slide-in-from-top-2 duration-300">
+                      <div className="bg-white/90 backdrop-blur-md p-1 rounded-xl shadow-xl border border-white flex flex-col gap-1 animate-in slide-in-from-top-2 duration-300 items-center">
                         <button 
-                          onClick={() => setTravelMode('driving')}
-                          className={`p-2.5 rounded-xl transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          onClick={() => { setTravelMode('driving'); setIsMapControlsOpen(false); }}
+                          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all ${travelMode === 'driving' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
                           title="Ô tô"
                         >
-                          <Car className="w-4 h-4" />
+                          <Car className="w-3.5 h-3.5" />
                         </button>
                         <button 
-                          onClick={() => setTravelMode('bike')}
-                          className={`p-2.5 rounded-xl transition-all ${travelMode === 'bike' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          onClick={() => { setTravelMode('bike'); setIsMapControlsOpen(false); }}
+                          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all ${travelMode === 'bike' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
                           title="Xe máy / Xe đạp"
                         >
-                          <Bike className="w-4 h-4" />
+                          <Bike className="w-3.5 h-3.5" />
                         </button>
                         <button 
-                          onClick={() => setTravelMode('foot')}
-                          className={`p-2.5 rounded-xl transition-all ${travelMode === 'foot' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          onClick={() => { setTravelMode('foot'); setIsMapControlsOpen(false); }}
+                          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all ${travelMode === 'foot' ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
                           title="Đi bộ"
                         >
-                          <Footprints className="w-4 h-4" />
+                          <Footprints className="w-3.5 h-3.5" />
                         </button>
 
                         {/* Nút La bàn / Xoay bản đồ */}
@@ -1485,38 +1494,37 @@ export const TourDetailPage = ({
                               setIsHeadingMode(!isHeadingMode);
                             }
                           }}
-                          className={`p-2.5 rounded-xl transition-all border-t border-gray-100 mt-1 ${isHeadingMode ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
+                          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all border-t border-gray-100 mt-0.5 ${isHeadingMode ? 'bg-blue-600 text-white shadow-md' : 'text-gray-500 hover:bg-gray-100'}`}
                           title={isHeadingMode ? "Dừng xoay (Khóa hướng Bắc)" : "Tự động xoay theo hướng di chuyển"}
                         >
-                          <Compass className="w-4 h-4 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
+                          <Compass className="w-3.5 h-3.5 transition-transform duration-500" style={{ transform: `rotate(${mapRotation}deg)` }} />
                         </button>
 
                         {/* Nút Tìm tôi */}
                         <button 
-                          onClick={() => setLocateTrigger(prev => prev + 1)}
+                          onClick={() => { setLocateTrigger(prev => prev + 1); setIsMapControlsOpen(false); }}
                           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'}`}
+                          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all border-t border-gray-100 mt-0.5 ${!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" />
+                          <LocateFixed className="w-3.5 h-3.5" />
                         </button>
 
                         {/* Danh sách lộ trình rút gọn */}
                         {routes.length > 0 && (
-                          <div className="pt-2 border-t border-gray-100 flex flex-col gap-1 min-w-[120px]">
-                            <div className="text-[9px] font-black text-gray-400 uppercase tracking-tighter px-1 mb-1">Lộ trình</div>
+                          <div className="pt-1 border-t border-gray-100 flex flex-col gap-1">
                             <div className="flex flex-col gap-1 max-h-[160px] overflow-y-auto pr-1 custom-scrollbar">
                               {routes.map((route, idx) => (
                                 <button
                                   key={idx}
-                                  onClick={() => setSelectedRouteIndex(idx)}
-                                  className={`p-2 rounded-xl text-left transition-all border ${
+                                  onClick={() => { setSelectedRouteIndex(idx); setIsMapControlsOpen(false); }}
+                                  className={`w-8 h-8 flex items-center justify-center rounded-lg transition-all border ${
                                     selectedRouteIndex === idx 
                                       ? 'bg-blue-600 text-white border-blue-600 shadow-sm' 
                                       : 'bg-gray-50 text-gray-600 border-gray-100'
                                   }`}
                                 >
-                                  <div className="text-[10px] font-bold">#{idx + 1} - {(route.distance / 1000).toFixed(1)} km</div>
+                                  <span className="text-[10px] font-bold">{idx + 1}</span>
                                 </button>
                               ))}
                             </div>
@@ -1881,7 +1889,7 @@ export const TourDetailPage = ({
               if (activeTab === 'plan') setIsAddLocationOpen(true);
               if (activeTab === 'photo' && canUploadPhoto) setIsAddPhotoOpen(true);
             }}
-            className="bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold">
+            className="bg-blue-600 text-white px-4 py-2.5 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold text-sm">
             {activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh'}
           </button>
         </div>