fix: guest and admin logic

2026-06-22 11:41:34 +07:00
parent b1a539235b
commit 860395cb14
61 changed files with 1291 additions and 244 deletions
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { UserManagementModal } from '../components/UserManagementModal';
+
+interface AdminDashboardProps {
+  user: any;
+  onNavigate: (page: string) => void;
+}
+
+export const AdminDashboard: React.FC<AdminDashboardProps> = ({ user, onNavigate }) => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+
+  if (!user?.isAdmin) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center p-4">
+        <div className="text-center">
+          <h1 className="text-3xl font-black text-white mb-4">Quyền Truy Cập Bị Từ Chối</h1>
+          <p className="text-slate-400 mb-6">Bạn không có quyền truy cập trang admin này.</p>
+          <button
+            onClick={() => onNavigate('dashboard')}
+            className="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold transition-all"
+          >
+            Quay lại Dashboard
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // When admin closes the modal, navigate back to user dashboard
+  const handleCloseModal = () => {
+    onNavigate('dashboard');
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
+      {/* Header with toggle button */}
+      <div className="fixed top-0 left-0 right-0 z-[60] bg-slate-900/95 backdrop-blur-md border-b border-slate-800 px-4 md:px-6 py-4 flex items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={handleCloseModal}
+            className="p-2 hover:bg-slate-800 rounded-xl transition-colors"
+            title="Quay lại User Dashboard"
+          >
+            <ArrowLeft className="w-6 h-6 text-slate-300" />
+          </button>
+          <h1 className="text-2xl font-black text-white">
+            🛡️ Admin Dashboard
+          </h1>
+        </div>
+        <button
+          onClick={handleCloseModal}
+          className="px-4 py-2 text-sm font-bold text-slate-300 hover:text-white hover:bg-slate-800 rounded-xl transition-all"
+        >
+          Switch to User Dashboard
+        </button>
+      </div>
+
+      {/* Modal shown full screen */}
+      <div className="pt-20">
+        <UserManagementModal
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      </div>
+    </div>
+  );
+};