Adding delete to users grid, filtering out logged in user from users grid

src/pages/Dashboard.jsx

@@ -21,15 +21,18 @@ const tdStyle = {
 
 const Dashboard = () => {
   const [role, setRole] = useState("");
+  const [currentUser, setCurrentUser] = useState("");
   const [users, setUsers] = useState([]);
   const [newRoles, setNewRoles] = useState({});
   const [selectedUsers, setSelectedUsers] = useState([]);
 
   useEffect(() => {
-    const currentRole = localStorage.getItem("role");
+    const storedRole = localStorage.getItem("role");
-    setRole(currentRole);
+    const storedUsername = localStorage.getItem("username");
+    setRole(storedRole);
+    setCurrentUser(storedUsername);
 
-    if (currentRole === "SUPER") {
+    if (storedRole === "SUPER") {
       fetchUsers();
     }
   }, []);
@@ -79,6 +82,27 @@ const Dashboard = () => {
     }
   };
 
+  const deleteUser = async (username) => {
+    if (!window.confirm(`Are you sure you want to delete ${username}?`)) return;
+
+    const token = localStorage.getItem("token");
+
+    try {
+      const res = await fetch(`${config.apiBaseUrl}/api/User?username=${encodeURIComponent(username)}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!res.ok) throw new Error("Failed to delete user");
+
+      fetchUsers();
+    } catch (err) {
+      console.error("Error deleting user:", err);
+    }
+  };
+
   const toggleUserSelection = (username) => {
     setSelectedUsers((prev) =>
       prev.includes(username)
@@ -112,16 +136,15 @@ const Dashboard = () => {
                   <th style={thStyle}></th>
                   <th style={thStyle}>Username</th>
                   <th style={thStyle}>Role</th>
-                  {selectedUsers.length > 0 && (
+                  {selectedUsers.length > 0 && <th style={thStyle}>Action</th>}
-                    <th style={thStyle}>Action</th>
-                  )}
                 </tr>
               </thead>
               <tbody>
-                {users.map((user) => {
+                {users
+                  .filter((user) => user.username !== currentUser)
+                  .map((user) => {
                     const isSelected = selectedUsers.includes(user.username);
-                  const currentNewRole =
+                    const currentNewRole = newRoles[user.username] ?? user.role;
-                    newRoles[user.username] ?? user.role;
 
                     return (
                       <tr key={user.username}>
@@ -138,7 +161,10 @@ const Dashboard = () => {
                             <select
                               value={currentNewRole}
                               onChange={(e) =>
-                              handleRoleChange(user.username, e.target.value)
+                                handleRoleChange(
+                                  user.username,
+                                  e.target.value
+                                )
                               }
                               style={{
                                 padding: "0.3rem",
@@ -157,8 +183,17 @@ const Dashboard = () => {
                         {selectedUsers.length > 0 && (
                           <td style={tdStyle}>
                             {isSelected && (
+                              <div
+                                style={{
+                                  display: "flex",
+                                  gap: "0.5rem",
+                                  justifyContent: "center",
+                                }}
+                              >
                                 <button
-                              onClick={() => updateUserRole(user.username)}
+                                  onClick={() =>
+                                    updateUserRole(user.username)
+                                  }
                                   style={{
                                     padding: "0.4rem 0.8rem",
                                     backgroundColor: "#444",
@@ -170,6 +205,20 @@ const Dashboard = () => {
                                 >
                                   Update
                                 </button>
+                                <button
+                                  onClick={() => deleteUser(user.username)}
+                                  style={{
+                                    padding: "0.4rem 0.8rem",
+                                    backgroundColor: "#aa3333",
+                                    color: "#fff",
+                                    border: "none",
+                                    borderRadius: "4px",
+                                    cursor: "pointer",
+                                  }}
+                                >
+                                  Delete
+                                </button>
+                              </div>
                             )}
                           </td>
                         )}

src/pages/Login.jsx

@@ -86,6 +86,7 @@ const Login = () => {
 
       localStorage.setItem("token", data.accessToken);
       localStorage.setItem("role", data.role);
+      localStorage.setItem("username", data.username);
 
       navigate("/dashboard");
     } catch (err) {

src/pages/Register.jsx

@@ -108,6 +108,7 @@ const Register = () => {
 
       localStorage.setItem("token", loginData.accessToken);
       localStorage.setItem("role", loginData.role);
+      localStorage.setItem("username", data.username);
 
       navigate("/dashboard");
     } catch (err) {