Some isues in the login is fixed, add superadmin access, admin dashboard issues fixed

Author: Sooraj-krishna

app/admin/layout.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { ReactNode, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { onAuthStateChanged } from '@/lib/firebase/auth';
+import { doc, getDoc } from 'firebase/firestore';
+import { firestore } from '@/lib/firebase/config';
+
+interface AdminLayoutProps {
+  children: ReactNode;
+}
+
+const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
+  const [loading, setLoading] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [userRole, setUserRole] = useState<string | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const unsubscribe = onAuthStateChanged(async (authUser) => {
+        if (authUser) {
+          const userDocRef = doc(firestore, 'adminemail', authUser.email as string);
+          const userDoc = await getDoc(userDocRef);
+
+          if (userDoc.exists()) {
+            const role = userDoc.data()?.role;
+            if (role === 'admin' || role === 'superadmin') {
+              setIsAuthenticated(true);
+              setUserRole(role);
+            } else {
+              setIsAuthenticated(false);
+              router.push('/auth/Login');
+            }
+          } else {
+            setIsAuthenticated(false);
+            router.push('/auth/Login');
+          }
+        } else {
+          setIsAuthenticated(false);
+          router.push('/auth/Login');
+        }
+        setLoading(false);
+      });
+
+      return () => unsubscribe();
+    };
+
+    checkAuth();
+  }, [router]);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col h-screen">
+      <div className="flex flex-1">
+          <main className="flex-1 overflow-auto">
+            <div className="flex-1 p-4 overflow-auto">
+              {children}
+            </div>
+          </main>
+        </div>
+      </div>
+  );
+};
+
+export default AdminLayout; 

app/admin-dashboard/page.tsx app/admin/page.tsxapp/admin-dashboard/page.tsx renamed to app/admin/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { firestore, auth } from "@/lib/firebase/config";
+import {
+  collection,
+  doc,
+  getDoc,
+  setDoc,
+  deleteDoc,
+  getDocs,
+  Timestamp,
+} from "firebase/firestore";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { AddAdmin, AdminList, RemoveAdmin, RemovedAdminsList } from "@/components/admin-components";
+
+export default function AdminPanel() {
+  const [userRole, setUserRole] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchRole = async () => {
+      const user = auth.currentUser;
+      if (!user?.email) {
+        setUserRole(null);
+        setLoading(false);
+        return;
+      }
+
+      const docRef = doc(firestore, "adminemail", user.email);
+      const docSnap = await getDoc(docRef);
+
+      if (docSnap.exists()) {
+        setUserRole(docSnap.data().role);
+      } else {
+        setUserRole(null);
+      }
+      setLoading(false);
+    };
+
+    fetchRole();
+  }, []);
+
+  if (loading) return <div className="p-6">Loading...</div>;
+
+  if (userRole !== "superadmin") {
+    return (
+      <div className="p-6 text-red-600 font-semibold">
+        You are not authorized to access this page.
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">Admin Panel</h1>
+      <Tabs defaultValue="add">
+        <TabsList className="mb-4">
+          <TabsTrigger value="add">Add Admin</TabsTrigger>
+          <TabsTrigger value="list">List Admins</TabsTrigger>
+          <TabsTrigger value="remove">Remove Admin</TabsTrigger>
+        </TabsList>
+        <TabsContent value="add">
+          <AddAdmin />
+        </TabsContent>
+        <TabsContent value="list">
+          <AdminList />
+        </TabsContent>
+        <TabsContent value="remove">
+          <RemoveAdmin />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}