Cài đặt tính năng quản lí người dùng cho admin

ExploreMap.tsx

@@ -3,7 +3,8 @@ import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTourStore } from './useTourStore.js';
-import { X, Navigation, Image as ImageIcon } from 'lucide-react';
+import { X, Navigation, Image as ImageIcon, LogOut, Settings } from 'lucide-react';
+import { UserManagementModal } from './UserManagementModal.js';
 
 // Fix lỗi icon mặc định của Leaflet
 const DefaultIcon = L.icon({
@@ -23,9 +24,10 @@ function RecenterMap({ position }: { position: [number, number] }) {
   return null;
 }
 
-export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
+export const ExploreMap = ({ onBack, onLogout, user }: { onBack: () => void, onLogout?: () => void, user?: any }) => {
   const { publicTours, fetchPublicTours } = useTourStore();
   const [userPos, setUserPos] = useState<[number, number]>([10.7769, 106.7009]); // Mặc định TP.HCM
+  const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
 
   useEffect(() => {
     fetchPublicTours();
@@ -45,6 +47,28 @@ export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
         <X className="w-6 h-6 text-gray-800" />
       </button>
 
+      {/* Nút đăng xuất - Chỉ hiển thị khi có user login */}
+      {onLogout && (
+        <button 
+          onClick={onLogout}
+          className="absolute top-6 right-6 z-[1000] bg-white px-4 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"
+        >
+          <LogOut className="w-5 h-5" />
+          <span className="hidden sm:inline">Đăng xuất</span>
+        </button>
+      )}
+
+      {/* Nút quản lý người dùng cho Admin */}
+      {user?.isAdmin && (
+        <button 
+          onClick={() => setIsAdminModalOpen(true)}
+          className="absolute top-6 right-40 z-[1000] bg-blue-600 px-4 py-3 rounded-2xl shadow-xl hover:bg-blue-700 text-white transition-all flex items-center gap-2 font-bold"
+        >
+          <Settings className="w-5 h-5" />
+          <span className="hidden sm:inline">Quản lý hệ thống</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">
@@ -100,6 +124,9 @@ export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
           );
         })}
       </MapContainer>
+
+      {/* Admin Modal */}
+      <UserManagementModal isOpen={isAdminModalOpen} onClose={() => setIsAdminModalOpen(false)} />
     </div>
   );
 };