feat: add user management

frontend/src/pages/admin/users.tsx

@@ -0,0 +1,73 @@
+import { Button, Group, Space, Text, Title } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { useEffect, useState } from "react";
+import { TbPlus } from "react-icons/tb";
+import ManageUserTable from "../../components/admin/ManageUserTable";
+import showCreateUserModal from "../../components/admin/showCreateUserModal";
+import userService from "../../services/user.service";
+import User from "../../types/user.type";
+import toast from "../../utils/toast.util";
+
+const Users = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const modals = useModals();
+
+  const getUsers = () => {
+    setIsLoading(true);
+    userService.list().then((users) => {
+      setUsers(users);
+      setIsLoading(false);
+    });
+  };
+
+  const deleteUser = (user: User) => {
+    modals.openConfirmModal({
+      title: `Delete ${user.username}?`,
+      children: (
+        <Text size="sm">
+          Do you really want to delete <b>{user.username}</b> and all his
+          shares?
+        </Text>
+      ),
+      labels: { confirm: "Delete", cancel: "Cancel" },
+      confirmProps: { color: "red" },
+      onConfirm: async () => {
+        userService
+          .remove(user.id)
+          .then(() => setUsers(users.filter((v) => v.id != user.id)))
+          .catch(toast.axiosError);
+      },
+    });
+  };
+
+  useEffect(() => {
+    getUsers();
+  }, []);
+
+  return (
+    <>
+      <Group position="apart" align="baseline" mb={20}>
+        <Title mb={30} order={3}>
+          User management
+        </Title>
+        <Button
+          onClick={() => showCreateUserModal(modals, getUsers)}
+          leftIcon={<TbPlus size={20} />}
+        >
+          Create
+        </Button>
+      </Group>
+
+      <ManageUserTable
+        users={users}
+        getUsers={getUsers}
+        deleteUser={deleteUser}
+        isLoading={isLoading}
+      />
+      <Space h="xl" />
+    </>
+  );
+};
+
+export default Users;