Sửa lỗi khi click vào dấu + để thêm chặng

TourDetailPage.tsx

@@ -129,6 +129,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings'>('plan');
   const [viewMode, setViewMode] = useState<'map' | 'timeline'>('timeline');
   const [isAddLocationOpen, setIsAddLocationOpen] = useState(false);
+  const [targetLegId, setTargetLegId] = useState<string | null>(null);
 
   // Khôi phục vị trí và mức zoom từ localStorage
   const [initialViewState] = useState(() => {
@@ -140,18 +141,12 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   });
 
   // SỬA LỖI: Sử dụng các selectors riêng lẻ để tránh re-render trang khi mapCenter trong store thay đổi
-  const currentTour = useTourStore(state => state.currentTour);
-  const legs = useTourStore(state => state.legs);
-  const fetchTour = useTourStore(state => state.fetchTour);
-  const fetchPublicTours = useTourStore(state => state.fetchPublicTours);
-  const publicTours = useTourStore(state => state.publicTours);
-  const userRole = useTourStore(state => state.userRole);
-  const mapCenter = useTourStore(state => state.mapCenter);
-  const setMapCenter = useTourStore(state => state.setMapCenter);
-  const updateTourStartPoint = useTourStore(state => state.updateTourStartPoint);
-  const updateTourEndPoint = useTourStore(state => state.updateTourEndPoint);
-  const initializeLegs = useTourStore(state => state.initializeLegs);
-  const addLocation = useTourStore(state => state.addLocation);
+  // Gom các store actions/state lại để tối ưu hóa re-render
+  const { 
+    currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
+    userRole, mapCenter, setMapCenter, updateTourStartPoint, 
+    updateTourEndPoint, initializeLegs, addLocation 
+  } = useTourStore();
 
   const [mapZoom] = useState(initialViewState?.zoom || 13);
 
@@ -471,7 +466,10 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
               </div>
 
               {viewMode === 'timeline' ? (
-                <ItineraryTimeline />
+                <ItineraryTimeline onAddLocation={(legId) => {
+                  setTargetLegId(legId);
+                  setIsAddLocationOpen(true);
+                }} />
               ) : (
                 <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">
                   <MapContainer center={initialViewState?.center || mapCenter} zoom={mapZoom} className="h-full w-full">
@@ -559,7 +557,10 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
       {/* Floating Action Button (Mobile) */}
       <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
         <button 
-          onClick={() => activeTab === 'plan' ? setIsAddLocationOpen(true) : null}
+          onClick={() => {
+            setTargetLegId(null); // Reset khi nhấn nút floating tổng quát
+            if (activeTab === 'plan') setIsAddLocationOpen(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">
           {activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh'}
         </button>
@@ -570,6 +571,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
         <AddLocationModal 
           isOpen={isAddLocationOpen} 
           onClose={() => setIsAddLocationOpen(false)} 
+          initialLegId={targetLegId || undefined}
           tourId={currentTour.id} 
         />
       )}