Sửa lỗi nhấn + để thêm thành viên của tour

TourDetailPage.tsx

@@ -3,6 +3,7 @@ import { ItineraryTimeline } from './ItineraryTimeline.js';
 import { ExpenseManager } from './ExpenseManager.js';
 import { useTourStore } from './useTourStore.js';
 import { AddLocationModal } from './AddLocationModal.js';
+import { AddMemberModal } from './AddMemberModal.js';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
 import _MarkerClusterGroup from 'react-leaflet-cluster';
 const MarkerClusterGroup = (_MarkerClusterGroup as any).default || _MarkerClusterGroup;
@@ -160,6 +161,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 [isAddMemberOpen, setIsAddMemberOpen] = useState(false);
   const [targetLegId, setTargetLegId] = useState<string | null>(null);
   const [editingLocation, setEditingLocation] = useState<any>(null);
 
@@ -177,7 +179,7 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const { 
     currentTour, legs, fetchTour, fetchPublicTours, publicTours, 
     userRole, mapCenter, setMapCenter, updateTourStartPoint, 
-    updateTourEndPoint, initializeLegs, addLocation 
+    updateTourEndPoint, initializeLegs, addLocation, addMember 
   } = useTourStore();
 
   const canEdit = ['OWNER', 'MANAGER'].includes(userRole || '');
@@ -401,9 +403,18 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
                   </div>
                 )}
               </div>
-              <button className="p-2 bg-white/10 hover:bg-white/20 rounded-full border border-white/20 backdrop-blur-sm transition-all ml-2">
-                <Plus className="w-4 h-4" />
-              </button>
+               <button 
+  onClick={() => {
+                    if (!currentTour) return;
+                    if (canEdit) setIsAddMemberOpen(true);
+                  }}
+  disabled={!canEdit}
+  className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
+                    canEdit ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
+                  }`}
+>
+                 <Plus className="w-4 h-4" />
+               </button>
             </div>
           </div>
         </div>
@@ -606,6 +617,15 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
         </div>
       )}
 
+      {/* Add Member Modal */}
+      {currentTour && (
+        <AddMemberModal
+          isOpen={isAddMemberOpen}
+          onClose={() => setIsAddMemberOpen(false)}
+          tourId={currentTour.id}
+        />
+      )}
+
       {/* Add Location Modal */}
       {currentTour && (
         <AddLocationModal