Tạo UI cho người dùng tạo Tour

ExploreMap.tsx

@@ -5,6 +5,7 @@ import 'leaflet/dist/leaflet.css';
 import { useTourStore } from './useTourStore.js';
 import { X, Navigation, Image as ImageIcon, LogOut, Settings } from 'lucide-react';
 import { UserManagementModal } from './UserManagementModal.js';
+import { CreateTourModal } from './CreateTourModal.js';
 
 // Fix lỗi icon mặc định của Leaflet
 const DefaultIcon = L.icon({
@@ -24,10 +25,11 @@ function RecenterMap({ position }: { position: [number, number] }) {
   return null;
 }
 
-export const ExploreMap = ({ onBack, onLogout, user }: { onBack: () => void, onLogout?: () => void, user?: any }) => {
-  const { publicTours, fetchPublicTours } = useTourStore();
+export const ExploreMap = ({ onBack, onLogout, user, onViewTour }: { onBack: () => void, onLogout?: () => void, user?: any, onViewTour: (id: string) => void }) => {
+  const { publicTours, fetchPublicTours, fetchTour } = 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);
 
   useEffect(() => {
     fetchPublicTours();
@@ -69,6 +71,17 @@ export const ExploreMap = ({ onBack, onLogout, user }: { onBack: () => void, onL
         </button>
       )}
 
+      {/* Nút tạo Tour mới */}
+      {user && (
+        <button 
+          onClick={() => setIsCreateModalOpen(true)}
+          className="absolute top-6 right-80 z-[1000] bg-green-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-green-700 text-white transition-all flex items-center gap-2 font-bold"
+        >
+          <Navigation className="w-5 h-5" />
+          <span className="hidden sm:inline">Tạo Tour mới</span>
+        </button>
+      )}
+
       {/* Header Overlay */}
       <div className="absolute top-6 left-20 z-[1000] bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl shadow-xl border border-white/20 hidden sm:block">
         <div className="flex items-center gap-2">
@@ -115,7 +128,9 @@ export const ExploreMap = ({ onBack, onLogout, user }: { onBack: () => void, onL
                 <div className="p-1 max-w-[200px]">
                   <img src={tourImage} className="w-full h-32 object-cover rounded-lg mb-2" />
                   <h4 className="font-bold text-gray-900 leading-tight mb-1">{tour.title}</h4>
-                  <button className="text-xs font-bold text-blue-600 flex items-center gap-1">
+                  <button 
+                    onClick={() => onViewTour(tour.id)}
+                    className="text-xs font-bold text-blue-600 flex items-center gap-1">
                     Xem chi tiết hình ảnh <ImageIcon className="w-3 h-3" />
                   </button>
                 </div>
@@ -127,6 +142,16 @@ export const ExploreMap = ({ onBack, onLogout, user }: { onBack: () => void, onL
 
       {/* Admin Modal */}
       <UserManagementModal isOpen={isAdminModalOpen} onClose={() => setIsAdminModalOpen(false)} />
+
+      {/* Create Tour Modal */}
+      <CreateTourModal 
+        isOpen={isCreateModalOpen} 
+        onClose={() => setIsCreateModalOpen(false)} 
+        onSuccess={(tour) => {
+          fetchTour(tour.id);
+          onViewTour(tour.id);
+        }}
+      />
     </div>
   );
 };