feat: Added functionality to add tutor in frontend

web/app/tutors/page.tsx

@@ -0,0 +1,44 @@
+'use client';
+import useApiServiceClient from "@/hooks/useApiServiceClient";
+import useClientQuery from "@/hooks/useClientQuery";
+import {User} from "@/service/types/usernator";
+import EntityList, {EntityListCol} from "@/components/EntityList";
+import {Button, Container, Group, Title} from "@mantine/core";
+import {useState} from "react";
+import CreateTutorModal from "@/components/CreateTutorModal";
+
+
+const TutorsPage = () => {
+
+    const api = useApiServiceClient();
+    const [tutors, refetch] = useClientQuery<{tutors: User[]}>(() =>
+        api.getTutors(),
+    );
+    const [createModalOpen, setCreateModalOpen] = useState(false);
+
+    const cols: EntityListCol[] = [
+        {
+            field: "id",
+            label: "ID",
+        },
+        {
+            field: "username",
+            label: "Username",
+        },
+    ];
+
+    return (
+        <Container fluid>
+            <Group>
+                <Title>Tutors</Title>
+                <Button onClick={() => setCreateModalOpen(true)}>Create tutor</Button>
+            </Group>
+            <EntityList cols={cols} rows={tutors?.tutors ?? []} />
+            {createModalOpen && (
+                <CreateTutorModal onClose={() => setCreateModalOpen(false)} refetch={refetch} />
+            )}
+        </Container>
+    );
+}
+
+export default TutorsPage;

web/components/CreateTutorModal.tsx

@@ -0,0 +1,56 @@
+import {Button, Group, Modal, PasswordInput, TextInput} from "@mantine/core";
+import {useForm} from "@mantine/form";
+import useApiServiceClient from "@/hooks/useApiServiceClient";
+import {showNotification} from "@mantine/notifications";
+
+interface CreateTutorModalProps {
+    onClose: () => void;
+    refetch: () => void;
+}
+
+const CreateTutorModal = ({onClose, refetch}: CreateTutorModalProps) => {
+
+
+    const api = useApiServiceClient();
+    const form = useForm({
+        initialValues: {
+            username: '',
+            password: ''
+        },
+        validate: {
+            username: (val) => val.trim() == '' ? 'Username should not be empty' : null,
+            password: (v) => v === '' ? 'The password should not be empty' : null,
+        }
+    });
+
+    const submit = form.onSubmit(async (values) => {
+        try {
+            await api.createTutor(values.username, values.password);
+            refetch();
+            onClose();
+        } catch (e: any) {
+            console.error(e);
+            showNotification({
+                title: 'Error',
+                message: e?.message ?? "Failed to create tutor",
+            });
+        }
+    })
+
+    return (
+        <Modal opened onClose={onClose} title="Create Tutor">
+            <form onSubmit={submit}>
+                <TextInput label="Username" key={form.key('username')} {...form.getInputProps('username')} />
+                <PasswordInput label="Password" key={form.key('password')} {...form.getInputProps('password')} />
+                <Group mt={10}>
+                    <Button type="submit">Create tutor</Button>
+                    <Button onClick={onClose} color="gray">
+                        Cancel
+                    </Button>
+                </Group>
+            </form>
+        </Modal>
+    );
+}
+
+export default CreateTutorModal;

web/service/ApiService.ts

@@ -227,6 +227,14 @@ class ApiService {
     return await this.post<CodeComment>(`/tasky/solutions/${solutionId}/code_comments`, {title, content});
   }
 
+  public async createTutor(username: string, password: string): Promise<User> {
+    return await this.post<User>('/usernator/create_tutor', {username, password, email: ""});
+  }
+
+  public async getTutors(): Promise<{tutors: User[]}> {
+    return await this.get('/usernator/all-tutors');
+  }
+
   public async createCodeTests(
     groupId: number,
     assignmentId: number,

web/static/routes.tsx

@@ -23,6 +23,13 @@ export const routes: Route[] = [
     icon: <IconSchool />,
     authRoles: [UserRoles.Tutor, UserRoles.Admin],
   },
+  {
+    path: "/tutors",
+    name: "Tutors",
+    description: "All tutors in the system",
+    icon: <IconSchool />,
+    authRoles: [UserRoles.Admin],
+  },
   {
     path: "/my-groups",
     name: "My Groups",