feat: add user management

frontend/src/pages/admin/config.tsx

@@ -1,9 +1,12 @@
-import { Space } from "@mantine/core";
+import { Space, Title } from "@mantine/core";
 import AdminConfigTable from "../../components/admin/AdminConfigTable";
 
 const AdminConfig = () => {
   return (
     <>
+      <Title mb={30} order={3}>
+        Configuration
+      </Title>
       <AdminConfigTable />
       <Space h="xl" />
     </>

frontend/src/pages/admin/index.tsx

@@ -0,0 +1,62 @@
+import { Col, Container, createStyles, Grid, Paper, Text } from "@mantine/core";
+import Link from "next/link";
+import { TbSettings, TbUsers } from "react-icons/tb";
+
+const managementOptions = [
+  {
+    title: "User management",
+    icon: TbUsers,
+    route: "/admin/users",
+  },
+  {
+    title: "Configuration",
+    icon: TbSettings,
+    route: "/admin/config",
+  },
+];
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    height: 90,
+    "&:hover": {
+      boxShadow: `${theme.shadows.sm} !important`,
+      transform: "scale(1.01)",
+    },
+  },
+}));
+
+const Admin = () => {
+  const { classes, theme } = useStyles();
+
+  return (
+    <Container size="xl">
+      <Paper withBorder radius="md" p={40}>
+        <Grid mt="md">
+          {managementOptions.map((item) => {
+            return (
+              <Col xs={6} key={item.route}>
+                <Paper
+                  withBorder
+                  component={Link}
+                  href={item.route}
+                  key={item.title}
+                  className={classes.item}
+                >
+                  <item.icon color={theme.colors.victoria[5]} size={35} />
+                  <Text mt={7}>{item.title}</Text>
+                </Paper>
+              </Col>
+            );
+          })}
+        </Grid>
+      </Paper>
+    </Container>
+  );
+};
+
+export default Admin;

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;