Login and Signup role base

frontend/src/App.jsx

@@ -1,56 +1,51 @@
-// src/App.jsx - PERFECT: ANY USER=LandingPage | ANY ADMIN=HomeAdmin
+// src/App.jsx
 import { Routes, Route, Navigate } from "react-router-dom";
+import { useAuth } from "./utils/auth";
+
+/* Pages */
 import LandingPage from "./Pages/LandingPage";
-import Login from "./Authentication/Login";
-import Signup from "./Authentication/Signup";
 import ProductsPage from "./Pages/ProductsPage";
 import ProductDetails from "./Pages/ProductsDetails";
 import Cart from "./Pages/Cart";
 import AboutUs from "./Pages/About";
 import Contact from "./Pages/Contact";
-import HomeAdmin from "./Admin/HomeAdmin";
-import ProtectedRoute from "./ProtectedRoutes/ProtectedRote";
-import Settings from "./Profile/ProfileSettings";
+
+/* Auth Pages */
+import Login from "./Authentication/Login";
+import SignupUser from "./Authentication/SignupUser";
+import SignupAdmin from "./Authentication/SignupAdmin";
+
+/* Profile */
 import Profile from "./Profile/Profile";
+import Settings from "./Profile/ProfileSettings";
+
+/* Admin */
+import HomeAdmin from "./Admin/HomeAdmin";
+
+/* Components */
 import Navbar from "./reusableComponents/Navbar";
-import { useAuth } from "./utils/auth";
+import AdminNavbar from "./reusableComponents/AdminNavbar";
+import ProtectedRoute from "./ProtectedRoutes/ProtectedRote";
 
+/* Loading Spinner */
 function LoadingSpinner() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
+      <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600" />
     </div>
   );
 }
 
-// ✅ PERFECT LOGIC: role="user" → LandingPage | role="admin" → HomeAdmin
+/* =======================
+   HOME PAGE LOGIC
+======================= */
 function HomePage() {
   const { user, loading } = useAuth();
 
-  console.log("🎯 HomePage:", { 
-    userId: user?.id, 
-    role: user?.role,
-    isUser: user?.role === "user",
-    isAdmin: user?.role === "admin",
-    loading
-  });
-
   if (loading) return <LoadingSpinner />;
 
-  // ✅ GUEST → LandingPage
-  if (!user) {
-    console.log("✅ GUEST → LANDING PAGE");
-    return (
-      <>
-        <Navbar />
-        <LandingPage />
-      </>
-    );
-  }
-
-  // ✅ ANY USER (role="user") → LANDING PAGE
-  if (user.role === "user") {
-    console.log("✅ USER (", user.id, ") → LANDING PAGE");
+  // 👤 Guest or User → Public Navbar + Landing
+  if (!user || user.role === "user") {
     return (
       <>
         <Navbar />
@@ -59,45 +54,100 @@ function HomePage() {
     );
   }
 
-  // ✅ ANY ADMIN (role="admin") → HOMEADMIN
+  // 👑 Admin → Admin Navbar + Admin Home
   if (user.role === "admin") {
-    console.log("✅ ADMIN (", user.id, ") → HOMEADMIN");
     return (
       <>
-        <Navbar />
+        <AdminNavbar />
         <HomeAdmin />
       </>
     );
   }
 
-  // ✅ FALLBACK → LANDING PAGE
-  console.log("✅ FALLBACK → LANDING PAGE");
-  return (
-    <>
-      <Navbar />
-      <LandingPage />
-    </>
-  );
+  return <Navigate to="/" replace />;
 }
 
+/* =======================
+   APP ROUTES
+======================= */
 export default function App() {
   return (
     <Routes>
+      {/* 🌍 PUBLIC ROUTES */}
       <Route path="/" element={<HomePage />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/signup" element={<Signup />} />
+      <Route path="/products" element={<ProductsPage />} />
+      <Route path="/product/:id" element={<ProductDetails />} />
       <Route path="/about" element={<AboutUs />} />
       <Route path="/contact" element={<Contact />} />
-
-      <Route path="/products" element={<ProtectedRoute allowedRoles={["user"]}><ProductsPage /></ProtectedRoute>} />
-      <Route path="/product/:id" element={<ProtectedRoute allowedRoles={["user"]}><ProductDetails /></ProtectedRoute>} />
-      <Route path="/cart" element={<ProtectedRoute allowedRoles={["user"]}><Cart /></ProtectedRoute>} />
-
-      <Route path="/admin/dashboard" element={<ProtectedRoute allowedRoles={["admin"]}><HomeAdmin /></ProtectedRoute>} />
-
-      <Route path="/profile" element={<ProtectedRoute allowedRoles={["user"]}><Profile /></ProtectedRoute>} />
-      <Route path="/settings" element={<ProtectedRoute allowedRoles={["user"]}><Settings /></ProtectedRoute>} />
-
+
+      {/* 🔐 AUTH ROUTES */}
+      <Route path="/login" element={<Login />} />
+      <Route path="/signup/user" element={<SignupUser />} />
+      <Route path="/signup/admin" element={<SignupAdmin />} />
+
+      {/* 👤 USER PROTECTED ROUTES */}
+      <Route
+        path="/cart"
+        element={
+          <ProtectedRoute allowedRoles={["user"]}>
+            <>
+              <Navbar />
+              <Cart />
+            </>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/profile"
+        element={
+          <ProtectedRoute allowedRoles={["user"]}>
+            <>
+              <Navbar />
+              <Profile />
+            </>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/settings"
+        element={
+          <ProtectedRoute allowedRoles={["user"]}>
+            <>
+              <Navbar />
+              <Settings />
+            </>
+          </ProtectedRoute>
+        }
+      />
+
+      {/* 👑 ADMIN PROTECTED ROUTES */}
+      <Route
+        path="/admin/home"
+        element={
+          <ProtectedRoute allowedRoles={["admin"]}>
+            <>
+              <AdminNavbar />
+              <HomeAdmin />
+            </>
+          </ProtectedRoute>
+        }
+      />
+
+      <Route
+        path="/admin/*"
+        element={
+          <ProtectedRoute allowedRoles={["admin"]}>
+            <>
+              <AdminNavbar />
+              <HomeAdmin />
+            </>
+          </ProtectedRoute>
+        }
+      />
+
+      {/* ❌ FALLBACK */}
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );