Chỉnh sửa giao diện Tour Dashboard

ExploreMap.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTourStore } from './useTourStore.js';
@@ -25,8 +25,21 @@ function RecenterMap({ position }: { position: [number, number] }) {
   return null;
 }
 
+// Component Helper để theo dõi sự di chuyển của người dùng trên bản đồ
+function MapTracker() {
+  const setMapCenter = useTourStore(state => state.setMapCenter);
+  useMapEvents({
+    moveend: (e) => {
+      const map = e.target;
+      const center = map.getCenter();
+      setMapCenter([center.lat, center.lng]);
+    },
+  });
+  return null;
+}
+
 export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: () => void, onLogout?: () => void, user?: any, onViewTour: (id: string) => void }) => {
-  const { publicTours, fetchPublicTours, fetchTour, updateTour, deleteTour } = useTourStore();
+  const { publicTours, fetchPublicTours, fetchTour, updateTour, deleteTour, mapCenter, setMapCenter } = useTourStore();
   const [userPos, setUserPos] = useState<[number, number]>([10.7769, 106.7009]); // Mặc định TP.HCM
   const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -34,7 +47,11 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
   useEffect(() => {
     fetchPublicTours();
     navigator.geolocation.getCurrentPosition(
-      (pos) => setUserPos([pos.coords.latitude, pos.coords.longitude]),
+      (pos) => {
+        const posArray: [number, number] = [pos.coords.latitude, pos.coords.longitude];
+        setUserPos(posArray);
+        setMapCenter(posArray);
+      },
       () => console.log("Không thể lấy vị trí người dùng")
     );
   }, []);
@@ -111,12 +128,15 @@ export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: ()
         </div>
       </div>
 
-      <MapContainer center={userPos} zoom={13} className="h-full w-full">
+      <MapContainer center={mapCenter} zoom={13} className="h-full w-full">
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution='&copy; OpenStreetMap contributors'
         />
         
+        {/* Theo dõi di chuyển bản đồ */}
+        <MapTracker />
+
         {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
         <RecenterMap position={userPos} />