Logout now calls the logout endpoint, role is now stored in local storage as well

src/components/ProtectedRoute.jsx

@@ -7,8 +7,26 @@ const ProtectedRoute = ({ children }) => {
   const token = localStorage.getItem("token");
   const navigate = useNavigate();
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      console.warn("No token found — skipping API logout.");
+    } else {
+      try {
+        await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/Auth/logout`, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+      } catch (err) {
+        console.error("Logout API error:", err);
+      }
+    }
+
     localStorage.removeItem("token");
+    localStorage.removeItem("role");
     navigate("/login");
   };
 

src/pages/Dashboard.jsx

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 const Dashboard = () => {
+  const [role, setRole] = useState("");
+
+  useEffect(() => {
+    const role = localStorage.getItem("role");
+    if (role) {
+      setRole(role);
+    }
+  }, []);
+
   return (
     <div style={{ color: "#fff", textAlign: "center", marginTop: "2rem" }}>
       <h1>Dashboard</h1>
       <p>Welcome! You are logged in.</p>
+      {role === "SUPER" && <p style={{ fontWeight: "bold" }}>You are SUPER</p>}
     </div>
   );
 };

src/pages/Login.jsx

@@ -82,7 +82,11 @@ const Login = () => {
       }
 
       const data = await res.json();
-      login(data.token);
+      login(data.accessToken);
+
+      localStorage.setItem("token", data.accessToken);
+      localStorage.setItem("role", data.role);
+
       navigate("/dashboard");
     } catch (err) {
       console.error("Login error:", err);