add teacher management page with list of teachers and actions to edit…

… role and delete user

src/pages/manage.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+interface User {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: string;
+  status: string;
+  numOfAbsences: string;
+}
+
+export default function AnotherPage() {
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const apiUrl = `/api/users/`;
+
+      try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+        const data: User[] = await response.json();
+        setUsers(data);
+      } catch (error) {
+        console.error('Error fetching users:', error);
+      }
+    };
+
+    fetchUsers();
+  }, []);
+
+  const deleteUser = async (userId: number) => {
+    const confirmed = window.confirm('Confirm delete user');
+
+    if (!confirmed) {
+      return;
+    }
+
+    const apiUrl = `/api/users/${userId}`;
+
+    try {
+      // delete server side
+      const response = await fetch(apiUrl, { method: 'DELETE' });
+
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+
+      // delete in frontend
+      setUsers((prevUsers) => prevUsers.filter((user) => user.id !== userId));
+    } catch (error) {
+      console.error('Error deleting user:', error);
+    }
+  };
+
+  const updateUserRole = async (userId: number, newRole: string) => {
+    const confirmed = window.confirm('Confirm change role to ' + newRole);
+
+    if (!confirmed) {
+      return;
+    }
+
+    const apiUrl = `/api/users/${userId}`;
+
+    try {
+      // update server side
+      const response = await fetch(apiUrl, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ role: newRole }),
+      });
+
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+
+      // update in frontend
+      setUsers(
+        users.map((user) =>
+          user.id === userId ? { ...user, role: newRole } : user
+        )
+      );
+    } catch (error) {
+      console.error('Error updating user:', error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Admin Management</h1>
+      {users ? (
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user) => (
+              <tr key={user.id}>
+                <td>
+                  {user.firstName} {user.lastName}
+                </td>
+                <td>{user.email}</td>
+                <td>
+                  <select
+                    value={user.role}
+                    onChange={(e) => updateUserRole(user.id, e.target.value)}
+                  >
+                    <option value="TEACHER">Teacher</option>
+                    <option value="ADMIN">Admin</option>
+                  </select>
+                </td>
+                <td>
+                  <button onClick={() => deleteUser(user.id)}>Delete</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+}