feat: implement user management features including user deletion and role-based access

2025-07-23 14:55:21 +02:00
parent 584473ba41
commit 4fed3d96f6
10 changed files with 248 additions and 86 deletions
--- a/frontend_admin/package-lock.json
+++ b/frontend_admin/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@tailwindcss/vite": "^4.1.11",
+        "@tanstack/react-table": "^8.21.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "js-cookie": "^3.0.5",
@@ -16,6 +17,7 @@
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7",
        "tw-animate-css": "^1.3.5"
      },
      "devDependencies": {
@@ -1843,6 +1845,39 @@
        "vite": "^5.2.0 || ^6 || ^7"
      }
    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4167,6 +4202,15 @@
      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
      "license": "MIT"
    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
    "node_modules/tapable": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
--- a/frontend_admin/package.json
+++ b/frontend_admin/package.json
@@ -12,6 +12,7 @@
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-table": "^8.21.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "js-cookie": "^3.0.5",
@@ -19,6 +20,7 @@
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
    "tw-animate-css": "^1.3.5"
  },
  "devDependencies": {
--- a/frontend_admin/src/App.tsx
+++ b/frontend_admin/src/App.tsx
@@ -1,56 +1,14 @@
 import "./App.css";
 import Layout from "./layout/Layout";
 import { useUsers } from "./utils/useUsers";
+import UserTable from "./components/UserTable";

 function App() {
  const users = useUsers();

  return (
    <Layout>
-      <table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden">
-        <thead className="bg-gray-50">
-          <tr>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              #
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              Username
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              First name
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              Last name
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              Email
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              Password
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              Created
-            </th>
-            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              Role
-            </th>
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-100">
-          {users.map((user: any, idx: number) => (
-            <tr key={user.id} className="hover:bg-blue-50 transition">
-              <td className="px-4 py-2 whitespace-nowrap">{idx + 1}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.username}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.first_name}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.last_name}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.email}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.password}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
-              <td className="px-4 py-2 whitespace-nowrap">{user.role}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <UserTable users={users} />
    </Layout>
  );
 }
--- a/frontend_admin/src/components/UserTable.tsx
+++ b/frontend_admin/src/components/UserTable.tsx
@@ -0,0 +1,128 @@
+import { MoreVertical } from "lucide-react";
+import React from "react";
+import { useEffect, useState } from "react";
+import { deleteUser } from "../utils/functions.ts";
+
+const selectedUsers: Record<number, boolean> = {};
+
+interface User {
+  id: number;
+  username: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  password: string;
+  created: string;
+  role: string;
+}
+
+interface UserTableProps {
+  users: User[];
+}
+
+const UserTable: React.FC<UserTableProps> = ({ users }) => {
+  const [openMenu, setOpenMenu] = useState<number | null>(null);
+
+  const handleMenuClick = (userId: number) => {
+    setOpenMenu(openMenu === userId ? null : userId);
+  };
+
+  const handleMenuClose = () => setOpenMenu(null);
+
+  return (
+    <table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden">
+      <thead className="bg-gray-50">
+        <tr>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <input type="checkbox" name="checkAll" id="checkAll" />
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            #
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Username
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            First name
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Last name
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Email
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Password
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Created
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Role
+          </th>
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody className="bg-white divide-y divide-gray-100">
+        {users.map((user, idx) => (
+          <tr key={user.id} className="hover:bg-blue-50 transition">
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input
+                type="checkbox"
+                name="checkUser"
+                id={`checkUser-${user.id}`}
+                checked={!!selectedUsers[user.id]}
+              />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap">{user.id}</td>
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input type="text" className="w-25" value={user.username} />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input type="text" className="w-20" value={user.first_name} />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input type="text" className="w-20" value={user.last_name} />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input type="text" className="w-50" value={user.email} />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input type="text" className="w-25" value={user.password} />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
+            <td className="px-4 py-2 whitespace-nowrap">
+              <input type="text" className="w-15" value={user.role} />
+            </td>
+            <td className="px-4 py-2 whitespace-nowrap relative">
+              <button
+                onClick={() => handleMenuClick(user.id)}
+                className="p-1 rounded hover:bg-gray-200"
+                aria-label="Open actions menu"
+              >
+                <MoreVertical size={18} />
+              </button>
+              {openMenu === user.id && (
+                <div
+                  className="absolute right-0 mt-2 w-32 bg-white border rounded shadow-lg z-10"
+                  onMouseLeave={handleMenuClose}
+                >
+                  <button className="block w-full text-left px-4 py-2 hover:bg-gray-100">
+                    Edit
+                  </button>
+                  <button onClick={() => deleteUser(user.id)} className="block w-full text-left px-4 py-2 hover:bg-gray-100">
+                    Delete
+                  </button>
+                </div>
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default UserTable;
--- a/frontend_admin/src/utils/functions.ts
+++ b/frontend_admin/src/utils/functions.ts
@@ -10,3 +10,38 @@ export const logout = () => {
  localStorage.removeItem("users");
  window.location.reload();
 };
+
+export const deleteUser = (id: number) => {
+  fetch("http://localhost:5002/api/deleteUser", {
+    method: "POST",
+    body: JSON.stringify({ id: id }),
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${Cookies.get("token")}`,
+    },
+  })
+    .then((response) => {
+      if (response.ok) {
+        localStorage.removeItem("users");
+        document.location.reload();
+      } else {
+        alert("Failed to delete user");
+      }
+    })
+    .catch((error) => {
+      console.log("Error deleting user: ", error);
+    });
+};
+
+export const fetchUsers = async () => {
+  fetch("http://localhost:5002/api/getAllUsers", {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token")}`,
+    },
+  })
+    .then((res) => res.json())
+    .then((users) => {
+      localStorage.setItem("users", JSON.stringify(users));
+    });
+};
--- a/frontend_admin/src/utils/useUsers.ts
+++ b/frontend_admin/src/utils/useUsers.ts
@@ -8,6 +8,7 @@ export interface User {
  email: string;
  password: string;
  created: string;
+  role: string;
 }

 export function useUsers(): User[] {