From aa2104c0d3f97829e85ab5f3a3cbf837f0c535a5 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Sun, 28 Apr 2024 14:36:35 +0200
Subject: [PATCH 001/145] lijst headers gemaakt

---
 frontend/frontend/src/i18n/en.ts              |  2 +
 frontend/frontend/src/i18n/nl.ts              |  2 +
 .../subjectsPage/AddChangeSubjectPage.tsx     | 40 +++++++++++++++++--
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index a0dc8583..5b5b39fe 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -92,6 +92,8 @@ const english = {
     must_pass: 'Must pass',
     archive_course_warning: 'Archive Course?',
     will_archive_projects: 'This will archive all projects.',
+    first_name: 'first name',
+    last_name: 'last name',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 6f37ec66..8d4f2220 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -92,6 +92,8 @@ const dutch = {
     must_pass: 'Moet slagen',
     archive_course_warning: 'Vak Archiveren?',
     will_archive_projects: 'Alle opdrachten worden gearchiveerd.',
+    first_name: 'voornaam',
+    last_name: 'familienaam',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 53c24963..44e6d99f 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -1,8 +1,9 @@
 import {
     Box,
+    Card,
     Divider,
     IconButton,
-    ListItemButton,
+    ListItem,
     ListItemText,
     Stack,
     TextField,
@@ -43,12 +44,42 @@ function UserList(
 ) {
     return (
         <>
+        <Card
+            elevation={1}
+            sx={{
+                color: 'text.primary',
+                backgroundColor: 'background.default',
+                borderRadius: 5,
+                padding: '20px',
+                width: '75vw',
+            }}
+        >
+            <Box
+                display={'flex'}
+                flexDirection={'row'}
+                justifyContent={'space-between'}
+                pl={3}
+                pr={3}
+            >
+                <Typography sx={{ fontWeight: 'bold' }}>
+                    {t('first_name')}
+                </Typography>
+                <Typography sx={{ fontWeight: 'bold' }}>
+                    {t('last_name')}
+                </Typography>
+                <Typography sx={{ fontWeight: 'bold' }}>
+                    email
+                </Typography>
+                <Typography sx={{ fontWeight: 'bold' }}>
+
+                </Typography>
+            </Box>
+            <Divider color={'text.main'}></Divider>
             <List
                 disablePadding={true}
                 sx={{
                     '& > :not(style)': {
                         marginBottom: '8px',
-                        width: '75vw',
                     },
                 }}
             >
@@ -61,7 +92,7 @@ function UserList(
                     This makes it possible to click through on a person. */}
                     return (
                         <>
-                            <ListItemButton
+                            <ListItem
                                 sx={{
                                     width: '100%',
                                     height: 30,
@@ -93,12 +124,13 @@ function UserList(
                                 >
                                     <ClearIcon color={'error'} />
                                 </IconButton>
-                            </ListItemButton>
+                            </ListItem>
                             <Divider color={'text.main'}></Divider>
                         </>
                     )
                 })}
             </List>
+        </Card>
         </>
     )
 }

From 04a8ced826c0bc621da48f2a2051a075f830b740 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Sun, 28 Apr 2024 18:27:05 +0200
Subject: [PATCH 002/145] made basic layout

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 128 ++++++++++++++++++
 frontend/frontend/src/routes.tsx              |   6 +
 2 files changed, 134 insertions(+)
 create mode 100644 frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
new file mode 100644
index 00000000..2c1b36db
--- /dev/null
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -0,0 +1,128 @@
+
+import {
+    Link,
+    Box,
+    Card,
+    Divider,
+    IconButton,
+    ListItem,
+    ListItemText,
+    Stack,
+    TextField,
+    Typography,
+    Dialog,
+} from '@mui/material'
+import List from '@mui/material/List'
+import React, { ChangeEvent, useEffect, useState } from 'react'
+import {Header} from "../../components/Header.tsx";
+import { t } from 'i18next'
+import AddCircle from '@mui/icons-material/AddCircle'
+import ClearIcon from '@mui/icons-material/Clear'
+
+export interface Group {
+    groep_id?: number
+    studenten: number[]
+    project: number
+}
+
+export function ChooseGroup() {
+
+    const [groups,setGroups]=useState([1,2,3]);
+    const [open,setOpen] = useState<boolean>(false);
+
+    const handleClose = () => {
+        setOpen(false);
+    }
+
+
+    return (
+        <>
+            <Stack direction={'column'}>
+                <Header variant={'default'} title={"title"} />
+                <Stack
+                    direction={'column'}
+                    spacing={1}
+                    marginTop={11}
+                    sx={{
+                        width: '100%',
+                        height: '70 %',
+                        backgroundColor: 'background.default',
+                    }}
+                >
+                    <Card
+                        elevation={1}
+                        sx={{
+                            color: 'text.primary',
+                            backgroundColor: 'background.default',
+                            borderRadius: 5,
+                            padding: '20px',
+                        }}
+                    >
+                    <List
+                        disablePadding={true}
+                        sx={{
+                            '& > :not(style)': {
+                                marginBottom: '8px',
+                            },
+                        }}
+                    >
+                        {groups.map((id) => {
+                            const group=getGroup(id)
+                            return (
+                                <>
+                                    <ListItem
+                                        sx={{
+                                            width: '100%',
+                                            height: 30,
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            paddingX: 1,
+                                            paddingY: 3,
+                                            borderRadius: 2,
+                                        }}
+                                    >
+                                        <ListItemText
+                                            sx={{ maxWidth: 100 }}
+                                            primary={group.groep_id}
+                                        />
+
+
+                                        <Link href="#" onClick={()=>{setOpen(true)}} >
+                                            {group.studenten.length}
+                                        </Link>
+                                        <IconButton
+                                            size={'small'}
+                                            sx={{ marginBottom: 1 }}
+                                        >
+                                            <AddCircle />
+                                        </IconButton>
+                                    </ListItem>
+                                    <Divider color={'text.main'}></Divider>
+                                </>
+                            )
+                        })
+                        }
+                    </List>
+
+                        <Dialog onClose={handleClose} open={open}>
+                            <Box padding={2} alignItems={'center'} gap={1}>
+                                <Typography> {"placeholder"} </Typography>
+                            </Box>
+                        </Dialog>
+
+
+                    </Card>
+                </Stack>
+            </Stack>
+        </>
+    )
+}
+
+function getGroup(id: number): Group {
+    return {
+        groep_id: id,
+        studenten: [1,2,3],
+        project: 5
+    }
+}
\ No newline at end of file
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index 3699f127..16275139 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -8,6 +8,7 @@ import ErrorPage from './pages/ErrorPage.tsx'
 import MainPage from './pages/mainPage/MainPage.tsx'
 import { GroupsPage } from './pages/groupsPage/GroupsPage.tsx'
 import { AssignmentPage } from './pages/assignmentPage/AssignmentPage.tsx'
+import {ChooseGroup} from "./pages/groupsPage/ChooseGroup.tsx";
 
 //TODO: add change/add course page when implemented
 const router = createBrowserRouter([
@@ -51,6 +52,11 @@ const router = createBrowserRouter([
         element: <AddChangeSubjectPage />,
         errorElement: <ErrorPage />,
     },
+    {
+        path: '/groups/choose',
+        element: <ChooseGroup />,
+        errorElement: <ErrorPage />,
+    },
     {
         path: '*',
         element: <ErrorPage />,

From cc8b596ec126b7e1b6b52efdff8863b050e2af82 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Sat, 4 May 2024 11:57:43 +0200
Subject: [PATCH 003/145] begin integratie groepen kiezen

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 135 ++++++++++++++++--
 frontend/frontend/src/routes.tsx              |   2 +-
 2 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 2c1b36db..de323cd4 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -17,7 +17,8 @@ import React, { ChangeEvent, useEffect, useState } from 'react'
 import {Header} from "../../components/Header.tsx";
 import { t } from 'i18next'
 import AddCircle from '@mui/icons-material/AddCircle'
-import ClearIcon from '@mui/icons-material/Clear'
+import { useParams } from 'react-router-dom'
+import instance from "../../axiosConfig.ts";
 
 export interface Group {
     groep_id?: number
@@ -25,15 +26,89 @@ export interface Group {
     project: number
 }
 
+export interface User {
+    user: number
+    is_lesgever: boolean
+    first_name: string
+    last_name: string
+    email: string
+}
+
+
 export function ChooseGroup() {
 
-    const [groups,setGroups]=useState([1,2,3]);
+    const params = useParams()
+
+
+    const [studenten,setStudenten]=useState<Record<number, User>>({});
+    const [groups,setGroups]=useState<Group[]>([]);
     const [open,setOpen] = useState<boolean>(false);
 
+    //const assignmentId = params.assignmentId
+    const assignmentId = 14
+
     const handleClose = () => {
         setOpen(false);
     }
 
+    useEffect(()=>{
+        instance.get('projecten/'+assignmentId)
+            .then((res) =>{
+                instance.get('vakken/'+res.data.vak)
+                    .then((res) => {
+                        //setStudenten(res.data.studenten)
+                        for (let i=0;i<res.data.studenten.length;i++){
+                            const studentid=res.data.studenten[i]
+                            instance.get('gebruikers/'+studentid)
+                                .then((res) => {
+                                    setStudenten((oldstudenten) => {
+                                        console.log("insetStudenten")
+                                        console.log(res.data)
+                                        console.log(oldstudenten)
+                                        //return oldstudenten
+                                        return {...oldstudenten,[res.data.user]: res.data}
+                                    })
+                                })
+                                .catch((err) => {
+                                    console.log(err)
+                                })
+                        }
+                    })
+                    .catch((err) => {
+                        console.log(err)
+                    })
+            })
+            .catch((err) => {
+                console.log(err)
+            })
+
+
+        instance.get('groepen/?project='+assignmentId)
+            .then((res) => {
+                for (let i=0;i<res.data.length;i++){
+                    setGroups((oldGroups)=> {
+
+                        let found = false
+                        const id = res.data[i].groep_id
+                        for (const group of oldGroups) {
+                            if (group.groep_id == id) {
+                                found = true
+                            }
+                        }
+                        if (found) {
+                            return oldGroups
+                        } else {
+                            return [...oldGroups,res.data[i]]
+                        }
+                    })
+                }
+            })
+            .catch((err) => {
+                console.log(err)
+            })
+
+    },[])
+
 
     return (
         <>
@@ -58,6 +133,23 @@ export function ChooseGroup() {
                             padding: '20px',
                         }}
                     >
+                        <Box
+                            display={'flex'}
+                            flexDirection={'row'}
+                            justifyContent={'space-between'}
+                            pl={3}
+                            pr={3}
+                        >
+                            <Typography sx={{ fontWeight: 'bold' }}>
+                                {t('group_number')}
+                            </Typography>
+                            <Typography sx={{ fontWeight: 'bold' }}>
+                                {t('members')}
+                            </Typography>
+                            <Typography sx={{ fontWeight: 'bold' }}>
+
+                            </Typography>
+                        </Box>
                     <List
                         disablePadding={true}
                         sx={{
@@ -66,8 +158,8 @@ export function ChooseGroup() {
                             },
                         }}
                     >
-                        {groups.map((id) => {
-                            const group=getGroup(id)
+                        {groups.map((group: Group) => {
+                            //const group=getGroup(id)
                             return (
                                 <>
                                     <ListItem
@@ -87,10 +179,25 @@ export function ChooseGroup() {
                                             primary={group.groep_id}
                                         />
 
+                                        <Box flexDirection={'column'}>
+                                            {group.studenten.map((studentid)=>{
+
+                                                //return studenten[studentid].first_name
+
+                                                //console.log(students)
+                                                if(studenten[studentid]!=undefined){
+                                                    return (
+                                                        <>
+                                                            <Typography>
+                                                                {studenten[studentid].first_name+" "+studenten[studentid].last_name}
+                                                            </Typography>
+                                                        </>
+                                                        )
+                                                }
+                                            })}
+
+                                        </Box>
 
-                                        <Link href="#" onClick={()=>{setOpen(true)}} >
-                                            {group.studenten.length}
-                                        </Link>
                                         <IconButton
                                             size={'small'}
                                             sx={{ marginBottom: 1 }}
@@ -119,10 +226,10 @@ export function ChooseGroup() {
     )
 }
 
-function getGroup(id: number): Group {
-    return {
-        groep_id: id,
-        studenten: [1,2,3],
-        project: 5
-    }
-}
\ No newline at end of file
+// function getGroup(id: number): Group {
+//     return {
+//         groep_id: id,
+//         studenten: [17,18],
+//         project: 5
+//     }
+// }
\ No newline at end of file
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index 16275139..6a6e24a4 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -53,7 +53,7 @@ const router = createBrowserRouter([
         errorElement: <ErrorPage />,
     },
     {
-        path: '/groups/choose',
+        path: '/groups/:assignmentId/choose',
         element: <ChooseGroup />,
         errorElement: <ErrorPage />,
     },

From 7f1a568c17f953b4d0ff1877751c970928f4e540 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sat, 4 May 2024 17:26:57 +0200
Subject: [PATCH 004/145] start of RestrictionTemplateUI

---
 .../cypress/e2e/1-getting-started/todo.cy.js  | 143 ++++++++
 .../e2e/2-advanced-examples/actions.cy.js     | 321 ++++++++++++++++++
 .../e2e/2-advanced-examples/aliasing.cy.js    |  39 +++
 .../e2e/2-advanced-examples/assertions.cy.js  | 176 ++++++++++
 .../e2e/2-advanced-examples/connectors.cy.js  |  98 ++++++
 .../e2e/2-advanced-examples/cookies.cy.js     | 118 +++++++
 .../e2e/2-advanced-examples/cypress_api.cy.js | 185 ++++++++++
 .../e2e/2-advanced-examples/files.cy.js       |  85 +++++
 .../e2e/2-advanced-examples/location.cy.js    |  32 ++
 .../e2e/2-advanced-examples/misc.cy.js        |  90 +++++
 .../e2e/2-advanced-examples/navigation.cy.js  |  56 +++
 .../network_requests.cy.js                    | 163 +++++++++
 .../e2e/2-advanced-examples/querying.cy.js    | 114 +++++++
 .../spies_stubs_clocks.cy.js                  | 204 +++++++++++
 .../e2e/2-advanced-examples/storage.cy.js     | 117 +++++++
 .../e2e/2-advanced-examples/traversal.cy.js   | 121 +++++++
 .../e2e/2-advanced-examples/utilities.cy.js   | 107 ++++++
 .../e2e/2-advanced-examples/viewport.cy.js    |  58 ++++
 .../e2e/2-advanced-examples/waiting.cy.js     |  30 ++
 .../e2e/2-advanced-examples/window.cy.js      |  22 ++
 .../e2e/subjectsPage/SubjectsPage.cy.js       |  17 +
 .../RestrictionTemplateUI.tsx                 | 107 ++++++
 22 files changed, 2403 insertions(+)
 create mode 100644 frontend/frontend/cypress/e2e/1-getting-started/todo.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/actions.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/assertions.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/cookies.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/cypress_api.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/files.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/location.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/misc.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/navigation.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/network_requests.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/querying.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/storage.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/traversal.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/utilities.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/waiting.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/2-advanced-examples/window.cy.js
 create mode 100644 frontend/frontend/cypress/e2e/subjectsPage/SubjectsPage.cy.js
 create mode 100644 frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx

diff --git a/frontend/frontend/cypress/e2e/1-getting-started/todo.cy.js b/frontend/frontend/cypress/e2e/1-getting-started/todo.cy.js
new file mode 100644
index 00000000..4768ff92
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/1-getting-started/todo.cy.js
@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit('https://example.cypress.io/todo')
+  })
+
+  it('displays two todo items by default', () => {
+    // We use the `cy.get()` command to get all elements that match the selector.
+    // Then, we use `should` to assert that there are two matched items,
+    // which are the two default items.
+    cy.get('.todo-list li').should('have.length', 2)
+
+    // We can go even further and check that the default todos each contain
+    // the correct text. We use the `first` and `last` functions
+    // to get just the first and last matched elements individually,
+    // and then perform an assertion with `should`.
+    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
+    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
+  })
+
+  it('can add new todo items', () => {
+    // We'll store our item text in a variable so we can reuse it
+    const newItem = 'Feed the cat'
+
+    // Let's get the input element and use the `type` command to
+    // input our new list item. After typing the content of our item,
+    // we need to type the enter key as well in order to submit the input.
+    // This input has a data-test attribute so we'll use that to select the
+    // element in accordance with best practices:
+    // https://on.cypress.io/selecting-elements
+    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
+
+    // Now that we've typed our new item, let's check that it actually was added to the list.
+    // Since it's the newest item, it should exist as the last element in the list.
+    // In addition, with the two default items, we should have a total of 3 elements in the list.
+    // Since assertions yield the element that was asserted on,
+    // we can chain both of these assertions together into a single statement.
+    cy.get('.todo-list li')
+      .should('have.length', 3)
+      .last()
+      .should('have.text', newItem)
+  })
+
+  it('can check off an item as completed', () => {
+    // In addition to using the `get` command to get an element by selector,
+    // we can also use the `contains` command to get an element by its contents.
+    // However, this will yield the <label>, which is lowest-level element that contains the text.
+    // In order to check the item, we'll find the <input> element for this <label>
+    // by traversing up the dom to the parent element. From there, we can `find`
+    // the child checkbox <input> element and use the `check` command to check it.
+    cy.contains('Pay electric bill')
+      .parent()
+      .find('input[type=checkbox]')
+      .check()
+
+    // Now that we've checked the button, we can go ahead and make sure
+    // that the list element is now marked as completed.
+    // Again we'll use `contains` to find the <label> element and then use the `parents` command
+    // to traverse multiple levels up the dom until we find the corresponding <li> element.
+    // Once we get that element, we can assert that it has the completed class.
+    cy.contains('Pay electric bill')
+      .parents('li')
+      .should('have.class', 'completed')
+  })
+
+  context('with a checked task', () => {
+    beforeEach(() => {
+      // We'll take the command we used above to check off an element
+      // Since we want to perform multiple tests that start with checking
+      // one element, we put it in the beforeEach hook
+      // so that it runs at the start of every test.
+      cy.contains('Pay electric bill')
+        .parent()
+        .find('input[type=checkbox]')
+        .check()
+    })
+
+    it('can filter for uncompleted tasks', () => {
+      // We'll click on the "active" button in order to
+      // display only incomplete items
+      cy.contains('Active').click()
+
+      // After filtering, we can assert that there is only the one
+      // incomplete item in the list.
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Walk the dog')
+
+      // For good measure, let's also assert that the task we checked off
+      // does not exist on the page.
+      cy.contains('Pay electric bill').should('not.exist')
+    })
+
+    it('can filter for completed tasks', () => {
+      // We can perform similar steps as the test above to ensure
+      // that only completed tasks are shown
+      cy.contains('Completed').click()
+
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Pay electric bill')
+
+      cy.contains('Walk the dog').should('not.exist')
+    })
+
+    it('can delete all completed tasks', () => {
+      // First, let's click the "Clear completed" button
+      // `contains` is actually serving two purposes here.
+      // First, it's ensuring that the button exists within the dom.
+      // This button only appears when at least one task is checked
+      // so this command is implicitly verifying that it does exist.
+      // Second, it selects the button so we can click it.
+      cy.contains('Clear completed').click()
+
+      // Then we can make sure that there is only one element
+      // in the list and our element does not exist
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .should('not.have.text', 'Pay electric bill')
+
+      // Finally, make sure that the clear button no longer exists.
+      cy.contains('Clear completed').should('not.exist')
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/actions.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/actions.cy.js
new file mode 100644
index 00000000..7a6ef7fb
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/actions.cy.js
@@ -0,0 +1,321 @@
+/// <reference types="cypress" />
+
+context('Actions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/actions')
+  })
+
+  // https://on.cypress.io/interacting-with-elements
+
+  it('.type() - type into a DOM element', () => {
+    // https://on.cypress.io/type
+    cy.get('.action-email').type('fake@email.com')
+    cy.get('.action-email').should('have.value', 'fake@email.com')
+
+    // .type() with special character sequences
+    cy.get('.action-email').type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
+    cy.get('.action-email').type('{del}{selectall}{backspace}')
+
+    // .type() with key modifiers
+    cy.get('.action-email').type('{alt}{option}') //these are equivalent
+    cy.get('.action-email').type('{ctrl}{control}') //these are equivalent
+    cy.get('.action-email').type('{meta}{command}{cmd}') //these are equivalent
+    cy.get('.action-email').type('{shift}')
+
+    // Delay each keypress by 0.1 sec
+    cy.get('.action-email').type('slow.typing@email.com', { delay: 100 })
+    cy.get('.action-email').should('have.value', 'slow.typing@email.com')
+
+    cy.get('.action-disabled')
+      // Ignore error checking prior to type
+      // like whether the input is visible or disabled
+      .type('disabled error checking', { force: true })
+    cy.get('.action-disabled').should('have.value', 'disabled error checking')
+  })
+
+  it('.focus() - focus on a DOM element', () => {
+    // https://on.cypress.io/focus
+    cy.get('.action-focus').focus()
+    cy.get('.action-focus').should('have.class', 'focus')
+      .prev().should('have.attr', 'style', 'color: orange;')
+  })
+
+  it('.blur() - blur off a DOM element', () => {
+    // https://on.cypress.io/blur
+    cy.get('.action-blur').type('About to blur')
+    cy.get('.action-blur').blur()
+    cy.get('.action-blur').should('have.class', 'error')
+      .prev().should('have.attr', 'style', 'color: red;')
+  })
+
+  it('.clear() - clears an input or textarea element', () => {
+    // https://on.cypress.io/clear
+    cy.get('.action-clear').type('Clear this text')
+    cy.get('.action-clear').should('have.value', 'Clear this text')
+    cy.get('.action-clear').clear()
+    cy.get('.action-clear').should('have.value', '')
+  })
+
+  it('.submit() - submit a form', () => {
+    // https://on.cypress.io/submit
+    cy.get('.action-form')
+      .find('[type="text"]').type('HALFOFF')
+
+    cy.get('.action-form').submit()
+    cy.get('.action-form').next().should('contain', 'Your form has been submitted!')
+  })
+
+  it('.click() - click on a DOM element', () => {
+    // https://on.cypress.io/click
+    cy.get('.action-btn').click()
+
+    // You can click on 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // clicking in the center of the element is the default
+    cy.get('#action-canvas').click()
+
+    cy.get('#action-canvas').click('topLeft')
+    cy.get('#action-canvas').click('top')
+    cy.get('#action-canvas').click('topRight')
+    cy.get('#action-canvas').click('left')
+    cy.get('#action-canvas').click('right')
+    cy.get('#action-canvas').click('bottomLeft')
+    cy.get('#action-canvas').click('bottom')
+    cy.get('#action-canvas').click('bottomRight')
+
+    // .click() accepts an x and y coordinate
+    // that controls where the click occurs :)
+
+    cy.get('#action-canvas')
+    cy.get('#action-canvas').click(80, 75) // click 80px on x coord and 75px on y coord
+    cy.get('#action-canvas').click(170, 75)
+    cy.get('#action-canvas').click(80, 165)
+    cy.get('#action-canvas').click(100, 185)
+    cy.get('#action-canvas').click(125, 190)
+    cy.get('#action-canvas').click(150, 185)
+    cy.get('#action-canvas').click(170, 165)
+
+    // click multiple elements by passing multiple: true
+    cy.get('.action-labels>.label').click({ multiple: true })
+
+    // Ignore error checking prior to clicking
+    cy.get('.action-opacity>.btn').click({ force: true })
+  })
+
+  it('.dblclick() - double click on a DOM element', () => {
+    // https://on.cypress.io/dblclick
+
+    // Our app has a listener on 'dblclick' event in our 'scripts.js'
+    // that hides the div and shows an input on double click
+    cy.get('.action-div').dblclick()
+    cy.get('.action-div').should('not.be.visible')
+    cy.get('.action-input-hidden').should('be.visible')
+  })
+
+  it('.rightclick() - right click on a DOM element', () => {
+    // https://on.cypress.io/rightclick
+
+    // Our app has a listener on 'contextmenu' event in our 'scripts.js'
+    // that hides the div and shows an input on right click
+    cy.get('.rightclick-action-div').rightclick()
+    cy.get('.rightclick-action-div').should('not.be.visible')
+    cy.get('.rightclick-action-input-hidden').should('be.visible')
+  })
+
+  it('.check() - check a checkbox or radio element', () => {
+    // https://on.cypress.io/check
+
+    // By default, .check() will check all
+    // matching checkbox or radio elements in succession, one after another
+    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check()
+    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').should('be.checked')
+
+    cy.get('.action-radios [type="radio"]').not('[disabled]').check()
+    cy.get('.action-radios [type="radio"]').not('[disabled]').should('be.checked')
+
+    // .check() accepts a value argument
+    cy.get('.action-radios [type="radio"]').check('radio1')
+    cy.get('.action-radios [type="radio"]').should('be.checked')
+
+    // .check() accepts an array of values
+    cy.get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox1', 'checkbox2'])
+    cy.get('.action-multiple-checkboxes [type="checkbox"]').should('be.checked')
+
+    // Ignore error checking prior to checking
+    cy.get('.action-checkboxes [disabled]').check({ force: true })
+    cy.get('.action-checkboxes [disabled]').should('be.checked')
+
+    cy.get('.action-radios [type="radio"]').check('radio3', { force: true })
+    cy.get('.action-radios [type="radio"]').should('be.checked')
+  })
+
+  it('.uncheck() - uncheck a checkbox element', () => {
+    // https://on.cypress.io/uncheck
+
+    // By default, .uncheck() will uncheck all matching
+    // checkbox elements in succession, one after another
+    cy.get('.action-check [type="checkbox"]')
+      .not('[disabled]')
+      .uncheck()
+    cy.get('.action-check [type="checkbox"]')
+      .not('[disabled]')
+      .should('not.be.checked')
+
+    // .uncheck() accepts a value argument
+    cy.get('.action-check [type="checkbox"]')
+      .check('checkbox1')
+    cy.get('.action-check [type="checkbox"]')
+      .uncheck('checkbox1')
+    cy.get('.action-check [type="checkbox"][value="checkbox1"]')
+      .should('not.be.checked')
+
+    // .uncheck() accepts an array of values
+    cy.get('.action-check [type="checkbox"]')
+      .check(['checkbox1', 'checkbox3'])
+    cy.get('.action-check [type="checkbox"]')
+      .uncheck(['checkbox1', 'checkbox3'])
+    cy.get('.action-check [type="checkbox"][value="checkbox1"]')
+      .should('not.be.checked')
+    cy.get('.action-check [type="checkbox"][value="checkbox3"]')
+      .should('not.be.checked')
+
+    // Ignore error checking prior to unchecking
+    cy.get('.action-check [disabled]').uncheck({ force: true })
+    cy.get('.action-check [disabled]').should('not.be.checked')
+  })
+
+  it('.select() - select an option in a <select> element', () => {
+    // https://on.cypress.io/select
+
+    // at first, no option should be selected
+    cy.get('.action-select')
+      .should('have.value', '--Select a fruit--')
+
+    // Select option(s) with matching text content
+    cy.get('.action-select').select('apples')
+    // confirm the apples were selected
+    // note that each value starts with "fr-" in our HTML
+    cy.get('.action-select').should('have.value', 'fr-apples')
+
+    cy.get('.action-select-multiple')
+      .select(['apples', 'oranges', 'bananas'])
+    cy.get('.action-select-multiple')
+      // when getting multiple values, invoke "val" method first
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+    // Select option(s) with matching value
+    cy.get('.action-select').select('fr-bananas')
+    cy.get('.action-select')
+      // can attach an assertion right away to the element
+      .should('have.value', 'fr-bananas')
+
+    cy.get('.action-select-multiple')
+      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+    cy.get('.action-select-multiple')
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+    // assert the selected values include oranges
+    cy.get('.action-select-multiple')
+      .invoke('val').should('include', 'fr-oranges')
+  })
+
+  it('.scrollIntoView() - scroll an element into view', () => {
+    // https://on.cypress.io/scrollintoview
+
+    // normally all of these buttons are hidden,
+    // because they're not within
+    // the viewable area of their parent
+    // (we need to scroll to see them)
+    cy.get('#scroll-horizontal button')
+      .should('not.be.visible')
+
+    // scroll the button into view, as if the user had scrolled
+    cy.get('#scroll-horizontal button').scrollIntoView()
+    cy.get('#scroll-horizontal button')
+      .should('be.visible')
+
+    cy.get('#scroll-vertical button')
+      .should('not.be.visible')
+
+    // Cypress handles the scroll direction needed
+    cy.get('#scroll-vertical button').scrollIntoView()
+    cy.get('#scroll-vertical button')
+      .should('be.visible')
+
+    cy.get('#scroll-both button')
+      .should('not.be.visible')
+
+    // Cypress knows to scroll to the right and down
+    cy.get('#scroll-both button').scrollIntoView()
+    cy.get('#scroll-both button')
+      .should('be.visible')
+  })
+
+  it('.trigger() - trigger an event on a DOM element', () => {
+    // https://on.cypress.io/trigger
+
+    // To interact with a range input (slider)
+    // we need to set its value & trigger the
+    // event to signal it changed
+
+    // Here, we invoke jQuery's val() method to set
+    // the value and trigger the 'change' event
+    cy.get('.trigger-input-range')
+      .invoke('val', 25)
+    cy.get('.trigger-input-range')
+      .trigger('change')
+    cy.get('.trigger-input-range')
+      .get('input[type=range]').siblings('p')
+      .should('have.text', '25')
+  })
+
+  it('cy.scrollTo() - scroll the window or element to a position', () => {
+    // https://on.cypress.io/scrollto
+
+    // You can scroll to 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // if you chain .scrollTo() off of cy, we will
+    // scroll the entire window
+    cy.scrollTo('bottom')
+
+    cy.get('#scrollable-horizontal').scrollTo('right')
+
+    // or you can scroll to a specific coordinate:
+    // (x axis, y axis) in pixels
+    cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+    // or you can scroll to a specific percentage
+    // of the (width, height) of the element
+    cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+    // control the easing of the scroll (default is 'swing')
+    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+    // control the duration of the scroll (in ms)
+    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js
new file mode 100644
index 00000000..a02fb2bb
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/aliasing.cy.js
@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+context('Aliasing', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/aliasing')
+  })
+
+  it('.as() - alias a DOM element for later use', () => {
+    // https://on.cypress.io/as
+
+    // Alias a DOM element for use later
+    // We don't have to traverse to the element
+    // later in our code, we reference it with @
+
+    cy.get('.as-table').find('tbody>tr')
+      .first().find('td').first()
+      .find('button').as('firstBtn')
+
+    // when we reference the alias, we place an
+    // @ in front of its name
+    cy.get('@firstBtn').click()
+
+    cy.get('@firstBtn')
+      .should('have.class', 'btn-success')
+      .and('contain', 'Changed')
+  })
+
+  it('.as() - alias a route for later use', () => {
+    // Alias the route to wait for its response
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // https://on.cypress.io/wait
+    cy.wait('@getComment').its('response.statusCode').should('eq', 200)
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/assertions.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/assertions.cy.js
new file mode 100644
index 00000000..79e3d0e9
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/assertions.cy.js
@@ -0,0 +1,176 @@
+/// <reference types="cypress" />
+
+context('Assertions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/assertions')
+  })
+
+  describe('Implicit Assertions', () => {
+    it('.should() - make an assertion about the current subject', () => {
+      // https://on.cypress.io/should
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        .should('have.class', 'success')
+        .find('td')
+        .first()
+        // checking the text of the <td> element in various ways
+        .should('have.text', 'Column content')
+        .should('contain', 'Column content')
+        .should('have.html', 'Column content')
+        // chai-jquery uses "is()" to check if element matches selector
+        .should('match', 'td')
+        // to match text content against a regular expression
+        // first need to invoke jQuery method text()
+        // and then match using regular expression
+        .invoke('text')
+        .should('match', /column content/i)
+
+      // a better way to check element's text content against a regular expression
+      // is to use "cy.contains"
+      // https://on.cypress.io/contains
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        // finds first <td> element with text content matching regular expression
+        .contains('td', /column content/i)
+        .should('be.visible')
+
+      // for more information about asserting element's text
+      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
+    })
+
+    it('.and() - chain multiple assertions together', () => {
+      // https://on.cypress.io/and
+      cy.get('.assertions-link')
+        .should('have.class', 'active')
+        .and('have.attr', 'href')
+        .and('include', 'cypress.io')
+    })
+  })
+
+  describe('Explicit Assertions', () => {
+    // https://on.cypress.io/assertions
+    it('expect - make an assertion about a specified subject', () => {
+      // We can use Chai's BDD style assertions
+      expect(true).to.be.true
+      const o = { foo: 'bar' }
+
+      expect(o).to.equal(o)
+      expect(o).to.deep.equal({ foo: 'bar' })
+      // matching text using regular expression
+      expect('FooBar').to.match(/bar$/i)
+    })
+
+    it('pass your own callback function to should()', () => {
+      // Pass a function to should that can have any number
+      // of explicit assertions within it.
+      // The ".should(cb)" function will be retried
+      // automatically until it passes all your explicit assertions or times out.
+      cy.get('.assertions-p')
+        .find('p')
+        .should(($p) => {
+          // https://on.cypress.io/$
+          // return an array of texts from all of the p's
+          const texts = $p.map((i, el) => Cypress.$(el).text())
+
+          // jquery map returns jquery object
+          // and .get() convert this to simple array
+          const paragraphs = texts.get()
+
+          // array should have length of 3
+          expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+
+          // use second argument to expect(...) to provide clear
+          // message with each assertion
+          expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+            'Some text from first p',
+            'More text from second p',
+            'And even more text from third p',
+          ])
+        })
+    })
+
+    it('finds element by class name regex', () => {
+      cy.get('.docs-header')
+        .find('div')
+        // .should(cb) callback function will be retried
+        .should(($div) => {
+          expect($div).to.have.length(1)
+
+          const className = $div[0].className
+
+          expect(className).to.match(/heading-/)
+        })
+        // .then(cb) callback is not retried,
+        // it either passes or fails
+        .then(($div) => {
+          expect($div, 'text content').to.have.text('Introduction')
+        })
+    })
+
+    it('can throw any error', () => {
+      cy.get('.docs-header')
+        .find('div')
+        .should(($div) => {
+          if ($div.length !== 1) {
+            // you can throw your own errors
+            throw new Error('Did not find 1 element')
+          }
+
+          const className = $div[0].className
+
+          if (!className.match(/heading-/)) {
+            throw new Error(`Could not find class "heading-" in ${className}`)
+          }
+        })
+    })
+
+    it('matches unknown text between two elements', () => {
+      /**
+       * Text from the first element.
+       * @type {string}
+      */
+      let text
+
+      /**
+       * Normalizes passed text,
+       * useful before comparing text with spaces and different capitalization.
+       * @param {string} s Text to normalize
+      */
+      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+
+      cy.get('.two-elements')
+        .find('.first')
+        .then(($first) => {
+          // save text from the first element
+          text = normalizeText($first.text())
+        })
+
+      cy.get('.two-elements')
+        .find('.second')
+        .should(($div) => {
+          // we can massage text before comparing
+          const secondText = normalizeText($div.text())
+
+          expect(secondText, 'second text').to.equal(text)
+        })
+    })
+
+    it('assert - assert shape of an object', () => {
+      const person = {
+        name: 'Joe',
+        age: 20,
+      }
+
+      assert.isObject(person, 'value is object')
+    })
+
+    it('retries the should callback until assertions pass', () => {
+      cy.get('#random-number')
+        .should(($div) => {
+          const n = parseFloat($div.text())
+
+          expect(n).to.be.gte(1).and.be.lte(10)
+        })
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js
new file mode 100644
index 00000000..f24cf526
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/connectors.cy.js
@@ -0,0 +1,98 @@
+/// <reference types="cypress" />
+
+context('Connectors', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/connectors')
+  })
+
+  it('.each() - iterate over an array of elements', () => {
+    // https://on.cypress.io/each
+    cy.get('.connectors-each-ul>li')
+      .each(($el, index, $list) => {
+        console.log($el, index, $list)
+      })
+  })
+
+  it('.its() - get properties on the current subject', () => {
+    // https://on.cypress.io/its
+    cy.get('.connectors-its-ul>li')
+      // calls the 'length' property yielding that value
+      .its('length')
+      .should('be.gt', 2)
+  })
+
+  it('.invoke() - invoke a function on the current subject', () => {
+    // our div is hidden in our script.js
+    // $('.connectors-div').hide()
+    cy.get('.connectors-div').should('be.hidden')
+
+    // https://on.cypress.io/invoke
+    // call the jquery method 'show' on the 'div.container'
+    cy.get('.connectors-div').invoke('show')
+
+    cy.get('.connectors-div').should('be.visible')
+  })
+
+  it('.spread() - spread an array as individual args to callback function', () => {
+    // https://on.cypress.io/spread
+    const arr = ['foo', 'bar', 'baz']
+
+    cy.wrap(arr).spread((foo, bar, baz) => {
+      expect(foo).to.eq('foo')
+      expect(bar).to.eq('bar')
+      expect(baz).to.eq('baz')
+    })
+  })
+
+  describe('.then()', () => {
+    it('invokes a callback function with the current subject', () => {
+      // https://on.cypress.io/then
+      cy.get('.connectors-list > li')
+        .then(($lis) => {
+          expect($lis, '3 items').to.have.length(3)
+          expect($lis.eq(0), 'first item').to.contain('Walk the dog')
+          expect($lis.eq(1), 'second item').to.contain('Feed the cat')
+          expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
+        })
+    })
+
+    it('yields the returned value to the next command', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+
+          return 2
+        })
+        .then((num) => {
+          expect(num).to.equal(2)
+        })
+    })
+
+    it('yields the original subject without return', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+          // note that nothing is returned from this callback
+        })
+        .then((num) => {
+          // this callback receives the original unchanged value 1
+          expect(num).to.equal(1)
+        })
+    })
+
+    it('yields the value yielded by the last Cypress command inside', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+          // note how we run a Cypress command
+          // the result yielded by this Cypress command
+          // will be passed to the second ".then"
+          cy.wrap(2)
+        })
+        .then((num) => {
+          // this callback receives the value yielded by "cy.wrap(2)"
+          expect(num).to.equal(2)
+        })
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/cookies.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/cookies.cy.js
new file mode 100644
index 00000000..3ad6657e
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/cookies.cy.js
@@ -0,0 +1,118 @@
+/// <reference types="cypress" />
+
+context('Cookies', () => {
+  beforeEach(() => {
+    Cypress.Cookies.debug(true)
+
+    cy.visit('https://example.cypress.io/commands/cookies')
+
+    // clear cookies again after visiting to remove
+    // any 3rd party cookies picked up such as cloudflare
+    cy.clearCookies()
+  })
+
+  it('cy.getCookie() - get a browser cookie', () => {
+    // https://on.cypress.io/getcookie
+    cy.get('#getCookie .set-a-cookie').click()
+
+    // cy.getCookie() yields a cookie object
+    cy.getCookie('token').should('have.property', 'value', '123ABC')
+  })
+
+  it('cy.getCookies() - get browser cookies for the current domain', () => {
+    // https://on.cypress.io/getcookies
+    cy.getCookies().should('be.empty')
+
+    cy.get('#getCookies .set-a-cookie').click()
+
+    // cy.getCookies() yields an array of cookies
+    cy.getCookies().should('have.length', 1).should((cookies) => {
+      // each cookie has these properties
+      expect(cookies[0]).to.have.property('name', 'token')
+      expect(cookies[0]).to.have.property('value', '123ABC')
+      expect(cookies[0]).to.have.property('httpOnly', false)
+      expect(cookies[0]).to.have.property('secure', false)
+      expect(cookies[0]).to.have.property('domain')
+      expect(cookies[0]).to.have.property('path')
+    })
+  })
+
+  it('cy.getAllCookies() - get all browser cookies', () => {
+    // https://on.cypress.io/getallcookies
+    cy.getAllCookies().should('be.empty')
+
+    cy.setCookie('key', 'value')
+    cy.setCookie('key', 'value', { domain: '.example.com' })
+
+    // cy.getAllCookies() yields an array of cookies
+    cy.getAllCookies().should('have.length', 2).should((cookies) => {
+      // each cookie has these properties
+      expect(cookies[0]).to.have.property('name', 'key')
+      expect(cookies[0]).to.have.property('value', 'value')
+      expect(cookies[0]).to.have.property('httpOnly', false)
+      expect(cookies[0]).to.have.property('secure', false)
+      expect(cookies[0]).to.have.property('domain')
+      expect(cookies[0]).to.have.property('path')
+
+      expect(cookies[1]).to.have.property('name', 'key')
+      expect(cookies[1]).to.have.property('value', 'value')
+      expect(cookies[1]).to.have.property('httpOnly', false)
+      expect(cookies[1]).to.have.property('secure', false)
+      expect(cookies[1]).to.have.property('domain', '.example.com')
+      expect(cookies[1]).to.have.property('path')
+    })
+  })
+
+  it('cy.setCookie() - set a browser cookie', () => {
+    // https://on.cypress.io/setcookie
+    cy.getCookies().should('be.empty')
+
+    cy.setCookie('foo', 'bar')
+
+    // cy.getCookie() yields a cookie object
+    cy.getCookie('foo').should('have.property', 'value', 'bar')
+  })
+
+  it('cy.clearCookie() - clear a browser cookie', () => {
+    // https://on.cypress.io/clearcookie
+    cy.getCookie('token').should('be.null')
+
+    cy.get('#clearCookie .set-a-cookie').click()
+
+    cy.getCookie('token').should('have.property', 'value', '123ABC')
+
+    // cy.clearCookies() yields null
+    cy.clearCookie('token')
+
+    cy.getCookie('token').should('be.null')
+  })
+
+  it('cy.clearCookies() - clear browser cookies for the current domain', () => {
+    // https://on.cypress.io/clearcookies
+    cy.getCookies().should('be.empty')
+
+    cy.get('#clearCookies .set-a-cookie').click()
+
+    cy.getCookies().should('have.length', 1)
+
+    // cy.clearCookies() yields null
+    cy.clearCookies()
+
+    cy.getCookies().should('be.empty')
+  })
+
+  it('cy.clearAllCookies() - clear all browser cookies', () => {
+    // https://on.cypress.io/clearallcookies
+    cy.getAllCookies().should('be.empty')
+
+    cy.setCookie('key', 'value')
+    cy.setCookie('key', 'value', { domain: '.example.com' })
+
+    cy.getAllCookies().should('have.length', 2)
+
+    // cy.clearAllCookies() yields null
+    cy.clearAllCookies()
+
+    cy.getAllCookies().should('be.empty')
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/cypress_api.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/cypress_api.cy.js
new file mode 100644
index 00000000..556f2b8a
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/cypress_api.cy.js
@@ -0,0 +1,185 @@
+/// <reference types="cypress" />
+
+context('Cypress APIs', () => {
+
+  context('Cypress.Commands', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    // https://on.cypress.io/custom-commands
+
+    it('.add() - create a custom command', () => {
+      Cypress.Commands.add('console', {
+        prevSubject: true,
+      }, (subject, method) => {
+      // the previous subject is automatically received
+      // and the commands arguments are shifted
+
+        // allow us to change the console method used
+        method = method || 'log'
+
+        // log the subject to the console
+        console[method]('The subject is', subject)
+
+        // whatever we return becomes the new subject
+        // we don't want to change the subject so
+        // we return whatever was passed in
+        return subject
+      })
+
+      cy.get('button').console('info').then(($button) => {
+      // subject is still $button
+      })
+    })
+  })
+
+  context('Cypress.Cookies', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    // https://on.cypress.io/cookies
+    it('.debug() - enable or disable debugging', () => {
+      Cypress.Cookies.debug(true)
+
+      // Cypress will now log in the console when
+      // cookies are set or cleared
+      cy.setCookie('fakeCookie', '123ABC')
+      cy.clearCookie('fakeCookie')
+      cy.setCookie('fakeCookie', '123ABC')
+      cy.clearCookie('fakeCookie')
+      cy.setCookie('fakeCookie', '123ABC')
+    })
+  })
+
+  context('Cypress.arch', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    it('Get CPU architecture name of underlying OS', () => {
+    // https://on.cypress.io/arch
+      expect(Cypress.arch).to.exist
+    })
+  })
+
+  context('Cypress.config()', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    it('Get and set configuration options', () => {
+    // https://on.cypress.io/config
+      let myConfig = Cypress.config()
+
+      expect(myConfig).to.have.property('animationDistanceThreshold', 5)
+      expect(myConfig).to.have.property('baseUrl', null)
+      expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
+      expect(myConfig).to.have.property('requestTimeout', 5000)
+      expect(myConfig).to.have.property('responseTimeout', 30000)
+      expect(myConfig).to.have.property('viewportHeight', 660)
+      expect(myConfig).to.have.property('viewportWidth', 1000)
+      expect(myConfig).to.have.property('pageLoadTimeout', 60000)
+      expect(myConfig).to.have.property('waitForAnimations', true)
+
+      expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
+
+      // this will change the config for the rest of your tests!
+      Cypress.config('pageLoadTimeout', 20000)
+
+      expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
+
+      Cypress.config('pageLoadTimeout', 60000)
+    })
+  })
+
+  context('Cypress.dom', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    // https://on.cypress.io/dom
+    it('.isHidden() - determine if a DOM element is hidden', () => {
+      let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
+      let visibleP = Cypress.$('.dom-p p.visible').get(0)
+
+      // our first paragraph has css class 'hidden'
+      expect(Cypress.dom.isHidden(hiddenP)).to.be.true
+      expect(Cypress.dom.isHidden(visibleP)).to.be.false
+    })
+  })
+
+  context('Cypress.env()', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    // We can set environment variables for highly dynamic values
+
+    // https://on.cypress.io/environment-variables
+    it('Get environment variables', () => {
+    // https://on.cypress.io/env
+    // set multiple environment variables
+      Cypress.env({
+        host: 'veronica.dev.local',
+        api_server: 'http://localhost:8888/v1/',
+      })
+
+      // get environment variable
+      expect(Cypress.env('host')).to.eq('veronica.dev.local')
+
+      // set environment variable
+      Cypress.env('api_server', 'http://localhost:8888/v2/')
+      expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
+
+      // get all environment variable
+      expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
+      expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
+    })
+  })
+
+  context('Cypress.log', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    it('Control what is printed to the Command Log', () => {
+    // https://on.cypress.io/cypress-log
+    })
+  })
+
+  context('Cypress.platform', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    it('Get underlying OS name', () => {
+    // https://on.cypress.io/platform
+      expect(Cypress.platform).to.be.exist
+    })
+  })
+
+  context('Cypress.version', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    it('Get current version of Cypress being run', () => {
+    // https://on.cypress.io/version
+      expect(Cypress.version).to.be.exist
+    })
+  })
+
+  context('Cypress.spec', () => {
+    beforeEach(() => {
+      cy.visit('https://example.cypress.io/cypress-api')
+    })
+
+    it('Get current spec information', () => {
+    // https://on.cypress.io/spec
+    // wrap the object so we can inspect it easily by clicking in the command log
+      cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/files.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/files.cy.js
new file mode 100644
index 00000000..1be9d44b
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/files.cy.js
@@ -0,0 +1,85 @@
+/// <reference types="cypress" />
+
+/// JSON fixture file can be loaded directly using
+// the built-in JavaScript bundler
+const requiredExample = require('../../fixtures/example')
+
+context('Files', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/files')
+
+    // load example.json fixture file and store
+    // in the test context object
+    cy.fixture('example.json').as('example')
+  })
+
+  it('cy.fixture() - load a fixture', () => {
+    // https://on.cypress.io/fixture
+
+    // Instead of writing a response inline you can
+    // use a fixture file's content.
+
+    // when application makes an Ajax request matching "GET **/comments/*"
+    // Cypress will intercept it and reply with the object in `example.json` fixture
+    cy.intercept('GET', '**/comments/*', { fixture: 'example.json' }).as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.fixture-btn').click()
+
+    cy.wait('@getComment').its('response.body')
+      .should('have.property', 'name')
+      .and('include', 'Using fixtures to represent data')
+  })
+
+  it('cy.fixture() or require - load a fixture', function () {
+    // we are inside the "function () { ... }"
+    // callback and can use test context object "this"
+    // "this.example" was loaded in "beforeEach" function callback
+    expect(this.example, 'fixture in the test context')
+      .to.deep.equal(requiredExample)
+
+    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
+    cy.wrap(this.example)
+      .should('deep.equal', requiredExample)
+  })
+
+  it('cy.readFile() - read file contents', () => {
+    // https://on.cypress.io/readfile
+
+    // You can read a file and yield its contents
+    // The filePath is relative to your project's root.
+    cy.readFile(Cypress.config('configFile')).then((config) => {
+      expect(config).to.be.an('string')
+    })
+  })
+
+  it('cy.writeFile() - write to a file', () => {
+    // https://on.cypress.io/writefile
+
+    // You can write to a file
+
+    // Use a response from a request to automatically
+    // generate a fixture file for use later
+    cy.request('https://jsonplaceholder.cypress.io/users')
+      .then((response) => {
+        cy.writeFile('cypress/fixtures/users.json', response.body)
+      })
+
+    cy.fixture('users').should((users) => {
+      expect(users[0].name).to.exist
+    })
+
+    // JavaScript arrays and objects are stringified
+    // and formatted into text.
+    cy.writeFile('cypress/fixtures/profile.json', {
+      id: 8739,
+      name: 'Jane',
+      email: 'jane@example.com',
+    })
+
+    cy.fixture('profile').should((profile) => {
+      expect(profile.name).to.eq('Jane')
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/location.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/location.cy.js
new file mode 100644
index 00000000..299867da
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/location.cy.js
@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+context('Location', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/location')
+  })
+
+  it('cy.hash() - get the current URL hash', () => {
+    // https://on.cypress.io/hash
+    cy.hash().should('be.empty')
+  })
+
+  it('cy.location() - get window.location', () => {
+    // https://on.cypress.io/location
+    cy.location().should((location) => {
+      expect(location.hash).to.be.empty
+      expect(location.href).to.eq('https://example.cypress.io/commands/location')
+      expect(location.host).to.eq('example.cypress.io')
+      expect(location.hostname).to.eq('example.cypress.io')
+      expect(location.origin).to.eq('https://example.cypress.io')
+      expect(location.pathname).to.eq('/commands/location')
+      expect(location.port).to.eq('')
+      expect(location.protocol).to.eq('https:')
+      expect(location.search).to.be.empty
+    })
+  })
+
+  it('cy.url() - get the current URL', () => {
+    // https://on.cypress.io/url
+    cy.url().should('eq', 'https://example.cypress.io/commands/location')
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/misc.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/misc.cy.js
new file mode 100644
index 00000000..52b94745
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/misc.cy.js
@@ -0,0 +1,90 @@
+/// <reference types="cypress" />
+
+context('Misc', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/misc')
+  })
+
+  it('cy.exec() - execute a system command', () => {
+    // execute a system command.
+    // so you can take actions necessary for
+    // your test outside the scope of Cypress.
+    // https://on.cypress.io/exec
+
+    // we can use Cypress.platform string to
+    // select appropriate command
+    // https://on.cypress/io/platform
+    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
+
+    // on CircleCI Windows build machines we have a failure to run bash shell
+    // https://github.com/cypress-io/cypress/issues/5169
+    // so skip some of the tests by passing flag "--env circle=true"
+    const isCircleOnWindows = Cypress.platform === 'win32' && Cypress.env('circle')
+
+    if (isCircleOnWindows) {
+      cy.log('Skipping test on CircleCI')
+
+      return
+    }
+
+    // cy.exec problem on Shippable CI
+    // https://github.com/cypress-io/cypress/issues/6718
+    const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
+
+    if (isShippable) {
+      cy.log('Skipping test on ShippableCI')
+
+      return
+    }
+
+    cy.exec('echo Jane Lane')
+      .its('stdout').should('contain', 'Jane Lane')
+
+    if (Cypress.platform === 'win32') {
+      cy.exec(`print ${Cypress.config('configFile')}`)
+        .its('stderr').should('be.empty')
+    } else {
+      cy.exec(`cat ${Cypress.config('configFile')}`)
+        .its('stderr').should('be.empty')
+
+      cy.exec('pwd')
+        .its('code').should('eq', 0)
+    }
+  })
+
+  it('cy.focused() - get the DOM element that has focus', () => {
+    // https://on.cypress.io/focused
+    cy.get('.misc-form').find('#name').click()
+    cy.focused().should('have.id', 'name')
+
+    cy.get('.misc-form').find('#description').click()
+    cy.focused().should('have.id', 'description')
+  })
+
+  context('Cypress.Screenshot', function () {
+    it('cy.screenshot() - take a screenshot', () => {
+      // https://on.cypress.io/screenshot
+      cy.screenshot('my-image')
+    })
+
+    it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
+      Cypress.Screenshot.defaults({
+        blackout: ['.foo'],
+        capture: 'viewport',
+        clip: { x: 0, y: 0, width: 200, height: 200 },
+        scale: false,
+        disableTimersAndAnimations: true,
+        screenshotOnRunFailure: true,
+        onBeforeScreenshot () { },
+        onAfterScreenshot () { },
+      })
+    })
+  })
+
+  it('cy.wrap() - wrap an object', () => {
+    // https://on.cypress.io/wrap
+    cy.wrap({ foo: 'bar' })
+      .should('have.property', 'foo')
+      .and('include', 'bar')
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/navigation.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/navigation.cy.js
new file mode 100644
index 00000000..b85a4689
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/navigation.cy.js
@@ -0,0 +1,56 @@
+/// <reference types="cypress" />
+
+context('Navigation', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io')
+    cy.get('.navbar-nav').contains('Commands').click()
+    cy.get('.dropdown-menu').contains('Navigation').click()
+  })
+
+  it('cy.go() - go back or forward in the browser\'s history', () => {
+    // https://on.cypress.io/go
+
+    cy.location('pathname').should('include', 'navigation')
+
+    cy.go('back')
+    cy.location('pathname').should('not.include', 'navigation')
+
+    cy.go('forward')
+    cy.location('pathname').should('include', 'navigation')
+
+    // clicking back
+    cy.go(-1)
+    cy.location('pathname').should('not.include', 'navigation')
+
+    // clicking forward
+    cy.go(1)
+    cy.location('pathname').should('include', 'navigation')
+  })
+
+  it('cy.reload() - reload the page', () => {
+    // https://on.cypress.io/reload
+    cy.reload()
+
+    // reload the page without using the cache
+    cy.reload(true)
+  })
+
+  it('cy.visit() - visit a remote url', () => {
+    // https://on.cypress.io/visit
+
+    // Visit any sub-domain of your current domain
+
+    // Pass options to the visit
+    cy.visit('https://example.cypress.io/commands/navigation', {
+      timeout: 50000, // increase total time for the visit to resolve
+      onBeforeLoad (contentWindow) {
+        // contentWindow is the remote page's window object
+        expect(typeof contentWindow === 'object').to.be.true
+      },
+      onLoad (contentWindow) {
+        // contentWindow is the remote page's window object
+        expect(typeof contentWindow === 'object').to.be.true
+      },
+    })
+    })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/network_requests.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/network_requests.cy.js
new file mode 100644
index 00000000..11213a0e
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/network_requests.cy.js
@@ -0,0 +1,163 @@
+/// <reference types="cypress" />
+
+context('Network Requests', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/network-requests')
+  })
+
+  // Manage HTTP requests in your app
+
+  it('cy.request() - make an XHR request', () => {
+    // https://on.cypress.io/request
+    cy.request('https://jsonplaceholder.cypress.io/comments')
+      .should((response) => {
+        expect(response.status).to.eq(200)
+        // the server sometimes gets an extra comment posted from another machine
+        // which gets returned as 1 extra object
+        expect(response.body).to.have.property('length').and.be.oneOf([500, 501])
+        expect(response).to.have.property('headers')
+        expect(response).to.have.property('duration')
+      })
+  })
+
+  it('cy.request() - verify response using BDD syntax', () => {
+    cy.request('https://jsonplaceholder.cypress.io/comments')
+    .then((response) => {
+      // https://on.cypress.io/assertions
+      expect(response).property('status').to.equal(200)
+      expect(response).property('body').to.have.property('length').and.be.oneOf([500, 501])
+      expect(response).to.include.keys('headers', 'duration')
+    })
+  })
+
+  it('cy.request() with query parameters', () => {
+    // will execute request
+    // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
+    cy.request({
+      url: 'https://jsonplaceholder.cypress.io/comments',
+      qs: {
+        postId: 1,
+        id: 3,
+      },
+    })
+    .its('body')
+    .should('be.an', 'array')
+    .and('have.length', 1)
+    .its('0') // yields first element of the array
+    .should('contain', {
+      postId: 1,
+      id: 3,
+    })
+  })
+
+  it('cy.request() - pass result to the second request', () => {
+    // first, let's find out the userId of the first user we have
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+      .its('body') // yields the response object
+      .its('0') // yields the first element of the returned list
+      // the above two commands its('body').its('0')
+      // can be written as its('body.0')
+      // if you do not care about TypeScript checks
+      .then((user) => {
+        expect(user).property('id').to.be.a('number')
+        // make a new post on behalf of the user
+        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+          userId: user.id,
+          title: 'Cypress Test Runner',
+          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+        })
+      })
+      // note that the value here is the returned value of the 2nd request
+      // which is the new post object
+      .then((response) => {
+        expect(response).property('status').to.equal(201) // new entity created
+        expect(response).property('body').to.contain({
+          title: 'Cypress Test Runner',
+        })
+
+        // we don't know the exact post id - only that it will be > 100
+        // since JSONPlaceholder has built-in 100 posts
+        expect(response.body).property('id').to.be.a('number')
+          .and.to.be.gt(100)
+
+        // we don't know the user id here - since it was in above closure
+        // so in this test just confirm that the property is there
+        expect(response.body).property('userId').to.be.a('number')
+      })
+  })
+
+  it('cy.request() - save response in the shared test context', () => {
+    // https://on.cypress.io/variables-and-aliases
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+      .its('body').its('0') // yields the first element of the returned list
+      .as('user') // saves the object in the test context
+      .then(function () {
+        // NOTE 👀
+        //  By the time this callback runs the "as('user')" command
+        //  has saved the user object in the test context.
+        //  To access the test context we need to use
+        //  the "function () { ... }" callback form,
+        //  otherwise "this" points at a wrong or undefined object!
+        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+          userId: this.user.id,
+          title: 'Cypress Test Runner',
+          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+        })
+        .its('body').as('post') // save the new post from the response
+      })
+      .then(function () {
+        // When this callback runs, both "cy.request" API commands have finished
+        // and the test context has "user" and "post" objects set.
+        // Let's verify them.
+        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
+      })
+  })
+
+  it('cy.intercept() - route responses to matching requests', () => {
+    // https://on.cypress.io/intercept
+
+    let message = 'whoa, this comment does not exist'
+
+    // Listen to GET to comments/1
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // https://on.cypress.io/wait
+    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+
+    // Listen to POST to comments
+    cy.intercept('POST', '**/comments').as('postComment')
+
+    // we have code that posts a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-post').click()
+    cy.wait('@postComment').should(({ request, response }) => {
+      expect(request.body).to.include('email')
+      expect(request.headers).to.have.property('content-type')
+      expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
+    })
+
+    // Stub a response to PUT comments/ ****
+    cy.intercept({
+      method: 'PUT',
+      url: '**/comments/*',
+    }, {
+      statusCode: 404,
+      body: { error: message },
+      headers: { 'access-control-allow-origin': '*' },
+      delayMs: 500,
+    }).as('putComment')
+
+    // we have code that puts a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-put').click()
+
+    cy.wait('@putComment')
+
+    // our 404 statusCode logic in scripts.js executed
+    cy.get('.network-put-comment').should('contain', message)
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/querying.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/querying.cy.js
new file mode 100644
index 00000000..00970480
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/querying.cy.js
@@ -0,0 +1,114 @@
+/// <reference types="cypress" />
+
+context('Querying', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/querying')
+  })
+
+  // The most commonly used query is 'cy.get()', you can
+  // think of this like the '$' in jQuery
+
+  it('cy.get() - query DOM elements', () => {
+    // https://on.cypress.io/get
+
+    cy.get('#query-btn').should('contain', 'Button')
+
+    cy.get('.query-btn').should('contain', 'Button')
+
+    cy.get('#querying .well>button:first').should('contain', 'Button')
+    //              ↲
+    // Use CSS selectors just like jQuery
+
+    cy.get('[data-test-id="test-example"]').should('have.class', 'example')
+
+    // 'cy.get()' yields jQuery object, you can get its attribute
+    // by invoking `.attr()` method
+    cy.get('[data-test-id="test-example"]')
+      .invoke('attr', 'data-test-id')
+      .should('equal', 'test-example')
+
+    // or you can get element's CSS property
+    cy.get('[data-test-id="test-example"]')
+      .invoke('css', 'position')
+      .should('equal', 'static')
+
+    // or use assertions directly during 'cy.get()'
+    // https://on.cypress.io/assertions
+    cy.get('[data-test-id="test-example"]')
+      .should('have.attr', 'data-test-id', 'test-example')
+      .and('have.css', 'position', 'static')
+  })
+
+  it('cy.contains() - query DOM elements with matching content', () => {
+    // https://on.cypress.io/contains
+    cy.get('.query-list')
+      .contains('bananas')
+      .should('have.class', 'third')
+
+    // we can pass a regexp to `.contains()`
+    cy.get('.query-list')
+      .contains(/^b\w+/)
+      .should('have.class', 'third')
+
+    cy.get('.query-list')
+      .contains('apples')
+      .should('have.class', 'first')
+
+    // passing a selector to contains will
+    // yield the selector containing the text
+    cy.get('#querying')
+      .contains('ul', 'oranges')
+      .should('have.class', 'query-list')
+
+    cy.get('.query-button')
+      .contains('Save Form')
+      .should('have.class', 'btn')
+  })
+
+  it('.within() - query DOM elements within a specific element', () => {
+    // https://on.cypress.io/within
+    cy.get('.query-form').within(() => {
+      cy.get('input:first').should('have.attr', 'placeholder', 'Email')
+      cy.get('input:last').should('have.attr', 'placeholder', 'Password')
+    })
+  })
+
+  it('cy.root() - query the root DOM element', () => {
+    // https://on.cypress.io/root
+
+    // By default, root is the document
+    cy.root().should('match', 'html')
+
+    cy.get('.query-ul').within(() => {
+      // In this within, the root is now the ul DOM element
+      cy.root().should('have.class', 'query-ul')
+    })
+  })
+
+  it('best practices - selecting elements', () => {
+    // https://on.cypress.io/best-practices#Selecting-Elements
+    cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
+      // Worst - too generic, no context
+      cy.get('button').click()
+
+      // Bad. Coupled to styling. Highly subject to change.
+      cy.get('.btn.btn-large').click()
+
+      // Average. Coupled to the `name` attribute which has HTML semantics.
+      cy.get('[name=submission]').click()
+
+      // Better. But still coupled to styling or JS event listeners.
+      cy.get('#main').click()
+
+      // Slightly better. Uses an ID but also ensures the element
+      // has an ARIA role attribute
+      cy.get('#main[role=button]').click()
+
+      // Much better. But still coupled to text content that may change.
+      cy.contains('Submit').click()
+
+      // Best. Insulated from all changes.
+      cy.get('[data-cy=submit]').click()
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js
new file mode 100644
index 00000000..6186f3a5
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js
@@ -0,0 +1,204 @@
+/// <reference types="cypress" />
+
+context('Spies, Stubs, and Clock', () => {
+  it('cy.spy() - wrap a method in a spy', () => {
+    // https://on.cypress.io/spy
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      foo () {},
+    }
+
+    const spy = cy.spy(obj, 'foo').as('anyArgs')
+
+    obj.foo()
+
+    expect(spy).to.be.called
+  })
+
+  it('cy.spy() retries until assertions pass', () => {
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      /**
+       * Prints the argument passed
+       * @param x {any}
+      */
+      foo (x) {
+        console.log('obj.foo called with', x)
+      },
+    }
+
+    cy.spy(obj, 'foo').as('foo')
+
+    setTimeout(() => {
+      obj.foo('first')
+    }, 500)
+
+    setTimeout(() => {
+      obj.foo('second')
+    }, 2500)
+
+    cy.get('@foo').should('have.been.calledTwice')
+  })
+
+  it('cy.stub() - create a stub and/or replace a function with stub', () => {
+    // https://on.cypress.io/stub
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      /**
+       * prints both arguments to the console
+       * @param a {string}
+       * @param b {string}
+      */
+      foo (a, b) {
+        console.log('a', a, 'b', b)
+      },
+    }
+
+    const stub = cy.stub(obj, 'foo').as('foo')
+
+    obj.foo('foo', 'bar')
+
+    expect(stub).to.be.called
+  })
+
+  it('cy.clock() - control time in the browser', () => {
+    // https://on.cypress.io/clock
+
+    // create the date in UTC so it's always the same
+    // no matter what local timezone the browser is running in
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+
+    cy.clock(now)
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.get('#clock-div').click()
+    cy.get('#clock-div')
+      .should('have.text', '1489449600')
+  })
+
+  it('cy.tick() - move time in the browser', () => {
+    // https://on.cypress.io/tick
+
+    // create the date in UTC so it's always the same
+    // no matter what local timezone the browser is running in
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+
+    cy.clock(now)
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.get('#tick-div').click()
+    cy.get('#tick-div')
+      .should('have.text', '1489449600')
+
+    cy.tick(10000) // 10 seconds passed
+    cy.get('#tick-div').click()
+    cy.get('#tick-div')
+      .should('have.text', '1489449610')
+  })
+
+  it('cy.stub() matches depending on arguments', () => {
+    // see all possible matchers at
+    // https://sinonjs.org/releases/latest/matchers/
+    const greeter = {
+      /**
+       * Greets a person
+       * @param {string} name
+      */
+      greet (name) {
+        return `Hello, ${name}!`
+      },
+    }
+
+    cy.stub(greeter, 'greet')
+      .callThrough() // if you want non-matched calls to call the real method
+      .withArgs(Cypress.sinon.match.string).returns('Hi')
+      .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))
+
+    expect(greeter.greet('World')).to.equal('Hi')
+    expect(() => greeter.greet(42)).to.throw('Invalid name')
+    expect(greeter.greet).to.have.been.calledTwice
+
+    // non-matched calls goes the actual method
+    expect(greeter.greet()).to.equal('Hello, undefined!')
+  })
+
+  it('matches call arguments using Sinon matchers', () => {
+    // see all possible matchers at
+    // https://sinonjs.org/releases/latest/matchers/
+    const calculator = {
+      /**
+       * returns the sum of two arguments
+       * @param a {number}
+       * @param b {number}
+      */
+      add (a, b) {
+        return a + b
+      },
+    }
+
+    const spy = cy.spy(calculator, 'add').as('add')
+
+    expect(calculator.add(2, 3)).to.equal(5)
+
+    // if we want to assert the exact values used during the call
+    expect(spy).to.be.calledWith(2, 3)
+
+    // let's confirm "add" method was called with two numbers
+    expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)
+
+    // alternatively, provide the value to match
+    expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))
+
+    // match any value
+    expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3)
+
+    // match any value from a list
+    expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3)
+
+    /**
+     * Returns true if the given number is even
+     * @param {number} x
+     */
+    const isEven = (x) => x % 2 === 0
+
+    // expect the value to pass a custom predicate function
+    // the second argument to "sinon.match(predicate, message)" is
+    // shown if the predicate does not pass and assertion fails
+    expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)
+
+    /**
+     * Returns a function that checks if a given number is larger than the limit
+     * @param {number} limit
+     * @returns {(x: number) => boolean}
+     */
+    const isGreaterThan = (limit) => (x) => x > limit
+
+    /**
+     * Returns a function that checks if a given number is less than the limit
+     * @param {number} limit
+     * @returns {(x: number) => boolean}
+     */
+    const isLessThan = (limit) => (x) => x < limit
+
+    // you can combine several matchers using "and", "or"
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4')),
+    )
+
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3)),
+    )
+
+    // matchers can be used from BDD assertions
+    cy.get('@add').should('have.been.calledWith',
+      Cypress.sinon.match.number, Cypress.sinon.match(3))
+
+    // you can alias matchers for shorter test code
+    const { match: M } = Cypress.sinon
+
+    cy.get('@add').should('have.been.calledWith', M.number, M(3))
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/storage.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/storage.cy.js
new file mode 100644
index 00000000..0101a63e
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/storage.cy.js
@@ -0,0 +1,117 @@
+/// <reference types="cypress" />
+
+context('Local Storage / Session Storage', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/storage')
+  })
+  // Although localStorage is automatically cleared
+  // in between tests to maintain a clean state
+  // sometimes we need to clear localStorage manually
+
+  it('cy.clearLocalStorage() - clear all data in localStorage for the current origin', () => {
+    // https://on.cypress.io/clearlocalstorage
+    cy.get('.ls-btn').click()
+    cy.get('.ls-btn').should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    cy.clearLocalStorage()
+    cy.getAllLocalStorage().should(() => {
+      expect(localStorage.getItem('prop1')).to.be.null
+      expect(localStorage.getItem('prop2')).to.be.null
+      expect(localStorage.getItem('prop3')).to.be.null
+    })
+
+    cy.get('.ls-btn').click()
+    cy.get('.ls-btn').should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // Clear key matching string in localStorage
+    cy.clearLocalStorage('prop1')
+    cy.getAllLocalStorage().should(() => {
+      expect(localStorage.getItem('prop1')).to.be.null
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    cy.get('.ls-btn').click()
+    cy.get('.ls-btn').should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // Clear keys matching regex in localStorage
+    cy.clearLocalStorage(/prop1|2/)
+    cy.getAllLocalStorage().should(() => {
+      expect(localStorage.getItem('prop1')).to.be.null
+      expect(localStorage.getItem('prop2')).to.be.null
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+  })
+
+  it('cy.getAllLocalStorage() - get all data in localStorage for all origins', () => {
+    // https://on.cypress.io/getalllocalstorage
+    cy.get('.ls-btn').click()
+
+    // getAllLocalStorage() yields a map of origins to localStorage values
+    cy.getAllLocalStorage().should((storageMap) => {
+      expect(storageMap).to.deep.equal({
+        // other origins will also be present if localStorage is set on them
+        'https://example.cypress.io': {
+          'prop1': 'red',
+          'prop2': 'blue',
+          'prop3': 'magenta',
+        },
+      })
+    })
+  })
+
+  it('cy.clearAllLocalStorage() - clear all data in localStorage for all origins', () => {
+    // https://on.cypress.io/clearalllocalstorage
+    cy.get('.ls-btn').click()
+
+    // clearAllLocalStorage() yields null
+    cy.clearAllLocalStorage()
+    cy.getAllLocalStorage().should(() => {
+      expect(localStorage.getItem('prop1')).to.be.null
+      expect(localStorage.getItem('prop2')).to.be.null
+      expect(localStorage.getItem('prop3')).to.be.null
+    })
+  })
+
+  it('cy.getAllSessionStorage() - get all data in sessionStorage for all origins', () => {
+    // https://on.cypress.io/getallsessionstorage
+    cy.get('.ls-btn').click()
+
+    // getAllSessionStorage() yields a map of origins to sessionStorage values
+    cy.getAllSessionStorage().should((storageMap) => {
+      expect(storageMap).to.deep.equal({
+        // other origins will also be present if sessionStorage is set on them
+        'https://example.cypress.io': {
+          'prop4': 'cyan',
+          'prop5': 'yellow',
+          'prop6': 'black',
+        },
+      })
+    })
+  })
+
+  it('cy.clearAllSessionStorage() - clear all data in sessionStorage for all origins', () => {
+    // https://on.cypress.io/clearallsessionstorage
+    cy.get('.ls-btn').click()
+
+    // clearAllSessionStorage() yields null
+    cy.clearAllSessionStorage()
+    cy.getAllSessionStorage().should(() => {
+      expect(sessionStorage.getItem('prop4')).to.be.null
+      expect(sessionStorage.getItem('prop5')).to.be.null
+      expect(sessionStorage.getItem('prop6')).to.be.null
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/traversal.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/traversal.cy.js
new file mode 100644
index 00000000..0a3b9d33
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/traversal.cy.js
@@ -0,0 +1,121 @@
+/// <reference types="cypress" />
+
+context('Traversal', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/traversal')
+  })
+
+  it('.children() - get child DOM elements', () => {
+    // https://on.cypress.io/children
+    cy.get('.traversal-breadcrumb')
+      .children('.active')
+      .should('contain', 'Data')
+  })
+
+  it('.closest() - get closest ancestor DOM element', () => {
+    // https://on.cypress.io/closest
+    cy.get('.traversal-badge')
+      .closest('ul')
+      .should('have.class', 'list-group')
+  })
+
+  it('.eq() - get a DOM element at a specific index', () => {
+    // https://on.cypress.io/eq
+    cy.get('.traversal-list>li')
+      .eq(1).should('contain', 'siamese')
+  })
+
+  it('.filter() - get DOM elements that match the selector', () => {
+    // https://on.cypress.io/filter
+    cy.get('.traversal-nav>li')
+      .filter('.active').should('contain', 'About')
+  })
+
+  it('.find() - get descendant DOM elements of the selector', () => {
+    // https://on.cypress.io/find
+    cy.get('.traversal-pagination')
+      .find('li').find('a')
+      .should('have.length', 7)
+  })
+
+  it('.first() - get first DOM element', () => {
+    // https://on.cypress.io/first
+    cy.get('.traversal-table td')
+      .first().should('contain', '1')
+  })
+
+  it('.last() - get last DOM element', () => {
+    // https://on.cypress.io/last
+    cy.get('.traversal-buttons .btn')
+      .last().should('contain', 'Submit')
+  })
+
+  it('.next() - get next sibling DOM element', () => {
+    // https://on.cypress.io/next
+    cy.get('.traversal-ul')
+      .contains('apples').next().should('contain', 'oranges')
+  })
+
+  it('.nextAll() - get all next sibling DOM elements', () => {
+    // https://on.cypress.io/nextall
+    cy.get('.traversal-next-all')
+      .contains('oranges')
+      .nextAll().should('have.length', 3)
+  })
+
+  it('.nextUntil() - get next sibling DOM elements until next el', () => {
+    // https://on.cypress.io/nextuntil
+    cy.get('#veggies')
+      .nextUntil('#nuts').should('have.length', 3)
+  })
+
+  it('.not() - remove DOM elements from set of DOM elements', () => {
+    // https://on.cypress.io/not
+    cy.get('.traversal-disabled .btn')
+      .not('[disabled]').should('not.contain', 'Disabled')
+  })
+
+  it('.parent() - get parent DOM element from DOM elements', () => {
+    // https://on.cypress.io/parent
+    cy.get('.traversal-mark')
+      .parent().should('contain', 'Morbi leo risus')
+  })
+
+  it('.parents() - get parent DOM elements from DOM elements', () => {
+    // https://on.cypress.io/parents
+    cy.get('.traversal-cite')
+      .parents().should('match', 'blockquote')
+  })
+
+  it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
+    // https://on.cypress.io/parentsuntil
+    cy.get('.clothes-nav')
+      .find('.active')
+      .parentsUntil('.clothes-nav')
+      .should('have.length', 2)
+  })
+
+  it('.prev() - get previous sibling DOM element', () => {
+    // https://on.cypress.io/prev
+    cy.get('.birds').find('.active')
+      .prev().should('contain', 'Lorikeets')
+  })
+
+  it('.prevAll() - get all previous sibling DOM elements', () => {
+    // https://on.cypress.io/prevall
+    cy.get('.fruits-list').find('.third')
+      .prevAll().should('have.length', 2)
+  })
+
+  it('.prevUntil() - get all previous sibling DOM elements until el', () => {
+    // https://on.cypress.io/prevuntil
+    cy.get('.foods-list').find('#nuts')
+      .prevUntil('#veggies').should('have.length', 3)
+  })
+
+  it('.siblings() - get all sibling DOM elements', () => {
+    // https://on.cypress.io/siblings
+    cy.get('.traversal-pills .active')
+      .siblings().should('have.length', 2)
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/utilities.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/utilities.cy.js
new file mode 100644
index 00000000..50b224f7
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/utilities.cy.js
@@ -0,0 +1,107 @@
+/// <reference types="cypress" />
+
+context('Utilities', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/utilities')
+  })
+
+  it('Cypress._ - call a lodash method', () => {
+    // https://on.cypress.io/_
+    cy.request('https://jsonplaceholder.cypress.io/users')
+      .then((response) => {
+        let ids = Cypress._.chain(response.body).map('id').take(3).value()
+
+        expect(ids).to.deep.eq([1, 2, 3])
+      })
+  })
+
+  it('Cypress.$ - call a jQuery method', () => {
+    // https://on.cypress.io/$
+    let $li = Cypress.$('.utility-jquery li:first')
+
+    cy.wrap($li).should('not.have.class', 'active')
+    cy.wrap($li).click()
+    cy.wrap($li).should('have.class', 'active')
+  })
+
+  it('Cypress.Blob - blob utilities and base64 string conversion', () => {
+    // https://on.cypress.io/blob
+    cy.get('.utility-blob').then(($div) => {
+      // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
+      // get the dataUrl string for the javascript-logo
+      return Cypress.Blob.imgSrcToDataURL('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
+      .then((dataUrl) => {
+        // create an <img> element and set its src to the dataUrl
+        let img = Cypress.$('<img />', { src: dataUrl })
+
+        // need to explicitly return cy here since we are initially returning
+        // the Cypress.Blob.imgSrcToDataURL promise to our test
+        // append the image
+        $div.append(img)
+
+        cy.get('.utility-blob img').click()
+        cy.get('.utility-blob img').should('have.attr', 'src', dataUrl)
+      })
+    })
+  })
+
+  it('Cypress.minimatch - test out glob patterns against strings', () => {
+    // https://on.cypress.io/minimatch
+    let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
+      matchBase: true,
+    })
+
+    expect(matching, 'matching wildcard').to.be.true
+
+    matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
+      matchBase: true,
+    })
+
+    expect(matching, 'comments').to.be.false
+
+    // ** matches against all downstream path segments
+    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
+      matchBase: true,
+    })
+
+    expect(matching, 'comments').to.be.true
+
+    // whereas * matches only the next path segment
+
+    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
+      matchBase: false,
+    })
+
+    expect(matching, 'comments').to.be.false
+  })
+
+  it('Cypress.Promise - instantiate a bluebird promise', () => {
+    // https://on.cypress.io/promise
+    let waited = false
+
+    /**
+     * @return Bluebird<string>
+     */
+    function waitOneSecond () {
+      // return a promise that resolves after 1 second
+      return new Cypress.Promise((resolve, reject) => {
+        setTimeout(() => {
+          // set waited to true
+          waited = true
+
+          // resolve with 'foo' string
+          resolve('foo')
+        }, 1000)
+      })
+    }
+
+    cy.then(() => {
+      // return a promise to cy.then() that
+      // is awaited until it resolves
+      return waitOneSecond().then((str) => {
+        expect(str).to.eq('foo')
+        expect(waited).to.be.true
+      })
+    })
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js
new file mode 100644
index 00000000..a06ae206
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/viewport.cy.js
@@ -0,0 +1,58 @@
+/// <reference types="cypress" />
+context('Viewport', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/viewport')
+  })
+
+  it('cy.viewport() - set the viewport size and dimension', () => {
+    // https://on.cypress.io/viewport
+
+    cy.get('#navbar').should('be.visible')
+    cy.viewport(320, 480)
+
+    // the navbar should have collapse since our screen is smaller
+    cy.get('#navbar').should('not.be.visible')
+    cy.get('.navbar-toggle').should('be.visible').click()
+    cy.get('.nav').find('a').should('be.visible')
+
+    // lets see what our app looks like on a super large screen
+    cy.viewport(2999, 2999)
+
+    // cy.viewport() accepts a set of preset sizes
+    // to easily set the screen to a device's width and height
+
+    // We added a cy.wait() between each viewport change so you can see
+    // the change otherwise it is a little too fast to see :)
+
+    cy.viewport('macbook-15')
+    cy.wait(200)
+    cy.viewport('macbook-13')
+    cy.wait(200)
+    cy.viewport('macbook-11')
+    cy.wait(200)
+    cy.viewport('ipad-2')
+    cy.wait(200)
+    cy.viewport('ipad-mini')
+    cy.wait(200)
+    cy.viewport('iphone-6+')
+    cy.wait(200)
+    cy.viewport('iphone-6')
+    cy.wait(200)
+    cy.viewport('iphone-5')
+    cy.wait(200)
+    cy.viewport('iphone-4')
+    cy.wait(200)
+    cy.viewport('iphone-3')
+    cy.wait(200)
+
+    // cy.viewport() accepts an orientation for all presets
+    // the default orientation is 'portrait'
+    cy.viewport('ipad-2', 'portrait')
+    cy.wait(200)
+    cy.viewport('iphone-4', 'landscape')
+    cy.wait(200)
+
+    // The viewport will be reset back to the default dimensions
+    // in between tests (the  default can be set in cypress.config.{js|ts})
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/waiting.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/waiting.cy.js
new file mode 100644
index 00000000..21998f9f
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/waiting.cy.js
@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+context('Waiting', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/waiting')
+  })
+  // BE CAREFUL of adding unnecessary wait times.
+  // https://on.cypress.io/best-practices#Unnecessary-Waiting
+
+  // https://on.cypress.io/wait
+  it('cy.wait() - wait for a specific amount of time', () => {
+    cy.get('.wait-input1').type('Wait 1000ms after typing')
+    cy.wait(1000)
+    cy.get('.wait-input2').type('Wait 1000ms after typing')
+    cy.wait(1000)
+    cy.get('.wait-input3').type('Wait 1000ms after typing')
+    cy.wait(1000)
+  })
+
+  it('cy.wait() - wait for a specific route', () => {
+    // Listen to GET to comments/1
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // wait for GET comments/1
+    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/2-advanced-examples/window.cy.js b/frontend/frontend/cypress/e2e/2-advanced-examples/window.cy.js
new file mode 100644
index 00000000..f94b6497
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/2-advanced-examples/window.cy.js
@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+context('Window', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/window')
+  })
+
+  it('cy.window() - get the global window object', () => {
+    // https://on.cypress.io/window
+    cy.window().should('have.property', 'top')
+  })
+
+  it('cy.document() - get the document object', () => {
+    // https://on.cypress.io/document
+    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+  })
+
+  it('cy.title() - get the title', () => {
+    // https://on.cypress.io/title
+    cy.title().should('include', 'Kitchen Sink')
+  })
+})
diff --git a/frontend/frontend/cypress/e2e/subjectsPage/SubjectsPage.cy.js b/frontend/frontend/cypress/e2e/subjectsPage/SubjectsPage.cy.js
new file mode 100644
index 00000000..6f2ffa97
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/subjectsPage/SubjectsPage.cy.js
@@ -0,0 +1,17 @@
+describe('example to-do app', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:5173/course/1')
+      cy.task('db:seed')
+        cy.loginByAuth0Api(
+          Cypress.env('auth0_username'),
+          Cypress.env('auth0_password')
+        )
+    })
+  
+    it('has a tab switcher for active and archived courses', () => {
+      cy.get('[data-cy=tab-switcher]')
+    
+    })
+  
+  })
+  
\ No newline at end of file
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
new file mode 100644
index 00000000..8b54d7f0
--- /dev/null
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react'
+import { t } from 'i18next'
+
+
+/**
+ * This UI will show different fields for parameters regarding the restrictions template.
+ * @returns {React.ReactElement} - The rendered component.
+ */
+export default function RestrictionTemplateUI(restrictionCode: string) {
+    // There are four types of variables that can be used in a restriction template:
+    // 1. Integer
+    // 2. String
+    // 3. Boolean
+    // 4. List
+
+    const params = parseParams(restrictionCode);
+
+    return (
+        <>
+            {params.map(param => {
+                switch (param.type) {
+                    // there are four cases: integer, string, boolean, and list
+                    // for integer, we will use a number input
+                    case 'integer':
+                        return (
+                            <div>
+                                <label>{param.description}</label>
+                                <input type='number' value={param.value as number} />
+                            </div>
+                        );
+                    // for string, we will use a text input
+                    case 'string':
+                        return (
+                            <div>
+                                <label>{param.description}</label>
+                                <input type='text' value={param.value as string} />
+                            </div>
+                        );
+                    // for boolean, we will use a checkbox
+                    case 'boolean':
+                        return (
+                            <div>
+                                <label>{param.description}</label>
+                                <input type='checkbox' checked={param.value as boolean} />
+                            </div>
+                        );
+                    // for lists, we will use a drop down menu
+                    case 'array':
+                        return (
+                            <div>
+                                <label>{param.description}</label>
+                                <select>
+                                    {Array.isArray(param.value) && param.value.map((item: string) => <option value={item}>{item}</option>)}
+                                </select>
+                            </div>
+                        );
+                }
+            })}
+        
+
+        </>
+    )
+}
+
+function parseValue(value: string): string | number | boolean | any[] {
+    if (value.startsWith('"') && value.endsWith('"')) {
+        return value.slice(1, -1);
+    } else if (value === 'True' || value === 'true') {
+        return true;
+    } else if (value === 'False' || value === 'false') {
+        return false;
+    } else if (!isNaN(parseInt(value))) {
+        return parseInt(value);
+    } else if (value.startsWith('[') && value.endsWith(']')) {
+        // Python-style list
+        return value.slice(1, -1).split(',').map(item => parseValue(item.trim()));
+    } else if (value.startsWith('(') && value.endsWith(')')) {
+        // Bash-style list
+        return value.slice(1, -1).split(' ').map(item => parseValue(item.trim()));
+    } else {
+        return value;
+    }
+}
+
+function parseParams(code: string) {
+    // Parse the restriction code into different fields
+    const params = [];
+    const lines = code.split('\n');
+    let description = '';
+    
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i].trim();
+
+        if (line.startsWith('#@param')) {
+            description = lines[i + 1].trim().replace(/^# ?/, '');
+            const variableLine = lines[i + 2].trim();
+            const [variable, value] = variableLine.split('=').map(str => str.trim());
+
+            let parsedValue = parseValue(value);
+
+            params.push({type: Array.isArray(parsedValue) ? 'array' : typeof(parsedValue), description, variable, value: parsedValue});
+        }
+    }
+
+    return params;
+}
+

From f1358d13ff9d3d1a4047e8b5b29349a10351c379 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Sun, 5 May 2024 11:44:28 +0200
Subject: [PATCH 005/145] begin implementatie groepen kiezen

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index de323cd4..f7e63c6f 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -44,6 +44,8 @@ export function ChooseGroup() {
     const [groups,setGroups]=useState<Group[]>([]);
     const [open,setOpen] = useState<boolean>(false);
 
+    const [user, setUser] = useState<User>()
+
     //const assignmentId = params.assignmentId
     const assignmentId = 14
 
@@ -52,6 +54,14 @@ export function ChooseGroup() {
     }
 
     useEffect(()=>{
+        instance
+            .get('/gebruikers/me/')
+            .then((res) => {
+                setUser(res.data)
+            })
+            .catch((err) => {
+                console.log(err)
+            })
         instance.get('projecten/'+assignmentId)
             .then((res) =>{
                 instance.get('vakken/'+res.data.vak)
@@ -160,12 +170,34 @@ export function ChooseGroup() {
                     >
                         {groups.map((group: Group) => {
                             //const group=getGroup(id)
+
+                            const handleJoin = () =>{
+                                //console.log(groups)
+                                setGroups((oldGroups)=>{
+                                    console.log("setGroups")
+                                    for (let i = 0; i < oldGroups.length; i++) {
+                                        if(oldGroups[i].groep_id==group.groep_id){
+                                            console.log(oldGroups[i])
+                                            const newgroup={
+                                                groep_id: group.groep_id,
+                                                project: group.project,
+                                                studenten: [...group.studenten,user.user],
+                                            }
+                                            oldGroups[i]=newgroup
+                                            console.log(oldGroups[i])
+                                        }
+                                    }
+                                    return oldGroups
+                                })
+                                //console.log(groups)
+                            }
+
                             return (
                                 <>
                                     <ListItem
                                         sx={{
                                             width: '100%',
-                                            height: 30,
+                                            //minheight: 30,
                                             display: 'flex',
                                             flexDirection: 'row',
                                             justifyContent: 'space-between',
@@ -179,12 +211,13 @@ export function ChooseGroup() {
                                             primary={group.groep_id}
                                         />
 
-                                        <Box flexDirection={'column'}>
-                                            {group.studenten.map((studentid)=>{
-
-                                                //return studenten[studentid].first_name
+                                        <ListItemText
+                                            sx={{ maxWidth: 100 }}
+                                            primary={group.studenten}
+                                        />
 
-                                                //console.log(students)
+                                        <Box display={'flex'} flexDirection={'column'}>
+                                            {group.studenten.map((studentid)=>{
                                                 if(studenten[studentid]!=undefined){
                                                     return (
                                                         <>
@@ -201,6 +234,7 @@ export function ChooseGroup() {
                                         <IconButton
                                             size={'small'}
                                             sx={{ marginBottom: 1 }}
+                                            onClick={handleJoin}
                                         >
                                             <AddCircle />
                                         </IconButton>

From c6101aa273031a56b07152d6564fc0c3bc08c649 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 5 May 2024 14:18:39 +0200
Subject: [PATCH 006/145] setup template interface

---
 frontend/frontend/src/i18n/en.ts              |   3 +-
 frontend/frontend/src/i18n/nl.ts              |   3 +-
 .../RestrictionsDialog.tsx                    | 103 ++++++++++++++++--
 ...s.timestamp-1712075430286-84211051e338.mjs |   8 --
 4 files changed, 95 insertions(+), 22 deletions(-)
 delete mode 100644 frontend/frontend/vite.config.ts.timestamp-1712075430286-84211051e338.mjs

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 71171486..8873c54e 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -99,7 +99,8 @@ const english = {
     join_course: 'Join course?',
     join: 'Join',
     acces: 'This gives you access to the course.',
-    deadlines_on: 'Deadlines on'
+    deadlines_on: 'Deadlines on',
+    open_with_ui: 'Open with UI'
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 3d531a24..32d6e818 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -99,7 +99,8 @@ const dutch = {
     join_course: 'Voeg vak toe?',
     join: 'Voeg toe',
     acces: 'Dit geeft je toegang tot het vak.',
-    deadlines_on: 'Deadlines op'
+    deadlines_on: 'Deadlines op',
+    open_with_ui: 'Open met UI'
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 63e34a1c..4e6fbbcd 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -19,6 +19,7 @@ import { t } from 'i18next'
 import { restriction } from './AddChangeAssignmentPage.tsx'
 import Switch from '@mui/material/Switch'
 import WarningPopup from '../../components/WarningPopup.tsx'
+import RestrictionsTemplateUI from './RestrictionTemplateUI.tsx'
 
 interface RestrictionsDialogProps {
     restrictions: restriction[]
@@ -31,6 +32,21 @@ enum restrictionExtension {
     Python = '.py',
 }
 
+const code = `
+
+#@param
+# Schrijf in dit veld je voornaam.
+naam=""
+
+#@param
+# Schrijf in dit veld je leeftijd.
+leeftijd=0
+
+# de constante pi, nodig voor wanneer we de omtrek berekenen van het object dat de student indient.
+pi=3.14159
+
+#code...`
+
 /**
  * Dialog component for managing restrictions related to file uploads.
  * @param {Object} props - Props object.
@@ -42,8 +58,10 @@ export default function RestrictionsDialog({
     setRestrictions,
     closeParentDialog,
 }: RestrictionsDialogProps) {
-    const [open, setOpen] = useState(false)
+    const [openTextEditor, setOpenTextEditor] = useState(false)
+    const [openTemplateInterface, setOpenTemplateInterface] = useState(false)
     const [mustPass, setMustPass] = useState(false)
+    const [openTemplateInUI, setOpenTemplateInUI] = useState(false)
     const [textFieldContent, setTextFieldContent] = useState('')
     const [restrictionName, setRestrictionName] = useState('')
     const [restrictionType, setRestrictionType] =
@@ -69,7 +87,7 @@ export default function RestrictionsDialog({
             }
         }
         setRestrictions([...restrictions, ...newRestrictions])
-        handleClose()
+        closeParentDialog()
     }
 
     //handle the submission of the form
@@ -89,11 +107,15 @@ export default function RestrictionsDialog({
             moet_slagen: mustPass,
         }
         setRestrictions([...restrictions, newRestriction])
-        handleClose()
+        handleCloseTextEditor()
+    }
+
+    const handleClickOpenTextEditor = () => {
+        setOpenTextEditor(true)
     }
 
-    const handleClickOpen = () => {
-        setOpen(true)
+    const handleClickOpenTemplateInterface = () => {
+        setOpenTemplateInterface(true)
     }
 
     // Buttons array for the vertical button group
@@ -105,15 +127,22 @@ export default function RestrictionsDialog({
         <Button
             key="New_Script"
             onClick={() => {
-                handleClickOpen()
+                handleClickOpenTextEditor()
             }}
         >
             {t('new_script')}
         </Button>,
+    ]
+
+    const templates = [
         <Button
             key="FileExtensionCheck"
             onClick={() => {
-                handleClickOpen()
+                if (openTemplateInUI) {
+                    handleClickOpenTemplateInterface()
+                } else {
+                    handleClickOpenTextEditor()
+                }
             }}
         >
             File Extension Check
@@ -121,15 +150,24 @@ export default function RestrictionsDialog({
         <Button
             key="FilesPresentCheck"
             onClick={() => {
-                handleClickOpen()
+                if (openTemplateInUI) {
+                    handleClickOpenTemplateInterface()
+                } else {
+                    handleClickOpenTextEditor()
+                }
             }}
         >
             Files Present Check
         </Button>,
     ]
 
-    const handleClose = () => {
-        setOpen(false)
+    const handleCloseTextEditor = () => {
+        setOpenTextEditor(false)
+        closeParentDialog()
+    }
+
+    const handleCloseTemplateInterface = () => {
+        setOpenTemplateInterface(false)
         closeParentDialog()
     }
 
@@ -153,6 +191,24 @@ export default function RestrictionsDialog({
             >
                 {buttons}
             </ButtonGroup>
+            <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
+                {/* This box will contain the templates */}
+                <Typography variant={'body2'}>
+                    {t('open_with_ui') + ':'}
+                </Typography>
+                <Switch
+                    value={openTemplateInUI}
+                    onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
+                />
+                <ButtonGroup
+                    orientation="vertical"
+                    aria-label="Vertical button group"
+                    variant={'outlined'}
+                    color={'primary'}
+                >
+                    {templates}
+                </ButtonGroup>
+            </Box>
             <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
                 <Typography variant={'body2'}>
                     {t('must_pass') + ':'}
@@ -162,8 +218,31 @@ export default function RestrictionsDialog({
                     onChange={() => setMustPass(!mustPass)}
                 />
             </Box>
+            {/* This is the template interface. */}
+            <Dialog fullScreen open={openTemplateInterface} onClose={handleCloseTemplateInterface}>
+                <Box>
+                    <AppBar sx={{ position: 'relative' }}>
+                        <Toolbar>
+                            <IconButton
+                                edge="start"
+                                color="inherit"
+                                onClick={handleCloseTemplateInterface}
+                                aria-label="close"
+                            >
+                                <CloseIcon />
+                            </IconButton>
+                            <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
+                                {t('new_script')}
+                            </Typography>
+                        </Toolbar>
+                    </AppBar>
+                    <Box aria-label={'Content'} padding={1}>
+                        {RestrictionsTemplateUI(code)}
+                    </Box>
+                </Box>
+            </Dialog>
             {/* This is the code editor. */}
-            <Dialog fullScreen open={open} onClose={handleClose}>
+            <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>
                 <Box>
                     <AppBar sx={{ position: 'relative' }}>
                         <Toolbar>
@@ -183,7 +262,7 @@ export default function RestrictionsDialog({
                                     <IconButton
                                         edge="start"
                                         color="inherit"
-                                        onClick={handleClose}
+                                        onClick={handleCloseTextEditor}
                                         aria-label="close"
                                     >
                                         <CloseIcon />
diff --git a/frontend/frontend/vite.config.ts.timestamp-1712075430286-84211051e338.mjs b/frontend/frontend/vite.config.ts.timestamp-1712075430286-84211051e338.mjs
deleted file mode 100644
index e4a3d6c6..00000000
--- a/frontend/frontend/vite.config.ts.timestamp-1712075430286-84211051e338.mjs
+++ /dev/null
@@ -1,8 +0,0 @@
-// vite.config.ts
-import { defineConfig } from 'file:///home/ticoucke/Dropbox/TIMON/Informatica3Ba/SEL2/UGent-4/frontend/frontend/node_modules/vite/dist/node/index.js'
-import react from 'file:///home/ticoucke/Dropbox/TIMON/Informatica3Ba/SEL2/UGent-4/frontend/frontend/node_modules/@vitejs/plugin-react/dist/index.mjs'
-var vite_config_default = defineConfig({
-    plugins: [react()],
-})
-export { vite_config_default as default }
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS90aWNvdWNrZS9Ecm9wYm94L1RJTU9OL0luZm9ybWF0aWNhM0JhL1NFTDIvVUdlbnQtNC9mcm9udGVuZC9mcm9udGVuZFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvdGljb3Vja2UvRHJvcGJveC9USU1PTi9JbmZvcm1hdGljYTNCYS9TRUwyL1VHZW50LTQvZnJvbnRlbmQvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvdGljb3Vja2UvRHJvcGJveC9USU1PTi9JbmZvcm1hdGljYTNCYS9TRUwyL1VHZW50LTQvZnJvbnRlbmQvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3JlYWN0KCldLFxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBZ1osU0FBUyxvQkFBb0I7QUFDN2EsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

From 1759f189e7b382783d28d643b5759f2c76df0783 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 5 May 2024 14:34:39 +0200
Subject: [PATCH 007/145] update RestrictionTemplateUI

---
 .../RestrictionTemplateUI.tsx                 | 25 +++++++++++--------
 .../RestrictionsDialog.tsx                    |  8 ++++++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 8b54d7f0..ecdb5f51 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -17,13 +17,12 @@ export default function RestrictionTemplateUI(restrictionCode: string) {
 
     return (
         <>
-            {params.map(param => {
+            {params.map((param, index) => {
                 switch (param.type) {
-                    // there are four cases: integer, string, boolean, and list
                     // for integer, we will use a number input
-                    case 'integer':
+                    case 'number':
                         return (
-                            <div>
+                            <div key={index} style={{ marginBottom: '25px' }}>
                                 <label>{param.description}</label>
                                 <input type='number' value={param.value as number} />
                             </div>
@@ -31,7 +30,7 @@ export default function RestrictionTemplateUI(restrictionCode: string) {
                     // for string, we will use a text input
                     case 'string':
                         return (
-                            <div>
+                            <div key={index} style={{ marginBottom: '25px' }}>
                                 <label>{param.description}</label>
                                 <input type='text' value={param.value as string} />
                             </div>
@@ -39,7 +38,7 @@ export default function RestrictionTemplateUI(restrictionCode: string) {
                     // for boolean, we will use a checkbox
                     case 'boolean':
                         return (
-                            <div>
+                            <div key={index} style={{ marginBottom: '25px' }}>
                                 <label>{param.description}</label>
                                 <input type='checkbox' checked={param.value as boolean} />
                             </div>
@@ -47,18 +46,21 @@ export default function RestrictionTemplateUI(restrictionCode: string) {
                     // for lists, we will use a drop down menu
                     case 'array':
                         return (
-                            <div>
+                            <div key={index} style={{ marginBottom: '25px' }}>
                                 <label>{param.description}</label>
                                 <select>
-                                    {Array.isArray(param.value) && param.value.map((item: string) => <option value={item}>{item}</option>)}
+                                    {Array.isArray(param.value) && param.value.map((item: string, idx: number) => (
+                                        <option key={idx} value={item}>{item}</option>
+                                    ))}
                                 </select>
                             </div>
                         );
+                    default:
+                        return null; // Handle unsupported types
                 }
             })}
-        
+</>
 
-        </>
     )
 }
 
@@ -102,6 +104,9 @@ function parseParams(code: string) {
         }
     }
 
+    console.log("params length:");
+    console.log(params.length);
+
     return params;
 }
 
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 4e6fbbcd..5972e795 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -42,6 +42,14 @@ naam=""
 # Schrijf in dit veld je leeftijd.
 leeftijd=0
 
+#@param
+# Ben je lesgever?
+lesgever=False
+
+#@param
+# Welke bestanden moeten aanwezig zijn?
+bestanden=["main.py", "test.py"]
+
 # de constante pi, nodig voor wanneer we de omtrek berekenen van het object dat de student indient.
 pi=3.14159
 

From 92e530125f18f0f1d6d59c784c2afb430ffefeae Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 5 May 2024 15:35:59 +0200
Subject: [PATCH 008/145] template UI mooier maken

---
 frontend/frontend/package-lock.json           | 7726 ++++++++++++++++-
 frontend/frontend/package-lock.json.orig      | 4382 ----------
 .../RestrictionTemplateUI.tsx                 |  123 +-
 3 files changed, 7797 insertions(+), 4434 deletions(-)
 delete mode 100644 frontend/frontend/package-lock.json.orig

diff --git a/frontend/frontend/package-lock.json b/frontend/frontend/package-lock.json
index 4a41e995..aff624ea 100644
--- a/frontend/frontend/package-lock.json
+++ b/frontend/frontend/package-lock.json
@@ -1,6 +1,7722 @@
 {
-  "name": "frontend",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {}
-}
\ No newline at end of file
+    "name": "frontend",
+    "version": "0.0.0",
+    "lockfileVersion": 2,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "frontend",
+            "version": "0.0.0",
+            "dependencies": {
+                "@azure/msal-browser": "^3.11.0",
+                "@azure/msal-react": "^2.0.13",
+                "@emotion/react": "^11.11.4",
+                "@emotion/styled": "^11.11.0",
+                "@fontsource/roboto": "^5.0.8",
+                "@mui/icons-material": "^5.15.11",
+                "@mui/material": "^5.15.12",
+                "@mui/x-date-pickers": "^6.19.6",
+                "axios": "^1.6.7",
+                "dayjs": "^1.11.10",
+                "husky": "^9.0.11",
+                "i18next": "^23.10.0",
+                "i18next-browser-languagedetector": "^7.2.0",
+                "i18next-http-backend": "^2.5.0",
+                "jszip": "^3.10.1",
+                "localforage": "^1.10.0",
+                "match-sorter": "^6.3.4",
+                "papaparse": "^5.4.1",
+                "react": "^18.2.0",
+                "react-dom": "^18.2.0",
+                "react-helmet": "^6.1.0",
+                "react-helmet-async": "^2.0.4",
+                "react-i18next": "^14.0.5",
+                "react-router-dom": "^6.22.2"
+            },
+            "devDependencies": {
+                "@types/papaparse": "^5.3.14",
+                "@types/react": "^18.2.56",
+                "@types/react-dom": "^18.2.19",
+                "@types/react-helmet": "^6.1.11",
+                "@typescript-eslint/eslint-plugin": "^7.0.2",
+                "@typescript-eslint/parser": "^7.0.2",
+                "@vitejs/plugin-react": "^4.2.1",
+                "eslint": "^8.56.0",
+                "eslint-config-prettier": "^9.1.0",
+                "eslint-plugin-prettier": "^5.1.3",
+                "eslint-plugin-react-hooks": "^4.6.0",
+                "eslint-plugin-react-refresh": "^0.4.5",
+                "husky": "^7.0.0",
+                "prettier": "^3.2.5",
+                "typescript": "^5.2.2",
+                "vite": "^5.1.7"
+            }
+        },
+        "node_modules/@ampproject/remapping": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+            "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@azure/msal-browser": {
+            "version": "3.13.0",
+            "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.13.0.tgz",
+            "integrity": "sha512-fD906nmJei3yE7la6DZTdUtXKvpwzJURkfsiz9747Icv4pit77cegSm6prJTKLQ1fw4iiZzrrWwxnhMLrTf5gQ==",
+            "dependencies": {
+                "@azure/msal-common": "14.9.0"
+            },
+            "engines": {
+                "node": ">=0.8.0"
+            }
+        },
+        "node_modules/@azure/msal-common": {
+            "version": "14.9.0",
+            "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.9.0.tgz",
+            "integrity": "sha512-yzBPRlWPnTBeixxLNI3BBIgF5/bHpbhoRVuuDBnYjCyWRavaPUsKAHUDYLqpGkBLDciA6TCc6GOxN4/S3WiSxg==",
+            "engines": {
+                "node": ">=0.8.0"
+            }
+        },
+        "node_modules/@azure/msal-react": {
+            "version": "2.0.15",
+            "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-2.0.15.tgz",
+            "integrity": "sha512-WtZGPxA6rWqGhovmWPUXjUyKTp/TUa4Oekk6FSa9ldCayd1QzYT9XcoAEqA0EfT0Fx12KiNvJyDDKckBU6J/+Q==",
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@azure/msal-browser": "^3.13.0",
+                "react": "^16.8.0 || ^17 || ^18"
+            }
+        },
+        "node_modules/@babel/code-frame": {
+            "version": "7.24.2",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+            "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
+            "dependencies": {
+                "@babel/highlight": "^7.24.2",
+                "picocolors": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/compat-data": {
+            "version": "7.24.4",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+            "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/core": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.5.tgz",
+            "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==",
+            "dev": true,
+            "dependencies": {
+                "@ampproject/remapping": "^2.2.0",
+                "@babel/code-frame": "^7.24.2",
+                "@babel/generator": "^7.24.5",
+                "@babel/helper-compilation-targets": "^7.23.6",
+                "@babel/helper-module-transforms": "^7.24.5",
+                "@babel/helpers": "^7.24.5",
+                "@babel/parser": "^7.24.5",
+                "@babel/template": "^7.24.0",
+                "@babel/traverse": "^7.24.5",
+                "@babel/types": "^7.24.5",
+                "convert-source-map": "^2.0.0",
+                "debug": "^4.1.0",
+                "gensync": "^1.0.0-beta.2",
+                "json5": "^2.2.3",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/babel"
+            }
+        },
+        "node_modules/@babel/core/node_modules/convert-source-map": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+            "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+            "dev": true
+        },
+        "node_modules/@babel/core/node_modules/semver": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "dev": true,
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.5.tgz",
+            "integrity": "sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.24.5",
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25",
+                "jsesc": "^2.5.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-compilation-targets": {
+            "version": "7.23.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+            "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/compat-data": "^7.23.5",
+                "@babel/helper-validator-option": "^7.23.5",
+                "browserslist": "^4.22.2",
+                "lru-cache": "^5.1.1",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "dev": true,
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
+        "node_modules/@babel/helper-environment-visitor": {
+            "version": "7.22.20",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+            "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-function-name": {
+            "version": "7.23.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+            "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/template": "^7.22.15",
+                "@babel/types": "^7.23.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-hoist-variables": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+            "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-imports": {
+            "version": "7.24.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+            "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+            "dependencies": {
+                "@babel/types": "^7.24.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-transforms": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz",
+            "integrity": "sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-environment-visitor": "^7.22.20",
+                "@babel/helper-module-imports": "^7.24.3",
+                "@babel/helper-simple-access": "^7.24.5",
+                "@babel/helper-split-export-declaration": "^7.24.5",
+                "@babel/helper-validator-identifier": "^7.24.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-plugin-utils": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
+            "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-simple-access": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz",
+            "integrity": "sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.24.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-split-export-declaration": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz",
+            "integrity": "sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.24.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-string-parser": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+            "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-identifier": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
+            "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-option": {
+            "version": "7.23.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+            "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helpers": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.5.tgz",
+            "integrity": "sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==",
+            "dev": true,
+            "dependencies": {
+                "@babel/template": "^7.24.0",
+                "@babel/traverse": "^7.24.5",
+                "@babel/types": "^7.24.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/highlight": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
+            "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.24.5",
+                "chalk": "^2.4.2",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/parser": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
+            "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
+            "dev": true,
+            "bin": {
+                "parser": "bin/babel-parser.js"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-jsx-self": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.5.tgz",
+            "integrity": "sha512-RtCJoUO2oYrYwFPtR1/jkoBEcFuI1ae9a9IMxeyAVa3a1Ap4AnxmyIKG2b2FaJKqkidw/0cxRbWN+HOs6ZWd1w==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.24.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-jsx-source": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.1.tgz",
+            "integrity": "sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.24.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/runtime": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+            "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
+            "dependencies": {
+                "regenerator-runtime": "^0.14.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/template": {
+            "version": "7.24.0",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+            "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/code-frame": "^7.23.5",
+                "@babel/parser": "^7.24.0",
+                "@babel/types": "^7.24.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/traverse": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.5.tgz",
+            "integrity": "sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/code-frame": "^7.24.2",
+                "@babel/generator": "^7.24.5",
+                "@babel/helper-environment-visitor": "^7.22.20",
+                "@babel/helper-function-name": "^7.23.0",
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.24.5",
+                "@babel/parser": "^7.24.5",
+                "@babel/types": "^7.24.5",
+                "debug": "^4.3.1",
+                "globals": "^11.1.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/types": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
+            "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.24.1",
+                "@babel/helper-validator-identifier": "^7.24.5",
+                "to-fast-properties": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@emotion/babel-plugin": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+            "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.16.7",
+                "@babel/runtime": "^7.18.3",
+                "@emotion/hash": "^0.9.1",
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/serialize": "^1.1.2",
+                "babel-plugin-macros": "^3.1.0",
+                "convert-source-map": "^1.5.0",
+                "escape-string-regexp": "^4.0.0",
+                "find-root": "^1.1.0",
+                "source-map": "^0.5.7",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/cache": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+            "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+            "dependencies": {
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/sheet": "^1.2.2",
+                "@emotion/utils": "^1.2.1",
+                "@emotion/weak-memoize": "^0.3.1",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/hash": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+            "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+        },
+        "node_modules/@emotion/is-prop-valid": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+            "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+            "dependencies": {
+                "@emotion/memoize": "^0.8.1"
+            }
+        },
+        "node_modules/@emotion/memoize": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+            "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+        },
+        "node_modules/@emotion/react": {
+            "version": "11.11.4",
+            "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+            "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+            "dependencies": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.11.0",
+                "@emotion/cache": "^11.11.0",
+                "@emotion/serialize": "^1.1.3",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+                "@emotion/utils": "^1.2.1",
+                "@emotion/weak-memoize": "^0.3.1",
+                "hoist-non-react-statics": "^3.3.1"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emotion/serialize": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+            "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+            "dependencies": {
+                "@emotion/hash": "^0.9.1",
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/unitless": "^0.8.1",
+                "@emotion/utils": "^1.2.1",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@emotion/sheet": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+            "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+        },
+        "node_modules/@emotion/styled": {
+            "version": "11.11.5",
+            "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+            "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.11.0",
+                "@emotion/is-prop-valid": "^1.2.2",
+                "@emotion/serialize": "^1.1.4",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+                "@emotion/utils": "^1.2.1"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.0.0-rc.0",
+                "react": ">=16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emotion/unitless": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+            "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+        },
+        "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+            "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
+        "node_modules/@emotion/utils": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+            "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+        },
+        "node_modules/@emotion/weak-memoize": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+            "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+        },
+        "node_modules/@esbuild/aix-ppc64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+            "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "aix"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+            "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+            "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+            "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+            "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+            "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+            "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+            "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+            "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+            "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+            "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+            "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+            "cpu": [
+                "loong64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+            "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+            "cpu": [
+                "mips64el"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+            "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+            "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+            "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+            "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+            "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+            "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+            "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+            "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@eslint-community/eslint-utils": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+            "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+            "dev": true,
+            "dependencies": {
+                "eslint-visitor-keys": "^3.3.0"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+            }
+        },
+        "node_modules/@eslint-community/regexpp": {
+            "version": "4.10.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+            "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+            "dev": true,
+            "engines": {
+                "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@eslint/eslintrc": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+            "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+            "dev": true,
+            "dependencies": {
+                "ajv": "^6.12.4",
+                "debug": "^4.3.2",
+                "espree": "^9.6.0",
+                "globals": "^13.19.0",
+                "ignore": "^5.2.0",
+                "import-fresh": "^3.2.1",
+                "js-yaml": "^4.1.0",
+                "minimatch": "^3.1.2",
+                "strip-json-comments": "^3.1.1"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/globals": {
+            "version": "13.24.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+            "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+            "dev": true,
+            "dependencies": {
+                "type-fest": "^0.20.2"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/@eslint/js": {
+            "version": "8.57.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+            "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+            "dev": true,
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@floating-ui/core": {
+            "version": "1.6.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
+            "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+            "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+            "dependencies": {
+                "@floating-ui/core": "^1.0.0",
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.0.9",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
+            "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+            "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+        },
+        "node_modules/@fontsource/roboto": {
+            "version": "5.0.13",
+            "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.13.tgz",
+            "integrity": "sha512-j61DHjsdUCKMXSdNLTOxcG701FWnF0jcqNNQi2iPCDxU8seN/sMxeh62dC++UiagCWq9ghTypX+Pcy7kX+QOeQ=="
+        },
+        "node_modules/@humanwhocodes/config-array": {
+            "version": "0.11.14",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+            "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+            "dev": true,
+            "dependencies": {
+                "@humanwhocodes/object-schema": "^2.0.2",
+                "debug": "^4.3.1",
+                "minimatch": "^3.0.5"
+            },
+            "engines": {
+                "node": ">=10.10.0"
+            }
+        },
+        "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/@humanwhocodes/module-importer": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+            "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+            "dev": true,
+            "engines": {
+                "node": ">=12.22"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@humanwhocodes/object-schema": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+            "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+            "dev": true
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.5",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+            "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/set-array": "^1.2.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/set-array": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+            "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.4.15",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+            "dev": true
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.25",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+            "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@mui/base": {
+            "version": "5.0.0-beta.40",
+            "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+            "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@floating-ui/react-dom": "^2.0.8",
+                "@mui/types": "^7.2.14",
+                "@mui/utils": "^5.15.14",
+                "@popperjs/core": "^2.11.8",
+                "clsx": "^2.1.0",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/core-downloads-tracker": {
+            "version": "5.15.16",
+            "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
+            "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            }
+        },
+        "node_modules/@mui/icons-material": {
+            "version": "5.15.16",
+            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz",
+            "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@mui/material": "^5.0.0",
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/material": {
+            "version": "5.15.16",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
+            "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/base": "5.0.0-beta.40",
+                "@mui/core-downloads-tracker": "^5.15.16",
+                "@mui/system": "^5.15.15",
+                "@mui/types": "^7.2.14",
+                "@mui/utils": "^5.15.14",
+                "@types/react-transition-group": "^4.4.10",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0",
+                "react-transition-group": "^4.4.5"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/private-theming": {
+            "version": "5.15.14",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+            "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/utils": "^5.15.14",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/styled-engine": {
+            "version": "5.15.14",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+            "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@emotion/cache": "^11.11.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.4.1",
+                "@emotion/styled": "^11.3.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/system": {
+            "version": "5.15.15",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+            "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/private-theming": "^5.15.14",
+                "@mui/styled-engine": "^5.15.14",
+                "@mui/types": "^7.2.14",
+                "@mui/utils": "^5.15.14",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.5.0",
+                "@emotion/styled": "^11.3.0",
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/types": {
+            "version": "7.2.14",
+            "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+            "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/utils": {
+            "version": "5.15.14",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+            "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "@types/prop-types": "^15.7.11",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui-org"
+            },
+            "peerDependencies": {
+                "@types/react": "^17.0.0 || ^18.0.0",
+                "react": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@mui/x-date-pickers": {
+            "version": "6.19.9",
+            "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.9.tgz",
+            "integrity": "sha512-B2m4Fv/fOme5qmV6zuE3QnWQSvj3zKtI2OvikPz5prpiCcIxqpeytkQ7VfrWH3/Aqd5yhG1Yr4IgbqG0ymIXGg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.2",
+                "@mui/base": "^5.0.0-beta.22",
+                "@mui/utils": "^5.14.16",
+                "@types/react-transition-group": "^4.4.8",
+                "clsx": "^2.0.0",
+                "prop-types": "^15.8.1",
+                "react-transition-group": "^4.4.5"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/mui"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.9.0",
+                "@emotion/styled": "^11.8.1",
+                "@mui/material": "^5.8.6",
+                "@mui/system": "^5.8.0",
+                "date-fns": "^2.25.0 || ^3.2.0",
+                "date-fns-jalali": "^2.13.0-0",
+                "dayjs": "^1.10.7",
+                "luxon": "^3.0.2",
+                "moment": "^2.29.4",
+                "moment-hijri": "^2.1.2",
+                "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+                "react": "^17.0.0 || ^18.0.0",
+                "react-dom": "^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/react": {
+                    "optional": true
+                },
+                "@emotion/styled": {
+                    "optional": true
+                },
+                "date-fns": {
+                    "optional": true
+                },
+                "date-fns-jalali": {
+                    "optional": true
+                },
+                "dayjs": {
+                    "optional": true
+                },
+                "luxon": {
+                    "optional": true
+                },
+                "moment": {
+                    "optional": true
+                },
+                "moment-hijri": {
+                    "optional": true
+                },
+                "moment-jalaali": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@nodelib/fs.scandir": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+            "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+            "dev": true,
+            "dependencies": {
+                "@nodelib/fs.stat": "2.0.5",
+                "run-parallel": "^1.1.9"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nodelib/fs.stat": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+            "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+            "dev": true,
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nodelib/fs.walk": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+            "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+            "dev": true,
+            "dependencies": {
+                "@nodelib/fs.scandir": "2.1.5",
+                "fastq": "^1.6.0"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@pkgr/core": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+            "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+            "dev": true,
+            "engines": {
+                "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unts"
+            }
+        },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
+        "node_modules/@remix-run/router": {
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+            "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/@rollup/rollup-android-arm-eabi": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
+            "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-android-arm64": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
+            "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-arm64": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
+            "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-darwin-x64": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
+            "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
+            "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
+            "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
+            "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-arm64-musl": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
+            "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
+            "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
+            "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-s390x-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
+            "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
+            "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-x64-musl": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
+            "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-arm64-msvc": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
+            "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-ia32-msvc": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
+            "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@rollup/rollup-win32-x64-msvc": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
+            "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@types/babel__core": {
+            "version": "7.20.5",
+            "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+            "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/parser": "^7.20.7",
+                "@babel/types": "^7.20.7",
+                "@types/babel__generator": "*",
+                "@types/babel__template": "*",
+                "@types/babel__traverse": "*"
+            }
+        },
+        "node_modules/@types/babel__generator": {
+            "version": "7.6.8",
+            "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+            "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "node_modules/@types/babel__template": {
+            "version": "7.4.4",
+            "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+            "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/parser": "^7.1.0",
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "node_modules/@types/babel__traverse": {
+            "version": "7.20.5",
+            "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+            "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.20.7"
+            }
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+            "dev": true
+        },
+        "node_modules/@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "dev": true
+        },
+        "node_modules/@types/node": {
+            "version": "20.12.8",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
+            "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
+            "dev": true,
+            "dependencies": {
+                "undici-types": "~5.26.4"
+            }
+        },
+        "node_modules/@types/papaparse": {
+            "version": "5.3.14",
+            "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.14.tgz",
+            "integrity": "sha512-LxJ4iEFcpqc6METwp9f6BV6VVc43m6MfH0VqFosHvrUgfXiFe6ww7R3itkOQ+TCK6Y+Iv/+RnnvtRZnkc5Kc9g==",
+            "dev": true,
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
+        "node_modules/@types/parse-json": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+            "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+        },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.12",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+            "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+        },
+        "node_modules/@types/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "18.3.0",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+            "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+            "dev": true,
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
+        "node_modules/@types/react-helmet": {
+            "version": "6.1.11",
+            "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+            "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+            "dev": true,
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
+        "node_modules/@types/react-transition-group": {
+            "version": "4.4.10",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+            "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
+        "node_modules/@types/semver": {
+            "version": "7.5.8",
+            "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+            "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
+            "dev": true
+        },
+        "node_modules/@typescript-eslint/eslint-plugin": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.8.0.tgz",
+            "integrity": "sha512-gFTT+ezJmkwutUPmB0skOj3GZJtlEGnlssems4AjkVweUPGj7jRwwqg0Hhg7++kPGJqKtTYx+R05Ftww372aIg==",
+            "dev": true,
+            "dependencies": {
+                "@eslint-community/regexpp": "^4.10.0",
+                "@typescript-eslint/scope-manager": "7.8.0",
+                "@typescript-eslint/type-utils": "7.8.0",
+                "@typescript-eslint/utils": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0",
+                "debug": "^4.3.4",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.3.1",
+                "natural-compare": "^1.4.0",
+                "semver": "^7.6.0",
+                "ts-api-utils": "^1.3.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "@typescript-eslint/parser": "^7.0.0",
+                "eslint": "^8.56.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/parser": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.8.0.tgz",
+            "integrity": "sha512-KgKQly1pv0l4ltcftP59uQZCi4HUYswCLbTqVZEJu7uLX8CTLyswqMLqLN+2QFz4jCptqWVV4SB7vdxcH2+0kQ==",
+            "dev": true,
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "7.8.0",
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/typescript-estree": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0",
+                "debug": "^4.3.4"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.56.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/scope-manager": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.8.0.tgz",
+            "integrity": "sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==",
+            "dev": true,
+            "dependencies": {
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/type-utils": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.8.0.tgz",
+            "integrity": "sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==",
+            "dev": true,
+            "dependencies": {
+                "@typescript-eslint/typescript-estree": "7.8.0",
+                "@typescript-eslint/utils": "7.8.0",
+                "debug": "^4.3.4",
+                "ts-api-utils": "^1.3.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.56.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/types": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.8.0.tgz",
+            "integrity": "sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==",
+            "dev": true,
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.8.0.tgz",
+            "integrity": "sha512-5pfUCOwK5yjPaJQNy44prjCwtr981dO8Qo9J9PwYXZ0MosgAbfEMB008dJ5sNo3+/BN6ytBPuSvXUg9SAqB0dg==",
+            "dev": true,
+            "dependencies": {
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0",
+                "debug": "^4.3.4",
+                "globby": "^11.1.0",
+                "is-glob": "^4.0.3",
+                "minimatch": "^9.0.4",
+                "semver": "^7.6.0",
+                "ts-api-utils": "^1.3.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/utils": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.8.0.tgz",
+            "integrity": "sha512-L0yFqOCflVqXxiZyXrDr80lnahQfSOfc9ELAAZ75sqicqp2i36kEZZGuUymHNFoYOqxRT05up760b4iGsl02nQ==",
+            "dev": true,
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "@types/json-schema": "^7.0.15",
+                "@types/semver": "^7.5.8",
+                "@typescript-eslint/scope-manager": "7.8.0",
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/typescript-estree": "7.8.0",
+                "semver": "^7.6.0"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^8.56.0"
+            }
+        },
+        "node_modules/@typescript-eslint/visitor-keys": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.8.0.tgz",
+            "integrity": "sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==",
+            "dev": true,
+            "dependencies": {
+                "@typescript-eslint/types": "7.8.0",
+                "eslint-visitor-keys": "^3.4.3"
+            },
+            "engines": {
+                "node": "^18.18.0 || >=20.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@ungap/structured-clone": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+            "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+            "dev": true
+        },
+        "node_modules/@vitejs/plugin-react": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+            "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/core": "^7.23.5",
+                "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+                "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+                "@types/babel__core": "^7.20.5",
+                "react-refresh": "^0.14.0"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^4.2.0 || ^5.0.0"
+            }
+        },
+        "node_modules/acorn": {
+            "version": "8.11.3",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+            "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+            "dev": true,
+            "bin": {
+                "acorn": "bin/acorn"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/acorn-jsx": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+            "dev": true,
+            "peerDependencies": {
+                "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+            }
+        },
+        "node_modules/ajv": {
+            "version": "6.12.6",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+            "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+            "dev": true,
+            "dependencies": {
+                "fast-deep-equal": "^3.1.1",
+                "fast-json-stable-stringify": "^2.0.0",
+                "json-schema-traverse": "^0.4.1",
+                "uri-js": "^4.2.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/ansi-styles": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+            "dependencies": {
+                "color-convert": "^1.9.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/argparse": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "dev": true
+        },
+        "node_modules/array-union": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+            "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+        },
+        "node_modules/axios": {
+            "version": "1.6.8",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+            "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+            "dependencies": {
+                "follow-redirects": "^1.15.6",
+                "form-data": "^4.0.0",
+                "proxy-from-env": "^1.1.0"
+            }
+        },
+        "node_modules/babel-plugin-macros": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+            "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "cosmiconfig": "^7.0.0",
+                "resolve": "^1.19.0"
+            },
+            "engines": {
+                "node": ">=10",
+                "npm": ">=6"
+            }
+        },
+        "node_modules/balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true
+        },
+        "node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/braces": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "dev": true,
+            "dependencies": {
+                "fill-range": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/browserslist": {
+            "version": "4.23.0",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+            "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "caniuse-lite": "^1.0.30001587",
+                "electron-to-chromium": "^1.4.668",
+                "node-releases": "^2.0.14",
+                "update-browserslist-db": "^1.0.13"
+            },
+            "bin": {
+                "browserslist": "cli.js"
+            },
+            "engines": {
+                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+            }
+        },
+        "node_modules/callsites": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/caniuse-lite": {
+            "version": "1.0.30001616",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
+            "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ]
+        },
+        "node_modules/chalk": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+            "dependencies": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/chalk/node_modules/escape-string-regexp": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+            "engines": {
+                "node": ">=0.8.0"
+            }
+        },
+        "node_modules/clsx": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/color-convert": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+            "dependencies": {
+                "color-name": "1.1.3"
+            }
+        },
+        "node_modules/color-name": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+        },
+        "node_modules/combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "dependencies": {
+                "delayed-stream": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/concat-map": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+            "dev": true
+        },
+        "node_modules/convert-source-map": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+            "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+        },
+        "node_modules/core-util-is": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+        },
+        "node_modules/cosmiconfig": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+            "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+            "dependencies": {
+                "@types/parse-json": "^4.0.0",
+                "import-fresh": "^3.2.1",
+                "parse-json": "^5.0.0",
+                "path-type": "^4.0.0",
+                "yaml": "^1.10.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/cross-fetch": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+            "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+            "dependencies": {
+                "node-fetch": "^2.6.12"
+            }
+        },
+        "node_modules/cross-spawn": {
+            "version": "7.0.3",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+            "dev": true,
+            "dependencies": {
+                "path-key": "^3.1.0",
+                "shebang-command": "^2.0.0",
+                "which": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+        },
+        "node_modules/dayjs": {
+            "version": "1.11.11",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
+            "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
+        },
+        "node_modules/debug": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "dev": true,
+            "dependencies": {
+                "ms": "2.1.2"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/deep-is": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+            "dev": true
+        },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/dir-glob": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+            "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+            "dev": true,
+            "dependencies": {
+                "path-type": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/doctrine": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+            "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+            "dev": true,
+            "dependencies": {
+                "esutils": "^2.0.2"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/electron-to-chromium": {
+            "version": "1.4.756",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
+            "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==",
+            "dev": true
+        },
+        "node_modules/error-ex": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+            "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+            "dependencies": {
+                "is-arrayish": "^0.2.1"
+            }
+        },
+        "node_modules/esbuild": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+            "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+            "dev": true,
+            "hasInstallScript": true,
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "optionalDependencies": {
+                "@esbuild/aix-ppc64": "0.20.2",
+                "@esbuild/android-arm": "0.20.2",
+                "@esbuild/android-arm64": "0.20.2",
+                "@esbuild/android-x64": "0.20.2",
+                "@esbuild/darwin-arm64": "0.20.2",
+                "@esbuild/darwin-x64": "0.20.2",
+                "@esbuild/freebsd-arm64": "0.20.2",
+                "@esbuild/freebsd-x64": "0.20.2",
+                "@esbuild/linux-arm": "0.20.2",
+                "@esbuild/linux-arm64": "0.20.2",
+                "@esbuild/linux-ia32": "0.20.2",
+                "@esbuild/linux-loong64": "0.20.2",
+                "@esbuild/linux-mips64el": "0.20.2",
+                "@esbuild/linux-ppc64": "0.20.2",
+                "@esbuild/linux-riscv64": "0.20.2",
+                "@esbuild/linux-s390x": "0.20.2",
+                "@esbuild/linux-x64": "0.20.2",
+                "@esbuild/netbsd-x64": "0.20.2",
+                "@esbuild/openbsd-x64": "0.20.2",
+                "@esbuild/sunos-x64": "0.20.2",
+                "@esbuild/win32-arm64": "0.20.2",
+                "@esbuild/win32-ia32": "0.20.2",
+                "@esbuild/win32-x64": "0.20.2"
+            }
+        },
+        "node_modules/escalade": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+            "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+            "dev": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint": {
+            "version": "8.57.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+            "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+            "dev": true,
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.2.0",
+                "@eslint-community/regexpp": "^4.6.1",
+                "@eslint/eslintrc": "^2.1.4",
+                "@eslint/js": "8.57.0",
+                "@humanwhocodes/config-array": "^0.11.14",
+                "@humanwhocodes/module-importer": "^1.0.1",
+                "@nodelib/fs.walk": "^1.2.8",
+                "@ungap/structured-clone": "^1.2.0",
+                "ajv": "^6.12.4",
+                "chalk": "^4.0.0",
+                "cross-spawn": "^7.0.2",
+                "debug": "^4.3.2",
+                "doctrine": "^3.0.0",
+                "escape-string-regexp": "^4.0.0",
+                "eslint-scope": "^7.2.2",
+                "eslint-visitor-keys": "^3.4.3",
+                "espree": "^9.6.1",
+                "esquery": "^1.4.2",
+                "esutils": "^2.0.2",
+                "fast-deep-equal": "^3.1.3",
+                "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
+                "glob-parent": "^6.0.2",
+                "globals": "^13.19.0",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.2.0",
+                "imurmurhash": "^0.1.4",
+                "is-glob": "^4.0.0",
+                "is-path-inside": "^3.0.3",
+                "js-yaml": "^4.1.0",
+                "json-stable-stringify-without-jsonify": "^1.0.1",
+                "levn": "^0.4.1",
+                "lodash.merge": "^4.6.2",
+                "minimatch": "^3.1.2",
+                "natural-compare": "^1.4.0",
+                "optionator": "^0.9.3",
+                "strip-ansi": "^6.0.1",
+                "text-table": "^0.2.0"
+            },
+            "bin": {
+                "eslint": "bin/eslint.js"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-config-prettier": {
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+            "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+            "dev": true,
+            "bin": {
+                "eslint-config-prettier": "bin/cli.js"
+            },
+            "peerDependencies": {
+                "eslint": ">=7.0.0"
+            }
+        },
+        "node_modules/eslint-plugin-prettier": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+            "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
+            "dev": true,
+            "dependencies": {
+                "prettier-linter-helpers": "^1.0.0",
+                "synckit": "^0.8.6"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-plugin-prettier"
+            },
+            "peerDependencies": {
+                "@types/eslint": ">=8.0.0",
+                "eslint": ">=8.0.0",
+                "eslint-config-prettier": "*",
+                "prettier": ">=3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/eslint": {
+                    "optional": true
+                },
+                "eslint-config-prettier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-plugin-react-hooks": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+            "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+            }
+        },
+        "node_modules/eslint-plugin-react-refresh": {
+            "version": "0.4.6",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.6.tgz",
+            "integrity": "sha512-NjGXdm7zgcKRkKMua34qVO9doI7VOxZ6ancSvBELJSSoX97jyndXcSoa8XBh69JoB31dNz3EEzlMcizZl7LaMA==",
+            "dev": true,
+            "peerDependencies": {
+                "eslint": ">=7"
+            }
+        },
+        "node_modules/eslint-scope": {
+            "version": "7.2.2",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+            "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+            "dev": true,
+            "dependencies": {
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true,
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint/node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/eslint/node_modules/brace-expansion": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/eslint/node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/eslint/node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/eslint/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
+        },
+        "node_modules/eslint/node_modules/globals": {
+            "version": "13.24.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+            "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+            "dev": true,
+            "dependencies": {
+                "type-fest": "^0.20.2"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/eslint/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/eslint/node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/espree": {
+            "version": "9.6.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+            "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.9.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^3.4.1"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/esquery": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+            "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+            "dev": true,
+            "dependencies": {
+                "estraverse": "^5.1.0"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/esrecurse": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+            "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+            "dev": true,
+            "dependencies": {
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estraverse": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+            "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+            "dev": true,
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/esutils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true
+        },
+        "node_modules/fast-diff": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+            "dev": true
+        },
+        "node_modules/fast-glob": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+            "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+            "dev": true,
+            "dependencies": {
+                "@nodelib/fs.stat": "^2.0.2",
+                "@nodelib/fs.walk": "^1.2.3",
+                "glob-parent": "^5.1.2",
+                "merge2": "^1.3.0",
+                "micromatch": "^4.0.4"
+            },
+            "engines": {
+                "node": ">=8.6.0"
+            }
+        },
+        "node_modules/fast-glob/node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/fast-json-stable-stringify": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+            "dev": true
+        },
+        "node_modules/fast-levenshtein": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+            "dev": true
+        },
+        "node_modules/fastq": {
+            "version": "1.17.1",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+            "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+            "dev": true,
+            "dependencies": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "node_modules/file-entry-cache": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+            "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+            "dev": true,
+            "dependencies": {
+                "flat-cache": "^3.0.4"
+            },
+            "engines": {
+                "node": "^10.12.0 || >=12.0.0"
+            }
+        },
+        "node_modules/fill-range": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "dev": true,
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/find-root": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+            "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+        },
+        "node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "dependencies": {
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/flat-cache": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+            "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+            "dev": true,
+            "dependencies": {
+                "flatted": "^3.2.9",
+                "keyv": "^4.5.3",
+                "rimraf": "^3.0.2"
+            },
+            "engines": {
+                "node": "^10.12.0 || >=12.0.0"
+            }
+        },
+        "node_modules/flatted": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+            "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+            "dev": true
+        },
+        "node_modules/follow-redirects": {
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+            "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependenciesMeta": {
+                "debug": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/form-data": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/fs.realpath": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+            "dev": true
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "dev": true,
+            "hasInstallScript": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/gensync": {
+            "version": "1.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+            "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "dev": true,
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/glob/node_modules/brace-expansion": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/glob/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/globals": {
+            "version": "11.12.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+            "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/globby": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "dev": true,
+            "dependencies": {
+                "array-union": "^2.1.0",
+                "dir-glob": "^3.0.1",
+                "fast-glob": "^3.2.9",
+                "ignore": "^5.2.0",
+                "merge2": "^1.4.1",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/graphemer": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+            "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+            "dev": true
+        },
+        "node_modules/has-flag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "dependencies": {
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "dependencies": {
+                "react-is": "^16.7.0"
+            }
+        },
+        "node_modules/hoist-non-react-statics/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "node_modules/html-parse-stringify": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+            "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+            "dependencies": {
+                "void-elements": "3.1.0"
+            }
+        },
+        "node_modules/husky": {
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz",
+            "integrity": "sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==",
+            "dev": true,
+            "bin": {
+                "husky": "lib/bin.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/typicode"
+            }
+        },
+        "node_modules/i18next": {
+            "version": "23.11.3",
+            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.3.tgz",
+            "integrity": "sha512-Pq/aSKowir7JM0rj+Wa23Kb6KKDUGno/HjG+wRQu0PxoTbpQ4N89MAT0rFGvXmLkRLNMb1BbBOKGozl01dabzg==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://locize.com"
+                },
+                {
+                    "type": "individual",
+                    "url": "https://locize.com/i18next.html"
+                },
+                {
+                    "type": "individual",
+                    "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+                }
+            ],
+            "dependencies": {
+                "@babel/runtime": "^7.23.2"
+            }
+        },
+        "node_modules/i18next-browser-languagedetector": {
+            "version": "7.2.1",
+            "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.1.tgz",
+            "integrity": "sha512-h/pM34bcH6tbz8WgGXcmWauNpQupCGr25XPp9cZwZInR9XHSjIFDYp1SIok7zSPsTOMxdvuLyu86V+g2Kycnfw==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.2"
+            }
+        },
+        "node_modules/i18next-http-backend": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.5.1.tgz",
+            "integrity": "sha512-+rNX1tghdVxdfjfPt0bI1sNg5ahGW9kA7OboG7b4t03Fp69NdDlRIze6yXhIbN8rbHxJ8IP4dzRm/okZ15lkQg==",
+            "dependencies": {
+                "cross-fetch": "4.0.0"
+            }
+        },
+        "node_modules/ignore": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+            "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+            "dev": true,
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/immediate": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+            "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+        },
+        "node_modules/import-fresh": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+            "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+            "dependencies": {
+                "parent-module": "^1.0.0",
+                "resolve-from": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.8.19"
+            }
+        },
+        "node_modules/inflight": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+            "dev": true,
+            "dependencies": {
+                "once": "^1.3.0",
+                "wrappy": "1"
+            }
+        },
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        },
+        "node_modules/invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
+        "node_modules/is-arrayish": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+        },
+        "node_modules/is-core-module": {
+            "version": "2.13.1",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+            "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+            "dependencies": {
+                "hasown": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
+        "node_modules/is-path-inside": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true
+        },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+        },
+        "node_modules/js-yaml": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+            "dev": true,
+            "dependencies": {
+                "argparse": "^2.0.1"
+            },
+            "bin": {
+                "js-yaml": "bin/js-yaml.js"
+            }
+        },
+        "node_modules/jsesc": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+            "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+            "dev": true,
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/json-buffer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true
+        },
+        "node_modules/json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+            "dev": true
+        },
+        "node_modules/json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true
+        },
+        "node_modules/json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true,
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/jszip": {
+            "version": "3.10.1",
+            "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+            "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+            "dependencies": {
+                "lie": "~3.3.0",
+                "pako": "~1.0.2",
+                "readable-stream": "~2.3.6",
+                "setimmediate": "^1.0.5"
+            }
+        },
+        "node_modules/keyv": {
+            "version": "4.5.4",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "dependencies": {
+                "json-buffer": "3.0.1"
+            }
+        },
+        "node_modules/levn": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
+            "dependencies": {
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/lie": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+            "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+            "dependencies": {
+                "immediate": "~3.0.5"
+            }
+        },
+        "node_modules/lines-and-columns": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+        },
+        "node_modules/localforage": {
+            "version": "1.10.0",
+            "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+            "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+            "dependencies": {
+                "lie": "3.1.1"
+            }
+        },
+        "node_modules/localforage/node_modules/lie": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+            "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+            "dependencies": {
+                "immediate": "~3.0.5"
+            }
+        },
+        "node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lodash.merge": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+            "dev": true
+        },
+        "node_modules/loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "dependencies": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "loose-envify": "cli.js"
+            }
+        },
+        "node_modules/lru-cache": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+            "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^3.0.2"
+            }
+        },
+        "node_modules/match-sorter": {
+            "version": "6.3.4",
+            "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
+            "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.8",
+                "remove-accents": "0.5.0"
+            }
+        },
+        "node_modules/merge2": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+            "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+            "dev": true,
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/micromatch": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+            "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+            "dev": true,
+            "dependencies": {
+                "braces": "^3.0.2",
+                "picomatch": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=8.6"
+            }
+        },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/minimatch": {
+            "version": "9.0.4",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+            "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+            "dev": true
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/natural-compare": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true
+        },
+        "node_modules/node-fetch": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+            "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+            "dependencies": {
+                "whatwg-url": "^5.0.0"
+            },
+            "engines": {
+                "node": "4.x || >=6.0.0"
+            },
+            "peerDependencies": {
+                "encoding": "^0.1.0"
+            },
+            "peerDependenciesMeta": {
+                "encoding": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/node-releases": {
+            "version": "2.0.14",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+            "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+            "dev": true
+        },
+        "node_modules/object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/once": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+            "dev": true,
+            "dependencies": {
+                "wrappy": "1"
+            }
+        },
+        "node_modules/optionator": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
+            "dependencies": {
+                "deep-is": "^0.1.3",
+                "fast-levenshtein": "^2.0.6",
+                "levn": "^0.4.1",
+                "prelude-ls": "^1.2.1",
+                "type-check": "^0.4.0",
+                "word-wrap": "^1.2.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/pako": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+        },
+        "node_modules/papaparse": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+            "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+        },
+        "node_modules/parent-module": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+            "dependencies": {
+                "callsites": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/parse-json": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+            "dependencies": {
+                "@babel/code-frame": "^7.0.0",
+                "error-ex": "^1.3.1",
+                "json-parse-even-better-errors": "^2.3.0",
+                "lines-and-columns": "^1.1.6"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/path-exists": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-is-absolute": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-parse": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+        },
+        "node_modules/path-type": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+        },
+        "node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.4.38",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+            "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "nanoid": "^3.3.7",
+                "picocolors": "^1.0.0",
+                "source-map-js": "^1.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/prelude-ls": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/prettier": {
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+            "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-linter-helpers": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+            "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+            "dev": true,
+            "dependencies": {
+                "fast-diff": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/process-nextick-args": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+        },
+        "node_modules/prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
+        "node_modules/prop-types/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "node_modules/proxy-from-env": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/queue-microtask": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ]
+        },
+        "node_modules/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "dependencies": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.2"
+            },
+            "peerDependencies": {
+                "react": "^18.3.1"
+            }
+        },
+        "node_modules/react-fast-compare": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+            "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+        },
+        "node_modules/react-helmet": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+            "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+            "dependencies": {
+                "object-assign": "^4.1.1",
+                "prop-types": "^15.7.2",
+                "react-fast-compare": "^3.1.1",
+                "react-side-effect": "^2.1.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.3.0"
+            }
+        },
+        "node_modules/react-helmet-async": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.4.tgz",
+            "integrity": "sha512-yxjQMWposw+akRfvpl5+8xejl4JtUlHnEBcji6u8/e6oc7ozT+P9PNTWMhCbz2y9tc5zPegw2BvKjQA+NwdEjQ==",
+            "dependencies": {
+                "invariant": "^2.2.4",
+                "react-fast-compare": "^3.2.2",
+                "shallowequal": "^1.1.0"
+            },
+            "peerDependencies": {
+                "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/react-i18next": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",
+            "integrity": "sha512-QSiKw+ihzJ/CIeIYWrarCmXJUySHDwQr5y8uaNIkbxoGRm/5DukkxZs+RPla79IKyyDPzC/DRlgQCABHtrQuQQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.23.9",
+                "html-parse-stringify": "^3.0.1"
+            },
+            "peerDependencies": {
+                "i18next": ">= 23.2.3",
+                "react": ">= 16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "react-dom": {
+                    "optional": true
+                },
+                "react-native": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+        },
+        "node_modules/react-refresh": {
+            "version": "0.14.2",
+            "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+            "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-router": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+            "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+            "dependencies": {
+                "@remix-run/router": "1.16.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+            "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+            "dependencies": {
+                "@remix-run/router": "1.16.0",
+                "react-router": "6.23.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
+        "node_modules/react-side-effect": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+            "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+            "peerDependencies": {
+                "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.6.0",
+                "react-dom": ">=16.6.0"
+            }
+        },
+        "node_modules/readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            }
+        },
+        "node_modules/regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
+        "node_modules/remove-accents": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+            "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+        },
+        "node_modules/resolve": {
+            "version": "1.22.8",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+            "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+            "dependencies": {
+                "is-core-module": "^2.13.0",
+                "path-parse": "^1.0.7",
+                "supports-preserve-symlinks-flag": "^1.0.0"
+            },
+            "bin": {
+                "resolve": "bin/resolve"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/resolve-from": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/reusify": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+            "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+            "dev": true,
+            "engines": {
+                "iojs": ">=1.0.0",
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/rimraf": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+            "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+            "dev": true,
+            "dependencies": {
+                "glob": "^7.1.3"
+            },
+            "bin": {
+                "rimraf": "bin.js"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/rollup": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
+            "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
+            "dev": true,
+            "dependencies": {
+                "@types/estree": "1.0.5"
+            },
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=18.0.0",
+                "npm": ">=8.0.0"
+            },
+            "optionalDependencies": {
+                "@rollup/rollup-android-arm-eabi": "4.17.2",
+                "@rollup/rollup-android-arm64": "4.17.2",
+                "@rollup/rollup-darwin-arm64": "4.17.2",
+                "@rollup/rollup-darwin-x64": "4.17.2",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
+                "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
+                "@rollup/rollup-linux-arm64-gnu": "4.17.2",
+                "@rollup/rollup-linux-arm64-musl": "4.17.2",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
+                "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
+                "@rollup/rollup-linux-s390x-gnu": "4.17.2",
+                "@rollup/rollup-linux-x64-gnu": "4.17.2",
+                "@rollup/rollup-linux-x64-musl": "4.17.2",
+                "@rollup/rollup-win32-arm64-msvc": "4.17.2",
+                "@rollup/rollup-win32-ia32-msvc": "4.17.2",
+                "@rollup/rollup-win32-x64-msvc": "4.17.2",
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/run-parallel": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+            "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "dependencies": {
+                "queue-microtask": "^1.2.2"
+            }
+        },
+        "node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "node_modules/scheduler": {
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "node_modules/semver": {
+            "version": "7.6.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+            "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+            "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/semver/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/semver/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
+        "node_modules/setimmediate": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+            "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+        },
+        "node_modules/shallowequal": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        },
+        "node_modules/shebang-command": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "dependencies": {
+                "shebang-regex": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+            "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "dependencies": {
+                "safe-buffer": "~5.1.0"
+            }
+        },
+        "node_modules/strip-ansi": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-json-comments": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+            "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+        },
+        "node_modules/supports-color": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+            "dependencies": {
+                "has-flag": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/supports-preserve-symlinks-flag": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/synckit": {
+            "version": "0.8.8",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+            "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+            "dev": true,
+            "dependencies": {
+                "@pkgr/core": "^0.1.0",
+                "tslib": "^2.6.2"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unts"
+            }
+        },
+        "node_modules/text-table": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+            "dev": true
+        },
+        "node_modules/to-fast-properties": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
+        "node_modules/tr46": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+            "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "node_modules/ts-api-utils": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+            "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=16"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.2.0"
+            }
+        },
+        "node_modules/tslib": {
+            "version": "2.6.2",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+            "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+            "dev": true
+        },
+        "node_modules/type-check": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+            "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+            "dev": true,
+            "dependencies": {
+                "prelude-ls": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/type-fest": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+            "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/typescript": {
+            "version": "5.4.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+            "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+            "dev": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
+        "node_modules/undici-types": {
+            "version": "5.26.5",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+            "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+            "dev": true
+        },
+        "node_modules/update-browserslist-db": {
+            "version": "1.0.15",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.15.tgz",
+            "integrity": "sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "escalade": "^3.1.2",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "update-browserslist-db": "cli.js"
+            },
+            "peerDependencies": {
+                "browserslist": ">= 4.21.0"
+            }
+        },
+        "node_modules/uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dev": true,
+            "dependencies": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+        },
+        "node_modules/vite": {
+            "version": "5.2.11",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
+            "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
+            "dev": true,
+            "dependencies": {
+                "esbuild": "^0.20.1",
+                "postcss": "^8.4.38",
+                "rollup": "^4.13.0"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^18.0.0 || >=20.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/vitejs/vite?sponsor=1"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.3"
+            },
+            "peerDependencies": {
+                "@types/node": "^18.0.0 || >=20.0.0",
+                "less": "*",
+                "lightningcss": "^1.21.0",
+                "sass": "*",
+                "stylus": "*",
+                "sugarss": "*",
+                "terser": "^5.4.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "lightningcss": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/void-elements": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+            "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/webidl-conversions": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+            "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "node_modules/whatwg-url": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+            "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+            "dependencies": {
+                "tr46": "~0.0.3",
+                "webidl-conversions": "^3.0.0"
+            }
+        },
+        "node_modules/which": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "node-which": "bin/node-which"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/word-wrap": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/wrappy": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+            "dev": true
+        },
+        "node_modules/yallist": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+            "dev": true
+        },
+        "node_modules/yaml": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/yocto-queue": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        }
+    },
+    "dependencies": {
+        "@ampproject/remapping": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+            "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+            "dev": true,
+            "requires": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "@azure/msal-browser": {
+            "version": "3.13.0",
+            "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.13.0.tgz",
+            "integrity": "sha512-fD906nmJei3yE7la6DZTdUtXKvpwzJURkfsiz9747Icv4pit77cegSm6prJTKLQ1fw4iiZzrrWwxnhMLrTf5gQ==",
+            "requires": {
+                "@azure/msal-common": "14.9.0"
+            }
+        },
+        "@azure/msal-common": {
+            "version": "14.9.0",
+            "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.9.0.tgz",
+            "integrity": "sha512-yzBPRlWPnTBeixxLNI3BBIgF5/bHpbhoRVuuDBnYjCyWRavaPUsKAHUDYLqpGkBLDciA6TCc6GOxN4/S3WiSxg=="
+        },
+        "@azure/msal-react": {
+            "version": "2.0.15",
+            "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-2.0.15.tgz",
+            "integrity": "sha512-WtZGPxA6rWqGhovmWPUXjUyKTp/TUa4Oekk6FSa9ldCayd1QzYT9XcoAEqA0EfT0Fx12KiNvJyDDKckBU6J/+Q==",
+            "requires": {}
+        },
+        "@babel/code-frame": {
+            "version": "7.24.2",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+            "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
+            "requires": {
+                "@babel/highlight": "^7.24.2",
+                "picocolors": "^1.0.0"
+            }
+        },
+        "@babel/compat-data": {
+            "version": "7.24.4",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+            "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
+            "dev": true
+        },
+        "@babel/core": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.5.tgz",
+            "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==",
+            "dev": true,
+            "requires": {
+                "@ampproject/remapping": "^2.2.0",
+                "@babel/code-frame": "^7.24.2",
+                "@babel/generator": "^7.24.5",
+                "@babel/helper-compilation-targets": "^7.23.6",
+                "@babel/helper-module-transforms": "^7.24.5",
+                "@babel/helpers": "^7.24.5",
+                "@babel/parser": "^7.24.5",
+                "@babel/template": "^7.24.0",
+                "@babel/traverse": "^7.24.5",
+                "@babel/types": "^7.24.5",
+                "convert-source-map": "^2.0.0",
+                "debug": "^4.1.0",
+                "gensync": "^1.0.0-beta.2",
+                "json5": "^2.2.3",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "convert-source-map": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+                    "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+                    "dev": true
+                },
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+                    "dev": true
+                }
+            }
+        },
+        "@babel/generator": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.5.tgz",
+            "integrity": "sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.24.5",
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25",
+                "jsesc": "^2.5.1"
+            }
+        },
+        "@babel/helper-compilation-targets": {
+            "version": "7.23.6",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+            "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+            "dev": true,
+            "requires": {
+                "@babel/compat-data": "^7.23.5",
+                "@babel/helper-validator-option": "^7.23.5",
+                "browserslist": "^4.22.2",
+                "lru-cache": "^5.1.1",
+                "semver": "^6.3.1"
+            },
+            "dependencies": {
+                "semver": {
+                    "version": "6.3.1",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+                    "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+                    "dev": true
+                }
+            }
+        },
+        "@babel/helper-environment-visitor": {
+            "version": "7.22.20",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+            "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+            "dev": true
+        },
+        "@babel/helper-function-name": {
+            "version": "7.23.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+            "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+            "dev": true,
+            "requires": {
+                "@babel/template": "^7.22.15",
+                "@babel/types": "^7.23.0"
+            }
+        },
+        "@babel/helper-hoist-variables": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+            "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-module-imports": {
+            "version": "7.24.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+            "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+            "requires": {
+                "@babel/types": "^7.24.0"
+            }
+        },
+        "@babel/helper-module-transforms": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz",
+            "integrity": "sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-environment-visitor": "^7.22.20",
+                "@babel/helper-module-imports": "^7.24.3",
+                "@babel/helper-simple-access": "^7.24.5",
+                "@babel/helper-split-export-declaration": "^7.24.5",
+                "@babel/helper-validator-identifier": "^7.24.5"
+            }
+        },
+        "@babel/helper-plugin-utils": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
+            "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
+            "dev": true
+        },
+        "@babel/helper-simple-access": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz",
+            "integrity": "sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.24.5"
+            }
+        },
+        "@babel/helper-split-export-declaration": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz",
+            "integrity": "sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.24.5"
+            }
+        },
+        "@babel/helper-string-parser": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+            "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ=="
+        },
+        "@babel/helper-validator-identifier": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
+            "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA=="
+        },
+        "@babel/helper-validator-option": {
+            "version": "7.23.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+            "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+            "dev": true
+        },
+        "@babel/helpers": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.5.tgz",
+            "integrity": "sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==",
+            "dev": true,
+            "requires": {
+                "@babel/template": "^7.24.0",
+                "@babel/traverse": "^7.24.5",
+                "@babel/types": "^7.24.5"
+            }
+        },
+        "@babel/highlight": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
+            "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
+            "requires": {
+                "@babel/helper-validator-identifier": "^7.24.5",
+                "chalk": "^2.4.2",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.0.0"
+            }
+        },
+        "@babel/parser": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
+            "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
+            "dev": true
+        },
+        "@babel/plugin-transform-react-jsx-self": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.5.tgz",
+            "integrity": "sha512-RtCJoUO2oYrYwFPtR1/jkoBEcFuI1ae9a9IMxeyAVa3a1Ap4AnxmyIKG2b2FaJKqkidw/0cxRbWN+HOs6ZWd1w==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.24.5"
+            }
+        },
+        "@babel/plugin-transform-react-jsx-source": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.1.tgz",
+            "integrity": "sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.24.0"
+            }
+        },
+        "@babel/runtime": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+            "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
+            "requires": {
+                "regenerator-runtime": "^0.14.0"
+            }
+        },
+        "@babel/template": {
+            "version": "7.24.0",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+            "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+            "dev": true,
+            "requires": {
+                "@babel/code-frame": "^7.23.5",
+                "@babel/parser": "^7.24.0",
+                "@babel/types": "^7.24.0"
+            }
+        },
+        "@babel/traverse": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.5.tgz",
+            "integrity": "sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==",
+            "dev": true,
+            "requires": {
+                "@babel/code-frame": "^7.24.2",
+                "@babel/generator": "^7.24.5",
+                "@babel/helper-environment-visitor": "^7.22.20",
+                "@babel/helper-function-name": "^7.23.0",
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.24.5",
+                "@babel/parser": "^7.24.5",
+                "@babel/types": "^7.24.5",
+                "debug": "^4.3.1",
+                "globals": "^11.1.0"
+            }
+        },
+        "@babel/types": {
+            "version": "7.24.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
+            "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
+            "requires": {
+                "@babel/helper-string-parser": "^7.24.1",
+                "@babel/helper-validator-identifier": "^7.24.5",
+                "to-fast-properties": "^2.0.0"
+            }
+        },
+        "@emotion/babel-plugin": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+            "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+            "requires": {
+                "@babel/helper-module-imports": "^7.16.7",
+                "@babel/runtime": "^7.18.3",
+                "@emotion/hash": "^0.9.1",
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/serialize": "^1.1.2",
+                "babel-plugin-macros": "^3.1.0",
+                "convert-source-map": "^1.5.0",
+                "escape-string-regexp": "^4.0.0",
+                "find-root": "^1.1.0",
+                "source-map": "^0.5.7",
+                "stylis": "4.2.0"
+            }
+        },
+        "@emotion/cache": {
+            "version": "11.11.0",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+            "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+            "requires": {
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/sheet": "^1.2.2",
+                "@emotion/utils": "^1.2.1",
+                "@emotion/weak-memoize": "^0.3.1",
+                "stylis": "4.2.0"
+            }
+        },
+        "@emotion/hash": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+            "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+        },
+        "@emotion/is-prop-valid": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+            "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+            "requires": {
+                "@emotion/memoize": "^0.8.1"
+            }
+        },
+        "@emotion/memoize": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+            "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+        },
+        "@emotion/react": {
+            "version": "11.11.4",
+            "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+            "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+            "requires": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.11.0",
+                "@emotion/cache": "^11.11.0",
+                "@emotion/serialize": "^1.1.3",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+                "@emotion/utils": "^1.2.1",
+                "@emotion/weak-memoize": "^0.3.1",
+                "hoist-non-react-statics": "^3.3.1"
+            }
+        },
+        "@emotion/serialize": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+            "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+            "requires": {
+                "@emotion/hash": "^0.9.1",
+                "@emotion/memoize": "^0.8.1",
+                "@emotion/unitless": "^0.8.1",
+                "@emotion/utils": "^1.2.1",
+                "csstype": "^3.0.2"
+            }
+        },
+        "@emotion/sheet": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+            "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+        },
+        "@emotion/styled": {
+            "version": "11.11.5",
+            "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+            "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+            "requires": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.11.0",
+                "@emotion/is-prop-valid": "^1.2.2",
+                "@emotion/serialize": "^1.1.4",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+                "@emotion/utils": "^1.2.1"
+            }
+        },
+        "@emotion/unitless": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+            "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+        },
+        "@emotion/use-insertion-effect-with-fallbacks": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+            "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+            "requires": {}
+        },
+        "@emotion/utils": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+            "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+        },
+        "@emotion/weak-memoize": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+            "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+        },
+        "@esbuild/aix-ppc64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+            "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/android-arm": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+            "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/android-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+            "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/android-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+            "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/darwin-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+            "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/darwin-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+            "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/freebsd-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+            "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/freebsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+            "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-arm": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+            "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+            "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-ia32": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+            "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-loong64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+            "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-mips64el": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+            "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-ppc64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+            "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-riscv64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+            "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-s390x": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+            "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/linux-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+            "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/netbsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/openbsd-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/sunos-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+            "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/win32-arm64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+            "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/win32-ia32": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+            "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@esbuild/win32-x64": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+            "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@eslint-community/eslint-utils": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+            "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+            "dev": true,
+            "requires": {
+                "eslint-visitor-keys": "^3.3.0"
+            }
+        },
+        "@eslint-community/regexpp": {
+            "version": "4.10.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+            "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+            "dev": true
+        },
+        "@eslint/eslintrc": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+            "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+            "dev": true,
+            "requires": {
+                "ajv": "^6.12.4",
+                "debug": "^4.3.2",
+                "espree": "^9.6.0",
+                "globals": "^13.19.0",
+                "ignore": "^5.2.0",
+                "import-fresh": "^3.2.1",
+                "js-yaml": "^4.1.0",
+                "minimatch": "^3.1.2",
+                "strip-json-comments": "^3.1.1"
+            },
+            "dependencies": {
+                "brace-expansion": {
+                    "version": "1.1.11",
+                    "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+                    "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+                    "dev": true,
+                    "requires": {
+                        "balanced-match": "^1.0.0",
+                        "concat-map": "0.0.1"
+                    }
+                },
+                "globals": {
+                    "version": "13.24.0",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+                    "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+                    "dev": true,
+                    "requires": {
+                        "type-fest": "^0.20.2"
+                    }
+                },
+                "minimatch": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+                    "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+                    "dev": true,
+                    "requires": {
+                        "brace-expansion": "^1.1.7"
+                    }
+                }
+            }
+        },
+        "@eslint/js": {
+            "version": "8.57.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+            "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+            "dev": true
+        },
+        "@floating-ui/core": {
+            "version": "1.6.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
+            "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
+            "requires": {
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "@floating-ui/dom": {
+            "version": "1.6.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+            "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+            "requires": {
+                "@floating-ui/core": "^1.0.0",
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "@floating-ui/react-dom": {
+            "version": "2.0.9",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
+            "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+            "requires": {
+                "@floating-ui/dom": "^1.0.0"
+            }
+        },
+        "@floating-ui/utils": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+            "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+        },
+        "@fontsource/roboto": {
+            "version": "5.0.13",
+            "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.13.tgz",
+            "integrity": "sha512-j61DHjsdUCKMXSdNLTOxcG701FWnF0jcqNNQi2iPCDxU8seN/sMxeh62dC++UiagCWq9ghTypX+Pcy7kX+QOeQ=="
+        },
+        "@humanwhocodes/config-array": {
+            "version": "0.11.14",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+            "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+            "dev": true,
+            "requires": {
+                "@humanwhocodes/object-schema": "^2.0.2",
+                "debug": "^4.3.1",
+                "minimatch": "^3.0.5"
+            },
+            "dependencies": {
+                "brace-expansion": {
+                    "version": "1.1.11",
+                    "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+                    "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+                    "dev": true,
+                    "requires": {
+                        "balanced-match": "^1.0.0",
+                        "concat-map": "0.0.1"
+                    }
+                },
+                "minimatch": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+                    "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+                    "dev": true,
+                    "requires": {
+                        "brace-expansion": "^1.1.7"
+                    }
+                }
+            }
+        },
+        "@humanwhocodes/module-importer": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+            "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+            "dev": true
+        },
+        "@humanwhocodes/object-schema": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+            "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+            "dev": true
+        },
+        "@jridgewell/gen-mapping": {
+            "version": "0.3.5",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+            "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+            "dev": true,
+            "requires": {
+                "@jridgewell/set-array": "^1.2.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "dev": true
+        },
+        "@jridgewell/set-array": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+            "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+            "dev": true
+        },
+        "@jridgewell/sourcemap-codec": {
+            "version": "1.4.15",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+            "dev": true
+        },
+        "@jridgewell/trace-mapping": {
+            "version": "0.3.25",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+            "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+            "dev": true,
+            "requires": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "@mui/base": {
+            "version": "5.0.0-beta.40",
+            "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+            "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "@floating-ui/react-dom": "^2.0.8",
+                "@mui/types": "^7.2.14",
+                "@mui/utils": "^5.15.14",
+                "@popperjs/core": "^2.11.8",
+                "clsx": "^2.1.0",
+                "prop-types": "^15.8.1"
+            }
+        },
+        "@mui/core-downloads-tracker": {
+            "version": "5.15.16",
+            "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
+            "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg=="
+        },
+        "@mui/icons-material": {
+            "version": "5.15.16",
+            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz",
+            "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==",
+            "requires": {
+                "@babel/runtime": "^7.23.9"
+            }
+        },
+        "@mui/material": {
+            "version": "5.15.16",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
+            "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/base": "5.0.0-beta.40",
+                "@mui/core-downloads-tracker": "^5.15.16",
+                "@mui/system": "^5.15.15",
+                "@mui/types": "^7.2.14",
+                "@mui/utils": "^5.15.14",
+                "@types/react-transition-group": "^4.4.10",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0",
+                "react-transition-group": "^4.4.5"
+            }
+        },
+        "@mui/private-theming": {
+            "version": "5.15.14",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+            "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/utils": "^5.15.14",
+                "prop-types": "^15.8.1"
+            }
+        },
+        "@mui/styled-engine": {
+            "version": "5.15.14",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+            "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "@emotion/cache": "^11.11.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1"
+            }
+        },
+        "@mui/system": {
+            "version": "5.15.15",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+            "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "@mui/private-theming": "^5.15.14",
+                "@mui/styled-engine": "^5.15.14",
+                "@mui/types": "^7.2.14",
+                "@mui/utils": "^5.15.14",
+                "clsx": "^2.1.0",
+                "csstype": "^3.1.3",
+                "prop-types": "^15.8.1"
+            }
+        },
+        "@mui/types": {
+            "version": "7.2.14",
+            "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+            "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+            "requires": {}
+        },
+        "@mui/utils": {
+            "version": "5.15.14",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+            "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "@types/prop-types": "^15.7.11",
+                "prop-types": "^15.8.1",
+                "react-is": "^18.2.0"
+            }
+        },
+        "@mui/x-date-pickers": {
+            "version": "6.19.9",
+            "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.9.tgz",
+            "integrity": "sha512-B2m4Fv/fOme5qmV6zuE3QnWQSvj3zKtI2OvikPz5prpiCcIxqpeytkQ7VfrWH3/Aqd5yhG1Yr4IgbqG0ymIXGg==",
+            "requires": {
+                "@babel/runtime": "^7.23.2",
+                "@mui/base": "^5.0.0-beta.22",
+                "@mui/utils": "^5.14.16",
+                "@types/react-transition-group": "^4.4.8",
+                "clsx": "^2.0.0",
+                "prop-types": "^15.8.1",
+                "react-transition-group": "^4.4.5"
+            }
+        },
+        "@nodelib/fs.scandir": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+            "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+            "dev": true,
+            "requires": {
+                "@nodelib/fs.stat": "2.0.5",
+                "run-parallel": "^1.1.9"
+            }
+        },
+        "@nodelib/fs.stat": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+            "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+            "dev": true
+        },
+        "@nodelib/fs.walk": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+            "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+            "dev": true,
+            "requires": {
+                "@nodelib/fs.scandir": "2.1.5",
+                "fastq": "^1.6.0"
+            }
+        },
+        "@pkgr/core": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+            "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+            "dev": true
+        },
+        "@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+        },
+        "@remix-run/router": {
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+            "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q=="
+        },
+        "@rollup/rollup-android-arm-eabi": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
+            "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-android-arm64": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
+            "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-darwin-arm64": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
+            "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-darwin-x64": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
+            "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-arm-gnueabihf": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
+            "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-arm-musleabihf": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
+            "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-arm64-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
+            "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-arm64-musl": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
+            "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-powerpc64le-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
+            "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-riscv64-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
+            "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-s390x-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
+            "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-x64-gnu": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
+            "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-linux-x64-musl": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
+            "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-win32-arm64-msvc": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
+            "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-win32-ia32-msvc": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
+            "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
+            "dev": true,
+            "optional": true
+        },
+        "@rollup/rollup-win32-x64-msvc": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
+            "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
+            "dev": true,
+            "optional": true
+        },
+        "@types/babel__core": {
+            "version": "7.20.5",
+            "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+            "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+            "dev": true,
+            "requires": {
+                "@babel/parser": "^7.20.7",
+                "@babel/types": "^7.20.7",
+                "@types/babel__generator": "*",
+                "@types/babel__template": "*",
+                "@types/babel__traverse": "*"
+            }
+        },
+        "@types/babel__generator": {
+            "version": "7.6.8",
+            "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+            "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "@types/babel__template": {
+            "version": "7.4.4",
+            "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+            "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+            "dev": true,
+            "requires": {
+                "@babel/parser": "^7.1.0",
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "@types/babel__traverse": {
+            "version": "7.20.5",
+            "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+            "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.20.7"
+            }
+        },
+        "@types/estree": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+            "dev": true
+        },
+        "@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "dev": true
+        },
+        "@types/node": {
+            "version": "20.12.8",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
+            "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
+            "dev": true,
+            "requires": {
+                "undici-types": "~5.26.4"
+            }
+        },
+        "@types/papaparse": {
+            "version": "5.3.14",
+            "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.14.tgz",
+            "integrity": "sha512-LxJ4iEFcpqc6METwp9f6BV6VVc43m6MfH0VqFosHvrUgfXiFe6ww7R3itkOQ+TCK6Y+Iv/+RnnvtRZnkc5Kc9g==",
+            "dev": true,
+            "requires": {
+                "@types/node": "*"
+            }
+        },
+        "@types/parse-json": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+            "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+        },
+        "@types/prop-types": {
+            "version": "15.7.12",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+            "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+        },
+        "@types/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
+            "requires": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "@types/react-dom": {
+            "version": "18.3.0",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+            "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
+        "@types/react-helmet": {
+            "version": "6.1.11",
+            "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+            "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
+        "@types/react-transition-group": {
+            "version": "4.4.10",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+            "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+            "requires": {
+                "@types/react": "*"
+            }
+        },
+        "@types/semver": {
+            "version": "7.5.8",
+            "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+            "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
+            "dev": true
+        },
+        "@typescript-eslint/eslint-plugin": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.8.0.tgz",
+            "integrity": "sha512-gFTT+ezJmkwutUPmB0skOj3GZJtlEGnlssems4AjkVweUPGj7jRwwqg0Hhg7++kPGJqKtTYx+R05Ftww372aIg==",
+            "dev": true,
+            "requires": {
+                "@eslint-community/regexpp": "^4.10.0",
+                "@typescript-eslint/scope-manager": "7.8.0",
+                "@typescript-eslint/type-utils": "7.8.0",
+                "@typescript-eslint/utils": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0",
+                "debug": "^4.3.4",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.3.1",
+                "natural-compare": "^1.4.0",
+                "semver": "^7.6.0",
+                "ts-api-utils": "^1.3.0"
+            }
+        },
+        "@typescript-eslint/parser": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.8.0.tgz",
+            "integrity": "sha512-KgKQly1pv0l4ltcftP59uQZCi4HUYswCLbTqVZEJu7uLX8CTLyswqMLqLN+2QFz4jCptqWVV4SB7vdxcH2+0kQ==",
+            "dev": true,
+            "requires": {
+                "@typescript-eslint/scope-manager": "7.8.0",
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/typescript-estree": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0",
+                "debug": "^4.3.4"
+            }
+        },
+        "@typescript-eslint/scope-manager": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.8.0.tgz",
+            "integrity": "sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==",
+            "dev": true,
+            "requires": {
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0"
+            }
+        },
+        "@typescript-eslint/type-utils": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.8.0.tgz",
+            "integrity": "sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==",
+            "dev": true,
+            "requires": {
+                "@typescript-eslint/typescript-estree": "7.8.0",
+                "@typescript-eslint/utils": "7.8.0",
+                "debug": "^4.3.4",
+                "ts-api-utils": "^1.3.0"
+            }
+        },
+        "@typescript-eslint/types": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.8.0.tgz",
+            "integrity": "sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==",
+            "dev": true
+        },
+        "@typescript-eslint/typescript-estree": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.8.0.tgz",
+            "integrity": "sha512-5pfUCOwK5yjPaJQNy44prjCwtr981dO8Qo9J9PwYXZ0MosgAbfEMB008dJ5sNo3+/BN6ytBPuSvXUg9SAqB0dg==",
+            "dev": true,
+            "requires": {
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/visitor-keys": "7.8.0",
+                "debug": "^4.3.4",
+                "globby": "^11.1.0",
+                "is-glob": "^4.0.3",
+                "minimatch": "^9.0.4",
+                "semver": "^7.6.0",
+                "ts-api-utils": "^1.3.0"
+            }
+        },
+        "@typescript-eslint/utils": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.8.0.tgz",
+            "integrity": "sha512-L0yFqOCflVqXxiZyXrDr80lnahQfSOfc9ELAAZ75sqicqp2i36kEZZGuUymHNFoYOqxRT05up760b4iGsl02nQ==",
+            "dev": true,
+            "requires": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "@types/json-schema": "^7.0.15",
+                "@types/semver": "^7.5.8",
+                "@typescript-eslint/scope-manager": "7.8.0",
+                "@typescript-eslint/types": "7.8.0",
+                "@typescript-eslint/typescript-estree": "7.8.0",
+                "semver": "^7.6.0"
+            }
+        },
+        "@typescript-eslint/visitor-keys": {
+            "version": "7.8.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.8.0.tgz",
+            "integrity": "sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==",
+            "dev": true,
+            "requires": {
+                "@typescript-eslint/types": "7.8.0",
+                "eslint-visitor-keys": "^3.4.3"
+            }
+        },
+        "@ungap/structured-clone": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+            "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+            "dev": true
+        },
+        "@vitejs/plugin-react": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+            "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+            "dev": true,
+            "requires": {
+                "@babel/core": "^7.23.5",
+                "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+                "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+                "@types/babel__core": "^7.20.5",
+                "react-refresh": "^0.14.0"
+            }
+        },
+        "acorn": {
+            "version": "8.11.3",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+            "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+            "dev": true
+        },
+        "acorn-jsx": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+            "dev": true,
+            "requires": {}
+        },
+        "ajv": {
+            "version": "6.12.6",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+            "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+            "dev": true,
+            "requires": {
+                "fast-deep-equal": "^3.1.1",
+                "fast-json-stable-stringify": "^2.0.0",
+                "json-schema-traverse": "^0.4.1",
+                "uri-js": "^4.2.2"
+            }
+        },
+        "ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "dev": true
+        },
+        "ansi-styles": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+            "requires": {
+                "color-convert": "^1.9.0"
+            }
+        },
+        "argparse": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "dev": true
+        },
+        "array-union": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+            "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+            "dev": true
+        },
+        "asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+        },
+        "axios": {
+            "version": "1.6.8",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+            "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+            "requires": {
+                "follow-redirects": "^1.15.6",
+                "form-data": "^4.0.0",
+                "proxy-from-env": "^1.1.0"
+            }
+        },
+        "babel-plugin-macros": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+            "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+            "requires": {
+                "@babel/runtime": "^7.12.5",
+                "cosmiconfig": "^7.0.0",
+                "resolve": "^1.19.0"
+            }
+        },
+        "balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true
+        },
+        "brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "dev": true,
+            "requires": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "braces": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "dev": true,
+            "requires": {
+                "fill-range": "^7.0.1"
+            }
+        },
+        "browserslist": {
+            "version": "4.23.0",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+            "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+            "dev": true,
+            "requires": {
+                "caniuse-lite": "^1.0.30001587",
+                "electron-to-chromium": "^1.4.668",
+                "node-releases": "^2.0.14",
+                "update-browserslist-db": "^1.0.13"
+            }
+        },
+        "callsites": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+        },
+        "caniuse-lite": {
+            "version": "1.0.30001616",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
+            "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
+            "dev": true
+        },
+        "chalk": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+            "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+            },
+            "dependencies": {
+                "escape-string-regexp": {
+                    "version": "1.0.5",
+                    "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+                    "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+                }
+            }
+        },
+        "clsx": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+        },
+        "color-convert": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+            "requires": {
+                "color-name": "1.1.3"
+            }
+        },
+        "color-name": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+        },
+        "combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "requires": {
+                "delayed-stream": "~1.0.0"
+            }
+        },
+        "concat-map": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+            "dev": true
+        },
+        "convert-source-map": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+            "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+        },
+        "core-util-is": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+        },
+        "cosmiconfig": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+            "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+            "requires": {
+                "@types/parse-json": "^4.0.0",
+                "import-fresh": "^3.2.1",
+                "parse-json": "^5.0.0",
+                "path-type": "^4.0.0",
+                "yaml": "^1.10.0"
+            }
+        },
+        "cross-fetch": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+            "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+            "requires": {
+                "node-fetch": "^2.6.12"
+            }
+        },
+        "cross-spawn": {
+            "version": "7.0.3",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+            "dev": true,
+            "requires": {
+                "path-key": "^3.1.0",
+                "shebang-command": "^2.0.0",
+                "which": "^2.0.1"
+            }
+        },
+        "csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+        },
+        "dayjs": {
+            "version": "1.11.11",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
+            "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
+        },
+        "debug": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "dev": true,
+            "requires": {
+                "ms": "2.1.2"
+            }
+        },
+        "deep-is": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+            "dev": true
+        },
+        "delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+        },
+        "dir-glob": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+            "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+            "dev": true,
+            "requires": {
+                "path-type": "^4.0.0"
+            }
+        },
+        "doctrine": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+            "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+            "dev": true,
+            "requires": {
+                "esutils": "^2.0.2"
+            }
+        },
+        "dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "requires": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
+        "electron-to-chromium": {
+            "version": "1.4.756",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
+            "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==",
+            "dev": true
+        },
+        "error-ex": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+            "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+            "requires": {
+                "is-arrayish": "^0.2.1"
+            }
+        },
+        "esbuild": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+            "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+            "dev": true,
+            "requires": {
+                "@esbuild/aix-ppc64": "0.20.2",
+                "@esbuild/android-arm": "0.20.2",
+                "@esbuild/android-arm64": "0.20.2",
+                "@esbuild/android-x64": "0.20.2",
+                "@esbuild/darwin-arm64": "0.20.2",
+                "@esbuild/darwin-x64": "0.20.2",
+                "@esbuild/freebsd-arm64": "0.20.2",
+                "@esbuild/freebsd-x64": "0.20.2",
+                "@esbuild/linux-arm": "0.20.2",
+                "@esbuild/linux-arm64": "0.20.2",
+                "@esbuild/linux-ia32": "0.20.2",
+                "@esbuild/linux-loong64": "0.20.2",
+                "@esbuild/linux-mips64el": "0.20.2",
+                "@esbuild/linux-ppc64": "0.20.2",
+                "@esbuild/linux-riscv64": "0.20.2",
+                "@esbuild/linux-s390x": "0.20.2",
+                "@esbuild/linux-x64": "0.20.2",
+                "@esbuild/netbsd-x64": "0.20.2",
+                "@esbuild/openbsd-x64": "0.20.2",
+                "@esbuild/sunos-x64": "0.20.2",
+                "@esbuild/win32-arm64": "0.20.2",
+                "@esbuild/win32-ia32": "0.20.2",
+                "@esbuild/win32-x64": "0.20.2"
+            }
+        },
+        "escalade": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+            "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+            "dev": true
+        },
+        "escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "eslint": {
+            "version": "8.57.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+            "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+            "dev": true,
+            "requires": {
+                "@eslint-community/eslint-utils": "^4.2.0",
+                "@eslint-community/regexpp": "^4.6.1",
+                "@eslint/eslintrc": "^2.1.4",
+                "@eslint/js": "8.57.0",
+                "@humanwhocodes/config-array": "^0.11.14",
+                "@humanwhocodes/module-importer": "^1.0.1",
+                "@nodelib/fs.walk": "^1.2.8",
+                "@ungap/structured-clone": "^1.2.0",
+                "ajv": "^6.12.4",
+                "chalk": "^4.0.0",
+                "cross-spawn": "^7.0.2",
+                "debug": "^4.3.2",
+                "doctrine": "^3.0.0",
+                "escape-string-regexp": "^4.0.0",
+                "eslint-scope": "^7.2.2",
+                "eslint-visitor-keys": "^3.4.3",
+                "espree": "^9.6.1",
+                "esquery": "^1.4.2",
+                "esutils": "^2.0.2",
+                "fast-deep-equal": "^3.1.3",
+                "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
+                "glob-parent": "^6.0.2",
+                "globals": "^13.19.0",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.2.0",
+                "imurmurhash": "^0.1.4",
+                "is-glob": "^4.0.0",
+                "is-path-inside": "^3.0.3",
+                "js-yaml": "^4.1.0",
+                "json-stable-stringify-without-jsonify": "^1.0.1",
+                "levn": "^0.4.1",
+                "lodash.merge": "^4.6.2",
+                "minimatch": "^3.1.2",
+                "natural-compare": "^1.4.0",
+                "optionator": "^0.9.3",
+                "strip-ansi": "^6.0.1",
+                "text-table": "^0.2.0"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "brace-expansion": {
+                    "version": "1.1.11",
+                    "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+                    "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+                    "dev": true,
+                    "requires": {
+                        "balanced-match": "^1.0.0",
+                        "concat-map": "0.0.1"
+                    }
+                },
+                "chalk": {
+                    "version": "4.1.2",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+                    "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+                    "dev": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true
+                },
+                "globals": {
+                    "version": "13.24.0",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+                    "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+                    "dev": true,
+                    "requires": {
+                        "type-fest": "^0.20.2"
+                    }
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true
+                },
+                "minimatch": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+                    "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+                    "dev": true,
+                    "requires": {
+                        "brace-expansion": "^1.1.7"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                }
+            }
+        },
+        "eslint-config-prettier": {
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+            "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+            "dev": true,
+            "requires": {}
+        },
+        "eslint-plugin-prettier": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+            "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
+            "dev": true,
+            "requires": {
+                "prettier-linter-helpers": "^1.0.0",
+                "synckit": "^0.8.6"
+            }
+        },
+        "eslint-plugin-react-hooks": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+            "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+            "dev": true,
+            "requires": {}
+        },
+        "eslint-plugin-react-refresh": {
+            "version": "0.4.6",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.6.tgz",
+            "integrity": "sha512-NjGXdm7zgcKRkKMua34qVO9doI7VOxZ6ancSvBELJSSoX97jyndXcSoa8XBh69JoB31dNz3EEzlMcizZl7LaMA==",
+            "dev": true,
+            "requires": {}
+        },
+        "eslint-scope": {
+            "version": "7.2.2",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+            "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+            "dev": true,
+            "requires": {
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+            }
+        },
+        "eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true
+        },
+        "espree": {
+            "version": "9.6.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+            "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+            "dev": true,
+            "requires": {
+                "acorn": "^8.9.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^3.4.1"
+            }
+        },
+        "esquery": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+            "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+            "dev": true,
+            "requires": {
+                "estraverse": "^5.1.0"
+            }
+        },
+        "esrecurse": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+            "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+            "dev": true,
+            "requires": {
+                "estraverse": "^5.2.0"
+            }
+        },
+        "estraverse": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+            "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+            "dev": true
+        },
+        "esutils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "dev": true
+        },
+        "fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true
+        },
+        "fast-diff": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+            "dev": true
+        },
+        "fast-glob": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+            "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+            "dev": true,
+            "requires": {
+                "@nodelib/fs.stat": "^2.0.2",
+                "@nodelib/fs.walk": "^1.2.3",
+                "glob-parent": "^5.1.2",
+                "merge2": "^1.3.0",
+                "micromatch": "^4.0.4"
+            },
+            "dependencies": {
+                "glob-parent": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+                    "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+                    "dev": true,
+                    "requires": {
+                        "is-glob": "^4.0.1"
+                    }
+                }
+            }
+        },
+        "fast-json-stable-stringify": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+            "dev": true
+        },
+        "fast-levenshtein": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+            "dev": true
+        },
+        "fastq": {
+            "version": "1.17.1",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+            "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+            "dev": true,
+            "requires": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "file-entry-cache": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+            "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+            "dev": true,
+            "requires": {
+                "flat-cache": "^3.0.4"
+            }
+        },
+        "fill-range": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "dev": true,
+            "requires": {
+                "to-regex-range": "^5.0.1"
+            }
+        },
+        "find-root": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+            "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+        },
+        "find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "requires": {
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            }
+        },
+        "flat-cache": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+            "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+            "dev": true,
+            "requires": {
+                "flatted": "^3.2.9",
+                "keyv": "^4.5.3",
+                "rimraf": "^3.0.2"
+            }
+        },
+        "flatted": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+            "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+            "dev": true
+        },
+        "follow-redirects": {
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+            "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
+        },
+        "form-data": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+            "requires": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            }
+        },
+        "fs.realpath": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+            "dev": true
+        },
+        "fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "dev": true,
+            "optional": true
+        },
+        "function-bind": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+        },
+        "gensync": {
+            "version": "1.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+            "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+            "dev": true
+        },
+        "glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "dev": true,
+            "requires": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "dependencies": {
+                "brace-expansion": {
+                    "version": "1.1.11",
+                    "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+                    "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+                    "dev": true,
+                    "requires": {
+                        "balanced-match": "^1.0.0",
+                        "concat-map": "0.0.1"
+                    }
+                },
+                "minimatch": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+                    "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+                    "dev": true,
+                    "requires": {
+                        "brace-expansion": "^1.1.7"
+                    }
+                }
+            }
+        },
+        "glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "requires": {
+                "is-glob": "^4.0.3"
+            }
+        },
+        "globals": {
+            "version": "11.12.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+            "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+            "dev": true
+        },
+        "globby": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "dev": true,
+            "requires": {
+                "array-union": "^2.1.0",
+                "dir-glob": "^3.0.1",
+                "fast-glob": "^3.2.9",
+                "ignore": "^5.2.0",
+                "merge2": "^1.4.1",
+                "slash": "^3.0.0"
+            }
+        },
+        "graphemer": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+            "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+            "dev": true
+        },
+        "has-flag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+        },
+        "hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "requires": {
+                "function-bind": "^1.1.2"
+            }
+        },
+        "hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "requires": {
+                "react-is": "^16.7.0"
+            },
+            "dependencies": {
+                "react-is": {
+                    "version": "16.13.1",
+                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+                }
+            }
+        },
+        "html-parse-stringify": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+            "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+            "requires": {
+                "void-elements": "3.1.0"
+            }
+        },
+        "husky": {
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz",
+            "integrity": "sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==",
+            "dev": true
+        },
+        "i18next": {
+            "version": "23.11.3",
+            "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.3.tgz",
+            "integrity": "sha512-Pq/aSKowir7JM0rj+Wa23Kb6KKDUGno/HjG+wRQu0PxoTbpQ4N89MAT0rFGvXmLkRLNMb1BbBOKGozl01dabzg==",
+            "requires": {
+                "@babel/runtime": "^7.23.2"
+            }
+        },
+        "i18next-browser-languagedetector": {
+            "version": "7.2.1",
+            "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.1.tgz",
+            "integrity": "sha512-h/pM34bcH6tbz8WgGXcmWauNpQupCGr25XPp9cZwZInR9XHSjIFDYp1SIok7zSPsTOMxdvuLyu86V+g2Kycnfw==",
+            "requires": {
+                "@babel/runtime": "^7.23.2"
+            }
+        },
+        "i18next-http-backend": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.5.1.tgz",
+            "integrity": "sha512-+rNX1tghdVxdfjfPt0bI1sNg5ahGW9kA7OboG7b4t03Fp69NdDlRIze6yXhIbN8rbHxJ8IP4dzRm/okZ15lkQg==",
+            "requires": {
+                "cross-fetch": "4.0.0"
+            }
+        },
+        "ignore": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+            "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+            "dev": true
+        },
+        "immediate": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+            "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+        },
+        "import-fresh": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+            "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+            "requires": {
+                "parent-module": "^1.0.0",
+                "resolve-from": "^4.0.0"
+            }
+        },
+        "imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true
+        },
+        "inflight": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+            "dev": true,
+            "requires": {
+                "once": "^1.3.0",
+                "wrappy": "1"
+            }
+        },
+        "inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        },
+        "invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "requires": {
+                "loose-envify": "^1.0.0"
+            }
+        },
+        "is-arrayish": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+        },
+        "is-core-module": {
+            "version": "2.13.1",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+            "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+            "requires": {
+                "hasown": "^2.0.0"
+            }
+        },
+        "is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true
+        },
+        "is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "requires": {
+                "is-extglob": "^2.1.1"
+            }
+        },
+        "is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true
+        },
+        "is-path-inside": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+            "dev": true
+        },
+        "isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        },
+        "isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true
+        },
+        "js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+        },
+        "js-yaml": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+            "dev": true,
+            "requires": {
+                "argparse": "^2.0.1"
+            }
+        },
+        "jsesc": {
+            "version": "2.5.2",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+            "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+            "dev": true
+        },
+        "json-buffer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true
+        },
+        "json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+        },
+        "json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+            "dev": true
+        },
+        "json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true
+        },
+        "json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true
+        },
+        "jszip": {
+            "version": "3.10.1",
+            "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+            "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+            "requires": {
+                "lie": "~3.3.0",
+                "pako": "~1.0.2",
+                "readable-stream": "~2.3.6",
+                "setimmediate": "^1.0.5"
+            }
+        },
+        "keyv": {
+            "version": "4.5.4",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "requires": {
+                "json-buffer": "3.0.1"
+            }
+        },
+        "levn": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
+            "requires": {
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
+            }
+        },
+        "lie": {
+            "version": "3.3.0",
+            "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+            "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+            "requires": {
+                "immediate": "~3.0.5"
+            }
+        },
+        "lines-and-columns": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+        },
+        "localforage": {
+            "version": "1.10.0",
+            "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+            "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+            "requires": {
+                "lie": "3.1.1"
+            },
+            "dependencies": {
+                "lie": {
+                    "version": "3.1.1",
+                    "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+                    "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+                    "requires": {
+                        "immediate": "~3.0.5"
+                    }
+                }
+            }
+        },
+        "locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "requires": {
+                "p-locate": "^5.0.0"
+            }
+        },
+        "lodash.merge": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+            "dev": true
+        },
+        "loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "requires": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            }
+        },
+        "lru-cache": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+            "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+            "dev": true,
+            "requires": {
+                "yallist": "^3.0.2"
+            }
+        },
+        "match-sorter": {
+            "version": "6.3.4",
+            "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
+            "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
+            "requires": {
+                "@babel/runtime": "^7.23.8",
+                "remove-accents": "0.5.0"
+            }
+        },
+        "merge2": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+            "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+            "dev": true
+        },
+        "micromatch": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+            "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+            "dev": true,
+            "requires": {
+                "braces": "^3.0.2",
+                "picomatch": "^2.3.1"
+            }
+        },
+        "mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+        },
+        "mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "requires": {
+                "mime-db": "1.52.0"
+            }
+        },
+        "minimatch": {
+            "version": "9.0.4",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+            "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+            "dev": true,
+            "requires": {
+                "brace-expansion": "^2.0.1"
+            }
+        },
+        "ms": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+            "dev": true
+        },
+        "nanoid": {
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "dev": true
+        },
+        "natural-compare": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true
+        },
+        "node-fetch": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+            "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+            "requires": {
+                "whatwg-url": "^5.0.0"
+            }
+        },
+        "node-releases": {
+            "version": "2.0.14",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+            "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+            "dev": true
+        },
+        "object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+        },
+        "once": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+            "dev": true,
+            "requires": {
+                "wrappy": "1"
+            }
+        },
+        "optionator": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
+            "requires": {
+                "deep-is": "^0.1.3",
+                "fast-levenshtein": "^2.0.6",
+                "levn": "^0.4.1",
+                "prelude-ls": "^1.2.1",
+                "type-check": "^0.4.0",
+                "word-wrap": "^1.2.5"
+            }
+        },
+        "p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "requires": {
+                "yocto-queue": "^0.1.0"
+            }
+        },
+        "p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "requires": {
+                "p-limit": "^3.0.2"
+            }
+        },
+        "pako": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+        },
+        "papaparse": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+            "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+        },
+        "parent-module": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+            "requires": {
+                "callsites": "^3.0.0"
+            }
+        },
+        "parse-json": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+            "requires": {
+                "@babel/code-frame": "^7.0.0",
+                "error-ex": "^1.3.1",
+                "json-parse-even-better-errors": "^2.3.0",
+                "lines-and-columns": "^1.1.6"
+            }
+        },
+        "path-exists": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true
+        },
+        "path-is-absolute": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+            "dev": true
+        },
+        "path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true
+        },
+        "path-parse": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+        },
+        "path-type": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+        },
+        "picocolors": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+        },
+        "picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true
+        },
+        "postcss": {
+            "version": "8.4.38",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+            "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+            "dev": true,
+            "requires": {
+                "nanoid": "^3.3.7",
+                "picocolors": "^1.0.0",
+                "source-map-js": "^1.2.0"
+            }
+        },
+        "prelude-ls": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+            "dev": true
+        },
+        "prettier": {
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+            "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+            "dev": true
+        },
+        "prettier-linter-helpers": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+            "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+            "dev": true,
+            "requires": {
+                "fast-diff": "^1.1.2"
+            }
+        },
+        "process-nextick-args": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+        },
+        "prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "requires": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            },
+            "dependencies": {
+                "react-is": {
+                    "version": "16.13.1",
+                    "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+                    "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+                }
+            }
+        },
+        "proxy-from-env": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+        },
+        "punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true
+        },
+        "queue-microtask": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+            "dev": true
+        },
+        "react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "requires": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "requires": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.2"
+            }
+        },
+        "react-fast-compare": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+            "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+        },
+        "react-helmet": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+            "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+            "requires": {
+                "object-assign": "^4.1.1",
+                "prop-types": "^15.7.2",
+                "react-fast-compare": "^3.1.1",
+                "react-side-effect": "^2.1.0"
+            }
+        },
+        "react-helmet-async": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.4.tgz",
+            "integrity": "sha512-yxjQMWposw+akRfvpl5+8xejl4JtUlHnEBcji6u8/e6oc7ozT+P9PNTWMhCbz2y9tc5zPegw2BvKjQA+NwdEjQ==",
+            "requires": {
+                "invariant": "^2.2.4",
+                "react-fast-compare": "^3.2.2",
+                "shallowequal": "^1.1.0"
+            }
+        },
+        "react-i18next": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",
+            "integrity": "sha512-QSiKw+ihzJ/CIeIYWrarCmXJUySHDwQr5y8uaNIkbxoGRm/5DukkxZs+RPla79IKyyDPzC/DRlgQCABHtrQuQQ==",
+            "requires": {
+                "@babel/runtime": "^7.23.9",
+                "html-parse-stringify": "^3.0.1"
+            }
+        },
+        "react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+        },
+        "react-refresh": {
+            "version": "0.14.2",
+            "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+            "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+            "dev": true
+        },
+        "react-router": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+            "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+            "requires": {
+                "@remix-run/router": "1.16.0"
+            }
+        },
+        "react-router-dom": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+            "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+            "requires": {
+                "@remix-run/router": "1.16.0",
+                "react-router": "6.23.0"
+            }
+        },
+        "react-side-effect": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+            "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+            "requires": {}
+        },
+        "react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            }
+        },
+        "readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "requires": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            }
+        },
+        "regenerator-runtime": {
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+            "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        },
+        "remove-accents": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+            "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+        },
+        "resolve": {
+            "version": "1.22.8",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+            "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+            "requires": {
+                "is-core-module": "^2.13.0",
+                "path-parse": "^1.0.7",
+                "supports-preserve-symlinks-flag": "^1.0.0"
+            }
+        },
+        "resolve-from": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        },
+        "reusify": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+            "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+            "dev": true
+        },
+        "rimraf": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+            "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+            "dev": true,
+            "requires": {
+                "glob": "^7.1.3"
+            }
+        },
+        "rollup": {
+            "version": "4.17.2",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
+            "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
+            "dev": true,
+            "requires": {
+                "@rollup/rollup-android-arm-eabi": "4.17.2",
+                "@rollup/rollup-android-arm64": "4.17.2",
+                "@rollup/rollup-darwin-arm64": "4.17.2",
+                "@rollup/rollup-darwin-x64": "4.17.2",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
+                "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
+                "@rollup/rollup-linux-arm64-gnu": "4.17.2",
+                "@rollup/rollup-linux-arm64-musl": "4.17.2",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
+                "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
+                "@rollup/rollup-linux-s390x-gnu": "4.17.2",
+                "@rollup/rollup-linux-x64-gnu": "4.17.2",
+                "@rollup/rollup-linux-x64-musl": "4.17.2",
+                "@rollup/rollup-win32-arm64-msvc": "4.17.2",
+                "@rollup/rollup-win32-ia32-msvc": "4.17.2",
+                "@rollup/rollup-win32-x64-msvc": "4.17.2",
+                "@types/estree": "1.0.5",
+                "fsevents": "~2.3.2"
+            }
+        },
+        "run-parallel": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+            "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+            "dev": true,
+            "requires": {
+                "queue-microtask": "^1.2.2"
+            }
+        },
+        "safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "scheduler": {
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "requires": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "semver": {
+            "version": "7.6.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+            "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+            "dev": true,
+            "requires": {
+                "lru-cache": "^6.0.0"
+            },
+            "dependencies": {
+                "lru-cache": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+                    "dev": true,
+                    "requires": {
+                        "yallist": "^4.0.0"
+                    }
+                },
+                "yallist": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+                    "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+                    "dev": true
+                }
+            }
+        },
+        "setimmediate": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+            "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+        },
+        "shallowequal": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        },
+        "shebang-command": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "requires": {
+                "shebang-regex": "^3.0.0"
+            }
+        },
+        "shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true
+        },
+        "slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true
+        },
+        "source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        },
+        "source-map-js": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+            "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+            "dev": true
+        },
+        "string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "requires": {
+                "safe-buffer": "~5.1.0"
+            }
+        },
+        "strip-ansi": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "requires": {
+                "ansi-regex": "^5.0.1"
+            }
+        },
+        "strip-json-comments": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+            "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+            "dev": true
+        },
+        "stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+        },
+        "supports-color": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+            "requires": {
+                "has-flag": "^3.0.0"
+            }
+        },
+        "supports-preserve-symlinks-flag": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+        },
+        "synckit": {
+            "version": "0.8.8",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+            "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+            "dev": true,
+            "requires": {
+                "@pkgr/core": "^0.1.0",
+                "tslib": "^2.6.2"
+            }
+        },
+        "text-table": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+            "dev": true
+        },
+        "to-fast-properties": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+        },
+        "to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "requires": {
+                "is-number": "^7.0.0"
+            }
+        },
+        "tr46": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+            "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "ts-api-utils": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+            "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+            "dev": true,
+            "requires": {}
+        },
+        "tslib": {
+            "version": "2.6.2",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+            "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+            "dev": true
+        },
+        "type-check": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+            "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+            "dev": true,
+            "requires": {
+                "prelude-ls": "^1.2.1"
+            }
+        },
+        "type-fest": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+            "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+            "dev": true
+        },
+        "typescript": {
+            "version": "5.4.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+            "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+            "dev": true
+        },
+        "undici-types": {
+            "version": "5.26.5",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+            "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+            "dev": true
+        },
+        "update-browserslist-db": {
+            "version": "1.0.15",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.15.tgz",
+            "integrity": "sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==",
+            "dev": true,
+            "requires": {
+                "escalade": "^3.1.2",
+                "picocolors": "^1.0.0"
+            }
+        },
+        "uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dev": true,
+            "requires": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+        },
+        "vite": {
+            "version": "5.2.11",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
+            "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
+            "dev": true,
+            "requires": {
+                "esbuild": "^0.20.1",
+                "fsevents": "~2.3.3",
+                "postcss": "^8.4.38",
+                "rollup": "^4.13.0"
+            }
+        },
+        "void-elements": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+            "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
+        },
+        "webidl-conversions": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+            "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "whatwg-url": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+            "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+            "requires": {
+                "tr46": "~0.0.3",
+                "webidl-conversions": "^3.0.0"
+            }
+        },
+        "which": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "requires": {
+                "isexe": "^2.0.0"
+            }
+        },
+        "word-wrap": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+            "dev": true
+        },
+        "wrappy": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+            "dev": true
+        },
+        "yallist": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+            "dev": true
+        },
+        "yaml": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+        },
+        "yocto-queue": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+            "dev": true
+        }
+    }
+}
diff --git a/frontend/frontend/package-lock.json.orig b/frontend/frontend/package-lock.json.orig
deleted file mode 100644
index c033f4c0..00000000
--- a/frontend/frontend/package-lock.json.orig
+++ /dev/null
@@ -1,4382 +0,0 @@
-{
-  "name": "frontend",
-  "version": "0.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "frontend",
-      "version": "0.0.0",
-      "dependencies": {
-        "@azure/msal-browser": "^3.11.0",
-        "@azure/msal-react": "^2.0.13",
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.0",
-        "@fontsource/roboto": "^5.0.8",
-        "@mui/icons-material": "^5.15.11",
-        "@mui/material": "^5.15.12",
-        "@mui/x-date-pickers": "^6.19.6",
-        "axios": "^1.6.7",
-        "dayjs": "^1.11.10",
-        "i18next": "^23.10.0",
-        "i18next-browser-languagedetector": "^7.2.0",
-        "i18next-http-backend": "^2.5.0",
-        "localforage": "^1.10.0",
-        "match-sorter": "^6.3.4",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-helmet": "^6.1.0",
-        "react-helmet-async": "^2.0.4",
-        "react-i18next": "^14.0.5",
-        "react-router-dom": "^6.22.2"
-      },
-      "devDependencies": {
-        "@types/react": "^18.2.56",
-        "@types/react-dom": "^18.2.19",
-        "@types/react-helmet": "^6.1.11",
-        "@typescript-eslint/eslint-plugin": "^7.0.2",
-        "@typescript-eslint/parser": "^7.0.2",
-        "@vitejs/plugin-react": "^4.2.1",
-        "eslint": "^8.56.0",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.5",
-        "typescript": "^5.2.2",
-        "vite": "^5.1.7"
-      }
-    },
-    "node_modules/@aashutoshrathi/word-wrap": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@azure/msal-browser": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-3.11.0.tgz",
-      "integrity": "sha512-Xc0g1gdB2gdscPeuUGKmlGMgP1L/AWDeuxaToWkeautPdZqKvzeE82ggqLMctKZ0yq6e7F1XfGhUDCcUo7Db9w==",
-      "dependencies": {
-        "@azure/msal-common": "14.8.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/@azure/msal-common": {
-      "version": "14.8.0",
-      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-14.8.0.tgz",
-      "integrity": "sha512-FIghuAzpgmc5ZAW2rCTAHKdhGcCRqg/UyroidTgGgSRrG1gOsEbUTW+7lmEFTz84ttCv5RnjOAUUi/SQjUTw0w==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/@azure/msal-react": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-2.0.13.tgz",
-      "integrity": "sha512-M+xmk6Avkrt/Gmxr9TusrGHHcMTr3aqLVm1S9l/mRAvSRlpuvnHE2gCFKSjWP9G3kDoiPPLADXj7Q+r/3VMa6A==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@azure/msal-browser": "^3.11.0",
-        "react": "^16.8.0 || ^17 || ^18"
-      }
-    },
-    "node_modules/@babel/code-frame": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dependencies": {
-        "@babel/highlight": "^7.23.4",
-        "chalk": "^2.4.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
-      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
-      "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
-      "dev": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.24.0",
-        "@babel/parser": "^7.24.0",
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.0",
-        "@babel/types": "^7.24.0",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/core/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
-        "jsesc": "^2.5.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
-      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.23.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "browserslist": "^4.22.2",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
-      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-function-name": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
-      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/types": "^7.23.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
-      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dependencies": {
-        "@babel/types": "^7.22.15"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
-      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-module-imports": "^7.22.15",
-        "@babel/helper-simple-access": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/helper-validator-identifier": "^7.22.20"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
-      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
-      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
-      "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.0",
-        "@babel/types": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
-      "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
-      "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
-      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
-      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.24.0",
-        "@babel/types": "^7.24.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
-      "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.24.0",
-        "@babel/types": "^7.24.0",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
-      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.11.0",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
-      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.1",
-        "@emotion/memoize": "^0.8.1",
-        "@emotion/serialize": "^1.1.2",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/cache": {
-      "version": "11.11.0",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
-      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
-      "dependencies": {
-        "@emotion/memoize": "^0.8.1",
-        "@emotion/sheet": "^1.2.2",
-        "@emotion/utils": "^1.2.1",
-        "@emotion/weak-memoize": "^0.3.1",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
-      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
-    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
-      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
-      "dependencies": {
-        "@emotion/memoize": "^0.8.1"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.11.4",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
-      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.11.0",
-        "@emotion/cache": "^11.11.0",
-        "@emotion/serialize": "^1.1.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
-        "@emotion/utils": "^1.2.1",
-        "@emotion/weak-memoize": "^0.3.1",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/serialize": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz",
-      "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==",
-      "dependencies": {
-        "@emotion/hash": "^0.9.1",
-        "@emotion/memoize": "^0.8.1",
-        "@emotion/unitless": "^0.8.1",
-        "@emotion/utils": "^1.2.1",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
-      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
-    },
-    "node_modules/@emotion/styled": {
-      "version": "11.11.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
-      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.11.0",
-        "@emotion/is-prop-valid": "^1.2.1",
-        "@emotion/serialize": "^1.1.2",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
-        "@emotion/utils": "^1.2.1"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.0.0-rc.0",
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
-    },
-    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
-      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
-      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
-      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-      }
-    },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
-      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "dev": true,
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
-      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.1"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
-      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
-      "dependencies": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
-      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
-      "dependencies": {
-        "@floating-ui/dom": "^1.6.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
-    },
-    "node_modules/@fontsource/roboto": {
-      "version": "5.0.12",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.12.tgz",
-      "integrity": "sha512-x0o17jvgoSSbS9OZnUX2+xJmVRvVCfeaYJjkS7w62iN7CuJWtMf5vJj8LqgC7ibqIkitOHVW+XssRjgrcHn62g=="
-    },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
-      "dev": true,
-      "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
-      },
-      "engines": {
-        "node": ">=10.10.0"
-      }
-    },
-    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
-      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
-      "dev": true
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@mui/base": {
-      "version": "5.0.0-beta.38",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.38.tgz",
-      "integrity": "sha512-AsjD6Y1X5A1qndxz8xCcR8LDqv31aiwlgWMPxFAX/kCKiIGKlK65yMeVZ62iQr/6LBz+9hSKLiD1i4TZdAHKcQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@floating-ui/react-dom": "^2.0.8",
-        "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.12",
-        "@popperjs/core": "^2.11.8",
-        "clsx": "^2.1.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.12",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.12.tgz",
-      "integrity": "sha512-brRO+tMFLpGyjEYHrX97bzqeF6jZmKpqqe1rY0LyIHAwP6xRVzh++zSecOQorDOCaZJg4XkGT9xfD+RWOWxZBA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      }
-    },
-    "node_modules/@mui/icons-material": {
-      "version": "5.15.12",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.12.tgz",
-      "integrity": "sha512-3BXiDlOd3AexZoEXa/VqpIpVIvosCzjLHsdMWzKMXbZdnBiJjmb9ECdqfjn5SpTClO49qvkKLhkTqdBH3fSFGw==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@mui/material": "^5.0.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/material": {
-      "version": "5.15.12",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.12.tgz",
-      "integrity": "sha512-vXJGg6KNKucsvbW6l7w9zafnpOp0CWc0Wx4mDykuABTpQ5QQBnZxP7+oB4yAS1hDZQ1WobbeIl0CjxK4EEahkA==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/base": "5.0.0-beta.38",
-        "@mui/core-downloads-tracker": "^5.15.12",
-        "@mui/system": "^5.15.12",
-        "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.12",
-        "@types/react-transition-group": "^4.4.10",
-        "clsx": "^2.1.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.2.0",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/private-theming": {
-      "version": "5.15.12",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.12.tgz",
-      "integrity": "sha512-cqoSo9sgA5HE+8vZClbLrq9EkyOnYysooepi5eKaKvJ41lReT2c5wOZAeDDM1+xknrMDos+0mT2zr3sZmUiRRA==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.15.12",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/styled-engine": {
-      "version": "5.15.11",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.11.tgz",
-      "integrity": "sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@emotion/cache": "^11.11.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/system": {
-      "version": "5.15.12",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.12.tgz",
-      "integrity": "sha512-/pq+GO6yN3X7r3hAwFTrzkAh7K1bTF5r8IzS79B9eyKJg7v6B/t4/zZYMR6OT9qEPtwf6rYN2Utg1e6Z7F1OgQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.15.12",
-        "@mui/styled-engine": "^5.15.11",
-        "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.12",
-        "clsx": "^2.1.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/types": {
-      "version": "7.2.13",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
-      "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/utils": {
-      "version": "5.15.12",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.12.tgz",
-      "integrity": "sha512-8SDGCnO2DY9Yy+5bGzu00NZowSDtuyHP4H8gunhHGQoIlhlY2Z3w64wBzAOLpYw/ZhJNzksDTnS/i8qdJvxuow==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@types/prop-types": "^15.7.11",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.2.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mui/x-date-pickers": {
-      "version": "6.19.6",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.6.tgz",
-      "integrity": "sha512-QW9AFcPi0vLpkUhmquhhyhLaBvB0AZJuu3NTrE173qNKx3Z3n51aCLY9bc7c6i4ltZMMsVRHlvzQjsve04TC8A==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/base": "^5.0.0-beta.22",
-        "@mui/utils": "^5.14.16",
-        "@types/react-transition-group": "^4.4.8",
-        "clsx": "^2.0.0",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.8.6",
-        "@mui/system": "^5.8.0",
-        "date-fns": "^2.25.0 || ^3.2.0",
-        "date-fns-jalali": "^2.13.0-0",
-        "dayjs": "^1.10.7",
-        "luxon": "^3.0.2",
-        "moment": "^2.29.4",
-        "moment-hijri": "^2.1.2",
-        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "date-fns": {
-          "optional": true
-        },
-        "date-fns-jalali": {
-          "optional": true
-        },
-        "dayjs": {
-          "optional": true
-        },
-        "luxon": {
-          "optional": true
-        },
-        "moment": {
-          "optional": true
-        },
-        "moment-hijri": {
-          "optional": true
-        },
-        "moment-jalaali": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/@remix-run/router": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz",
-      "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz",
-      "integrity": "sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.1.tgz",
-      "integrity": "sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.1.tgz",
-      "integrity": "sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz",
-      "integrity": "sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.1.tgz",
-      "integrity": "sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.1.tgz",
-      "integrity": "sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.1.tgz",
-      "integrity": "sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.1.tgz",
-      "integrity": "sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.1.tgz",
-      "integrity": "sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.1.tgz",
-      "integrity": "sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.1.tgz",
-      "integrity": "sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.1.tgz",
-      "integrity": "sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.1.tgz",
-      "integrity": "sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.6.8",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
-      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
-      "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.20.7"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
-    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
-    },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
-    },
-    "node_modules/@types/react": {
-      "version": "18.2.63",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.63.tgz",
-      "integrity": "sha512-ppaqODhs15PYL2nGUOaOu2RSCCB4Difu4UFrP4I3NHLloXC/ESQzQMi9nvjfT1+rudd0d2L3fQPJxRSey+rGlQ==",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "18.2.20",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.20.tgz",
-      "integrity": "sha512-HXN/biJY8nv20Cn9ZbCFq3liERd4CozVZmKbaiZ9KiKTrWqsP7eoGDO6OOGvJQwoVFuiXaiJ7nBBjiFFbRmQMQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-helmet": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
-      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.10",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
-      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
-    },
-    "node_modules/@types/semver": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
-      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz",
-      "integrity": "sha512-zioDz623d0RHNhvx0eesUmGfIjzrk18nSBC8xewepKXbBvN/7c1qImV7Hg8TI1URTxKax7/zxfxj3Uph8Chcuw==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "7.1.1",
-        "@typescript-eslint/type-utils": "7.1.1",
-        "@typescript-eslint/utils": "7.1.1",
-        "@typescript-eslint/visitor-keys": "7.1.1",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.4",
-        "natural-compare": "^1.4.0",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^7.0.0",
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.1.1.tgz",
-      "integrity": "sha512-ZWUFyL0z04R1nAEgr9e79YtV5LbafdOtN7yapNbn1ansMyaegl2D4bL7vHoJ4HPSc4CaLwuCVas8CVuneKzplQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "7.1.1",
-        "@typescript-eslint/types": "7.1.1",
-        "@typescript-eslint/typescript-estree": "7.1.1",
-        "@typescript-eslint/visitor-keys": "7.1.1",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.1.1.tgz",
-      "integrity": "sha512-cirZpA8bJMRb4WZ+rO6+mnOJrGFDd38WoXCEI57+CYBqta8Yc8aJym2i7vyqLL1vVYljgw0X27axkUXz32T8TA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.1.1",
-        "@typescript-eslint/visitor-keys": "7.1.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.1.1.tgz",
-      "integrity": "sha512-5r4RKze6XHEEhlZnJtR3GYeCh1IueUHdbrukV2KSlLXaTjuSfeVF8mZUVPLovidCuZfbVjfhi4c0DNSa/Rdg5g==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.1.1",
-        "@typescript-eslint/utils": "7.1.1",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.1.1.tgz",
-      "integrity": "sha512-KhewzrlRMrgeKm1U9bh2z5aoL4s7K3tK5DwHDn8MHv0yQfWFz/0ZR6trrIHHa5CsF83j/GgHqzdbzCXJ3crx0Q==",
-      "dev": true,
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.1.tgz",
-      "integrity": "sha512-9ZOncVSfr+sMXVxxca2OJOPagRwT0u/UHikM2Rd6L/aB+kL/QAuTnsv6MeXtjzCJYb8PzrXarypSGIPx3Jemxw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.1.1",
-        "@typescript-eslint/visitor-keys": "7.1.1",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.1.1.tgz",
-      "integrity": "sha512-thOXM89xA03xAE0lW7alstvnyoBUbBX38YtY+zAUcpRPcq9EIhXPuJ0YTv948MbzmKh6e1AUszn5cBFK49Umqg==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "7.1.1",
-        "@typescript-eslint/types": "7.1.1",
-        "@typescript-eslint/typescript-estree": "7.1.1",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^8.56.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.1.tgz",
-      "integrity": "sha512-yTdHDQxY7cSoCcAtiBzVzxleJhkGB9NncSIyMYe2+OGON1ZsP9zOPws/Pqgopa65jvknOjlk/w7ulPlZ78PiLQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "7.1.1",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
-    },
-    "node_modules/@vitejs/plugin-react": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
-      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.23.5",
-        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
-        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
-        "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.14.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-    },
-    "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
-      "dependencies": {
-        "follow-redirects": "^1.15.4",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001594",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001594.tgz",
-      "integrity": "sha512-VblSX6nYqyJVs8DKFMldE2IVCJjZ225LW00ydtUWwh5hk9IfkTOffO6r8gJNsH0qqqeAF8KrbMYA2VEwTlGW5g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chalk/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/clsx": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
-      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
-    "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-    },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cross-fetch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
-      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
-      "dependencies": {
-        "node-fetch": "^2.6.12"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
-    "node_modules/dayjs": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
-    },
-    "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deep-is": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.4.693",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.693.tgz",
-      "integrity": "sha512-/if4Ueg0GUQlhCrW2ZlXwDAm40ipuKo+OgeHInlL8sbjt+hzISxZK949fZeJaVsheamrzANXvw1zQTvbxTvSHw==",
-      "dev": true
-    },
-    "node_modules/error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz",
-      "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==",
-      "dev": true,
-      "peerDependencies": {
-        "eslint": ">=7"
-      }
-    },
-    "node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/eslint/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/eslint/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
-    },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true
-    },
-    "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
-      "dev": true,
-      "dependencies": {
-        "flat-cache": "^3.0.4"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
-      "dev": true,
-      "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
-    },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/html-parse-stringify": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
-      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
-      "dependencies": {
-        "void-elements": "3.1.0"
-      }
-    },
-    "node_modules/i18next": {
-      "version": "23.10.0",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.10.0.tgz",
-      "integrity": "sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://locize.com"
-        },
-        {
-          "type": "individual",
-          "url": "https://locize.com/i18next.html"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
-        }
-      ],
-      "dependencies": {
-        "@babel/runtime": "^7.23.2"
-      }
-    },
-    "node_modules/i18next-browser-languagedetector": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz",
-      "integrity": "sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2"
-      }
-    },
-    "node_modules/i18next-http-backend": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.5.0.tgz",
-      "integrity": "sha512-Z/aQsGZk1gSxt2/DztXk92DuDD20J+rNudT7ZCdTrNOiK8uQppfvdjq9+DFQfpAnFPn3VZS+KQIr1S/W1KxhpQ==",
-      "dependencies": {
-        "cross-fetch": "4.0.0"
-      }
-    },
-    "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
-    },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
-    },
-    "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dependencies": {
-        "hasown": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "dev": true,
-      "dependencies": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
-    },
-    "node_modules/localforage": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
-      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
-      "dependencies": {
-        "lie": "3.1.1"
-      }
-    },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/match-sorter": {
-      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
-      "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "remove-accents": "0.5.0"
-      }
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
-    },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/optionator": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
-      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
-      "dev": true,
-      "dependencies": {
-        "@aashutoshrathi/word-wrap": "^1.2.3",
-        "deep-is": "^0.1.3",
-        "fast-levenshtein": "^2.0.6",
-        "levn": "^0.4.1",
-        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
-    "node_modules/react-fast-compare": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
-    },
-    "node_modules/react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0"
-      }
-    },
-    "node_modules/react-helmet-async": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.4.tgz",
-      "integrity": "sha512-yxjQMWposw+akRfvpl5+8xejl4JtUlHnEBcji6u8/e6oc7ozT+P9PNTWMhCbz2y9tc5zPegw2BvKjQA+NwdEjQ==",
-      "dependencies": {
-        "invariant": "^2.2.4",
-        "react-fast-compare": "^3.2.2",
-        "shallowequal": "^1.1.0"
-      },
-      "peerDependencies": {
-        "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-i18next": {
-      "version": "14.0.7",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.0.7.tgz",
-      "integrity": "sha512-8VN7IUaTB5t6ut/1LZtdHstQl1KSFStZRw3UGAERfkToVKLF4yvQVMz/Tq/YG3VR2zaWHEU8WrvIbVGhCqv90Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "html-parse-stringify": "^3.0.1"
-      },
-      "peerDependencies": {
-        "i18next": ">= 23.2.3",
-        "react": ">= 16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
-    },
-    "node_modules/react-refresh": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
-      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
-      "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==",
-      "dependencies": {
-        "@remix-run/router": "1.15.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz",
-      "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==",
-      "dependencies": {
-        "@remix-run/router": "1.15.2",
-        "react-router": "6.22.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
-    "node_modules/react-side-effect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
-      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-    },
-    "node_modules/remove-accents": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
-    },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/rollup": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.1.tgz",
-      "integrity": "sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "1.0.5"
-      },
-      "bin": {
-        "rollup": "dist/bin/rollup"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=8.0.0"
-      },
-      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.12.1",
-        "@rollup/rollup-android-arm64": "4.12.1",
-        "@rollup/rollup-darwin-arm64": "4.12.1",
-        "@rollup/rollup-darwin-x64": "4.12.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.12.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.12.1",
-        "@rollup/rollup-linux-arm64-musl": "4.12.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.12.1",
-        "@rollup/rollup-linux-x64-gnu": "4.12.1",
-        "@rollup/rollup-linux-x64-musl": "4.12.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.12.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.12.1",
-        "@rollup/rollup-win32-x64-msvc": "4.12.1",
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/semver/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/semver/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-    },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
-    },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-    },
-    "node_modules/ts-api-utils": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz",
-      "integrity": "sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.2.0"
-      }
-    },
-    "node_modules/type-check": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
-      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/vite": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.7.tgz",
-      "integrity": "sha512-sgnEEFTZYMui/sTlH1/XEnVNHMujOahPLGMxn1+5sIT45Xjng1Ec1K78jRP15dSmVgg5WBin9yO81j3o9OxofA==",
-      "dev": true,
-      "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.35",
-        "rollup": "^4.2.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
-    },
-    "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
-    },
-    "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    }
-  }
-}
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index ecdb5f51..aa52c2b0 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { t } from 'i18next'
-
+import { TextField, Checkbox, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
 /**
  * This UI will show different fields for parameters regarding the restrictions template.
@@ -15,53 +17,80 @@ export default function RestrictionTemplateUI(restrictionCode: string) {
 
     const params = parseParams(restrictionCode);
 
-    return (
-        <>
-            {params.map((param, index) => {
-                switch (param.type) {
-                    // for integer, we will use a number input
-                    case 'number':
-                        return (
-                            <div key={index} style={{ marginBottom: '25px' }}>
-                                <label>{param.description}</label>
-                                <input type='number' value={param.value as number} />
-                            </div>
-                        );
-                    // for string, we will use a text input
-                    case 'string':
-                        return (
-                            <div key={index} style={{ marginBottom: '25px' }}>
-                                <label>{param.description}</label>
-                                <input type='text' value={param.value as string} />
-                            </div>
-                        );
-                    // for boolean, we will use a checkbox
-                    case 'boolean':
-                        return (
-                            <div key={index} style={{ marginBottom: '25px' }}>
-                                <label>{param.description}</label>
-                                <input type='checkbox' checked={param.value as boolean} />
-                            </div>
-                        );
-                    // for lists, we will use a drop down menu
-                    case 'array':
-                        return (
-                            <div key={index} style={{ marginBottom: '25px' }}>
-                                <label>{param.description}</label>
-                                <select>
-                                    {Array.isArray(param.value) && param.value.map((item: string, idx: number) => (
-                                        <option key={idx} value={item}>{item}</option>
-                                    ))}
-                                </select>
-                            </div>
-                        );
-                    default:
-                        return null; // Handle unsupported types
-                }
-            })}
-</>
+    const initialArrayValues = params.filter(param => param.type === 'array').map(param => {
+        return param.value;
+    });
+    const [arrayValues, setArrayValues] = React.useState([...initialArrayValues.map(value => ({ value }))]);
+
+    const handleArrayChange = (index, event) => {
+        const newArrayValues = [...arrayValues];
+        newArrayValues[index].value = event.target.value;
+        setArrayValues(newArrayValues);
+    };
 
-    )
+    const handleDeleteRow = (index) => {
+        const newArrayValues = [...arrayValues];
+        newArrayValues.splice(index, 1);
+        setArrayValues(newArrayValues);
+    };
+
+    const handleAddRow = () => {
+        setArrayValues([...arrayValues, { value: '' }]);
+    };
+
+    return (
+        <div>
+            {params.map((param, index) => (
+                <div key={index} style={{ marginBottom: '20px' }}>
+                    {param.type === 'number' && (
+                        <TextField
+                            label={param.description}
+                            type='number'
+                            value={param.value}
+                            fullWidth
+                        />
+                    )}
+                    {param.type === 'string' && (
+                        <TextField
+                            label={param.description}
+                            type='text'
+                            value={param.value}
+                            fullWidth
+                        />
+                    )}
+                    {param.type === 'boolean' && (
+                        <Checkbox
+                            checked={param.value}
+                            color="primary"
+                            inputProps={{ 'aria-label': param.description }}
+                        />
+                    )}
+                    {param.type === 'array' && (
+                        <div>
+                            <List>
+                                {arrayValues.map((item, idx) => (
+                                    <ListItem key={idx}>
+                                        <ListItemText>
+                                            <TextField
+                                                label={param.description}
+                                                type='text'
+                                                value={item.value}
+                                                onChange={(event) => handleArrayChange(idx, event)}
+                                            />
+                                        </ListItemText>
+                                        <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(idx)}>
+                                            <DeleteOutlineIcon />
+                                        </IconButton>
+                                    </ListItem>
+                                ))}
+                            </List>
+                            <Button variant="outlined" onClick={handleAddRow} startIcon={<AddCircleOutlineIcon />}>Add Row</Button>
+                        </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    );
 }
 
 function parseValue(value: string): string | number | boolean | any[] {

From 51d3f3d9dd7539321d09922e4b5b4b90628f676b Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 5 May 2024 16:49:52 +0200
Subject: [PATCH 009/145] use props

---
 .../pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx | 6 +++---
 .../pages/addChangeAssignmentPage/RestrictionsDialog.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index aa52c2b0..7a390980 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -8,7 +8,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
  * This UI will show different fields for parameters regarding the restrictions template.
  * @returns {React.ReactElement} - The rendered component.
  */
-export default function RestrictionTemplateUI(restrictionCode: string) {
+export default function RestrictionTemplateUI({restrictionCode} : {restrictionCode: string}) {
     // There are four types of variables that can be used in a restriction template:
     // 1. Integer
     // 2. String
@@ -22,13 +22,13 @@ export default function RestrictionTemplateUI(restrictionCode: string) {
     });
     const [arrayValues, setArrayValues] = React.useState([...initialArrayValues.map(value => ({ value }))]);
 
-    const handleArrayChange = (index, event) => {
+    const handleArrayChange = (index: number, event) => {
         const newArrayValues = [...arrayValues];
         newArrayValues[index].value = event.target.value;
         setArrayValues(newArrayValues);
     };
 
-    const handleDeleteRow = (index) => {
+    const handleDeleteRow = (index: number) => {
         const newArrayValues = [...arrayValues];
         newArrayValues.splice(index, 1);
         setArrayValues(newArrayValues);
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 5972e795..f619bef2 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -240,12 +240,12 @@ export default function RestrictionsDialog({
                                 <CloseIcon />
                             </IconButton>
                             <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
-                                {t('new_script')}
+                                {'Template'}
                             </Typography>
                         </Toolbar>
                     </AppBar>
                     <Box aria-label={'Content'} padding={1}>
-                        {RestrictionsTemplateUI(code)}
+                        <RestrictionsTemplateUI restrictionCode={code} />
                     </Box>
                 </Box>
             </Dialog>

From d08497bc92fc3f4a43ca31c0d8aa27607dd75577 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 5 May 2024 17:08:08 +0200
Subject: [PATCH 010/145] labels wat verzet in interface

---
 .../RestrictionTemplateUI.tsx                 | 59 +++++++++++++------
 .../RestrictionsDialog.tsx                    |  2 +
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 7a390980..5b228169 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -3,6 +3,7 @@ import { t } from 'i18next'
 import { TextField, Checkbox, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Typography from '@mui/material/Typography'
 
 /**
  * This UI will show different fields for parameters regarding the restrictions template.
@@ -43,36 +44,58 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
             {params.map((param, index) => (
                 <div key={index} style={{ marginBottom: '20px' }}>
                     {param.type === 'number' && (
-                        <TextField
-                            label={param.description}
-                            type='number'
-                            value={param.value}
-                            fullWidth
-                        />
+                        <>
+                            <Typography variant={'body2'}>
+                                {param.description}
+                            </Typography>
+                            <TextField
+                                //label={param.description}
+                                type='number'
+                                value={param.value}
+                                fullWidth
+                            />
+                        </>
+                        
                     )}
                     {param.type === 'string' && (
-                        <TextField
-                            label={param.description}
-                            type='text'
-                            value={param.value}
-                            fullWidth
-                        />
+                        <>
+                            <Typography variant={'body2'}>
+                                {param.description}
+                            </Typography>
+                            <TextField
+                                //label={param.description}
+                                type='text'
+                                value={param.value}
+                                fullWidth
+                            />
+                        </>
+                        
                     )}
                     {param.type === 'boolean' && (
-                        <Checkbox
-                            checked={param.value}
-                            color="primary"
-                            inputProps={{ 'aria-label': param.description }}
-                        />
+                        <>
+                            <Typography variant={'body2'}>
+                                {param.description}
+                            </Typography>
+                            <Checkbox
+                                checked={param.value}
+                                color="primary"
+                                inputProps={{ 'aria-label': param.description }}
+                            />
+                        </>
+
+                        
                     )}
                     {param.type === 'array' && (
                         <div>
+                            <Typography variant={'body2'}>
+                                {param.description}
+                            </Typography>
                             <List>
                                 {arrayValues.map((item, idx) => (
                                     <ListItem key={idx}>
                                         <ListItemText>
                                             <TextField
-                                                label={param.description}
+                                                //label={param.description}
                                                 type='text'
                                                 value={item.value}
                                                 onChange={(event) => handleArrayChange(idx, event)}
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index f619bef2..4a7ca89a 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -146,6 +146,7 @@ export default function RestrictionsDialog({
         <Button
             key="FileExtensionCheck"
             onClick={() => {
+                setTextFieldContent(code)
                 if (openTemplateInUI) {
                     handleClickOpenTemplateInterface()
                 } else {
@@ -158,6 +159,7 @@ export default function RestrictionsDialog({
         <Button
             key="FilesPresentCheck"
             onClick={() => {
+                setTextFieldContent(code)
                 if (openTemplateInUI) {
                     handleClickOpenTemplateInterface()
                 } else {

From b0166cd59163be29c126056a786af7fe7c35481a Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 5 May 2024 17:34:10 +0200
Subject: [PATCH 011/145] documentatie templates UI

---
 .../RestrictionTemplateUI.tsx                 | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 5b228169..e4f119a6 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -18,11 +18,17 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
 
     const params = parseParams(restrictionCode);
 
+    // TODO: als er meerdere parameters van het type array zijn, 
+    // dan worden die allemaal samengezet, wat natuurlijk niet de bedoeling is.
+    // Waarschijnlijk zullen de values pas uit de parameter gehaald moeten worden in de code.
+    // Het probleem wordt dan wel weer hoe de onderste functies aangepast moeten worden.
+    // Want elke array moet een eigen state hebben, en die moet dan ook weer aangepast worden.
     const initialArrayValues = params.filter(param => param.type === 'array').map(param => {
         return param.value;
     });
     const [arrayValues, setArrayValues] = React.useState([...initialArrayValues.map(value => ({ value }))]);
 
+    // All functions beneath are for handling the array type of parameters.
     const handleArrayChange = (index: number, event) => {
         const newArrayValues = [...arrayValues];
         newArrayValues[index].value = event.target.value;
@@ -44,12 +50,13 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
             {params.map((param, index) => (
                 <div key={index} style={{ marginBottom: '20px' }}>
                     {param.type === 'number' && (
+                        // In this case we have a number
+                        // It needs the appropriate input field
                         <>
                             <Typography variant={'body2'}>
                                 {param.description}
                             </Typography>
                             <TextField
-                                //label={param.description}
                                 type='number'
                                 value={param.value}
                                 fullWidth
@@ -58,6 +65,8 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                         
                     )}
                     {param.type === 'string' && (
+                        // In this case we have a string
+                        // It needs the appropriate input field
                         <>
                             <Typography variant={'body2'}>
                                 {param.description}
@@ -72,6 +81,8 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                         
                     )}
                     {param.type === 'boolean' && (
+                        // In this case we have a boolean
+                        // It needs the appropriate input field
                         <>
                             <Typography variant={'body2'}>
                                 {param.description}
@@ -86,6 +97,9 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                         
                     )}
                     {param.type === 'array' && (
+                        // In this case we have a list
+                        // It needs to have a listing of the present elements,
+                        // as well as a button to add entries to the list.
                         <div>
                             <Typography variant={'body2'}>
                                 {param.description}
@@ -116,21 +130,22 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
     );
 }
 
+// Helper function for parsing a value in either python or bash code.
 function parseValue(value: string): string | number | boolean | any[] {
     if (value.startsWith('"') && value.endsWith('"')) {
         return value.slice(1, -1);
-    } else if (value === 'True' || value === 'true') {
+    } else if (value === 'True' || value === 'true') { // capital T for python or lowercase t for bash
         return true;
-    } else if (value === 'False' || value === 'false') {
+    } else if (value === 'False' || value === 'false') { // capital F for python or lowercase f for bash
         return false;
     } else if (!isNaN(parseInt(value))) {
         return parseInt(value);
-    } else if (value.startsWith('[') && value.endsWith(']')) {
+    } else if (value.startsWith('[') && value.endsWith(']')) { // square brackets for python lists
         // Python-style list
-        return value.slice(1, -1).split(',').map(item => parseValue(item.trim()));
-    } else if (value.startsWith('(') && value.endsWith(')')) {
+        return value.slice(1, -1).split(',').map(item => parseValue(item.trim())); // in python the values are separated by commas
+    } else if (value.startsWith('(') && value.endsWith(')')) { // round brackets for bash lists
         // Bash-style list
-        return value.slice(1, -1).split(' ').map(item => parseValue(item.trim()));
+        return value.slice(1, -1).split(' ').map(item => parseValue(item.trim())); // in bash the values are separated by whitespace
     } else {
         return value;
     }
@@ -145,6 +160,7 @@ function parseParams(code: string) {
     for (let i = 0; i < lines.length; i++) {
         const line = lines[i].trim();
 
+        // Look for the #@param tag
         if (line.startsWith('#@param')) {
             description = lines[i + 1].trim().replace(/^# ?/, '');
             const variableLine = lines[i + 2].trim();
@@ -156,9 +172,6 @@ function parseParams(code: string) {
         }
     }
 
-    console.log("params length:");
-    console.log(params.length);
-
     return params;
 }
 

From 14cbf8f24def2d906cf9d30cc6c2cc60532de828 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Tue, 7 May 2024 11:50:02 +0200
Subject: [PATCH 012/145] groepen verlaten werkt

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 94 ++++++++++++++++---
 1 file changed, 81 insertions(+), 13 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index f7e63c6f..77b85762 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -17,6 +17,7 @@ import React, { ChangeEvent, useEffect, useState } from 'react'
 import {Header} from "../../components/Header.tsx";
 import { t } from 'i18next'
 import AddCircle from '@mui/icons-material/AddCircle'
+import ClearIcon from '@mui/icons-material/Clear'
 import { useParams } from 'react-router-dom'
 import instance from "../../axiosConfig.ts";
 
@@ -34,6 +35,47 @@ export interface User {
     email: string
 }
 
+export interface Assignment {
+    project_id: number
+    titel: string
+    beschrijving: string
+    opgave_bestand: string
+    vak: number
+    max_score: number
+    max_groep_grootte: number
+    deadline: string | null
+    extra_deadline: string | null
+    zichtbaar: boolean
+    gearchiveerd: boolean
+    file?: File
+}
+
+function joinLeaveButton(isin,handleJoin,handleLeave){
+    if(isin){
+        return (
+            <>
+                <IconButton
+                    size={'small'}
+                    sx={{ marginBottom: 1 }}
+                    onClick={handleLeave}
+                >
+                    <ClearIcon />
+                </IconButton>
+            </>
+        )
+    }
+    return (
+        <>
+            <IconButton
+                size={'small'}
+                sx={{ marginBottom: 1 }}
+                onClick={handleJoin}
+            >
+                <AddCircle />
+            </IconButton>
+        </>
+    )
+}
 
 export function ChooseGroup() {
 
@@ -47,7 +89,7 @@ export function ChooseGroup() {
     const [user, setUser] = useState<User>()
 
     //const assignmentId = params.assignmentId
-    const assignmentId = 14
+    const assignmentId = 1
 
     const handleClose = () => {
         setOpen(false);
@@ -172,24 +214,47 @@ export function ChooseGroup() {
                             //const group=getGroup(id)
 
                             const handleJoin = () =>{
-                                //console.log(groups)
                                 setGroups((oldGroups)=>{
-                                    console.log("setGroups")
                                     for (let i = 0; i < oldGroups.length; i++) {
                                         if(oldGroups[i].groep_id==group.groep_id){
-                                            console.log(oldGroups[i])
                                             const newgroup={
                                                 groep_id: group.groep_id,
                                                 project: group.project,
                                                 studenten: [...group.studenten,user.user],
                                             }
                                             oldGroups[i]=newgroup
-                                            console.log(oldGroups[i])
+                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: [...group.studenten,user.user]})
+                                                .catch((err) =>{
+                                                    console.log(err)
+                                                })
+
+                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)]
+                                        }
+                                    }
+                                    return oldGroups
+                                })
+                            }
+
+                            const handleLeave = () =>{
+                                setGroups((oldGroups)=>{
+                                    for (let i = 0; i < oldGroups.length; i++) {
+                                        if(oldGroups[i].groep_id==group.groep_id){
+                                            const newgroup={
+                                                groep_id: group.groep_id,
+                                                project: group.project,
+                                                studenten: group.studenten.filter(student => student != user.user),
+                                            }
+                                            oldGroups[i]=newgroup
+                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: [...group.studenten,user.user]})
+                                                .catch((err) =>{
+                                                    console.log(err)
+                                                })
+
+                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)]
                                         }
                                     }
                                     return oldGroups
                                 })
-                                //console.log(groups)
                             }
 
                             return (
@@ -226,18 +291,21 @@ export function ChooseGroup() {
                                                             </Typography>
                                                         </>
                                                         )
+                                                }else{
+                                                    return (
+                                                        <>
+                                                            <Typography>
+                                                                {"undefined"}
+                                                            </Typography>
+                                                        </>
+                                                    )
                                                 }
                                             })}
 
                                         </Box>
 
-                                        <IconButton
-                                            size={'small'}
-                                            sx={{ marginBottom: 1 }}
-                                            onClick={handleJoin}
-                                        >
-                                            <AddCircle />
-                                        </IconButton>
+                                        {joinLeaveButton(group.studenten.includes(user.user),handleJoin,handleLeave)}
+
                                     </ListItem>
                                     <Divider color={'text.main'}></Divider>
                                 </>

From 47e1864d3d23c7bc79adb0ad9eafaf37e99dd4fc Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Wed, 8 May 2024 14:14:44 +0200
Subject: [PATCH 013/145] veranderen van groepen werkt

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 77b85762..dc4a9739 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -214,7 +214,36 @@ export function ChooseGroup() {
                             //const group=getGroup(id)
 
                             const handleJoin = () =>{
-                                setGroups((oldGroups)=>{
+                                setGroups((oldGroups) :Group[] =>{
+                                    if (user==undefined){
+                                        return oldGroups
+                                    }
+
+                                    //var found=false
+
+                                    var j=0
+
+                                    var edittedgroup=undefined
+
+                                    for (let i = 0; i < oldGroups.length; i++) {
+                                        if(oldGroups[i].studenten.includes(user.user)){
+                                            const newgroup1={
+                                                groep_id: oldGroups[i].groep_id,
+                                                project: oldGroups[i].project,
+                                                studenten: oldGroups[i].studenten.filter(student => student != user.user),
+                                            }
+
+                                            instance.patch("groepen/"+oldGroups[i].groep_id+"/",{studenten: oldGroups[i].studenten.filter(student => student != user.user)})
+                                                .catch((err) =>{
+                                                    console.log(err)
+                                                })
+
+                                            //found=true
+                                            j=i
+                                            edittedgroup=newgroup1
+                                        }
+                                    }
+
                                     for (let i = 0; i < oldGroups.length; i++) {
                                         if(oldGroups[i].groep_id==group.groep_id){
                                             const newgroup={
@@ -222,12 +251,18 @@ export function ChooseGroup() {
                                                 project: group.project,
                                                 studenten: [...group.studenten,user.user],
                                             }
-                                            oldGroups[i]=newgroup
                                             instance.patch("groepen/"+group.groep_id+"/",{studenten: [...group.studenten,user.user]})
                                                 .catch((err) =>{
                                                     console.log(err)
                                                 })
 
+                                            if (edittedgroup!=undefined){
+                                                if(i<j){
+                                                    return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1,j),edittedgroup,...oldGroups.slice(j+1)]
+                                                }
+                                                return [...oldGroups.slice(0,j),edittedgroup,...oldGroups.slice(j+1,i),newgroup,...oldGroups.slice(i+1)]
+                                            }
+
                                             return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)]
                                         }
                                     }
@@ -237,6 +272,9 @@ export function ChooseGroup() {
 
                             const handleLeave = () =>{
                                 setGroups((oldGroups)=>{
+                                    if (user==undefined){
+                                        return oldGroups
+                                    }
                                     for (let i = 0; i < oldGroups.length; i++) {
                                         if(oldGroups[i].groep_id==group.groep_id){
                                             const newgroup={
@@ -244,8 +282,7 @@ export function ChooseGroup() {
                                                 project: group.project,
                                                 studenten: group.studenten.filter(student => student != user.user),
                                             }
-                                            oldGroups[i]=newgroup
-                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: [...group.studenten,user.user]})
+                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: group.studenten.filter(student => student != user.user)})
                                                 .catch((err) =>{
                                                     console.log(err)
                                                 })
@@ -304,7 +341,7 @@ export function ChooseGroup() {
 
                                         </Box>
 
-                                        {joinLeaveButton(group.studenten.includes(user.user),handleJoin,handleLeave)}
+                                        {joinLeaveButton(user!=undefined ? group.studenten.includes(user.user):false,handleJoin,handleLeave)}
 
                                     </ListItem>
                                     <Divider color={'text.main'}></Divider>

From eba8ab776bc494fa36c067a8ba112737ec051a6c Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 9 May 2024 13:59:47 +0200
Subject: [PATCH 014/145] cleanup

---
 .../frontend/src/pages/groupsPage/ChooseGroup.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index dc4a9739..c9e95af2 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -1,6 +1,5 @@
 
 import {
-    Link,
     Box,
     Card,
     Divider,
@@ -8,12 +7,11 @@ import {
     ListItem,
     ListItemText,
     Stack,
-    TextField,
     Typography,
     Dialog,
 } from '@mui/material'
 import List from '@mui/material/List'
-import React, { ChangeEvent, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import {Header} from "../../components/Header.tsx";
 import { t } from 'i18next'
 import AddCircle from '@mui/icons-material/AddCircle'
@@ -50,7 +48,7 @@ export interface Assignment {
     file?: File
 }
 
-function joinLeaveButton(isin,handleJoin,handleLeave){
+function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> void){
     if(isin){
         return (
             <>
@@ -88,8 +86,7 @@ export function ChooseGroup() {
 
     const [user, setUser] = useState<User>()
 
-    //const assignmentId = params.assignmentId
-    const assignmentId = 1
+    const assignmentId = params.assignmentId
 
     const handleClose = () => {
         setOpen(false);
@@ -221,9 +218,9 @@ export function ChooseGroup() {
 
                                     //var found=false
 
-                                    var j=0
+                                    let j=0
 
-                                    var edittedgroup=undefined
+                                    let edittedgroup=undefined
 
                                     for (let i = 0; i < oldGroups.length; i++) {
                                         if(oldGroups[i].studenten.includes(user.user)){
@@ -237,8 +234,6 @@ export function ChooseGroup() {
                                                 .catch((err) =>{
                                                     console.log(err)
                                                 })
-
-                                            //found=true
                                             j=i
                                             edittedgroup=newgroup1
                                         }

From 128a1e8b20fcee53239f2e2b47d7ed92c0febcb7 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 9 May 2024 14:33:31 +0200
Subject: [PATCH 015/145] kan niet over groep limiet gaan

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index c9e95af2..0d099e68 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -1,4 +1,3 @@
-
 import {
     Box,
     Card,
@@ -86,6 +85,8 @@ export function ChooseGroup() {
 
     const [user, setUser] = useState<User>()
 
+    const [assignment,setAssignment]= useState<Assignment>()
+
     const assignmentId = params.assignmentId
 
     const handleClose = () => {
@@ -101,6 +102,14 @@ export function ChooseGroup() {
             .catch((err) => {
                 console.log(err)
             })
+        instance
+            .get('/projecten/'+assignmentId+'/')
+            .then((res) => {
+                setAssignment(res.data)
+            })
+            .catch((err) => {
+                console.log(err)
+            })
         instance.get('projecten/'+assignmentId)
             .then((res) =>{
                 instance.get('vakken/'+res.data.vak)
@@ -111,10 +120,6 @@ export function ChooseGroup() {
                             instance.get('gebruikers/'+studentid)
                                 .then((res) => {
                                     setStudenten((oldstudenten) => {
-                                        console.log("insetStudenten")
-                                        console.log(res.data)
-                                        console.log(oldstudenten)
-                                        //return oldstudenten
                                         return {...oldstudenten,[res.data.user]: res.data}
                                     })
                                 })
@@ -215,8 +220,9 @@ export function ChooseGroup() {
                                     if (user==undefined){
                                         return oldGroups
                                     }
-
-                                    //var found=false
+                                    if (assignment==undefined){
+                                        return oldGroups
+                                    }
 
                                     let j=0
 
@@ -241,6 +247,9 @@ export function ChooseGroup() {
 
                                     for (let i = 0; i < oldGroups.length; i++) {
                                         if(oldGroups[i].groep_id==group.groep_id){
+                                            if (group.studenten.length >= assignment.max_groep_grootte){
+                                                return oldGroups
+                                            }
                                             const newgroup={
                                                 groep_id: group.groep_id,
                                                 project: group.project,

From 54a3a1253ea1e8c14fdbe30369ebc0d5e298ccfe Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 9 May 2024 14:34:04 +0200
Subject: [PATCH 016/145] cleanup

---
 frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 0d099e68..1a1bf072 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -367,12 +367,4 @@ export function ChooseGroup() {
             </Stack>
         </>
     )
-}
-
-// function getGroup(id: number): Group {
-//     return {
-//         groep_id: id,
-//         studenten: [17,18],
-//         project: 5
-//     }
-// }
\ No newline at end of file
+}
\ No newline at end of file

From a6e36739df11a18a18b44a71519a4d853524ce76 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 9 May 2024 14:35:59 +0200
Subject: [PATCH 017/145] meer cleanup

---
 frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 1a1bf072..07276c97 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -317,11 +317,6 @@ export function ChooseGroup() {
                                             primary={group.groep_id}
                                         />
 
-                                        <ListItemText
-                                            sx={{ maxWidth: 100 }}
-                                            primary={group.studenten}
-                                        />
-
                                         <Box display={'flex'} flexDirection={'column'}>
                                             {group.studenten.map((studentid)=>{
                                                 if(studenten[studentid]!=undefined){

From 938421ab2bc56fde2b647adc0a43e5d6aabb6f4a Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 9 May 2024 15:21:55 +0200
Subject: [PATCH 018/145] volgorde groepen

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 07276c97..40644cfa 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -19,7 +19,7 @@ import { useParams } from 'react-router-dom'
 import instance from "../../axiosConfig.ts";
 
 export interface Group {
-    groep_id?: number
+    groep_id: number
     studenten: number[]
     project: number
 }
@@ -152,7 +152,9 @@ export function ChooseGroup() {
                         if (found) {
                             return oldGroups
                         } else {
-                            return [...oldGroups,res.data[i]]
+                            return [...oldGroups,res.data[i]].sort((a,b) =>{
+                                return a.groep_id-b.groep_id
+                            })
                         }
                     })
                 }
@@ -262,12 +264,18 @@ export function ChooseGroup() {
 
                                             if (edittedgroup!=undefined){
                                                 if(i<j){
-                                                    return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1,j),edittedgroup,...oldGroups.slice(j+1)]
+                                                    return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1,j),edittedgroup,...oldGroups.slice(j+1)].sort((a,b) =>{
+                                                        return a.groep_id-b.groep_id
+                                                    })
                                                 }
-                                                return [...oldGroups.slice(0,j),edittedgroup,...oldGroups.slice(j+1,i),newgroup,...oldGroups.slice(i+1)]
+                                                return [...oldGroups.slice(0,j),edittedgroup,...oldGroups.slice(j+1,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
+                                                    return a.groep_id-b.groep_id
+                                                })
                                             }
 
-                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)]
+                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
+                                                return a.groep_id-b.groep_id
+                                            })
                                         }
                                     }
                                     return oldGroups
@@ -291,7 +299,9 @@ export function ChooseGroup() {
                                                     console.log(err)
                                                 })
 
-                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)]
+                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
+                                                return a.groep_id-b.groep_id
+                                            })
                                         }
                                     }
                                     return oldGroups
@@ -312,9 +322,10 @@ export function ChooseGroup() {
                                             borderRadius: 2,
                                         }}
                                     >
+
                                         <ListItemText
                                             sx={{ maxWidth: 100 }}
-                                            primary={group.groep_id}
+                                            primary={groups.indexOf(group)+1}
                                         />
 
                                         <Box display={'flex'} flexDirection={'column'}>
@@ -327,14 +338,6 @@ export function ChooseGroup() {
                                                             </Typography>
                                                         </>
                                                         )
-                                                }else{
-                                                    return (
-                                                        <>
-                                                            <Typography>
-                                                                {"undefined"}
-                                                            </Typography>
-                                                        </>
-                                                    )
                                                 }
                                             })}
 

From 52a026f1dca3cfb06a96ce3b662d6f663535f5f1 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 10 May 2024 13:16:05 +0200
Subject: [PATCH 019/145] state for templateUI

---
 .../cypress/e2e/pages/MainPage.cy.tsx         | 27 +++++++
 .../RestrictionTemplateUI.tsx                 | 80 ++++++++++---------
 2 files changed, 68 insertions(+), 39 deletions(-)
 create mode 100644 frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx

diff --git a/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx b/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx
new file mode 100644
index 00000000..16fa8699
--- /dev/null
+++ b/frontend/frontend/cypress/e2e/pages/MainPage.cy.tsx
@@ -0,0 +1,27 @@
+//import { MainPage } from '../../../src/pages/mainPage/MainPage';
+
+describe('mainpage', () => {
+    beforeEach(() => {
+      cy.visit('http://localhost:5173/')
+      cy.task('db:seed')
+      cy.loginByAuth0Api(
+        Cypress.env('auth0_username'),
+        Cypress.env('auth0_password')
+      )
+    })
+  
+    it('displays two todo items by default', () => {
+      cy.get('div').should('exist')
+
+    })
+
+    beforeEach(function () {
+        
+      })
+    
+      it('shows onboarding', function () {
+        cy.contains('Get Started').should('be.visible')
+      })
+
+})
+  
\ No newline at end of file
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index e4f119a6..ef506e25 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,15 +1,14 @@
-import * as React from 'react'
-import { t } from 'i18next'
+import React, { useState } from 'react';
 import { TextField, Checkbox, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import Typography from '@mui/material/Typography'
+import Typography from '@mui/material/Typography';
 
 /**
  * This UI will show different fields for parameters regarding the restrictions template.
  * @returns {React.ReactElement} - The rendered component.
  */
-export default function RestrictionTemplateUI({restrictionCode} : {restrictionCode: string}) {
+export default function RestrictionTemplateUI({ restrictionCode }: { restrictionCode: string }) {
     // There are four types of variables that can be used in a restriction template:
     // 1. Integer
     // 2. String
@@ -18,31 +17,39 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
 
     const params = parseParams(restrictionCode);
 
-    // TODO: als er meerdere parameters van het type array zijn, 
-    // dan worden die allemaal samengezet, wat natuurlijk niet de bedoeling is.
-    // Waarschijnlijk zullen de values pas uit de parameter gehaald moeten worden in de code.
-    // Het probleem wordt dan wel weer hoe de onderste functies aangepast moeten worden.
-    // Want elke array moet een eigen state hebben, en die moet dan ook weer aangepast worden.
-    const initialArrayValues = params.filter(param => param.type === 'array').map(param => {
-        return param.value;
+    const [paramsState, setParamsState] = useState<{ [key: string]: any }>({});
+
+    // Initialize paramsState with default values
+    useState(() => {
+        const initialState: { [key: string]: any } = {};
+        params.forEach(param => {
+            initialState[param.variable] = param.value;
+        });
+        setParamsState(initialState);
     });
-    const [arrayValues, setArrayValues] = React.useState([...initialArrayValues.map(value => ({ value }))]);
 
     // All functions beneath are for handling the array type of parameters.
-    const handleArrayChange = (index: number, event) => {
-        const newArrayValues = [...arrayValues];
-        newArrayValues[index].value = event.target.value;
-        setArrayValues(newArrayValues);
+    const handleArrayChange = (variable: string, newValue: string) => {
+        setParamsState(prevState => ({
+            ...prevState,
+            [variable]: newValue
+        }));
     };
 
-    const handleDeleteRow = (index: number) => {
-        const newArrayValues = [...arrayValues];
+    const handleDeleteRow = (variable: string, index: number) => {
+        const newArrayValues = [...paramsState[variable]];
         newArrayValues.splice(index, 1);
-        setArrayValues(newArrayValues);
+        setParamsState(prevState => ({
+            ...prevState,
+            [variable]: newArrayValues
+        }));
     };
 
-    const handleAddRow = () => {
-        setArrayValues([...arrayValues, { value: '' }]);
+    const handleAddRow = (variable: string) => {
+        setParamsState(prevState => ({
+            ...prevState,
+            [variable]: [...(prevState[variable] || []), '']
+        }));
     };
 
     return (
@@ -58,11 +65,11 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                             </Typography>
                             <TextField
                                 type='number'
-                                value={param.value}
+                                value={paramsState[param.variable]}
                                 fullWidth
+                                onChange={(e) => handleArrayChange(param.variable, e.target.value)}
                             />
                         </>
-                        
                     )}
                     {param.type === 'string' && (
                         // In this case we have a string
@@ -72,13 +79,12 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                                 {param.description}
                             </Typography>
                             <TextField
-                                //label={param.description}
                                 type='text'
-                                value={param.value}
+                                value={paramsState[param.variable]}
                                 fullWidth
+                                onChange={(e) => handleArrayChange(param.variable, e.target.value)}
                             />
                         </>
-                        
                     )}
                     {param.type === 'boolean' && (
                         // In this case we have a boolean
@@ -88,13 +94,11 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                                 {param.description}
                             </Typography>
                             <Checkbox
-                                checked={param.value}
+                                checked={paramsState[param.variable]}
                                 color="primary"
-                                inputProps={{ 'aria-label': param.description }}
+                                onChange={(e) => handleArrayChange(param.variable, e.target.checked)}
                             />
                         </>
-
-                        
                     )}
                     {param.type === 'array' && (
                         // In this case we have a list
@@ -105,23 +109,22 @@ export default function RestrictionTemplateUI({restrictionCode} : {restrictionCo
                                 {param.description}
                             </Typography>
                             <List>
-                                {arrayValues.map((item, idx) => (
+                                {(paramsState[param.variable] || []).map((item, idx) => (
                                     <ListItem key={idx}>
                                         <ListItemText>
                                             <TextField
-                                                //label={param.description}
                                                 type='text'
-                                                value={item.value}
-                                                onChange={(event) => handleArrayChange(idx, event)}
+                                                value={item}
+                                                onChange={(e) => handleArrayChange(param.variable, e.target.value)}
                                             />
                                         </ListItemText>
-                                        <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(idx)}>
+                                        <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(param.variable, idx)}>
                                             <DeleteOutlineIcon />
                                         </IconButton>
                                     </ListItem>
                                 ))}
                             </List>
-                            <Button variant="outlined" onClick={handleAddRow} startIcon={<AddCircleOutlineIcon />}>Add Row</Button>
+                            <Button variant="outlined" onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</Button>
                         </div>
                     )}
                 </div>
@@ -156,7 +159,7 @@ function parseParams(code: string) {
     const params = [];
     const lines = code.split('\n');
     let description = '';
-    
+
     for (let i = 0; i < lines.length; i++) {
         const line = lines[i].trim();
 
@@ -168,10 +171,9 @@ function parseParams(code: string) {
 
             let parsedValue = parseValue(value);
 
-            params.push({type: Array.isArray(parsedValue) ? 'array' : typeof(parsedValue), description, variable, value: parsedValue});
+            params.push({ type: Array.isArray(parsedValue) ? 'array' : typeof (parsedValue), description, variable, value: parsedValue });
         }
     }
 
     return params;
 }
-

From 16d5e2f9fe2bf6500a0988e71129d9af44eb07a8 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 10 May 2024 13:48:29 +0200
Subject: [PATCH 020/145] fiw issue with list restrictiox

---
 .../RestrictionTemplateUI.tsx                     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index ef506e25..eda732e5 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -36,6 +36,17 @@ export default function RestrictionTemplateUI({ restrictionCode }: { restriction
         }));
     };
 
+    // This function is specifically for handling the array type of parameters.
+    // It will change the row at the given index to the new value.
+    const handleChangeRow = (variable: string, newValue: any, index: number) => {
+        const newArrayValues = [...paramsState[variable]];
+        newArrayValues[index] = newValue;
+        setParamsState(prevState => ({
+            ...prevState,
+            [variable]: newArrayValues
+        }));
+    }
+
     const handleDeleteRow = (variable: string, index: number) => {
         const newArrayValues = [...paramsState[variable]];
         newArrayValues.splice(index, 1);
@@ -48,7 +59,7 @@ export default function RestrictionTemplateUI({ restrictionCode }: { restriction
     const handleAddRow = (variable: string) => {
         setParamsState(prevState => ({
             ...prevState,
-            [variable]: [...(prevState[variable] || []), '']
+            [variable]: [...(prevState[variable] || []), 'yo'] // Initialize with an empty string
         }));
     };
 
@@ -115,7 +126,7 @@ export default function RestrictionTemplateUI({ restrictionCode }: { restriction
                                             <TextField
                                                 type='text'
                                                 value={item}
-                                                onChange={(e) => handleArrayChange(param.variable, e.target.value)}
+                                                onChange={(e) => handleChangeRow(param.variable, e.target.value, idx)}
                                             />
                                         </ListItemText>
                                         <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(param.variable, idx)}>

From 0f6643d4d6e4088947af6f4f19f2820a84e25720 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 10 May 2024 13:49:42 +0200
Subject: [PATCH 021/145] remove placeholder text

---
 .../src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index eda732e5..29abd128 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -59,7 +59,7 @@ export default function RestrictionTemplateUI({ restrictionCode }: { restriction
     const handleAddRow = (variable: string) => {
         setParamsState(prevState => ({
             ...prevState,
-            [variable]: [...(prevState[variable] || []), 'yo'] // Initialize with an empty string
+            [variable]: [...(prevState[variable] || []), ''] // Initialize with an empty string
         }));
     };
 

From 27ca1ab33cdcd006325a5738dcd9e8291707c7c8 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 10 May 2024 16:00:51 +0200
Subject: [PATCH 022/145] saving templates

---
 .../RestrictionTemplateUI.tsx                 | 238 ++++++++++++------
 .../RestrictionsDialog.tsx                    |   6 +-
 2 files changed, 163 insertions(+), 81 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 29abd128..cc527634 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,14 +1,70 @@
 import React, { useState } from 'react';
-import { TextField, Checkbox, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
+import { Box, TextField, Checkbox, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Typography from '@mui/material/Typography';
+import AppBar from '@mui/material/AppBar'
+import Toolbar from '@mui/material/Toolbar'
+import CloseIcon from '@mui/icons-material/Close'
+
+const saveBashRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }) => {
+    // This function will save the restriction template with the given parameters.
+    // It finds the #@param tags in the restriction code and replaces the values with the given parameters.
+    // It does this with javascript regexp
+    
+    let newRestrictionCode = restrictionCode;
+    Object.keys(params).forEach(key => {
+        // match on the #@param tag and the variable name
+        // between the #@param tag there can be any number of newline comments and whitespace
+        // between the value and the variable name is an equals sign
+        // There may be any number of spaces around the equals sign
+        let valueString = params[key];
+
+        // If the value is an array, we need to convert it to a string
+
+        if (Array.isArray(valueString)) {
+            valueString = '(' + valueString.join(' ') + ')';
+        } else if (typeof valueString === 'string') {
+            valueString = '"' + valueString + '"';
+        } else if (typeof valueString === 'boolean') {
+            valueString = valueString ? 'true' : 'false';
+        } else if (typeof valueString === 'number') {
+            // This case already works without intervention.
+        }
+
+        // write this value next to the equals sign in the variable line, keep all the lines surrounding it, such as the comments
+        // It may be that comments come after the value, those should be kept as well
+        newRestrictionCode = newRestrictionCode.replace(new RegExp(`(#@param[\\s\\S]*?${key}[\\s\\S]*?=)[^\\n]*`), `$1${valueString}`);
+        
+    });
+
+    console.log(newRestrictionCode);
+
+    return newRestrictionCode;
+}
+
+const savePythonRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }) => {
+    return restrictionCode;
+}
+
+const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, extension: string) => {
+    // This function will save the restriction template with the given parameters.
+    // It chooses the correct function based on the extension of the file.
+    switch (extension) {
+        case 'py':
+            return savePythonRestrictionTemplate(restrictionCode, params);
+        case 'sh':
+            return saveBashRestrictionTemplate(restrictionCode, params);
+        default:
+            return restrictionCode;
+    }
+}
 
 /**
  * This UI will show different fields for parameters regarding the restrictions template.
  * @returns {React.ReactElement} - The rendered component.
  */
-export default function RestrictionTemplateUI({ restrictionCode }: { restrictionCode: string }) {
+export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemplateInterface }: { restrictionCode: string, handleCloseTemplateInterface: () => void }) {
     // There are four types of variables that can be used in a restriction template:
     // 1. Integer
     // 2. String
@@ -64,83 +120,107 @@ export default function RestrictionTemplateUI({ restrictionCode }: { restriction
     };
 
     return (
-        <div>
-            {params.map((param, index) => (
-                <div key={index} style={{ marginBottom: '20px' }}>
-                    {param.type === 'number' && (
-                        // In this case we have a number
-                        // It needs the appropriate input field
-                        <>
-                            <Typography variant={'body2'}>
-                                {param.description}
-                            </Typography>
-                            <TextField
-                                type='number'
-                                value={paramsState[param.variable]}
-                                fullWidth
-                                onChange={(e) => handleArrayChange(param.variable, e.target.value)}
-                            />
-                        </>
-                    )}
-                    {param.type === 'string' && (
-                        // In this case we have a string
-                        // It needs the appropriate input field
-                        <>
-                            <Typography variant={'body2'}>
-                                {param.description}
-                            </Typography>
-                            <TextField
-                                type='text'
-                                value={paramsState[param.variable]}
-                                fullWidth
-                                onChange={(e) => handleArrayChange(param.variable, e.target.value)}
-                            />
-                        </>
-                    )}
-                    {param.type === 'boolean' && (
-                        // In this case we have a boolean
-                        // It needs the appropriate input field
-                        <>
-                            <Typography variant={'body2'}>
-                                {param.description}
-                            </Typography>
-                            <Checkbox
-                                checked={paramsState[param.variable]}
-                                color="primary"
-                                onChange={(e) => handleArrayChange(param.variable, e.target.checked)}
-                            />
-                        </>
-                    )}
-                    {param.type === 'array' && (
-                        // In this case we have a list
-                        // It needs to have a listing of the present elements,
-                        // as well as a button to add entries to the list.
-                        <div>
-                            <Typography variant={'body2'}>
-                                {param.description}
-                            </Typography>
-                            <List>
-                                {(paramsState[param.variable] || []).map((item, idx) => (
-                                    <ListItem key={idx}>
-                                        <ListItemText>
-                                            <TextField
-                                                type='text'
-                                                value={item}
-                                                onChange={(e) => handleChangeRow(param.variable, e.target.value, idx)}
-                                            />
-                                        </ListItemText>
-                                        <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(param.variable, idx)}>
-                                            <DeleteOutlineIcon />
-                                        </IconButton>
-                                    </ListItem>
-                                ))}
-                            </List>
-                            <Button variant="outlined" onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</Button>
-                        </div>
-                    )}
-                </div>
-            ))}
-        </div>
+        <Box>
+            <AppBar sx={{ position: 'relative' }}>
+                <Toolbar>
+                    <IconButton
+                        edge="start"
+                        color="inherit"
+                        onClick={handleCloseTemplateInterface}
+                        aria-label="close"
+                    >
+                    <CloseIcon />
+                    </IconButton>
+                    <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
+                        {'Template'}
+                    </Typography>
+                    <Button
+                        autoFocus
+                        color="inherit"
+                        onClick={() => saveRestrictionTemplate(restrictionCode, paramsState, 'sh')}
+                    >
+                        save
+                    </Button>
+                </Toolbar>
+            </AppBar>
+            <Box aria-label={'Content'} padding={1}>
+                {params.map((param, index) => (
+                    <div key={index} style={{ marginBottom: '20px' }}>
+                        {param.type === 'number' && (
+                            // In this case we have a number
+                            // It needs the appropriate input field
+                            <>
+                                <Typography variant={'body2'}>
+                                    {param.description}
+                                </Typography>
+                                <TextField
+                                    type='number'
+                                    value={paramsState[param.variable]}
+                                    fullWidth
+                                    onChange={(e) => handleArrayChange(param.variable, Number(e.target.value))}
+                                />
+                            </>
+                        )}
+                        {param.type === 'string' && (
+                            // In this case we have a string
+                            // It needs the appropriate input field
+                            <>
+                                <Typography variant={'body2'}>
+                                    {param.description}
+                                </Typography>
+                                <TextField
+                                    type='text'
+                                    value={paramsState[param.variable]}
+                                    fullWidth
+                                    onChange={(e) => handleArrayChange(param.variable, e.target.value)}
+                                />
+                            </>
+                        )}
+                        {param.type === 'boolean' && (
+                            // In this case we have a boolean
+                            // It needs the appropriate input field
+                            <>
+                                <Typography variant={'body2'}>
+                                    {param.description}
+                                </Typography>
+                                <Checkbox
+                                    checked={paramsState[param.variable]}
+                                    color="primary"
+                                    onChange={(e) => handleArrayChange(param.variable, e.target.checked)}
+                                />
+                            </>
+                        )}
+                        {param.type === 'array' && (
+                            // In this case we have a list
+                            // It needs to have a listing of the present elements,
+                            // as well as a button to add entries to the list.
+                            <div>
+                                <Typography variant={'body2'}>
+                                    {param.description}
+                                </Typography>
+                                <List>
+                                    {(paramsState[param.variable] || []).map((item, idx) => (
+                                        <ListItem key={idx}>
+                                            <ListItemText>
+                                                <TextField
+                                                    type='text'
+                                                    value={item}
+                                                    onChange={(e) => handleChangeRow(param.variable, e.target.value, idx)}
+                                                />
+                                            </ListItemText>
+                                            <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(param.variable, idx)}>
+                                                <DeleteOutlineIcon />
+                                            </IconButton>
+                                        </ListItem>
+                                    ))}
+                                </List>
+                                <Button variant="outlined" onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</Button>
+                            </div>
+                        )}
+                    </div>
+                ))}
+            </Box>
+        </Box>
     );
 }
 
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 4a7ca89a..1b51b17f 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -230,7 +230,8 @@ export default function RestrictionsDialog({
             </Box>
             {/* This is the template interface. */}
             <Dialog fullScreen open={openTemplateInterface} onClose={handleCloseTemplateInterface}>
-                <Box>
+                <RestrictionsTemplateUI restrictionCode={code} handleCloseTemplateInterface={handleCloseTemplateInterface} />
+                {/*<Box>
                     <AppBar sx={{ position: 'relative' }}>
                         <Toolbar>
                             <IconButton
@@ -247,9 +248,10 @@ export default function RestrictionsDialog({
                         </Toolbar>
                     </AppBar>
                     <Box aria-label={'Content'} padding={1}>
+                    
                         <RestrictionsTemplateUI restrictionCode={code} />
                     </Box>
-                </Box>
+            </Box>*/}
             </Dialog>
             {/* This is the code editor. */}
             <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>

From b22310102b313b12a90c28c2b4921d0d376c1149 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 10 May 2024 16:55:37 +0200
Subject: [PATCH 023/145] refactoren restrictions code

---
 .../RestrictionTemplateUI.tsx                 | 47 ++++++++++---------
 .../RestrictionsDialog.tsx                    | 30 ++++--------
 2 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index cc527634..ca3b9240 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -7,7 +7,8 @@ import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
 
-const saveBashRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }) => {
+
+const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, extension: string) => {
     // This function will save the restriction template with the given parameters.
     // It finds the #@param tags in the restriction code and replaces the values with the given parameters.
     // It does this with javascript regexp
@@ -23,11 +24,19 @@ const saveBashRestrictionTemplate = (restrictionCode: string, params: { [key: st
         // If the value is an array, we need to convert it to a string
 
         if (Array.isArray(valueString)) {
-            valueString = '(' + valueString.join(' ') + ')';
+            if (extension === 'sh') {
+                valueString = '(' + valueString.join(' ') + ')';
+            } else if (extension === 'py') {
+                valueString = '[' + valueString.join(', ') + ']';
+            }
         } else if (typeof valueString === 'string') {
             valueString = '"' + valueString + '"';
         } else if (typeof valueString === 'boolean') {
-            valueString = valueString ? 'true' : 'false';
+            if (extension === 'sh') {
+                valueString = valueString ? 'true' : 'false';
+            } else if (extension === 'py') {
+                valueString = valueString ? 'True' : 'False';
+            }
         } else if (typeof valueString === 'number') {
             // This case already works without intervention.
         }
@@ -43,28 +52,20 @@ const saveBashRestrictionTemplate = (restrictionCode: string, params: { [key: st
     return newRestrictionCode;
 }
 
-const savePythonRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }) => {
-    return restrictionCode;
-}
-
-const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, extension: string) => {
-    // This function will save the restriction template with the given parameters.
-    // It chooses the correct function based on the extension of the file.
-    switch (extension) {
-        case 'py':
-            return savePythonRestrictionTemplate(restrictionCode, params);
-        case 'sh':
-            return saveBashRestrictionTemplate(restrictionCode, params);
-        default:
-            return restrictionCode;
-    }
-}
-
 /**
  * This UI will show different fields for parameters regarding the restrictions template.
  * @returns {React.ReactElement} - The rendered component.
  */
-export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemplateInterface }: { restrictionCode: string, handleCloseTemplateInterface: () => void }) {
+export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemplateInterface, templateFileName }: { restrictionCode: string, handleCloseTemplateInterface: () => void, templateFileName: string }) {
+    
+    // De onderste twee rijen code zouden bijvoorbeeld het volgende doen
+    // voor de templateFileName 'template.sh':
+    // templateExtension = 'sh'
+    // templateName = 'template'
+    const templateExtension = templateFileName.split('.').pop();
+    const templateName =  templateFileName.split('.').shift();
+    
+    
     // There are four types of variables that can be used in a restriction template:
     // 1. Integer
     // 2. String
@@ -132,12 +133,12 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
                     <CloseIcon />
                     </IconButton>
                     <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
-                        {'Template'}
+                        {templateName}
                     </Typography>
                     <Button
                         autoFocus
                         color="inherit"
-                        onClick={() => saveRestrictionTemplate(restrictionCode, paramsState, 'sh')}
+                        onClick={() => saveRestrictionTemplate(restrictionCode, paramsState, templateExtension)}
                     >
                         save
                     </Button>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 1b51b17f..21989b78 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -230,28 +230,7 @@ export default function RestrictionsDialog({
             </Box>
             {/* This is the template interface. */}
             <Dialog fullScreen open={openTemplateInterface} onClose={handleCloseTemplateInterface}>
-                <RestrictionsTemplateUI restrictionCode={code} handleCloseTemplateInterface={handleCloseTemplateInterface} />
-                {/*<Box>
-                    <AppBar sx={{ position: 'relative' }}>
-                        <Toolbar>
-                            <IconButton
-                                edge="start"
-                                color="inherit"
-                                onClick={handleCloseTemplateInterface}
-                                aria-label="close"
-                            >
-                                <CloseIcon />
-                            </IconButton>
-                            <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
-                                {'Template'}
-                            </Typography>
-                        </Toolbar>
-                    </AppBar>
-                    <Box aria-label={'Content'} padding={1}>
-                    
-                        <RestrictionsTemplateUI restrictionCode={code} />
-                    </Box>
-            </Box>*/}
+                <RestrictionsTemplateUI restrictionCode={code} handleCloseTemplateInterface={handleCloseTemplateInterface} templateFileName='template_example.sh'/>
             </Dialog>
             {/* This is the code editor. */}
             <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>
@@ -361,6 +340,13 @@ export default function RestrictionsDialog({
                                         </FormControl>
                                     </Box>
                                 </Box>
+                                <Button
+                                    autoFocus
+                                    color="inherit"
+                                    onClick={() => setPopupOpen(true)}
+                                >
+                                    save template
+                                </Button>
                                 <Button
                                     autoFocus
                                     color="inherit"

From bd05fb50040cd32b2c73d7488944562234c15da2 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Wed, 15 May 2024 22:50:01 +0200
Subject: [PATCH 024/145] added pigeonlogo to mainpage and login

---
 frontend/frontend/public/assets/logo_duif.png | Bin 0 -> 86436 bytes
 .../frontend/public/assets/logo_duif_top.png  | Bin 0 -> 32254 bytes
 .../frontend/public/assets/logo_duif_top.svg  |   1 +
 .../public/assets/logo_duif_top_wit.png       | Bin 0 -> 22514 bytes
 frontend/frontend/src/Theme.ts                |   4 +-
 frontend/frontend/src/components/Header.tsx   |  47 +++++++++++++-----
 .../src/pages/loginPage/LoginPage.tsx         |  22 ++++----
 .../frontend/src/pages/mainPage/MainPage.tsx  |  19 ++++---
 8 files changed, 59 insertions(+), 34 deletions(-)
 create mode 100644 frontend/frontend/public/assets/logo_duif.png
 create mode 100644 frontend/frontend/public/assets/logo_duif_top.png
 create mode 100644 frontend/frontend/public/assets/logo_duif_top.svg
 create mode 100644 frontend/frontend/public/assets/logo_duif_top_wit.png

diff --git a/frontend/frontend/public/assets/logo_duif.png b/frontend/frontend/public/assets/logo_duif.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e8da0b784257bc1c698d694761149469018f922
GIT binary patch
literal 86436
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
JHIgQw{~tTwKq3GD

literal 0
HcmV?d00001

diff --git a/frontend/frontend/public/assets/logo_duif_top.png b/frontend/frontend/public/assets/logo_duif_top.png
new file mode 100644
index 0000000000000000000000000000000000000000..45a19151f76ed687e936ad15ef0f7a94007a98c3
GIT binary patch
literal 32254
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
Aq5uE@

literal 0
HcmV?d00001

diff --git a/frontend/frontend/public/assets/logo_duif_top.svg b/frontend/frontend/public/assets/logo_duif_top.svg
new file mode 100644
index 00000000..21966a30
--- /dev/null
+++ b/frontend/frontend/public/assets/logo_duif_top.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M270 33.119c-23.968 3.859-39.892 25.125-45.961 61.381-7.697 45.973-21.779 63.345-123.465 152.315-3.341 2.922-5.849 5.569-5.574 5.882.275.312 4.55.48 9.5.374l9-.193 8.5-5.309c4.675-2.92 21.55-13.828 37.5-24.24 15.95-10.412 32.492-21.158 36.76-23.88l20-12.752c6.732-4.291 12.727-8.023 13.323-8.292 1.042-.472 7.915 3.662 35.917 21.604 21.325 13.663 31.734 20.09 32.041 19.782 1.478-1.488 3.778-20.36 4.196-34.436.574-19.317-.362-29.554-4.763-52.078-4.356-22.299-3.871-29.065 2.601-36.228 6.813-7.541 19.424-10.336 34.816-7.717l4.892.833-.662-3.309c-1.762-8.809-8.021-16.807-17.215-21.996-3.861-2.179-5.585-3.819-6.002-5.709-3.027-13.743-13.619-23.157-29.424-26.155-5.987-1.135-8.273-1.118-15.98.123m4.888 25.326c-6.217 3.508-6.211 13.09.01 17.271 4.736 3.184 7.684 2.902 11.702-1.116 8.655-8.655-1.116-22.133-11.712-16.155m-64.916 146.319c-10.71 7.021-30.624 19.932-44.254 28.693-16.733 10.753-24.34 16.175-23.419 16.69 2.045 1.145 177.123.549 177.584-.604.21-.527-5.415-4.635-12.5-9.13C243.847 200.106 230.855 192 229.788 192c-.189 0-9.106 5.744-19.816 12.764m16.528 4.969c-8.569 2.145-13.135 13.433-8.505 21.026 6.114 10.029 20.317 9.37 25.101-1.164 5.161-11.364-4.475-22.897-16.596-19.862m-97.05 54.674c-13.447 5.857-11.053 26.361 3.303 28.287l4.247.569v78.828l2.455 2.454c3.411 3.411 9.679 3.411 13.09 0 2.44-2.439 2.455-2.572 2.466-22.25.015-24.899.877-50.695 1.999-59.795 2.546-20.645-11.586-35.051-27.56-28.093m42.316 1.508-3.266 2.916-.327 12.984c-.261 10.348-.008 13.604 1.25 16.035 1.35 2.612 1.577 8.21 1.577 38.926v35.875l2.25 2.06c3.314 3.033 6.166 3.56 10.183 1.881 5.414-2.262 5.564-3.38 5.602-41.907.029-28.618.303-35.652 1.465-37.685 2.207-3.861 2.031-23.435-.252-27.986-3.363-6.706-12.69-8.27-18.482-3.099m36.254-1.631c-4.475 2.264-5.097 4.992-4.497 19.716.303 7.425.769 30.419 1.037 51.097l.486 37.598 2.359 2.216c3.817 3.586 11.48 2.906 13.846-1.229.935-1.634 1.249-11.262 1.249-38.344 0-36.124.002-36.165 2.25-38.565 2.782-2.969 3.337-21.235.829-27.239-2.405-5.755-11.303-8.415-17.559-5.25m33.361.626c-1.716 1.046-3.628 3.361-4.25 5.145-1.685 4.832-1.443 22.263.369 26.599 1.24 2.967 1.5 9.875 1.5 39.794v36.203l2.25 2.085c3.725 3.452 9.739 3.366 13.295-.191l2.455-2.454V336.07c0-34.239.099-36.184 1.996-39.296 2.342-3.841 2.784-20.735.698-26.669-2.243-6.376-11.889-9.113-18.313-5.195m34.832-.403c-4.795 2.083-6.214 6.362-6.207 18.711.004 7.165.459 11.15 1.5 13.146 1.246 2.388 1.494 8.924 1.494 39.296v36.431l2.455 2.454c2.763 2.764 8.815 3.326 11.756 1.092 3.447-2.619 3.789-6.344 3.789-41.237 0-31.145.169-34.728 1.75-37.14 1.893-2.888 2.563-21.85.973-27.541-1.593-5.705-10.367-8.316-17.51-5.212m40.287-.119c-9.04 3.945-13.346 13.63-11.61 26.112.652 4.688 1.112 23.235 1.111 44.795L306 372.091l2.455 2.454c3.136 3.137 10.137 3.415 13.684.544l2.361-1.911.5-39.839.5-39.839 2.5-.288c12.182-1.401 18.156-14.163 11.201-23.93-4.121-5.787-15.189-8.173-22.701-4.894m-254.034 18.81a6256.078 6256.078 0 0 0-24.414 23L25.603 318l33.949-.006c34.535-.005 36.723-.198 47.827-4.21l5.878-2.124-.577-6.181c-.428-4.589-1.427-7.547-3.878-11.49-2.918-4.693-3.343-6.278-3.655-13.649l-.352-8.34H74.433l-11.967 11.198" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/frontend/public/assets/logo_duif_top_wit.png b/frontend/frontend/public/assets/logo_duif_top_wit.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0f1471e3925455b1d72b6b42d387ba49b350d8a
GIT binary patch
literal 22514
zcmeFZ^;?_4)&&Y7K=1%9S|GT4f#Sj4i+k~+h2j?6-CYVri@UqGlmf-w-Jxi2dd~Uo
zbN`6@L-ORcdFPqgd-mFEuStZevJ4hF2|5A-0+yVtq&fluV*I}k2nBuy*3CPCfB->|
zlN5XJVRVw?4t=kEJ4~#KAM?vz#}vVas<V7FlL#yFL-bV3g59FZhp5b4JM>!u=2Yw7
z11oR6b(8Z;IeR#AL}2g5q!PH062JC6t@g(=n5Ju=+Fr%_+o$UPc+P%Ybw6#t%cZUj
z^oJsV5D*~<Kn8HUYAKQ?3;~P)fS=O|fc4P)=NAH^JP-<HFb$Ib->m?E%l|!ti-1@V
zjKzfbuK^eW2sH8EAK-jR1Yj^8Zz&Ld7Tz8N!h!nVhGBS!V6gmrKHh)d0)zFuK>+-x
z-T(h3{~4~H0HLi*k#2+Lskz467F&zyFD2XbNA0}det+v;Z8}}}qV#Lg(!#FY%-+I&
zdU}3(Z2sePyY`V`#j5*Bw!du-`SwGCBo!w>$`l^~5x41Yj~Ao|9nq|Ub7Q>dFpRd-
z?<lDA&*PtV{?LcGn!A!k&)yUQLx&yKl<m_=)*;@}$&_+OKP8=ncxa<==`a?2wj5d{
zs-dtupwra6Z+VAGddYJzf_9k6SF9i3?0)a2HD-5LuHIpUqfIwVHQ)dOL#Z18K$gIs
zUZJf>{aJ1Adxb|4^6ihLeY5$_OxN<7UpAhetQlX*Dq@%g^Vd$%;3j~H2!Qr{^jF^@
zalG?WL8-6#1ql+Y{uN)sW-Bjz7j@JgmY33yScYMdL5~3F6EfRJ1f8cs`-aibRD_$I
zKGsxFZ{?NlLr2=}Mkd+q6kqnH$<L;2P!9`f5deXy^bIILpx8Pz*Wq54v_y{b*ULsA
z#~*j<dL~jHR-EVSXJB&z1;(g@LgQ=TfVwco764!fewVJ@@}X$zVsu@t4=?tI#8fID
zlmFrKv@RIWp@bg<YJMtkhxCvjeyifOkDl>-V@p=|Q%%cL!7IIb#e<+NkgW}Z002w_
zK;bZ$P&Y62Oh5l3UYMSdsVwQv)^#auY|NP%0CA%|tVaX_4eALnUtu}`?WIG@Tp%%)
z9>$s)MkUKd3Q;0Y$MsI?QBsZpuo@6)8vtO3r@DPGEiPowdYGi?{!}-1ovCVE;?%;|
zx5|QqXd1_J4Fu{?=QEam2RSuQsA#Q-O_XskNcdz^=^(LQ#zLWzB8Vn`Qe~hCYw^UJ
zrW7`w)YQCG_QhhjyE{b4y(AGAg&OF<U~J)144{WJw7B9sW}-lpmXN@5g60AZ&XrsA
zW`;M*k2hd&lnW!KY$edVwJ~Gk3sgwp$zNW(QGjj!M56WwD(?^$pby1j9|^>v2+i;n
z=AQS4?Q4_Ynf*>BcJB8fL)y?Fa7n@e2J<)l<N}+7KrM|VNC=z_-<EtEfqrMIP7Axo
z4pz}M&re{$0Ehz!ULgZ~sPkDIWHHFmHm7ooZ$C24u@D`-uy@`6z&l1ntOc_75lPCK
zOpa#0u2v-ZlfZzg^5N&Ad?)YnQbzqU9gX5^12r(Xw-pl;1)!xR{Y9;it#lmy(g_`b
zd>8Flq0EqsVh=!ixT}`Hga{BvCwzqhc!K0Jv=o3o5xPkl^2&W2%Sy)WigoG*bAASc
z2cQM~ke;`QO4x4W%L+ct69>+Qjg~vkBaO;wn?W~X(4UvVzhMYpfY?42`Zp8PMm3a*
z0d-0$M>}|=a)6L>)j=TKv(ibRPzdnc7stXOMqt1eTs=K``FbxldDB&4%V%w`!dJWj
z11K48gp?&E2h}fBA>}p@nsQYW^xP}!U{%OP^FeZL|KNZFl$=-%tHlU~)y}5>^eQ>Q
zFCb!Jw@=KO>`bw|i68hF=)E>v*m3f%o3@(8_DAfk3kVNgf^r@WKm}wEh$*Cpj8|)i
zc)tt2Bm)u*s1h6=I8|L4N&IuKehS}$u!ipbq^aDd?3gXth?_|M7rb5&=h`!Te%)~b
zd<*Gon7`QFbb#k@{$Nto7s(lEtj7yjRo$m?r$toVe)Jo1D837l0EN@xgFsaAKQX~3
zkua`q<=4j>BMa4TE?Z;ecJU#eI7GHp%g_G9+B91wlX(KGa~ZQph~AS1D=j7u;qD{z
z=oU)w<t$(U5$K_4VyiwnCWT+z(J7XryGTPJnyI&nWgsc?v`(!hO26}dWvqSiS31yi
zbxP3-41W8j;5DQNgcwq#hD+6mVO8`A81t($`_AkKmQ(}bBj4c_Q>G?unq%>g2;v|5
zpQP8xhq4e5P2X^SMgW%Lu5S_w5G!0@xv(5jl&NUvEUjgl4`}JwXLk;`)J}xRt=WrW
z@Xd^RyiC?XATuputdO2}0TajLksN2H9frQgf*S2yer@B!pT*3#f7?(=^VhWz{#w}0
zz7(+VwB1@*coAtBmPiYWKMaC_M)gf9tU+&NtBh_Yf+;&hSc93~j+8u3+8GJ#MOgSa
zReha+M4h`7HkNPpzniZ^1O~JI`iTREh(QZ%hi*m4H%<<z+lzPwXV#EMi#u42i|q}B
zm>*d2Jcw8`4UMWhXCKqH(Hy8vc|L@`1%bY3;F6#Mw$a{<aI^Uj)yK@SvnK=UPO`YO
z2!Cu3qi_2;TBI}=h21a4(4UE2%)nzwT(xNtfU@SV;7aD6mB)q1K1I2T&QceDyV=IX
zFyZBtaOS1-4qcAR^@bJgH=l+$+bk%w<rd)@2Pl9mJK0$k{)PwEoL4O{v6Aqy^P^2=
zu$%mfqM@%=`V3`!HNKesSM9Jz{;-Q#5w;Wf%9to}jRk)Yto~EdRX2&{SKKP65#<|#
z9>Zi!hxo9EchU+pc+`rEqW|KD9Rfgzs^-XiHq<jIwCg){QX5amsgyXan;KX8Fd^+3
zg^zNvQM<?*;~NpH02pZJ9w;a!4bdo>3zf4^$aeUEM3$ooT4R@Y8)R=+ug1O!ozx|>
zGePbf(m?S=Km-79={2i7{WhIe9dq5uBb$ce$xnAB9~u&c_S&dsqW*dd=M3B0n>~MV
zRT(t{8hpHvf<jqV2RWbx;Q0r`ja?~j>5ENqGF?mldE^doAmKUo_CczG{eucxvcM;=
z$LwRGGj`+uMFxf(UX}tjP&lmz?hwQS;L+vc*(FA{Yr{OBR{ph8S$Fog?>lfx6(g(c
zqI>o_St!=JtQ==*_E_4ib)U}`3ZRcK4klbk<HRx9^5Lr$=?QhM4=gQaB}Y}8C#SpY
z&x3N9@NI#MeW8qiBKr0xBmBDKh7_!fja8(=(ckq&mk>zmwh~d43EHuMW~;+0e*fC*
zV+6^M@5;xM#RpLVRPQGPRtThEXP%-g=)8TsJ~?_Fw}U#yMkS=u@0PpYA_Mwp46R8)
zU<hPjs}dMW8%cG@CE-w%rvYO?SsH|!>cF8V5uYOn20I^mos7AVXHfq#TN2hOQ&!i*
z44<0i0F$nBv~%IJ)^jv&!NBG5X6GR31!PlG<;C=q2>)+Eu=7cJlY|k_@w?o|16!5*
zPR2S@{TZk3M9pgdgHPI1-^Af#|B<BMBv=+gjiYdIIBGAiP3gRq^nLMH*5Ub7kQ8Ap
zAuw2_9&Cq8hDb>hhnJ(lfUOfP<0S@VP$nov0jh%kT>9*^`Ahac<Gf;Nbue4YSWLN?
zHuT7m!{ea_gJ&cQgdxzto>jBrEaTWu_~uW{c>S-WrZn2hXFv5iP(*&H>BhkWN-C~~
z)?UW;<bG)z(EjSdx|w5Y0=5CPs~8)$d+dVL44Ht4l)_5+05DVr8f%{))`ub>kWZtR
zX!vpB2ZNoKY^7I|-d!IT)@r92*}(~z{KSS-yf8yF(m~j;_265^siRsM^NaulB7XB`
zp49_T6YwJz!(uSz@cLI9g&ju$(Z2OG@2}am6Gv+4201$#G(%mO@$u7kl1imtX?fj`
z>6O%Lhfdnom0!bcI|U-Y)lPl?5}eqt?buYrtZ6%X`-dK>yGakm89||cHc)HCgMnS|
zjB5`=_HqB>ZTuvrsB4>#|Fo;K>Dlom_%)g#I<h9UQ@}x~ASc_)s8b$d!XN)?g|>!`
zeqE75^l&tQxGRAeeAtqpn^WaHS0$LQ4N$~0`z;&V3R~pdPUml3N~OLCeu?=u6wJ=9
zb?b5e>63l_mLe2Nl=I`~J1~b5gtN@)`6=SdDx&l?TIsmHxn^tA-rht?xIizyZ{oHd
z0wU!whCC9YIgs}a^U@#b=!#Na!-U?)PD-gyNKKpbgNKnwH$=h9<e>2QPShrh%%0RF
z?IyO|?K;VyLF+&NEFbP(o2Z0cyvc+-REa?)MUfE@w1Hfg*Sfg5O#ucs>@$8lgExz{
zUr@8TTqEU6x9|#A;A4MHGSA`xh(`*}#NZx3<Q{&+dgV&){Bb+I4DJe;+Sac@pA`^J
zVexs8F$EOQYoZc{OP&H04R}74PK9v-2yg(w9jycIXyk=$+)yiV2KIycFHbpvwM9zO
z0w++z2Kb%-g%Xs2_Ab`>w`VqIe4y8%;#xBDmD&>*VbpCtS?Cam&lPB%8Xa)iLBfLa
zyT?QgGj$hI&y;0ux*BU{!;3Ua3`e7V2=A@&K%Zs)gM_(rjS9y|#jK<&_3EAZv-rjj
z=9!w>AdnAN@1oOO0PS23-*O3m$-Fo1E)$<*9X|E?(`SfN{*+#Y3g~-lYE1$9OjUEE
zGaD+!DY1sav5OYYsZ{C7^u&k==%X-((Na;?T$#`Q{v#)`fzn3o&phU^6MIvS10HPv
zZ*z!2fd{-CdLzIYflfNrj~Jx;mf0;=p9fEAxrGTp3v;Osf}rqXZ=#`LW`M{3*>6F6
zFlQ=E+l_46!PnP;Xgi9&C$fSH0x?Jk^OKTW4{rJ}``%cVN^0Q#F^=$?{|$flU3hW`
z*D@FZaU)dlnn@iHA*WsQ2EqoPC)nRO0|p~u`k^}sfK&lU20p&;05~g=Nj**d{8@xU
zv7wV(z-62}Q4n;q1q1>OW5Z4dr69r;diV$2K;EC<TMYH5vdK=jz%*40lpRxnFwmrx
zNi7r&3Uc3!eLQ|jVJB1~zUR6iQBA~v=e-81VIop;CK}E+<+S*rPYTIF^!)pi>Q$%4
zulP1;6KC_^jl;X3gMz&hk=B!{VL?hLipc*nVgj~Orv116o!dZ^<d`_|DSW|n8YcH5
zAV&1;GQvMZBm_mY7-}qJlWv?KH2;j~*{s0?fx^xUY%jp`dGA|y?<4xx2q(i2;$A76
zPFan7#(+Q+@k4I|5Tv2sY*m5sC;f;hpWxja(EX%|2MlJu{8?=cg8sq#SS3>2{tv~I
zv*D@t56iQH!CD*=^dIPIC|m7rNbwCQ|Duk{IYDj~7x&D<koXdp=UK1;eRTHw3dz8x
zoUS&{jjf=KTYkAS|1`a>3yRuY@NEbUA8%9;tVWLX0go2ZB0z+Ge#I>s4$#ehuH{zG
zU-rF<<FkH?s7Xu*w^0rgYoldg6CJTOTjo5<+6ALxP-ls21cv29w{ii~d(#Lw$)J#5
zK>7(!_0_U!aLZlTwDzmzYSwRRVR7UH(*NIEE^uM(6xY7kGM)$A=5@$mFx`RpQXw6z
zxJuKs%vM4QD`0os-b;@?ZC)17`k#+b!QT(ovDR7!V($`bPh8tQ$}Yd!j}!Se<h29j
z8y&vZ4<tzc=SV<JYmIB*t5!a432A<*NOGVOf{a3?_K#as#Da)~+CvB=x*#NUP#)pZ
zFaPSv-$Jv(*l!t2xwb$evVj&1E_zqM2{Ey_8N83wWS5MCbx?rl`eU~%NYg}w0c`kG
zCZm%0@cB{=;gwQ?W4rgkvM1~NY=OG@OmOsm88p)bQsw#u1c9h^3e;-x;tAhc2DdFq
zMY%pHMw2Rk;1qkUlm&rUzY}MM_8f{2?!4YI4DB6d9&p*Ha49}A&OE#!-?S{?2g2<R
z3=O7(At*z2XCN4Ejd1`HYqVn}CS?PTaYFIT{K3c~9x#}Or~tPXAC{y&@f|@agOa{)
zk}<xOJl~=m{(Na-kQa1a1mJ8a;Z-{0#{xACh3b8OeJs8q+oC#xX*BjN5T+`P`Z}OT
z7~pi2eV=ijQt9=q5ZB%(0=g=dyFvJ0s^w3c-*cH02JLc@E*Yw-PiyWHQ9_q%B`Q|z
z`UD1FPUNG2{{;0^Mc2(<i9-xor!}bBJB&yV1v!Eb{PKOB;XN6-2>b<IM+8Ln2`GhU
znQ@qy<{~Vkn&xsYki#$H1zked-2qOQkt=0RMFU=gZ~RB;k8jaCU1bn}z+F^uKGftl
z<(KbSA}IEtZGjSKoL&l9+3$+fA^G(}Iv$_s833XwkooP$10ZDe^&|OentHo{$PZ+y
ztGc*V^Ee1Z$QdP_3KM{uSfMS<Z3>cHvRE+uU#Jhq(K#h(I|_vxt|ATunh2w+)*{_J
zcq3Uy@~T7*`e`)(jo=Vtpe45|86`X?4CW|c9H;+ps%s<q<5Fg961NJzMtk-}1_S-{
z=tU}^(1AS{B2FoQ(_tjlyWm;)H1<jUd<6ml!hZ(u;B%0~;3;h=+2_v?2R?k-Kb4pl
z88Mhg-S~-w;|5RKNVQ><K6Ef-h4&`Cc$DLiVdX{da_g%=tEbiNdCdJ6_kU#FYZ#0e
zFr;NBew4%8(lZp4QOC|`YxPw5Q%Z;fS+NJc8uh$I09b;|w~u&m$(z7c!KmC)`dWFU
zr+geR)UPnK{}6sK8^C;5SYus_-0RInoPi)2d}Q&=^I_r|z(yQ<4_+>=>LJPNUUk9w
zyY&oX>>?xmN1tOSxZNOi!{K2MnhD@9Xxo^_=-SP}JJ~-qK<ZJwf_HGZtrMB1<sT2!
ziPHmsw{e6?h*bOx74q0k!*&r-`L@g}`rDUL<vV_gE(B8O%!m2=O@J`HtyTw@4Mft1
z2Q{+4`%Iy1k(go+g}(OPwV2EteEOUK={*zxc^0wv95msZaT0Ac=93w}CJB`9GAC`R
zr9Qj?h0DId>VK;OO>m*69;ondxKC6KQ~>0ar22}8y3Gi&*~7Zd;B06>1_F=+5E+<7
zOnIsdAqS*mEjmj$v{d6SBX0y$L!ln)K#l-?K>S*e{>yu>u&4d^r3KYUfWTbF1_lVg
z<Ktqp3~7T{Rg)ReylG!asiM}1zgOw9c3;d16V9lbp+fJLaa&YBd4`;@KYvA*JrNUX
zaX~81oiw?hDuMcamOob20w9XX;V<H0A{qz{wPOZtwFO?x2ZfTiI@#Z3r*Fhl<e2>p
zfH@r_?B|jKG7G)zVHHS4#XBgXCq{SwWmT{}4{VZ(=HLb^?5C;^118_|z3(M|mO!=^
zNPiLxsMd&@>moYBxTtxTiwl9g5kzRSN`tkjR-=6m`gwe;F0;1uqbRab!O{~3%a>6o
zmjZ*;Tk>n-(MmB6H3LquYc9cc`2Nkl!?hEx3VX5MYk*LyeM%S%wCHOhqy}Izl(3AS
z5lOW6WEge?M963!r9BH@3j68X-2V=M>2$?OiHd8A(2<iv$W!0q^7`d8zC3G7h(X`E
zG5t4OXV4;S_OcjP>8*JX;m7;KBj;fE7h^EEN*LjpTN;|{!c9Gcv8m6AlHMOWm)+5H
zv$fEl_Q@LXIp*K|*_b2%-`_XRTQOVBU)9K->FL@lwsjpn>q-#n?Vkg=S>P;E3pysP
zJhY&l5hp=F3e1YL6D$L{Qg^xi!|8;ZY&!`b-4n!p3dVrSUqhIGP2Iq$WQ>}AyiFg!
zkL{o_<Kg|W$$3`^K*SBplj4-O_!PwAQRJJ<fPxX!0MC2<@ZcRjL#jbQL~Pj$Kq&0V
zgrk^MQwU`F5rHLN4yrMejJv)_D55{L&CmdkG|S$Yz+i6*81gGLq8RB2=@J#3&tbwi
zksxG4Eck^xcxT|P!2khn7Yx6~kyeiT7~h965kTSA<V_#=zl(@Ura4qS-={tde))Q_
zcf=O!i=qLg&SZi&-%j%1=4n9d%s3XNW|rYIt5j#6BatMtqHoqRqA66A{=B2yaO5T!
zl=PMWZd84RqoxSdu!2Ge1T!GSatgm^pkGg8J|8_<0Qki*=aIkyxv}n|H)vRn2G1;v
zr^Uo_pJbYP<zyosN>2#yt*Dh4wB-&_2O1C43){Jh*ITW=xTXrKD|%?Iho@m8ydfX{
zv3$Ax6kg8R&7FgOP1NtOUKmgS;;BRr@C0^0Lp%x-th&SZq4wJ`3sX}HCdTk5i4XoC
zo4N;zoIXpJv6jh^a{H{mLjhw{$$`PAhVZNzzLo?!fF=aY8$5@bjffds8%ig&#>9h!
z1V$o$ee?8jG=I9jPa1j@(BBpTPoV;U!3>PMV*xOZVFEpAC^W~o0`1zViQz)kfVU{_
z#+gKgP(}Kagx-Lx_f!@9`u-2d1Dq7x=ME+yqRJoZN+sSF9{C`m&lsiuOC!#{6~={N
z^7zqw$TlwK?({E%gu}Xh{lBqC`R~~0fDB4oItq;ys>=d$k&svsV=G4>e>Xffb(8z1
zGR6ZOUB^-5oHJjYEE&JeI)*<eN(TRe+e=GaPsj`fTPy|N>IXk1D*{rkA=G!Zw;6IQ
zd5sVXkf;$U1oCu_q!WN!Lv!)-6>mvcTx~a`Hi4$*!~kA0pcHPt7-gXFj=F!E%h(A0
zt9kaat~-ZpS0D014zCRXxC05{7`}fHY9rcPE#x;*t)>DZ$(#sr`s`-@_#(U9SGMKL
zas(t5Q67o-5j9NUTzJ)wwb?}VxBQ~8*(Gaz5Xsn863G8k#4yB*_bGik9{0pTmv4cO
z&d~7hOC|1EfhF=u0yP3N*tsMB?FabEprIGvz;5de4FB%v$kw_4b<z4xe+*9F2eSh+
z>yV6jFfn~<&+JK=kD7Q#Pb@xJ8zrK4b5}XteoTKV4H=kS{NuX&aA!;g&tV3F>89vF
zAT%A-SF8aOeP0_m_)Mc@99&(zYUrOeQM()q*k(i*?wdN>I&>>4YySG#RBlthx}J8q
zwn;E*3M8=0me^FAeX#J410srXGFmslSz{#f_r=Q4gc22ui&v*nifXHcLheoq=#gJq
zKf>`*{*0fU`&%B`m_<_8X7x>S_s4jF8*iQq%^&#O1jCXZOJTq4qbeQ*yT%QguZusO
zxy*`Qd&m8&sR4hZnQt46ho6(s%<tD_;@MUA=e?9~8Kn~-5qup?Jy&|Hy!5)4UWwbn
z7Jam1CL7*R^Q%qLvr#iz!63{LNv~|@E;Bhv)HM?^sl%~e5`v?QtLS{7I6zm5kNe3m
z2gpdC5rS2RLGP9$QG3{<ji_PCo*61dNaw4ouD@9N{Br(7qx3i(+`JyaKw)~neY7=b
zYwYub5D46;mn&ujgPCUXv1tL3%K}m(3>y}>6D$tDEe*^1Zz+Xr&LsX3nzUq7dyI<j
z0vW_Qs@2^>#9WUy^sQ9wRxwUE`d2ZKZ3zaV?+Fb<RrAQ<ee-(C=S2k6W0Tc+P9LdR
zgqNHLQjJArnQsB!w6EkrVELWlb^Bjg=2P^5tEUemti!yQz6bv5wv(`TE*C}nYEP55
z9@~A5vo0S(r&n>P4h0$Jc>a;?#L;*?-HjEON3*@TeQgtT-R7!B)BL#^+}f9DhEUYY
z=<yYAUPUw~3$~;WS{6Y<_w9zVoAw(reyCn^D#S-Svfe3@X*p#N|Db;2=$F1^vJZ}g
zK*?inSnmbJ$TX{aqjN4EOHE1`roO9Cq{(c6V`BHoHx(;x+|=^Ec=CgjKSZen%`sKB
zJNz-k1x9Wi%hdwvA38t8iu!&k8J9hVFAxJFNJJ$5FSDfcC(foJL}@AevwWYG8SC??
zb18qm>iQ-(l(MyaU29h4W=14#SGQ0Z`Sm#SDAfFwj3164ykJ$+tf81p*exQuc->(1
zBg~1@?lINzIRJM4otnS|$B(h<Mw#?PMbxfP)vO{`7FZGM?M;R?Zxkk6Y!}2ZT*=5i
zLiLm#f4o+-vpf-gxj8Jys<iWs<ro`d<I5yNhPXZs9y~%42P7lpj&CL8oqR=ZU#fc<
z&l-c)d}(z)wq{H0MDm%%WwiHTnvZGi#I7@&U~`;k(=AZR4O|E6KGHpMSBny#jM_Uq
z_%f#54GhZ}Q;!42zQEC3U~ZYU{;Neb)%UFe=bf?5KG$_7?t-gyE@Nzb48}`Z{L1Zo
z+t@2;W3E3Ed`p<!1}3j{6y4vb=83?k_5rg1IT{w<SIexRzuhfdC>pl;G61hXqT8tS
zUn6Mi`**1XXOD;aXm*O&^y;`T-qD{=CfnRU&=>O0oBuujyz^Cxdu44?(2;W<&T*o!
za|;bM2@XZsf9nGc8@)Gw-r9$bnlZ#Ppp$TmFW-C0m$hFM2wg7acF0?$lkCU|y}>ZN
zH6AUW>%MMb2C5ff;EDNy!9eifBG7MGLU%ctcyp0G@C<W%5M|-sEJC&~-cF(12>)c2
z9Yx<2^dWCJ*>PrvwNBPpkS6Qcj{JVb{i~bB(`Uj(l*QDG|I-2#T-}RUg_ux)!oeK_
z8l;+Sp%W0sztdkW|I5-(DPIRWQmN#2dN_yA<TiVgnU~1(60p52RzD=eYba`d-Ej6!
z{_uQc+nQoG_UYreqea-`;?->+weE{JI}U*AGmf))cR2_jN82yzp9M!#oOoal`XU}T
z{EjnqxNVRMr*_Xc(bD)0BfBSqne!y(#aN_YTka<9cB^O}`<xKRNm-%-k##8H$Q<2r
z`~di9XYp-{hXJrc=8>f!Ze&nRCg|0}_^J=?7IFJi=jP#AL4%b7ir<H_<s}?G>6%@x
zm9+WG-qCqKuF9H9C?=yWdR|JYzodHB16FIY>E-9C5&zY*b()O~b@E>CON#*c^+U&^
zFzY@AShG!z)+$}9rt*&Rq#eH2)xH)L(7S70`dlKj<a)B&)Z2Si`7K)OH>-V&u=om!
zQuw9#BNy*Z(y@G}z`!&kaR@?*>1bWy1kE@VH{WgXtLmt@s}M<b^L$Pn0${LMOX|#L
z@0Um`LS>B4?ld{wfmqm=3QA*w&zX~j?=qv}T$!5YaC^>;!k!Y1n7b|CUER_gkWsN8
zA+3?5#a(kfu?~dgD8_nfXPS$VUsL05x#3*cXTRc)d|AZ}<}lr|p;|=+fj(&!vX0&f
zl8;5EURzT<WNo(uy+-D%{n9!ScAW15C>N$ZnXVSb-I&e0fQIQ>d_NrHeSGyQ!EuRi
z;ZaaA_Uor@_u0&paW$G>cqjeQ9_tWDcz~Xsi_fZ%mI>wDm*+Pc;ZI(CdxSpK{olV*
zq9|Msctq2>wo+36nzPB~&zg8P46$&>{J_|5_PCNj+IE5F|F~r6;+FB~t>>p<nJlv=
z>#`&8*U->Uf%L$ZLcEDQ*(w$uoLuaX*SPW|l1xZ<4z>U&RQ#_~H0I-X_bgQ&LzD+L
z7_=2U{Ov+tk5>J(vPxMM3E9L($#pURS=tscC88XB20oE*t-H8sNjL*<U|P)oGahWK
z-kZXa>5>qSx~p$Fm~S*~f{u?(-+GQ-B#D<74vqGnUUz@TCq^ot2=KqRsNy!jOuqF_
z4##2`vu4K1Fg1!bgU3GUwvz<i4Zobo9kI9&q5aPpUn=3!gv75Q4aH-Q6Xx7#c(`_v
zRGklcoS6n>Cw%)DBo>t9$17%P1|NS!+&1HgU;H|mh>AMD=eNLWy;SI?VbA5?M51~*
zs>19l;og8l6zNvcU-lp$Su=&Sw+|2hU?+N$)Ke^~Te|`7M7<#S{2mhv`#qE<ZTY+t
zdyf2}Ow7TpGM8@2_u)|Q6}!Ghl0vRGH}&UNS6P2^9_Nzz7^r+u<5ws5KfcL=lL#TL
z*BNgPW^Y8^>wQm2VNhN`yG7h7*nnrMpV77H%Fqwri=D=Hv_eWd%;RP5`E#Xe<zl(N
zGku&mcefDzQ-Cfw`f6tnJXB<SVSGX1caBRh*YS4ep)$|AIa~V1`RtI+Tg$@5p)}1G
zg3tVp?)k%keGp8iEetK%@gKGpI~6WLk-v8tmM~h)7WpxUI7)Y)i_cR55GK!z96Z^i
z`LofLyf}ODiH!o!3Hck9yrG$8O>(=r%0jxT7DV7Oik{AUUu&&w<IAa`-b$)^*Yo#x
zle7&8ViwzQswSTLwN}u*c5RE)kBI@+LUBO5Top^@%Lz+llE}X(T>Lw<1h8VyZ>U-8
z>Tc?<KAyQpf4lpX%G)(cej2muvKVSMNUHB|TfdOzdH-BDkiJ$r!C2b=1|A4@=P$c<
zFv>&?-iSH~*_OCZAda$BO%hRXfJZ+qcJzIHOVQjVyU1nb?(UzK_SSazUa-d5Js|4)
zXAQHt)EUNZ(Mw%)gNHBN-hYhYMWVkV9|pul$fh+38b>tZ9L18;I?OGKDv;dX&LyOz
zHSzD+3Hw@1>vPN0B?`xl`+}3iozF(j-nI1-fBzKP?IHnBu}Dv|Z_AnN#xR|!{qfV$
zzFbJEYyo}(Mc;4pnb&!~O#{UZxbV%fX9=XI9DDk_0%xn8T1Ytf*|=Or)mAmcJ>i*R
zTg+3#y@K4<=(>o-Ar(39_@zUbG?Xa{t30rL?MMFnQ4gPiz5j_I4=hYAPz?H#t)#ny
z;+bBp(d;ffpYHt=RRGTD?CV^%(LP;ff0bp&`CPvxR2>3`Bm_HKlHO;?e|PgVeO&s8
z%DDHu$-ZV+GdZeB-!I}~&xu*#ZIrnYD!=Kwr}J_*>**`7c1-2-6Q%uqMJ-?!()RR^
z3&j!Ta0qFu!5-i0J>fKbeT#8@+$%}rO~&u3^Ted$wy8bkimhK#^MBlM+Eim&%!954
zitA;;fcd<+RS>U>FASbXr4q6>?=_{@Ta(P?x!3)tbaCyXuuO`RTG1bq^GA~*`;W2i
z>|q*3NuJAcHtS)bekOEIBw7Za*9tYG+sZ5<LIPKkj&7PhS?V9BN2ajaI1na8o-wFY
zhcVogCvl;WgtJw!X|AN3#ML*MFg2-Dk`&EMuViQTR7aI^kyVjoSgxHX(t)H!y$iiK
zKl_iXp(p)uQfw|=eHfmSppBa%Q}M2fB@dMgaA=ASMJlkha=(d7)v1<DNFIGp;e!d2
zOQk2Mk~F-kf3Y**xT@f(YZAM!f)}WD)+c`MlW^61u8g*-;0{qXvQ#y)brIqoHWnA;
zO){8E#$`GgU(iuiinBZ3Av*l7D8wRS2$Ae%E?I_PTu8YzkcJ5V47GvJBLT1A+cs%M
zp?Msl`2e*DTCYgy`28|rRKe6Vq4<rCZM(Ma(k^WM1gyeNsv|oWIs!k@iJ*2O9Yqc}
z5}UD1S&@_eG?9h&nE%}y?ujhsbn6B4jkFIFFx=%g)0)QRDLMRYgri1bb){ki#~&RN
z?vR};vZjNCr+^Uyah4Srq!v2yvNRhr_kS3y<*_dFC|X^yHH(ZzV%0`?;pN)}@9w4C
z^L`xRuh?(CZ5|e-bPz>llS2O%du;j)mQx1Vn*lsMD8V~#r;^{6$o!e!D`xl@AJ($S
z-Nqm1y!?4_to;`a#$~>LWLzwk>RmOwi$D?PbK?SCDXc}#HyxiX;4taJsA*4i`)IxY
zt7w*nSPboGWKjZ*f^PJ;U($NJOy83!>X<Rhr%~~`Wj+<gDH-cK8$%#~+tUD{73Z?=
zJ&Xars<>M?`5OwUj)OHJk@#96%+h-B?4LrwiNrZaPV4L952k6`kAAiy61y`~Xsk{0
z-t&k{q;;=nd~uR}cq~wKgDLFlzL?85!fPYt+wZEhbqZCk-Z+eVfpGZUN;Z`9cIz3s
z<d{G6?NF-ItN8>TIJB9N4(WQPUGF`%c|R@Asu>IY)-FE1?SD}pre}G+BA*&&YA@u}
zUzxvt4y-->OQnZ8R`4H4%(%tcw8Cj*XKTTSmR#6CsjcmI_bPJ2>knE*Np6NH&-}D*
zLwBK)QsPtj&~o-Kly8l-t&NSdU%#&@kdScH8H2Zy<nzf)Mk`+FwESU^bsdjEf^#by
z%B|YU14xfXqNzi7509u7j6J8NEiUddAzU7%Bl>`OGE)2Sl4r(O-k&<iXjHI}5I4%q
z+PI>kmWF1VGyOjwot+brDgKfE`+|`+_s}-4jP1Nb$IegoSWv|QvL3(w=xMQ)Q4Bsv
z;|YVS)<QFlWZ+?Y0-}A(7R9KLxvgFKM*U!wuA5MLHGiltzGsigO9SB}J`F<FF;I*W
z&f^3kP)#dYM`2!aRz2%1*rghO{B1P7keADy=0}u>G&);hAak8V!qQ0E|CSnFh+I~I
z>g$zYUlFHc<~6405JDgmm&LPQk0+OfC{KY9=I+&cd0Pw9FNQ<ExJW9ZjX`gO^4GRa
zaAdTOzuL0TG#dc^AP+#@!!F{Ja)>E{U>yCg<tj4!9$0uC(wNz1ZNEID{9Fyrb{(<4
zYPyTLhQuKfkm?~tm=)k^p;<HEEas7agge!Bwq`%_Pht=VC+9P}%`b5lv{zTez#X0Q
z{#r8>A^AI^ZMd$}*(UBmr>dU(@@I|-o(gC?)$G%V&p}xH#;B8rDGCV0zI<MSd#@cs
z*qM{jy%i8<AnMP+8RDP=GI+OaM?$aX3>D2)!sQ4<2{^t)IcX$iW&Ffq9$sYn)ucQS
zc0Qu1TO33D(w~ksn5$bj$yVNy6TK;(U$|~59p0X_?&5lGjSgdE!To7auJN*brcHzU
zT8AqmZ3RxY53n+kxhZOo9djC5*dz&gHBcvV9FVMFNx>TY->IAj5JTa*-LK9Ks$9~r
z6nMqdjl@qy+_j7|Xmq5!T!AmeD(<x4xfNX|WT}F+d>W;NAK5t?yA2f}3(9X{i5dVS
z@&W*T1=F|LmAbgc3%2rb%Gs<ownoW$;hm(ZtkZiz?6gX6R;>rNu=#vj2rL`+PbueQ
z6)dFnulf@|(=)i0B8Ma@{!522h9Qz9rR`AAO05LAl9Ju-wF>OUNv|VaL<ZR5#~)SM
z45MIS1hrFbj|RcwtwM{Wo2q!N8fG#QNEfA~bWTs8*R9QhC=PZ!bdUgq7z9LeFf0Yt
zl^zCDwUQ~bgj>xMi4trNvh5AJ{19~fR4Ym2Im(EI{ZHZyVS=x~EbZR^)1Ofk9%~sb
zm!{0U&GDp1Nj%EmMz@FG^-~xQM6fMKa+5M&yNTX3IW%-LfBJYrd0^@?r{mw=jmtM!
zm9~1g5$4sb?|Q%2e)4y1L_~P;`TEGQ`^l8mXtz15yUCQ9WGlP1E6<4oa~}_`&rbL!
z=Di2PHjw@atV`i(c!50j;eTY;lFA4`$!&auP@I2S>wI}Q>R{q8Mg4aG=7)DBK?Q+G
z<e%Ca#sohq-_9rhcL4o|#Nb*`MJx)Hk2j<AIJwwHT|TX^SDq+gq@eQ{sJ2UIzjXT5
ziZ=!@*s(r?+FRM0S?j=Y`M`I0Y@YtT0EhFn>=Ijl<+fp0N_FRZ=H^<P=Yx%|xF@ft
zua{r?Cq<UVnil@m!y1W}9vW8e%Wy2CZrJUyPuwjl?M`)nZ7J8kCRp14(Vu7}x`fr(
zMMiiWdVOg*>~T@Uwnk%oaHDZl9j8P5&1*H~y0+=i)MEDc$7G$A=Y_Ghuv#VOJ3h0x
zrrhpTvgM;RWV4L+<A}Y&>iZjI#|mSIyQbQq^lK*vzWS1>uQ^JSO?iIptTvC0d-+|>
zThs<3mSa|gOl;K*-)&DA6P}hIPYsWZet#2PBBGU!Xlzu<YMh$?O?NQ0c(g&@?A;`M
zy)<gPTzgM#>iV*Nt9fKc-e&fEMIBIuREV@}hty`Krs~QpTG7D&Wv<_zm7Y|lW3s7J
z@g7a89RgusKySe^co%wez~>oVVaAbSx~=_tubk~*a%kAIQ=(X8L7>H{CGMD;c>J}>
z*lIR<5SO3r&byP<ctP{Wx0<=~*lF45zHXlP-;x(<t409or~GR5Oe6K$iuqYc8|Ux%
zHI>FL*WUd2ahnFg$1_mW9E?c{D!vWA8rat4-98#SRDZ!e8vpaud!j+Wqm2ED-oe;v
zjnK$uYA1PrvWvrFo3wN{A$|#-Sl8WI&&RSandNyuk8)O7C+b+Ft-Q|@X`s&-RWa}s
z@Xd^yaeFgsx@Y9@W0uJ8o?^v#&4a{vE*DE9&~P+j{@Kkcg>SUq=YalBea9?fM5y$!
z=Ko-mn#H1;N|o&xDCM>|JBO>JL)r6i-AdN^_h%l0nFa2v3d~j>S}Zw@55mMzrAl-3
zb~C7mra@ej5C1R|py)Q4;`TH&NmHF2hfLUnW$fqt2_gf=O$MU6U|+Xgdwp$9A??cA
zu!GR+=JmeE4O9wBG_oYa#ZqBIV{pQGbN33Zt%5gIT_K7q$7qU<_OrPr$qeZg8FiUY
zX0PuTMmtqx`Ld{kXI_i6wFl0bx!k6F*9K2V*WdX1IsAA=ISCh1{|L)AUiQpLoYCw4
zIk?c%=LS>4t?V+Z#<<d#n)qW^=fZK~;xX1BG4A~8i2bW)hA5Kl-l|(%hQ&kct&tGh
zioF3$`cC#jmQoGmcEQlXI%NFi<CsCw(8Lv)zGGE0x8VFbiKqzO^gI^^x~IF_M9_=I
z_N<M#P?_(`+u6Z#9_F+!I-_G4aQbQGgy_EDbN7j7O6YRqeXMCZ0(Hh2aO$d%=wJBg
ziN#$k98!FrS2>}Zt+5dAei+J@e#*}66K7d|7Ve*M6nDH<KYmy*@r;r<1}qzM>=~FN
zZ~bGLGG~@okAn9@Q^n#e1VnLSA>q}MhQE=L!PHH#wGo{y<L2orU3vx`%VWBz<r*A$
zHJlwebZp|dXHo}H9ANihLjv?!ok1FuVxCDb%s1xdpXtol1CPOZhz;aS#Z_WrmKv#;
zbvbgcZPO+$Aq^QZjy+AQHWHTy<;<iJU*8Yj8RuTuNi<!oED#hdOubg{^s|>P4ddQo
zj{D(jMpcM;aS->pSkY3%MGel!U>vgCMO?NE>rV5~-YhD?hcW3{GU%?qVdXH=QnM%y
zslYeIpQ63)bdZQ}$hp^+jfa712$SQ{*65#>0<ws4IF=@uSnXi&a1E-bFWhc*jr^$=
z8$6$o!|icD$!4(7z+kzpZ+>LCy*v_remL3Y@p(SOc$Es{x{*}jw?jcHD&j`O-g(;2
z^Vj@8D9cm1<@=VF@fAr6Y4{opb>oLK1%5$&BTbVHu=QK;^J=cg=ELoM5-JOwAPU#c
z_l3S|CQvg^`=*v#X`F9!-mOmU7xa3w_jhieE!#!qn&HwNqq8K_ACe1SXn!-Sk;hr~
zNx!!bgn=Ou{=B8t<v!cZ?ZOWx_etKm&BXSV-nR`0rn4VI$i!<;0}K;C);DoAHOg1k
zbT{j+4F28g4C1+~ax&!`uRMKrU-BLJR@-gLQ;8(}fE*ls%=h4@QCExM9qAl2^iWlF
zA2sdjsL|Q&1kr6i%s?|5xdVetyz|4qwkQ+ea)i&YbBmyb8(94emVZoW^A=B?nk$>N
zH9p?;1Nk93bc}Nh#l__Q()@OMy1Db4hB{TVKIR$`SSK{n75*9-i+`Rhj*Y!1@gz(6
zK0A``SR?fdgNQ`{EIosfcz#t3IPQ&_qqOK&ejUY^ci|N>R-{G1Qx<6WNF~T4IT#u%
zu<K{)?%;jnuKl}HFsOA>+QVPc?t{dLlm1JRLDxk}iLjEN$OE9==0*JN0}^shtG~-v
z=Pl8a_N)doef68n5d1KX7lpswjM{VEZ}>Kasa%u`Y~#aZr*dbge^r-pN!}&yU-yQ=
z1#l}K0Ws9ol61YX$>YXsF-cvDMaRz;^ACgaGgY0LV?5^Ko|S?+ojczSBvSG0^W^zO
z&_=rIU+Zs{c&2x3M6cO+SX@Gfw3Ge{Cv~3e98l7=I`XSEI$UfQM4zC#{<%29NXasa
z{>0ag)0f(llwrK9^~rp3(?u5y#$Qz<;2RH=5fT4mO`D{=>au&-6f!Ln@0W1;POa{=
zaa4VX;&UOKsDSUFc+PH%5&Z10f23@%bn$yz3?rgRrT7glqUlzasKa9}cX4`Nr{aUB
zg!AbkAKf2Z0UqfPDVZF0l`;31wd2|-#m3(2fWTP4Zl%_Sosf4F^^_7^Q6%Q3Rks};
zT7q_K8Id{XQM7J-ak14cRTzL@A*k;Kj_Y!g7slPp-*lfnrLbPS`fzsq!s~wYSNNnk
zSkYK9?R&XhLYU_guGhS%utBGp%`tciG?KPPNdK~ixi+VC4`W5VpS+-O>$+UVr$eUU
zJQ#bp$2XkFohcMd>uS?!xG5g>8*j4>J23nHei$xw(t`6^@gncU8%3)Q17OQCe*XkI
z`XVTvHSMhIx0nKoOWrSwyT}@$-EwY;m5*FzkNT5RTwc!Ml}aA>)NtR~{i86kTK4A}
zL<i9rq=tB_9N`g8T=OwP9=rRMiNBk?Bu{m1l?iU;WleO#ve}n!e<e??RCP2{v~-w?
zE!Q-cO-Ot_0_(1D*&|J#1i_w^iQ-s`*mz3=4eS#_!k{}s<$$_}qwJG25$;TPK;2)1
z?+@A~*xc>>OuUHqn|5-W9X6}W7$dlf(A+&EXxDw0$&#p5^nn(X3(matbv#@hq8bmo
zz-h@ttdT3XMWnvhd<+0XG7o-SQBiHUCBG-E&x*+5tQPUGcx;F3kLe-a8e@2b12J6p
zg~vq0CBxOH1`jjq$coAoR5<+l-jKh&!0p%Mppm^W_T$XIaS?Q)WOX-aN8MKFwcmZF
znZY6sxoe`@5fiL*d%UFfQGUpHLMqcPXI$DhMB1m5aaqoPx@O9iE@~Z$kj-}j6qeTF
zT=sHcr3%-&2`@h^&)(Y!>2=yJBvW2x_<+NOw(a1CKYcH_X@!!0J?C|d|2vDtr*F~w
zPv0r>-*jvBmgc-35mF_~m-+;L#D&cFfh#fzTz(WGhfma8&81D>)4U1^z)$rlO*L%H
zQ28fwFk$Q$CdkoCR_)F=D{8sC)emOTlH_dQcvRuuOxPQxmCp6EBqel^K6CuvqGUUN
z+8;~Xl=0u_tG*e&^^9LoDX^Q^t9pQN4Y$@|X?7RB1{(;~bP$a}-TnNU+SYpCBhy?&
zUEf^oNpt$?g^roiTslQ4L)F<%qT{YOTRpJ=m+Oj4!GrYreI`C!Ojm7RV%y-9<FC0~
z_s6o&Lo=F&YUm@C5@BAQdynZKqh}(nYEUKLJlx;SlaF9tdPBUGe^+`~{DKZi7=wu=
z_P8Jr|Kg^}XqcUBs_7k+il`g4E{&cU?2=bA|Bx(g;pg~Y756T?n7U1timN0&B;8}a
zL-3*Y7(u%P^@GaAC}WQOJyomMct?rhccaq7kC^C&WCWclt)*q}TXAv0wf2QqmN?r#
zTURiQ(g*$u$D3)A5)5MQ?BK3;64sPraGplXVC6qN6_nF6A@-`+3*8()+4P?Nh%RcD
z+)4g%V*Q`}Of!M?7dJ)dAX!3YaIRgUEe7-34KZ>$6`H!6@xM_sf%aD)lqj}V#>@~Y
zz2+jy+)?yTBBi0|3fDHd{q{B%{AS~frF`35^~_v-9WqX-)B%Sc15JSY$pxQdB1hQh
z)_1#;fc2L{<@JR{$-jp_<ZcNZKes8tP4MXBQq9IwN+l!6naUheDXf@E7y|o$)n0P(
zip@&fgzb!^e_GHfxyX5Wr`(J5s`W^i58U#?znOLXy(e!+<?6qd5}!f~&rqea8{DRP
zv`fO0P-*fNNon>#Y>j{DAH3Ka!q5{sN2_Nqc60T~#@OLLixl$J3#a$jGLZxZ$7JpQ
zpGMDt@9P2{*rh;m9xpz#ZRn^!?8cq*rtpI;av&Mgd|-||ckA8ouvtfD;_fxbAGObO
z=bi@Ty<M#}V!{y|l@+^nJbacIl=C1{8pW~?{tMO{25_U3)GX88cC3p@LYqvcJP5hp
z#JDfj+E%P(3wG$65@f;7ckomB5lxvpgr}^u41d!^UAxevyp6G5@?o{A1@x6T9hYXS
zxW5iu>UI6Gk4+#6G@qV2T1r#g;EiE%sGbK7EYk_Vz2SM!Ro^IQ)6p5(`G31U*kj8o
z<ZJfZUs5T2o3Gj@sE{RNEpRb+-bF!}rdqnmSd1G9#<i7fUk5f1hfV4R1Gfhn?G@;7
zxJbF9ux+W_!j+)6<PYS6LxQv0oJLKz<Xr;B4fn;2eso_{uPhu@)RrMp<kSAyl2kS-
zCahom31}gARELKaVpVPlsfPp9gjL^i@u#2Z38~D6DY_!K351AGPX^GKsn|~&>8l+4
zyf4=suEfB^w(b_;^S!^L4##O&C`KwBE(6{SvEdDI`6oEt_13o&{JmmK>V35^CfjnS
z*gJ$gJ^Yzej#5~qI^w#4hg3V}ROq1GZ?~9kC*;eL2A&oT4aZa$c(H*2QOzuE7fv+V
zVDCtduuWG;JZC4+mh1jC+{u(Z>r#>S<gdF0myhYym<zgD4%dj3-A?n-3ncvr5)b9e
z18%#p_}o7^^rbnPC_uYJ>dh`HIO&1}>S!UxB?Q&JoWGlwkg!Q(=j?p9$^t6sl#)`K
zM;x~oa<iVZx6Qa*zT=JSMZ-#6=QuBjAd&TRl15(U^vvW7*UHoEI3f4ffAt$Cp^JH=
zZAbpvV=+0^!&sceS7l#LQ#I!1Sp7aAd|~vAs4=%izFas+REo0n%8G95IM81yr&aOh
z^lSHA;w#Hq^RcLt+fWwLYqWexE;vidF*6@uf*1VRY7;&`9{Kgx*2Opuv?Rv9R~ks2
zP-w1uJ;++V7A?BgRF|-PVrp@7<gL=a#%qP2(8O9CEd>g1TMuRWnUg1Hk)F<=STa6f
zoZhmc()njK*d#4?gx%QTukk?>UoKD1V|x%WDZ2v|AaIF#eA+6+dy$Kz*F;ACqOJH-
z7oG70YB#e1r^^t-5MPWtMMAaV)00k8_tV0B#}76~wa|w}sdR6@CbA!f^&G!(TGRiR
zZ@qB3JV!mB1rma#{Br09f;uPJeKI%}bbjoBjUS!p_)gQun$LCBd%sH652ZiPj?g16
z_|$zoI!X%VdMKm$wmUWk-_xe#M__8kZEUEXM|L2}QQGbqd&cv1kF-Gz6aCNu*-dn>
z_VjFTotKMKrXi)-xxe!S>Ca{5)dIE{MmSuJi@#|j!ik$l1|8;A(hXwib3`!P`;p;g
z>YG}m-))`Ry&#0G*zx9c?;DHFjN~J}ek+%+4QoXQt?<O$k7MM9i9!_J^a|fsIiAyo
zhJ`YNe7Tj2HFkL10hqHE-&+&>u!D`)i9K&JK`N-`-X855ws2kl?;WYHMEdIOfv>@?
zz27UL?)1{4jG*2rNzq<aVhjy-r$Tnd<=yM2&}dm4OE%FLZLP6}f>s0s!h(PQ3()wm
zGrR&?J54*n%v7}zHD@o!&Krr!njS_5w|7n?t2pV;SfE%G<s~glN-I8Jo~?`Vz5*TQ
zM+&Mt92=AHZPPMMM$aFD)S>T@8+FA1QKjQE1B?F?9Y`w&aop5#-IeY7Y5l9l<-rp(
z5s~BH9Jh5egd6D*S(AtA$G4Z(&dq6>QZdByYOdS3$l-Q+YiFdo${Knt+Q!@7=H~vd
z3XI53g^cfZ5*dSxEDtjpi`<ZDAs&H6kUR3)03j8z@m=8P%q-(DDh}0kMM9;aA}GA6
zgI{oYu3*XWIOk+yhQ~Zq?j&JVo1b=EpX|;9vN0<Yrj)^dQ_jKuR+pu5$IHH@n)?9X
zQSnc4Q5*ltaMC=}zTaQ-ZPK^6<oj9{tvlZjdb_rd|8F})f_+gxdhnktaSnjGT1of2
zj=XQ{K~#9|SQm-r{<XOF84-lDT~~8=11iK1Bx<DR&P&*7AL#9u<2xby%f(`?R1dpw
zfakAFX6eRW%FR6EH}!!&w+}7b<8aK1;q1^PfuOEd7Nf||V4b&sAU<c$(S$jkvIanT
z9*+*+k|xx4N3)=U1KgGJ#+_kj>QHjA(QmJ_*Op#5^rWmBQExr{UmZNzdGL$5_;nHP
zG@$P0Gj*z8WA}o_C&PQo*$w8SwJ6tufjSrOwVcG0mtpQLrBGE)9>)ZX5nV;-*8mvU
zQ{~(U`o8UJ1BCJ6tWt6vR6Nm@OnS7r6$*I_S><#{W*?8`z03JFk0<&)=)KqKKQcWx
zg9EsL+(yQjR{KbxF5jWbwNP>I`8}}qSvC%%80&<&<7$q#o8RJHG3j3h<n4;0XhZhz
zUNh#P*96Gs6m*bk^qu>?U&=-pvZg$#Qcei|&N@y9rKb-sPmhaAS5_^m56EySe5vvK
z6Xy8;p-VgAPhB5oXZCT6j2pfV-MW6{A)pFcj6|WuFK3oX=3S4zC1+mjFsVAo4_Wz+
zn+&)-8J);spCGs56&JJe{#gw@<Uk|_0>sxthV>C`+RZxVe={Ak1Ooq1GuH7HvwRX;
zX4qD<RqHN2_3dk`<ILUOqn-hXTTO!CFL29mK)f5>lPib!O)3%ZCN?5U9lpx@ej1MA
zrr;wE8lUM86lfT`ogvNZ#uYRtPYj#xBi$&5jkqcu6#VM?e_HwSe<<JfeKUp`>rA#G
z+fcF-J=tmOTVz^LLbg<vG$FeoVr-2iB}>_|<ed=NJ;qM5WGB0X?7J+VYwG=c|AO!Q
zaL?<0-PgTe*KuC=c^=0RWl1Xe&zluxiwfa@*UEX(_XQbE>T=iA>J-g_TzGs*BMLhH
zXVMlUxj*y&Jz2Ux4PL9_QT-+^VMoS<zExg$j(C!ynz)4&n1$lsd9HGQvz#WXoUxT|
zP=?^{RH$f3oPP<AXEn0uiQ`?d(>>UVP)w$r;`liEYVGly!W9%MipCmd-y*Z!oc;KW
z0-AJ^Qu}JJ{Y#4?np89Y;ED9BMGc<|6Jwk9#K8F%1apI9ywo{*Ry2JQid1Odzhvz*
z#twtQW~HCEeb(P-MBjZ>2OakK@ndB$2T2PNSQDHHB}~>2U)T2W{+OI9LM~!mV^|P$
zmwRU9(Huhf)nJTmidTVzjxguf9ZGJqa#)*U;Kp~I0|Rz4v#3oojzda!8Oxwa%;G3P
zX#p!l_|?HIMB)z3I%Zmi)nP~2tRQgvKHir>tFp@PD2H2<myb^`OCnYlezou)e>G2q
zJY~RLMaF4&Qp0A|Yn8taEZ<aeL2amN3wDKdx4TJU!~ofV)Q7*;U3^i%^W2RBOWBU6
zeUZZ{E})Nj1%i3^)tpKejb(JLa|ZvR^^dZ;OUkZ!72d=9tGQ+vqNs;&ViOoD>(q`=
z*(FlX58gUjhqv67=f7ytIujk(grXN+n!d(T3@0-9CgzqThv>893$Ow3$c;J5H-a+_
zMEz(>c7jhB8ocU#FY@#!h%0jjvc-6?Y2)fs=dpXjIx#Alem6a%Hc^Qp_oRZf)OR1N
zyTJR=pR-qj*6z}5_&1l;b$KOhvLjN+g2$%QS^$MT7BNqBdvSV1WJj@K`$sLkq?e3&
z&a;j>HE=vz6^&Z*tfU*rGaP4eNNhMgG_WyI>N3dJc=j5OXnmSC?0@{@L(?_dc;-CY
z;fJXobX)QXld+doT~6oh8wyySebIJKS|;nwr8qAEo2HtSxyvV-M;YX0_DaGpr9l7h
z)juJt8F!G--UZeHE@z~@(ylKC2*VuZouF}n{a!tzTpIDHC!IBM5r)z2#pGnP6q>iT
zGtq7AVP?Tw0pYRl0gN}Rj9$PY`|&`7hCt-cN4)nmKZQCM(1xdpiVo;+^2q;^aln7D
z^QgM>dYO90%n-gBe=?o(>?Ho4_v5(`DU5}2-v<koVJ=flo$_f1k@%+{p)$LBYb&b-
zh}I9QvYwsErxf2j$($#uZwP{#%zEQv-XCs7z2`%rppVEV$8Zfu5*Glemq6e##yJN{
zNxcRi27PobldK%;=riI#)=t3xCYPgnadJeYCa2Jg>}NbTyi0mV?rl4bez&OGS(x+t
zUFrFd`wcAf0-%H+(;-}Ow_N>A`$Ybe!?|Bf4A}D3p8mzvlVxW^0e45&mD{rZ=NCS1
zki8hvOXJuf`g>Dhd{2{|S#SAnlZM7>ojxsXf9!9d_O;k9sBm)TnzE@5)boFDFzQnI
zEeHN+^jD8YMcu_Qox?ii(fj$jnseLmWBYlfA#*=_Z(nXd4*D`vjK-zr<X7$vK=pc0
zb`AHPy57HZr>fomVHao2+2#Ch8v7->?<3mrHF`~EODoYuo0pl+VH&VlM71fgE{pCz
zwAvESsTSG8LBrofCvJ|*d|Pt#S2ne=ELYmqEaiMvvSrf8sM9N<5I|t&&MO53=IG>m
z4_uUP?Sr7*V6AoWPC7&DfZd?HL<ARh!C^E>fERKzFn4<5p)vP5J$>D;dYHX{G)(KM
zKbc<mh>igUYm#_70LqvbT{D3Eb>r>(&nfxe%lGIU4TgUM=u^6k9WOo)QH;wlNMS|m
z-@<yPido68(jm{nx!w5d`4H=a+<$m*5*7RA`{=@!C_lRX$-IzMU4O=uuhM}a6W|DK
zzhd6f^?=3E=u90{T^jQduCe6}hX@!LWX-9m-r8^K6>U(*2JBt}2zdng#cG=3;7`sF
z!&ra<qXmz6C_4haDgw%LZyE9o!SQNJ&w$DQ;5nr_B00?6R0E)g4^=7QzpAL|5^h+C
zf;cV_27y2pT&FjuSUC`gCxz#LU|@(L!?6!qY__@in#S(;QRJ7&{ZDYHIO=#g=<v6B
zeI?qi8njLdqsM`)o)$*3lnaFl_<)sIXXEHsMS%m1s{wj`5n8J&m&V@OV0m#*;U%(-
zk<S$53>=71{9cM*%j0V;am?Nz$o;slVZi}|NnVL`TK<+fHzX?I-r_}}`2a}n0sph%
zR@g~S=^iwwJ>#wlN`@T>PQ@||nsyPn00cX$^_(Ix!Nt`A?GD1taF-30<a^}#K!WS$
z*!i>ao5-BjCu(T<M0Z9p6pF2ca0}=G`pSv#269@&cBG@Zg1~2)sAd0R`5pOs`qmuX
zB{fT>rr1rpY7v?c<MTk+(^E}f$s>XYFF$(dxwR48oMQ4s*`A9oR0@-9Z1(Wh#vV!j
zOYj*Jg0wgaJnq!e&BN$a!*`4VH7tUY_(*Xm)b^2-wmhaUd9d68Xcl*{z;$7g51`1@
zOR%uHJ}vPI_qL1Z_BoWjb#>)r%Y6Gswv1+C`YR@PQ;djwj|~lY?)jk74r-pUeVURO
zIn{q&8UnSu{aU&eU61#pz=OK?$uHFuIbpL;;DX<&r#fV;%!5z?D(YB7CX2OtpR{WV
z=EY0-2g<oa-BU-)C-29LC))%JabIYaJk6)+Llyy&q+h;+4B7hyqT^QscOhI|xuiO_
zjJI&OaxE{&(Bv|$64aJR0Zoy+>{TuV!p9B^lbRsHVZUW^jP-EstSGwob9NP81%UPS
z7(2S`yXyk!Y<^_H!!#&FAj-gxMjcy;BAqewlt@}EMm0IVJ%bUsWV1deIJKT2aT%+j
z*riu4KG*zpa0a~SSVd;2Mo64q2Z7)&gz0}pU@Q`WOm&DBWSZ-chgDkj5KxW7P&ia0
z<;72fU_!VZ4HOK;H|p5%x<xEDyoAL;|E9X8ae0+$u`lMj+UQ#jSur_xg}~9aMN0-@
zrljY#vfV{brMc+L0xe3XzUPDq5<|5;Xo|N(T$eN2tX9+4=*DS5<T3`bVaoUz!&ln^
zFz;?6XKeJsAp1*wGm(U|Jh^*Y4dtiwY@Y()0<I`vB7B@rO?iF^Lh4vP_uua_`>Q@G
z=zoOn^LC7A-msWRlVfWux(iaO%Wey=LyKHjGkvf&G#V*q|3U&$DW$603`7d6@lvne
z^C;59n`a>p#Xkq^ZMmUPxLV$V0#MIh^vY-$_bWJz9JK2eN?@rb@KhZPPrs^P*V^|m
zi=mH<*%{!^-`h?8rc)hEW>#wPils+*(mQd4UNdhs!#HBn*?PQbpc)AYdL8Ls_4MYl
z+j3M%lEV3yEL6M^yHGq8D@g%`IxK=grdH-)P%^Kt`W7R!_dasgynkFsM)L$2x|tik
zzz>pXh*sf=+oL-@U(~atPdu8QKM-LBnDP6t(=sxLQ3pQ=Z&I0h42GNE4l~l3La`yN
z%~Bu+$#<362uQwAwW!KxssN%sP2KBHlYhsU8b*EsI=$2L>npy#i)$}&Lq#*Md}ewp
zPOX~UXUHR%M1_X>&=fCy>HJ=Jg}<6Wk1Xm3h27*9{TMW?af8NwkZ!Jda9#_?LJFaN
z`8kkNo>AXTKfj($9jm9-hX4v~Ovrtrk&Dvxjk&n{y=Yu?bbFzznoEWS7zLN08j`OB
zA3%ZtGG0;se<&^L88x^pbp0v1lHfeuaZZU0;0>U(JOZ(v!~3^?gs`_hb)E2=-54Lt
zVJ^wNW?mI9D=(3Dam7-Mm1j;^V!V;8^!V|7+`>~dZc3mG7+L@eg0^)HfG(t!cZ>#*
z^waGy4~c?Q3?^iP1uSsHLd;?fJmqcoB^#GUQ%uJlnvIqQ!gZ|3xYmS6zSs9^VHJ^o
z-d6hLQ~LbU-#*{gF=*k+=<!n()jtV9^Q=B7hqxqg(JlCqHGHC8W)PeeZx_2hDqu?|
zU`1Fny1*?0FqMFdlj@ZGzr~9C7A2IWtOmVhBOSGr4AvdoMr8Y)<`Bh@SX0+VnPDO4
z#n#zD=YQYznWtuBe_B+kFyk*oZ3eArV`EY}3{oz<@H2Lw1vrQze*>}Q?;Z=bH2CW2
z3BxoE)<#kcVa<Ui7>^8D6a^~7m2o3Vl$iJL!eFLRC?#JEI3Mb3>RJ`u|Mor=26Bjk
z0$>L27E9Wz0@tA+-t&TT9Uby~{~X#5Crs(N{`j^Z5-OX{CJ9jlg@mwgmZU~95Fd_<
z)55g8)a*KKQ6wo-jIMayZCQuCNRbp^M`EHglU+irJ<Upba*D3C{=)F+v6`yA=*_a$
zUF@WwfDM{JK<Nn81_SXJJ1Rjuy|Ez)h&1hZvhAv!YTq0CIX0ut+FW9OCsuZ(D)$-=
zh3;a*YnQ>Bh-0x)M4|W?TI)BY6ODA^-v@AeB4>>vcCjWOurcpuos)RchqS}GOxs58
zL(~E*fUq)Mpk>Aan=O=@@XG+>S~%1D5xAk!<2!TchsL@kXw4-y4zemq6Wy2mqgkt3
zdq-W9kAYz&2;~X+H-IGNbkT2qV$!<kBPMOsr=bJNiR*zrxrZIu-*oV`@L)Wv|L7z3
zGAJ=?i%xvXq<;XJ!(<t38{n7vx^Ajzh^kjWzbvi1%(G`!J>l1C`^tAmCl>S-?q_Ga
zl<B4XT&ZCpUE@<hE=$aJSG}AnPc+!xiFDlR>k06*xjte5thKbg6+*7&jaD%8LWc1L
z8zoIL4Ko#Gb~E*hU5Q5g!HqGU`VkjbzeF6PU&#35_u3Dh+gge^T=+FM@jsGvT&bNV
zei&5p$^)=vX?cKlDLy0@xWd`%E0cSGzN!q2NH#d&Wv=@MHLmLgnBF@2Dp`-CqK)X2
z*Gu{f4kdG1%au*>sj)-qx>!%1!u_q%9NJnUnce-@kb9QTx41k_y;ZckgFLVDfL~JW
zPU?IH>F^-u0eq4Dfo+`YQSr@Vz2*?xw6zK*6iUrE3|_{&XZratDW^tF$Hss{P-h*}
zx%z-%&M<f}lHT#-ynSbc**T`ea4F<X{gNNJz(w(V>93B3J^~|edh;Q35zhZIsIttM
zQeC?LP(hWWa>(p+WB>hq>5n9;ZkAQ7Ec_p4MEH=3u}yW7cWIJM+SgdN{9~N<U!$mN
z2Y&rMdO9D}lx-7SsCbpxnzoCJAk-~aU8wszA{OUgGgn0eHyL0a^2r+CK7FwDlMs|(
zH5RxhRA_u^YJt=Eg{al@nB1A|3!A5V$tue&Jw=ehWQ*|>zF&q$tv`1p8v&^w_`7t-
zW$yL+e`@rZa}K1-?$>Q`8|0I+-1ICM{e3;GQ0o4d2+n05u~@y4+_Ip-_<7*P;4`d!
z%|-LZT@&2{rDt}YoOxh_VOL&f_!j=1GkpBn|6JgBmH)Mw$gCENM{@yvTdGK;PuOyj
zqWpCmt0U3Xc+rmJl1zWz;GZ8+7M3Vfk$1|p7hvmtl4)=eJtAMb!P%SPm%^7lw9Vfi
zrIUHK#zZ<YZUlFWY5A}17=z@ghUofb6Arm{&8(fQK#%v*{i5=P29auhd&8!cDnBD`
z;&9)eXHvsepOKmW&EEBHYTmRZ=|+3<7@GC1%Y1q5(R#NnY{ubK=0W^U<aC^XW82sE
z^Av`Xh*x+v=nzF-r|T8gyUr!;M_&o`9cDdX6Oxu|ZI1C&(cMM6I)3Z_D-b0IhXj^I
z@TpQ&@Fs;e^EZr*AOeqZw?7#1FU@I`tKeQviEFLen9AVPsGk!1aOjEFaL#2sU#T^-
zpVRG?>1)cO?Hz{<x2-Y;2h0_PzFEHTylADJs0Oq(d(U|fOKy;!A7#3mg=h^~+yc{W
z!%Y!}nR;vUfEDDWQ{znr*c<s~PKE(WgQVYc%fPSblUlU9Je!}ity_0BU+ssQbGlLZ
zy^hFh-g#=uyAj8~jQWGDlgcu!8#`15pQ)+{j5RDsi)R+}a(Hh{Njk0<oxcwsSF26u
zmHjl)h**UL?$dk_sm<$8EKBL14{XS_9%&)&zk9Pg!Oy(?$V>J?LId@a@B|^FjrXR^
z^RG}bzvmfTH6O0ttZDW}`U!qnDhy*^>k3z-^<V5Pv7WFQk(N-2OYs0+I$S<ePofI-
znA0kHX9fpMmnLrUKPY+3J=Wf|z<$^?T(xcdd{mBQ$?BhGIpm4%iizs7c8j>e^G;4=
z&Va>0jjrAb2d`pZb5jT1XS;{J+kAE7`)!r;XD)H`GO4b7O<FSaZAhh0_Dn~nIr>{x
zefFOqGVql%Q5?d2hRrRiRP0?+j$bWV_Pv)DbCyU4!;#`kMn&NkPEzb%;oa$mfR9KZ
z2m!C1KOT&KTwZx7&O1~}?sSxfA7OwsnK-G<N&Sa}NDbC_uwha`6kpgxEETMgr5a&J
z1qB|kZeT5h`e!#d81MsS0WK5f!Dt)CKkl&16bBqC-bxsyp*a);2E#SMC<w*6_P-FY
z#{5?E<)4P&dZ4y+Rv|KA3l&U(B2j?2|KU(#?$A*<@AZ-AX~7l(6&$Q75ST5Yl!g*P
eRR3RY?gUA^5Ib_nT0^7)KYeXutq&S^g8vWP1<g?a

literal 0
HcmV?d00001

diff --git a/frontend/frontend/src/Theme.ts b/frontend/frontend/src/Theme.ts
index d4c6f7ac..5fd57018 100644
--- a/frontend/frontend/src/Theme.ts
+++ b/frontend/frontend/src/Theme.ts
@@ -13,8 +13,8 @@ const theme = createTheme({
             contrastText: '#47464A',
         },
         background: {
-            default: '#FFFFFF',
-            paper: '#FAFAFF',
+            default: '#FCF8FD',
+            paper: '#FCF8FD',
         },
         text: {
             primary: '#47464A',
diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
index 9676c178..2e2f7dd8 100644
--- a/frontend/frontend/src/components/Header.tsx
+++ b/frontend/frontend/src/components/Header.tsx
@@ -28,7 +28,7 @@ import Button from '@mui/material/Button'
  * Interface for Header props
  */
 interface Props {
-    variant: 'not_main' | 'editable' | 'default'
+    variant: 'not_main' | 'editable' | 'default' | 'main'
     title: string
 }
 
@@ -129,18 +129,38 @@ export const Header = ({ variant, title }: Props) => {
                         )}
                     </Box>
                     {/* Title */}
-                    <Typography
-                        maxWidth={'88%'}
-                        variant="h5"
-                        component="div"
-                        overflow={'auto'}
-                        sx={{
-                            margin: 'auto',
-                            textAlign: 'center',
-                            pl: 10,
-                        }}
+                    <Box
+                        flexGrow={1}
+                        display={'flex'}
+                        flexDirection={'row'}
+                        alignItems={'center'}
+                        justifyContent={'center'}
+                        gap={0}
                     >
-                        {title}
+                        {variant === 'main' && (
+                            <Box
+                                component="img"
+                                src={'assets/logo_duif_top_wit.png'}
+                                alt="logo_app"
+                                sx={{
+                                    padding: 0,
+                                    height: 50,
+                                    width: 50,
+                                }}
+                            />
+                        )}
+                        <Typography
+                            minWidth={'20%'}
+                            maxWidth={'88%'}
+                            variant="h5"
+                            component="div"
+                            overflow={'auto'}
+                            sx={{
+                                textAlign: 'center',
+                            }}
+                        >
+                            {title}
+                        </Typography>
                         {variant === 'editable' && (
                             <IconButton
                                 onClick={handleEdit}
@@ -153,7 +173,8 @@ export const Header = ({ variant, title }: Props) => {
                                 <EditIcon />
                             </IconButton>
                         )}
-                    </Typography>
+                    </Box>
+
                     {/* User Menu */}
                     <Box
                         sx={{
diff --git a/frontend/frontend/src/pages/loginPage/LoginPage.tsx b/frontend/frontend/src/pages/loginPage/LoginPage.tsx
index d1fd6940..ffff7630 100644
--- a/frontend/frontend/src/pages/loginPage/LoginPage.tsx
+++ b/frontend/frontend/src/pages/loginPage/LoginPage.tsx
@@ -1,5 +1,5 @@
 import { Button } from '../../components/CustomComponents.tsx'
-import { Box, Typography } from '@mui/material'
+import { Box } from '@mui/material'
 import { t } from 'i18next'
 import { useMsal } from '@azure/msal-react'
 import { loginRequest } from '../../authConfig/authConfig.ts'
@@ -77,6 +77,7 @@ export function LoginPage() {
                         flexDirection="row"
                         alignItems="center"
                         justifyContent={'center'}
+                        gap={0}
                         alignSelf={'center'}
                     >
                         <Box
@@ -84,20 +85,22 @@ export function LoginPage() {
                             src={t('logo_blue')}
                             alt="logo"
                             sx={{
+                                padding: 0,
                                 maxHeight: '20%',
                                 maxWidth: '20%',
                             }}
                         />
-                        <Typography
-                            variant="h3"
+                        <Box
+                            component="img"
+                            src={'assets/logo_duif.png'}
+                            alt="logo_app"
                             sx={{
-                                color: 'text.primary',
-                                maxWidth: '20%',
-                                maxHeight: '20%',
+                                padding: 0,
+                                ml: -2,
+                                maxHeight: '10%',
+                                maxWidth: '10%',
                             }}
-                        >
-                            Pigeonhole
-                        </Typography>
+                        />
                     </Box>
                     {/* Lower container with login button */}
                     <Box
@@ -108,6 +111,7 @@ export function LoginPage() {
                         alignItems="center"
                         justifyContent={'center'}
                         alignSelf={'stretch'}
+                        ml={4}
                     >
                         <Button onClick={handleLogin}>{t('login')}</Button>
                     </Box>
diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx
index f617573b..b02a936f 100644
--- a/frontend/frontend/src/pages/mainPage/MainPage.tsx
+++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx
@@ -87,18 +87,14 @@ export default function MainPage() {
 
             const deadlines: Dayjs[] = []
             const assignments: project[] = []
-            for(const course of courses){
+            for (const course of courses) {
                 await instance
                     .get(`/projecten/?vak=${course.vak_id}`)
                     .then((response: AxiosResponse) => {
                         response.data.forEach((project: project) => {
                             if (project.zichtbaar && !project.gearchiveerd) {
-                                deadlines.push(
-                                    dayjs(project.deadline)
-                                )
-                                assignments.push(
-                                    project
-                                )
+                                deadlines.push(dayjs(project.deadline))
+                                assignments.push(project)
                             }
                         })
                     })
@@ -152,7 +148,7 @@ export default function MainPage() {
     }
 
     const pinCourse = async (courseId: number) => {
-        let newPinnedCourses = []
+        let newPinnedCourses: number[]
         if (pinnedCourses.includes(courseId)) {
             newPinnedCourses = pinnedCourses.filter(
                 (pinnedId) => pinnedId !== courseId
@@ -182,7 +178,7 @@ export default function MainPage() {
                     paddingTop: 5,
                 }}
             >
-                <Header variant={'default'} title={'Pigeonhole'} />
+                <Header variant={'main'} title={'Pigeonhole'} />
                 <Box
                     sx={{
                         width: '100%',
@@ -332,7 +328,10 @@ export default function MainPage() {
                         alignContent={'center'}
                         height={'50%'}
                     >
-                        <DeadlineCalendar deadlines={deadlines} assignments={assignments} />
+                        <DeadlineCalendar
+                            deadlines={deadlines}
+                            assignments={assignments}
+                        />
                     </Box>
                 </Box>
                 {role === 'admin' && (

From 8c08b65adc3f1d857c3d6b2e8d5ceef44e16e198 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Wed, 15 May 2024 22:56:49 +0200
Subject: [PATCH 025/145] changed alignment

---
 frontend/frontend/src/components/Header.tsx | 182 ++++++++++----------
 1 file changed, 93 insertions(+), 89 deletions(-)

diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
index 2e2f7dd8..bab962bb 100644
--- a/frontend/frontend/src/components/Header.tsx
+++ b/frontend/frontend/src/components/Header.tsx
@@ -91,109 +91,113 @@ export const Header = ({ variant, title }: Props) => {
                 }}
             >
                 <Toolbar>
-                    {/* Logo and Home Button */}
-                    <Box>
-                        <Tooltip title={t('home')}>
-                            <IconButton
-                                onClick={() => navigate('/')}
-                                sx={{ padding: 0, borderRadius: 5 }}
-                            >
+                    <Box
+                        flexGrow={1}
+                        display={'flex'}
+                        flexDirection={'row'}
+                        alignItems={'space-between'}
+                        justifyContent={'center'}
+                    >
+                        {/* Logo and Home Button */}
+                        <Box>
+                            <Tooltip title={t('home')}>
+                                <IconButton
+                                    onClick={() => navigate('/')}
+                                    sx={{ padding: 0, borderRadius: 5 }}
+                                >
+                                    <Box
+                                        component="img"
+                                        src={t('logo')}
+                                        alt="logo"
+                                        sx={{
+                                            height: 80,
+                                            width: 80,
+                                            display: 'block',
+                                            padding: 0,
+                                            margin: 0,
+                                        }}
+                                    />
+                                </IconButton>
+                            </Tooltip>
+                            {/* Back Button (if variant is not default) */}
+                            {variant !== 'default' && (
+                                <Tooltip title={t('back')}>
+                                    <IconButton
+                                        onClick={handleBack}
+                                        size="large"
+                                        edge="start"
+                                        color="inherit"
+                                        aria-label="back"
+                                        sx={{ mr: 2 }}
+                                    >
+                                        <ArrowBackIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            )}
+                        </Box>
+                        {/* Title */}
+                        <Box
+                            flexGrow={1}
+                            display={'flex'}
+                            flexDirection={'row'}
+                            alignItems={'center'}
+                            justifyContent={'center'}
+                            gap={1}
+                        >
+                            {variant === 'main' && (
                                 <Box
                                     component="img"
-                                    src={t('logo')}
-                                    alt="logo"
+                                    src={'assets/logo_duif_top_wit.png'}
+                                    alt="logo_app"
                                     sx={{
-                                        height: 80,
-                                        width: 80,
-                                        display: 'block',
-                                        padding: 0,
-                                        margin: 0,
+                                        height: 50,
+                                        width: 50,
                                     }}
                                 />
-                            </IconButton>
-                        </Tooltip>
-                        {/* Back Button (if variant is not default) */}
-                        {variant !== 'default' && (
-                            <Tooltip title={t('back')}>
+                            )}
+                            <Typography
+                                minWidth={'50'}
+                                maxWidth={'88%'}
+                                variant="h5"
+                                component="div"
+                                overflow={'auto'}
+                            >
+                                {title}
+                            </Typography>
+                            {variant === 'editable' && (
                                 <IconButton
-                                    onClick={handleBack}
-                                    size="large"
-                                    edge="start"
-                                    color="inherit"
-                                    aria-label="back"
-                                    sx={{ mr: 2 }}
+                                    onClick={handleEdit}
+                                    disableRipple={true}
+                                    sx={{
+                                        marginBottom: 1,
+                                        color: 'text.secondary',
+                                    }}
                                 >
-                                    <ArrowBackIcon />
+                                    <EditIcon />
                                 </IconButton>
-                            </Tooltip>
-                        )}
-                    </Box>
-                    {/* Title */}
-                    <Box
-                        flexGrow={1}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        alignItems={'center'}
-                        justifyContent={'center'}
-                        gap={0}
-                    >
-                        {variant === 'main' && (
-                            <Box
-                                component="img"
-                                src={'assets/logo_duif_top_wit.png'}
-                                alt="logo_app"
-                                sx={{
-                                    padding: 0,
-                                    height: 50,
-                                    width: 50,
-                                }}
-                            />
-                        )}
-                        <Typography
-                            minWidth={'20%'}
-                            maxWidth={'88%'}
-                            variant="h5"
-                            component="div"
-                            overflow={'auto'}
+                            )}
+                        </Box>
+
+                        {/* User Menu */}
+                        <Box
                             sx={{
-                                textAlign: 'center',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
                             }}
                         >
-                            {title}
-                        </Typography>
-                        {variant === 'editable' && (
-                            <IconButton
-                                onClick={handleEdit}
-                                disableRipple={true}
+                            <LanguageSwitcher />
+                            <Button
+                                variant={'text'}
+                                onClick={logout}
                                 sx={{
-                                    marginBottom: 1,
-                                    color: 'text.secondary',
+                                    color: 'background.default',
+                                    paddingTop: 1,
                                 }}
                             >
-                                <EditIcon />
-                            </IconButton>
-                        )}
-                    </Box>
-
-                    {/* User Menu */}
-                    <Box
-                        sx={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }}
-                    >
-                        <LanguageSwitcher />
-                        <Button
-                            variant={'text'}
-                            onClick={logout}
-                            sx={{
-                                color: 'background.default',
-                                paddingTop: 1,
-                            }}
-                        >
-                            Logout
-                        </Button>
+                                Logout
+                            </Button>
+                        </Box>
                     </Box>
                 </Toolbar>
             </AppBar>

From 9357da327c0fccbbe4154820013f22a4067bd5b1 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Wed, 15 May 2024 23:00:22 +0200
Subject: [PATCH 026/145] changed link to text

---
 frontend/frontend/src/components/CopyToClipboard.tsx | 2 +-
 frontend/frontend/src/i18n/en.ts                     | 1 +
 frontend/frontend/src/i18n/nl.ts                     | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/frontend/src/components/CopyToClipboard.tsx b/frontend/frontend/src/components/CopyToClipboard.tsx
index d9300068..fdaf5818 100644
--- a/frontend/frontend/src/components/CopyToClipboard.tsx
+++ b/frontend/frontend/src/components/CopyToClipboard.tsx
@@ -89,7 +89,7 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
                                     textOverflow: 'ellipsis',
                                 }}
                             >
-                                {invitationLink}
+                                {t('copy_invite')}
                             </Typography>
                         </Button>
                     </Collapse>
diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 1372276f..73aef988 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -97,6 +97,7 @@ const english = {
     join_course: 'Join course?',
     join: 'Join',
     acces: 'This gives you access to the course.',
+    copy_invite: 'Copy invitation link',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 8402aec1..4f36cc4f 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -97,6 +97,7 @@ const dutch = {
     join_course: 'Voeg vak toe?',
     join: 'Voeg toe',
     acces: 'Dit geeft je toegang tot het vak.',
+    copy_invite: 'Kopieer uitnodigingslink',
 }
 
 export default dutch

From 75e6bf65b20723a606bb6d2fd62571771d8f8995 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Thu, 16 May 2024 14:40:16 +0200
Subject: [PATCH 027/145] kleine fixes

---
 frontend/frontend/src/components/Header.tsx   |  2 +-
 .../SubmissionListItemTeacherPage.tsx         | 26 +++------------
 .../pages/submissionPage/SubmissionPage.tsx   | 32 ++++++++++---------
 frontend/frontend/vite.config.ts              |  1 -
 4 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
index bab962bb..6ce687bb 100644
--- a/frontend/frontend/src/components/Header.tsx
+++ b/frontend/frontend/src/components/Header.tsx
@@ -120,7 +120,7 @@ export const Header = ({ variant, title }: Props) => {
                                 </IconButton>
                             </Tooltip>
                             {/* Back Button (if variant is not default) */}
-                            {variant !== 'default' && (
+                            {!(variant === 'default' || variant === 'main') && (
                                 <Tooltip title={t('back')}>
                                     <IconButton
                                         onClick={handleBack}
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index ff34ee07..366e1c86 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -133,6 +133,8 @@ export function SubmissionListItemTeacherPage({
                         paddingX: 4,
                         paddingY: 3,
                         borderRadius: 2,
+                        display: 'flex',
+                        flexDirection: 'row',
                     }}
                     onClick={handleSubmissionClick}
                 >
@@ -168,7 +170,7 @@ export function SubmissionListItemTeacherPage({
                         }
                     />
                     {/* Display submission status icon */}
-                    <ListItemIcon sx={{ minWidth: 35 }}>
+                    <ListItemIcon sx={{ minWidth: '24%' }}>
                         {!submitted?.status ? (
                             <HighlightOffIcon sx={{ color: 'error.main' }} />
                         ) : (
@@ -180,27 +182,7 @@ export function SubmissionListItemTeacherPage({
                         )}
                     </ListItemIcon>
                     {/* Display download icon */}
-                    <ListItemText>
-                        <ListItemIcon sx={{ minWidth: 35 }}>
-                            <div onClick={handleDownloadClick} />
-                            {submitted ? (
-                                <DownloadIcon
-                                    sx={{
-                                        color: 'primary.main',
-                                        '&:hover': { color: 'primary.light' },
-                                    }}
-                                />
-                            ) : (
-                                submitted !== undefined && (
-                                    <CheckCircleOutlineIcon
-                                        sx={{ color: 'success.main' }}
-                                    />
-                                )
-                            )}
-                        </ListItemIcon>
-                    </ListItemText>
-                    {/* Display download icon */}
-                    <ListItemText sx={{ maxWidth: '4%' }}>
+                    <ListItemText sx={{ maxWidth: 35 }}>
                         <ListItemIcon>
                             <div onClick={handleDownloadClick}>
                                 {submitted ? (
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 731c46f0..818534ef 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -9,17 +9,17 @@ import {
     CircularProgress,
     ListItem,
     Skeleton,
-    Typography,
     Stack,
+    Typography,
 } from '@mui/material'
 import dayjs, { Dayjs } from 'dayjs'
 import DownloadIcon from '@mui/icons-material/Download'
 import List from '@mui/material/List'
-import Grid2 from '@mui/material/Unstable_Grid2'
 import instance from '../../axiosConfig.ts'
 import { getAssignment } from '../addChangeAssignmentPage/AddChangeAssignmentPage.tsx'
 import ErrorPage from '../ErrorPage.tsx'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 
 /**
  * Page for viewing a specific submission
@@ -198,29 +198,29 @@ export function SubmissionPage() {
 
     useEffect(() => {
         async function fetchStudents() {
-            setStudentsLoading(true);
+            setStudentsLoading(true)
             const groupId = submission?.groep
             const groupResponse = await instance.get(`groepen/${groupId}`)
-            const temp_students = [];
+            const temp_students = []
             for (const s of groupResponse.data.studenten || []) {
                 try {
-                    const userResponse = await instance.get(`/gebruikers/${s}/`);
-                    temp_students.push(userResponse.data);
+                    const userResponse = await instance.get(`/gebruikers/${s}/`)
+                    temp_students.push(userResponse.data)
                 } catch (error) {
-                    console.error('Error fetching student data:', error);
-                    setFetchError(true);
+                    console.error('Error fetching student data:', error)
+                    setFetchError(true)
                 }
             }
             // Update the state with the fetched data
-            setStudents(temp_students);
-            setStudentsLoading(false);
+            setStudents(temp_students)
+            setStudentsLoading(false)
         }
-    
+
         // Fetch students
         fetchStudents().catch((error) =>
             console.error('Error fetching students data:', error)
-        );
-    }, [submission]);
+        )
+    }, [submission])
 
     if (fetchError) {
         return <ErrorPage />
@@ -246,7 +246,7 @@ export function SubmissionPage() {
                         gap: 2,
                         overflowY: 'auto',
                         padding: 2,
-                        position: 'relative'
+                        position: 'relative',
                     }}
                 >
                     <Box
@@ -283,7 +283,9 @@ export function SubmissionPage() {
                         }}
                     >
                         {project?.max_groep_grootte === 1 ? (
-                            <Typography variant="body1">{user.first_name + ' ' + user.last_name}</Typography>
+                            <Typography variant="body1">
+                                {user.first_name + ' ' + user.last_name}
+                            </Typography>
                         ) : (
                             <StudentPopUp
                                 students={studentsLoading ? [] : students}
diff --git a/frontend/frontend/vite.config.ts b/frontend/frontend/vite.config.ts
index 0ed187da..7ce3eb72 100644
--- a/frontend/frontend/vite.config.ts
+++ b/frontend/frontend/vite.config.ts
@@ -15,7 +15,6 @@ export default defineConfig({
             'chunk-6ZDRAOHK.js?v=fff2b904',
             'chunk-BWG3R63Q.js?v=fff2b904',
             '@mui/material/Grid', // Exclude other MUI components as needed
-
         ],
     },
     plugins: [

From 2e5b25d6414c868f72dbf7aadaec69e463ca0ea3 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 16 May 2024 15:05:16 +0200
Subject: [PATCH 028/145] grid2 fix

---
 frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 731c46f0..7c829854 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -15,7 +15,7 @@ import {
 import dayjs, { Dayjs } from 'dayjs'
 import DownloadIcon from '@mui/icons-material/Download'
 import List from '@mui/material/List'
-import Grid2 from '@mui/material/Unstable_Grid2'
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import instance from '../../axiosConfig.ts'
 import { getAssignment } from '../addChangeAssignmentPage/AddChangeAssignmentPage.tsx'
 import ErrorPage from '../ErrorPage.tsx'

From 5f0a7c698aeaa704dc90e86c8638fe3b483be1a7 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 16 May 2024 15:05:51 +0200
Subject: [PATCH 029/145] fixed eeuwig laden

---
 .../src/pages/subjectsPage/AddChangeSubjectPage.tsx    | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 9fb85a0a..3f195c18 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -475,16 +475,6 @@ export function AddChangeSubjectPage() {
     useEffect(() => {
         async function fetchData() {
             setLoading(true)
-            setUserLoaded(false)
-            await instance
-                .get('/gebruikers/me/')
-                .then((res) => {
-                    setUser(res.data)
-                    setUserLoaded(true)
-                })
-                .catch((err) => {
-                    console.log(err)
-                })
             await instance
                 .get('vakken/' + vakID)
                 .then(async (res) => {

From 52046e61e2d26ba7f83f97647c740a0758601c3b Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 16 May 2024 15:07:18 +0200
Subject: [PATCH 030/145] textveld zegt email ipv studentennummer

---
 frontend/frontend/src/i18n/en.ts                               | 3 ++-
 frontend/frontend/src/i18n/nl.ts                               | 3 ++-
 .../frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx   | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 8fe8e50b..75d3f3e6 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -99,7 +99,8 @@ const english = {
     join_course: 'Join course?',
     join: 'Join',
     acces: 'This gives you access to the course.',
-    deadlines_on: 'Deadlines on'
+    deadlines_on: 'Deadlines on',
+    email: 'email'
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 5eb26ab6..79737897 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -99,7 +99,8 @@ const dutch = {
     join_course: 'Voeg vak toe?',
     join: 'Voeg toe',
     acces: 'Dit geeft je toegang tot het vak.',
-    deadlines_on: 'Deadlines op'
+    deadlines_on: 'Deadlines op',
+    email: 'email'
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 3f195c18..93f91119 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -168,7 +168,7 @@ function UploadPart(
                             {/* This box allows you to add extra people by their email. */}
                             <TextField
                                 type="text"
-                                placeholder={t('studentnumber')}
+                                placeholder={t('email')}
                                 onChange={(event) =>
                                     setEmail(event.target.value)
                                 }

From 45d0e1b111be9227fd6adbc895e281edd400e7f0 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Thu, 16 May 2024 15:09:52 +0200
Subject: [PATCH 031/145] code cleanup

---
 .../frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 93f91119..1ae795ca 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -155,7 +155,6 @@ function UploadPart(
     file: File | undefined,
     handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void,
     setEmail: React.Dispatch<React.SetStateAction<string>>,
-    email: string,
     handleAdd: () => void,
     str: string
 ) {
@@ -634,7 +633,6 @@ export function AddChangeSubjectPage() {
                             studentFile,
                             handleStudentFileChange,
                             setEmailStudent,
-                            emailStudent,
                             handleAddStudent,
                             t('upload_students')
                         )}
@@ -675,7 +673,6 @@ export function AddChangeSubjectPage() {
                             teacherFile,
                             handleTeacherFileChange,
                             setEmailTeacher,
-                            emailTeacher,
                             handleAddTeacher,
                             t('upload_teachers')
                         )}

From 68e10a89ba281aa043ac71eed9b545ba13b6ac69 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Thu, 16 May 2024 15:53:21 +0200
Subject: [PATCH 032/145] addChange merge fix

---
 frontend/frontend/src/i18n/en.ts                             | 5 ++---
 frontend/frontend/src/i18n/nl.ts                             | 5 ++---
 .../frontend/src/pages/submissionPage/SubmissionPage.tsx     | 1 -
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 7a88e24b..de2c2de3 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -100,9 +100,8 @@ const english = {
     join: 'Join',
     acces: 'This gives you access to the course.',
     deadlines_on: 'Deadlines on',
-    email: 'email'
-    copy_invite: 'Copy invitation link',
-    deadlines_on: 'Deadlines on'
+    email: 'email',
+    copy_invite: 'Copy invitation link'
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 104e76b2..478be388 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -100,9 +100,8 @@ const dutch = {
     join: 'Voeg toe',
     acces: 'Dit geeft je toegang tot het vak.',
     deadlines_on: 'Deadlines op',
-    email: 'email'
-    copy_invite: 'Kopieer uitnodigingslink',
-    deadlines_on: 'Deadlines op'
+    email: 'email',
+    copy_invite: 'Kopieer uitnodigingslink'
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 58408970..b1ffd957 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -20,7 +20,6 @@ import instance from '../../axiosConfig.ts'
 import { getAssignment } from '../addChangeAssignmentPage/AddChangeAssignmentPage.tsx'
 import ErrorPage from '../ErrorPage.tsx'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
-import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 
 /**
  * Page for viewing a specific submission

From 33e4c08f12d67b996c545c36bda416aec816445e Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Thu, 16 May 2024 16:06:20 +0200
Subject: [PATCH 033/145] hoofdletters toegevoegd

---
 frontend/frontend/src/i18n/en.ts | 4 ++--
 frontend/frontend/src/i18n/nl.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 04570c1a..f3adfc34 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -94,8 +94,8 @@ const english = {
     file: 'File',
     archive_course_warning: 'Archive Course?',
     will_archive_projects: 'This will archive all projects.',
-    first_name: 'first name',
-    last_name: 'last name',
+    first_name: 'First name',
+    last_name: 'Last name',
     copied: 'Copied!',
     copy: 'Copy to clipboard',
     join_course: 'Join course?',
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index ec26da7e..03aa2f38 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -92,8 +92,8 @@ const dutch = {
     must_pass: 'Moet slagen',
     archive_course_warning: 'Vak Archiveren?',
     will_archive_projects: 'Alle opdrachten worden gearchiveerd.',
-    first_name: 'voornaam',
-    last_name: 'familienaam',
+    first_name: 'Voornaam',
+    last_name: 'Familienaam',
     loading: 'Laden',
     file: 'Bestand',
     copied: 'Gekopieerd!',

From f5d17161b6e5eb1d088fb4ade1c8e06677b4b205 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Thu, 16 May 2024 17:04:15 +0200
Subject: [PATCH 034/145] chooseGroup page is accessible

---
 .../src/pages/groupsPage/ChooseGroup.tsx      |   9 +-
 .../src/pages/groupsPage/GroupsPage.tsx       | 901 +++++++++---------
 frontend/frontend/src/routes.tsx              |   2 +-
 3 files changed, 468 insertions(+), 444 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 40644cfa..9fd1dcc2 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -17,6 +17,7 @@ import AddCircle from '@mui/icons-material/AddCircle'
 import ClearIcon from '@mui/icons-material/Clear'
 import { useParams } from 'react-router-dom'
 import instance from "../../axiosConfig.ts";
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx';
 
 export interface Group {
     groep_id: number
@@ -24,14 +25,6 @@ export interface Group {
     project: number
 }
 
-export interface User {
-    user: number
-    is_lesgever: boolean
-    first_name: string
-    last_name: string
-    email: string
-}
-
 export interface Assignment {
     project_id: number
     titel: string
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index d54b7210..5c5ab068 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -7,6 +7,7 @@ import {
     MenuItem,
     Select,
     SelectChangeEvent,
+    CircularProgress,
     Skeleton,
     Stack,
     Table,
@@ -30,6 +31,7 @@ import { Add } from '@mui/icons-material'
 import ClearIcon from '@mui/icons-material/Clear'
 import SaveIcon from '@mui/icons-material/Save'
 import WarningPopup from '../../components/WarningPopup.tsx'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx' 
 
 // group interface
 export interface Group {
@@ -59,12 +61,14 @@ export function GroupsPage() {
     const [currentGroup, setCurrentGroup] = useState('')
     const [availableStudents, setAvailableStudents] = useState<number[]>([])
     const [projectName, setProjectName] = useState('')
+    const [user, setUser] = useState<User>()
 
     // confirmation dialog state
     const [confirmOpen, setConfirmOpen] = useState(false)
 
     // state for correct loading of the page
     const [loading, setLoading] = useState(true)
+    const [userLoading, setUserLoading] = useState(true)
 
     // handle confirmation dialog
     const confirmSave = async () => {
@@ -175,7 +179,11 @@ export function GroupsPage() {
     //get the current groups and group size from the backend
     useEffect(() => {
         async function fetchData() {
+            setUserLoading(true)
             setLoading(true)
+            const userResponse = await instance.get('/gebruikers/me/')
+            setUser(userResponse.data)
+            setUserLoading(false)
             // Get the student names
             await instance
                 .get('/vakken/' + courseId)
@@ -389,478 +397,501 @@ export function GroupsPage() {
 
     return (
         <>
-            <Box
-                component={'form'}
-                onSubmit={handleSave}
-                sx={{
-                    backgroundColor: 'background.default',
-                    height: '100%',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'flex-start',
-                }}
-            >
-                <Header
-                    variant={'default'}
-                    title={loading ? '' : `${projectName}: ${t('groups')}`}
-                ></Header>
-                <Stack
-                    marginTop={12}
-                    direction={'column'}
-                    spacing={4}
+            {/* Rendering different UI based on user role */}
+            {userLoading ? (
+                <Box
                     sx={{
-                        width: '100%',
-                        height: '70 %',
-                        backgroundColor: 'background.default',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
                     }}
                 >
-                    <Box>
+                    <CircularProgress color={'primary'} />
+                    <Box></Box>
+                </Box>
+            ) : (
+                <>
+                    {user?.is_lesgever ? (
+                        // Rendering UI for teacher
+                    <>
                         <Box
+                            component={'form'}
+                            onSubmit={handleSave}
                             sx={{
-                                gap: 5,
-                                padding: '20px',
                                 backgroundColor: 'background.default',
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'flex-start',
                             }}
                         >
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                                color="text.primary"
-                            >
-                                {t('groups')}
-                            </Typography>
-                            <Stack direction={'row'}>
-                                <Grid container spacing={2} alignItems="center">
-                                    <Grid item>
-                                        <Typography
-                                            color="text.primary"
-                                            fontWeight={'bold'}
-                                        >
-                                            {t('amount')} {t('members')}/
-                                            {t('group')}
-                                        </Typography>
-                                    </Grid>
-                                    <Grid item minWidth={3}>
-                                        {loading ? (
-                                            <Skeleton
-                                                variant={'text'}
-                                                width={80}
-                                                height={80}
-                                            />
-                                        ) : (
-                                            <TextField
-                                                // The teacher can specify the maximum group size
-                                                // If a number smaller than 1 is entered, the input will be ignored
-                                                aria-label={'maxGroupSize'}
-                                                value={newGroupSize}
-                                                type={'number'}
-                                                onChange={(newValue) => {
-                                                    if (
-                                                        parseInt(
-                                                            newValue.target
-                                                                .value
-                                                        ) < 1
-                                                    )
-                                                        return
-                                                    handleGroupSizeChange(
-                                                        parseInt(
-                                                            newValue.target
-                                                                .value
-                                                        )
-                                                    )
-                                                }}
-                                                variant="outlined"
-                                                sx={{ width: 80 }}
-                                            />
-                                        )}
-                                    </Grid>
-                                </Grid>
-                            </Stack>
+                            <Header
+                                variant={'default'}
+                                title={loading ? '' : `${projectName}: ${t('groups')}`}
+                            ></Header>
                             <Stack
-                                direction="row"
-                                alignItems="center"
-                                spacing={10}
-                                marginY={6}
+                                marginTop={12}
+                                direction={'column'}
+                                spacing={4}
+                                sx={{
+                                    width: '100%',
+                                    height: '70 %',
+                                    backgroundColor: 'background.default',
+                                }}
                             >
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'rectangular'}
-                                        width={220}
-                                        height={45}
-                                        sx={{
-                                            backgroundColor: 'secondary.main',
-                                            borderRadius: 1,
-                                        }}
-                                    />
-                                ) : (
-                                    <Button
-                                        // If a teacher doesn't want to create groups manually,
-                                        // they can randomize the groups with a single click.variant={'contained'}
-                                        disableElevation
+                                <Box>
+                                    <Box
                                         sx={{
-                                            backgroundColor: 'secondary.main',
-                                            padding: 1,
+                                            gap: 5,
+                                            padding: '20px',
+                                            backgroundColor: 'background.default',
                                         }}
-                                        onClick={randomGroups}
                                     >
                                         <Typography
+                                            variant="h5"
+                                            sx={{ fontWeight: 'bold' }}
                                             color="text.primary"
-                                            fontWeight={'bold'}
                                         >
-                                            {t('random')} {t('groups')}
+                                            {t('groups')}
                                         </Typography>
-                                    </Button>
-                                )}
-                                <Box
-                                    // If the students are allowed to choose their own groups,
-                                    // the teacher can enable this feature with a switch.
-                                    display={'flex'}
-                                    flexDirection={'row'}
-                                    alignItems={'center'}
-                                    gap={2}
-                                >
-                                    <Typography
-                                        color="text.primary"
-                                        fontWeight={'bold'}
-                                    >
-                                        {t('students_choose')}
-                                    </Typography>
-                                    {loading ? (
-                                        <Skeleton
-                                            variant={'rectangular'}
-                                            width={40}
-                                            height={30}
-                                            sx={{
-                                                backgroundColor:
-                                                    'secondary.main',
-                                                borderRadius: 1,
-                                            }}
-                                        />
-                                    ) : (
-                                        <Switch />
-                                    )}
-                                </Box>
-                            </Stack>
-                        </Box>
-
-                        <Box
-                            sx={{
-                                marginTop: -3,
-                                padding: '20px',
-                                backgroundColor: 'background.default',
-                            }}
-                        >
-                            <Box
-                                aria-label={'group_assigner'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                maxWidth={500}
-                                justifyContent={'space-between'}
-                                alignItems={'flex-start'}
-                            >
-                                <TableContainer sx={{ maxHeight: '55vh' }}>
-                                    <Table
-                                        // The teacher can see the available students
-                                        // on the left side of the screen.
-                                        // They are displayed in a table with a sticky header.aria-label={'studentTable'}
-                                        stickyHeader
-                                    >
-                                        <TableHead>
-                                            <TableRow>
-                                                <TableCell>
-                                                    <Typography
-                                                        fontWeight={'bold'}
-                                                    >
-                                                        {t('students')}
-                                                    </Typography>
-                                                </TableCell>
-                                            </TableRow>
-                                        </TableHead>
-                                        <TableBody>
-                                            {loading ? (
-                                                [...Array(3)].map(
-                                                    (_, index) => (
-                                                        <Skeleton
-                                                            key={index}
-                                                            variant="text"
-                                                            width={'100%'}
-                                                            height={50}
-                                                            sx={{ margin: 0 }}
-                                                        />
-                                                    )
-                                                )
-                                            ) : (
-                                                <>
-                                                    {availableStudents.map(
-                                                        (student) => (
-                                                            <TableRow
-                                                                key={student}
-                                                            >
-                                                                <TableCell
-                                                                    sx={{
-                                                                        height: 20,
-                                                                        display:
-                                                                            'flex',
-                                                                        flexDirection:
-                                                                            'row',
-                                                                        justifyContent:
-                                                                            'space-between',
-                                                                        alignItems:
-                                                                            'center',
-                                                                    }}
-                                                                >
-                                                                    {studentNames.get(
-                                                                        student
-                                                                    ) === ''
-                                                                        ? student
-                                                                        : studentNames.get(
-                                                                              student
-                                                                          )}
-                                                                    <IconButton // people can be added to groups by clicking on the plus icon
-                                                                        disabled={
-                                                                            newGroups[
-                                                                                parseInt(
-                                                                                    currentGroup
-                                                                                )
-                                                                            ]
-                                                                                ? newGroups[
-                                                                                      parseInt(
-                                                                                          currentGroup
-                                                                                      )
-                                                                                  ]
-                                                                                      .studenten
-                                                                                      .length >=
-                                                                                  newGroupSize
-                                                                                : true
-                                                                        }
-                                                                        onClick={() => {
-                                                                            assignStudent(
-                                                                                student,
-                                                                                parseInt(
-                                                                                    currentGroup
-                                                                                )
-                                                                            )
-                                                                        }}
-                                                                    >
-                                                                        <Add />
-                                                                    </IconButton>
-                                                                </TableCell>
-                                                            </TableRow>
-                                                        )
-                                                    )}
-                                                </>
-                                            )}
-                                        </TableBody>
-                                    </Table>
-                                </TableContainer>
-                                <TableContainer sx={{ maxHeight: '55vh' }}>
-                                    <Table
-                                        // The teacher can see the students in the specified group
-                                        // on the right side of the screen.
-                                        aria-label={'groupTable'}
-                                        stickyHeader
-                                        sx={{ maxHeight: '5    0svh' }}
-                                    >
-                                        <TableHead>
-                                            <TableRow>
-                                                <TableCell>
+                                        <Stack direction={'row'}>
+                                            <Grid container spacing={2} alignItems="center">
+                                                <Grid item>
                                                     <Typography
+                                                        color="text.primary"
                                                         fontWeight={'bold'}
                                                     >
+                                                        {t('amount')} {t('members')}/
                                                         {t('group')}
                                                     </Typography>
+                                                </Grid>
+                                                <Grid item minWidth={3}>
                                                     {loading ? (
                                                         <Skeleton
-                                                            variant="text"
-                                                            width={'80%'}
-                                                            height={70}
-                                                            sx={{ margin: 0 }}
+                                                            variant={'text'}
+                                                            width={80}
+                                                            height={80}
                                                         />
                                                     ) : (
-                                                        <>
-                                                            <Select
-                                                                // The teacher can select a group from the dropdown menu
-                                                                aria-label={
-                                                                    'groupSelect'
-                                                                }
-                                                                value={
-                                                                    currentGroup
-                                                                }
-                                                                sx={{
-                                                                    width: 200,
-                                                                }}
-                                                                onChange={
-                                                                    handleCurrentGroupChange
-                                                                }
-                                                                label={t(
-                                                                    'group'
-                                                                )}
-                                                            >
-                                                                {newGroups.map(
-                                                                    (
-                                                                        _,
-                                                                        index
-                                                                    ) => (
-                                                                        <MenuItem
-                                                                            key={index.toString()}
-                                                                            value={index.toString()}
-                                                                        >
-                                                                            {t(
-                                                                                'group'
-                                                                            ) +
-                                                                                (index +
-                                                                                    1)}
-                                                                        </MenuItem>
+                                                        <TextField
+                                                            // The teacher can specify the maximum group size
+                                                            // If a number smaller than 1 is entered, the input will be ignored
+                                                            aria-label={'maxGroupSize'}
+                                                            value={newGroupSize}
+                                                            type={'number'}
+                                                            onChange={(newValue) => {
+                                                                if (
+                                                                    parseInt(
+                                                                        newValue.target
+                                                                            .value
+                                                                    ) < 1
+                                                                )
+                                                                    return
+                                                                handleGroupSizeChange(
+                                                                    parseInt(
+                                                                        newValue.target
+                                                                            .value
                                                                     )
-                                                                )}
-                                                            </Select>
-                                                        </>
+                                                                )
+                                                            }}
+                                                            variant="outlined"
+                                                            sx={{ width: 80 }}
+                                                        />
                                                     )}
-                                                </TableCell>
-                                            </TableRow>
-                                        </TableHead>
-                                        <TableBody>
+                                                </Grid>
+                                            </Grid>
+                                        </Stack>
+                                        <Stack
+                                            direction="row"
+                                            alignItems="center"
+                                            spacing={10}
+                                            marginY={6}
+                                        >
                                             {loading ? (
-                                                [...Array(3)].map(
-                                                    (_, index) => (
-                                                        <Skeleton
-                                                            key={index}
-                                                            variant="text"
-                                                            width={'100%'}
-                                                            height={50}
-                                                            sx={{ margin: 0 }}
-                                                        />
-                                                    )
-                                                )
+                                                <Skeleton
+                                                    variant={'rectangular'}
+                                                    width={220}
+                                                    height={45}
+                                                    sx={{
+                                                        backgroundColor: 'secondary.main',
+                                                        borderRadius: 1,
+                                                    }}
+                                                />
                                             ) : (
-                                                <>
-                                                    {newGroups[
-                                                        parseInt(currentGroup)
-                                                    ] &&
-                                                        newGroups[
-                                                            parseInt(
-                                                                currentGroup
+                                                <Button
+                                                    // If a teacher doesn't want to create groups manually,
+                                                    // they can randomize the groups with a single click.variant={'contained'}
+                                                    disableElevation
+                                                    sx={{
+                                                        backgroundColor: 'secondary.main',
+                                                        padding: 1,
+                                                    }}
+                                                    onClick={randomGroups}
+                                                >
+                                                    <Typography
+                                                        color="text.primary"
+                                                        fontWeight={'bold'}
+                                                    >
+                                                        {t('random')} {t('groups')}
+                                                    </Typography>
+                                                </Button>
+                                            )}
+                                            <Box
+                                                // If the students are allowed to choose their own groups,
+                                                // the teacher can enable this feature with a switch.
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                alignItems={'center'}
+                                                gap={2}
+                                            >
+                                                <Typography
+                                                    color="text.primary"
+                                                    fontWeight={'bold'}
+                                                >
+                                                    {t('students_choose')}
+                                                </Typography>
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'rectangular'}
+                                                        width={40}
+                                                        height={30}
+                                                        sx={{
+                                                            backgroundColor:
+                                                                'secondary.main',
+                                                            borderRadius: 1,
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <Switch />
+                                                )}
+                                            </Box>
+                                        </Stack>
+                                    </Box>
+
+                                    <Box
+                                        sx={{
+                                            marginTop: -3,
+                                            padding: '20px',
+                                            backgroundColor: 'background.default',
+                                        }}
+                                    >
+                                        <Box
+                                            aria-label={'group_assigner'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            maxWidth={500}
+                                            justifyContent={'space-between'}
+                                            alignItems={'flex-start'}
+                                        >
+                                            <TableContainer sx={{ maxHeight: '55vh' }}>
+                                                <Table
+                                                    // The teacher can see the available students
+                                                    // on the left side of the screen.
+                                                    // They are displayed in a table with a sticky header.aria-label={'studentTable'}
+                                                    stickyHeader
+                                                >
+                                                    <TableHead>
+                                                        <TableRow>
+                                                            <TableCell>
+                                                                <Typography
+                                                                    fontWeight={'bold'}
+                                                                >
+                                                                    {t('students')}
+                                                                </Typography>
+                                                            </TableCell>
+                                                        </TableRow>
+                                                    </TableHead>
+                                                    <TableBody>
+                                                        {loading ? (
+                                                            [...Array(3)].map(
+                                                                (_, index) => (
+                                                                    <Skeleton
+                                                                        key={index}
+                                                                        variant="text"
+                                                                        width={'100%'}
+                                                                        height={50}
+                                                                        sx={{ margin: 0 }}
+                                                                    />
+                                                                )
                                                             )
-                                                        ].studenten.map(
-                                                            (student) => (
-                                                                <TableRow
-                                                                    key={
-                                                                        student
-                                                                    }
+                                                        ) : (
+                                                            <>
+                                                                {availableStudents.map(
+                                                                    (student) => (
+                                                                        <TableRow
+                                                                            key={student}
+                                                                        >
+                                                                            <TableCell
+                                                                                sx={{
+                                                                                    height: 20,
+                                                                                    display:
+                                                                                        'flex',
+                                                                                    flexDirection:
+                                                                                        'row',
+                                                                                    justifyContent:
+                                                                                        'space-between',
+                                                                                    alignItems:
+                                                                                        'center',
+                                                                                }}
+                                                                            >
+                                                                                {studentNames.get(
+                                                                                    student
+                                                                                ) === ''
+                                                                                    ? student
+                                                                                    : studentNames.get(
+                                                                                        student
+                                                                                    )}
+                                                                                <IconButton // people can be added to groups by clicking on the plus icon
+                                                                                    disabled={
+                                                                                        newGroups[
+                                                                                            parseInt(
+                                                                                                currentGroup
+                                                                                            )
+                                                                                        ]
+                                                                                            ? newGroups[
+                                                                                                parseInt(
+                                                                                                    currentGroup
+                                                                                                )
+                                                                                            ]
+                                                                                                .studenten
+                                                                                                .length >=
+                                                                                            newGroupSize
+                                                                                            : true
+                                                                                    }
+                                                                                    onClick={() => {
+                                                                                        assignStudent(
+                                                                                            student,
+                                                                                            parseInt(
+                                                                                                currentGroup
+                                                                                            )
+                                                                                        )
+                                                                                    }}
+                                                                                >
+                                                                                    <Add />
+                                                                                </IconButton>
+                                                                            </TableCell>
+                                                                        </TableRow>
+                                                                    )
+                                                                )}
+                                                            </>
+                                                        )}
+                                                    </TableBody>
+                                                </Table>
+                                            </TableContainer>
+                                            <TableContainer sx={{ maxHeight: '55vh' }}>
+                                                <Table
+                                                    // The teacher can see the students in the specified group
+                                                    // on the right side of the screen.
+                                                    aria-label={'groupTable'}
+                                                    stickyHeader
+                                                    sx={{ maxHeight: '5    0svh' }}
+                                                >
+                                                    <TableHead>
+                                                        <TableRow>
+                                                            <TableCell>
+                                                                <Typography
+                                                                    fontWeight={'bold'}
                                                                 >
-                                                                    <TableCell
-                                                                        sx={{
-                                                                            height: 20,
-                                                                            display:
-                                                                                'flex',
-                                                                            flexDirection:
-                                                                                'row',
-                                                                            justifyContent:
-                                                                                'space-between',
-                                                                            alignItems:
-                                                                                'center',
-                                                                        }}
-                                                                    >
-                                                                        {studentNames.get(
-                                                                            student
-                                                                        )}
-                                                                        <IconButton // The teacher can remove students from the group by clicking on the cross icon
-                                                                            onClick={() => {
-                                                                                removeStudent(
-                                                                                    student,
-                                                                                    parseInt(
-                                                                                        currentGroup
-                                                                                    )
-                                                                                )
+                                                                    {t('group')}
+                                                                </Typography>
+                                                                {loading ? (
+                                                                    <Skeleton
+                                                                        variant="text"
+                                                                        width={'80%'}
+                                                                        height={70}
+                                                                        sx={{ margin: 0 }}
+                                                                    />
+                                                                ) : (
+                                                                    <>
+                                                                        <Select
+                                                                            // The teacher can select a group from the dropdown menu
+                                                                            aria-label={
+                                                                                'groupSelect'
+                                                                            }
+                                                                            value={
+                                                                                currentGroup
+                                                                            }
+                                                                            sx={{
+                                                                                width: 200,
                                                                             }}
+                                                                            onChange={
+                                                                                handleCurrentGroupChange
+                                                                            }
+                                                                            label={t(
+                                                                                'group'
+                                                                            )}
                                                                         >
-                                                                            <CancelIcon />
-                                                                        </IconButton>
-                                                                    </TableCell>
-                                                                </TableRow>
+                                                                            {newGroups.map(
+                                                                                (
+                                                                                    _,
+                                                                                    index
+                                                                                ) => (
+                                                                                    <MenuItem
+                                                                                        key={index.toString()}
+                                                                                        value={index.toString()}
+                                                                                    >
+                                                                                        {t(
+                                                                                            'group'
+                                                                                        ) +
+                                                                                            (index +
+                                                                                                1)}
+                                                                                    </MenuItem>
+                                                                                )
+                                                                            )}
+                                                                        </Select>
+                                                                    </>
+                                                                )}
+                                                            </TableCell>
+                                                        </TableRow>
+                                                    </TableHead>
+                                                    <TableBody>
+                                                        {loading ? (
+                                                            [...Array(3)].map(
+                                                                (_, index) => (
+                                                                    <Skeleton
+                                                                        key={index}
+                                                                        variant="text"
+                                                                        width={'100%'}
+                                                                        height={50}
+                                                                        sx={{ margin: 0 }}
+                                                                    />
+                                                                )
                                                             )
+                                                        ) : (
+                                                            <>
+                                                                {newGroups[
+                                                                    parseInt(currentGroup)
+                                                                ] &&
+                                                                    newGroups[
+                                                                        parseInt(
+                                                                            currentGroup
+                                                                        )
+                                                                    ].studenten.map(
+                                                                        (student) => (
+                                                                            <TableRow
+                                                                                key={
+                                                                                    student
+                                                                                }
+                                                                            >
+                                                                                <TableCell
+                                                                                    sx={{
+                                                                                        height: 20,
+                                                                                        display:
+                                                                                            'flex',
+                                                                                        flexDirection:
+                                                                                            'row',
+                                                                                        justifyContent:
+                                                                                            'space-between',
+                                                                                        alignItems:
+                                                                                            'center',
+                                                                                    }}
+                                                                                >
+                                                                                    {studentNames.get(
+                                                                                        student
+                                                                                    )}
+                                                                                    <IconButton // The teacher can remove students from the group by clicking on the cross icon
+                                                                                        onClick={() => {
+                                                                                            removeStudent(
+                                                                                                student,
+                                                                                                parseInt(
+                                                                                                    currentGroup
+                                                                                                )
+                                                                                            )
+                                                                                        }}
+                                                                                    >
+                                                                                        <CancelIcon />
+                                                                                    </IconButton>
+                                                                                </TableCell>
+                                                                            </TableRow>
+                                                                        )
+                                                                    )}
+                                                            </>
                                                         )}
+                                                    </TableBody>
+                                                </Table>
+                                            </TableContainer>
+                                        </Box>
+                                    </Box>
+                                </Box>
+                            </Stack>
+                            <Box
+                                aria-label={'save/cancel'}
+                                sx={{
+                                    position: 'fixed',
+                                    bottom: 0,
+                                    width: '100%',
+                                    alignItems: 'flex-end',
+                                    gap: 5,
+                                    paddingRight: 10,
+                                }}
+                            >
+                                <DialogActions>
+                                    <Box pr={5} pb={5} display={'flex'} gap={1}>
+                                        <Tooltip title={t('cancel')}>
+                                            <IconButton
+                                                // The teacher can cancel the group changes by clicking on the cross icon.
+                                                onClick={handleCancel}
+                                                sx={{
+                                                    backgroundColor: 'secondary.main',
+                                                    borderRadius: 2,
+                                                }}
+                                            >
+                                                <ClearIcon fontSize={'medium'} />
+                                            </IconButton>
+                                        </Tooltip>
+                                        <Tooltip title={t('submit')}>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'rectangular'}
+                                                    width={40}
+                                                    height={40}
+                                                    sx={{
+                                                        backgroundColor: 'primary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                />
+                                            ) : (
+                                                <>
+                                                    <IconButton
+                                                        // The teacher can save the group changes by clicking on the save icon.type="submit"
+                                                        aria-label={'submit'}
+                                                        type={'submit'}
+                                                        sx={{
+                                                            backgroundColor: 'primary.main',
+                                                            borderRadius: 2,
+                                                            color: 'background.default',
+                                                            '&:hover': {
+                                                                backgroundColor:
+                                                                    'secondary.main',
+                                                                color: 'text.primary',
+                                                            },
+                                                        }}
+                                                    >
+                                                        <SaveIcon fontSize={'medium'} />
+                                                    </IconButton>
                                                 </>
                                             )}
-                                        </TableBody>
-                                    </Table>
-                                </TableContainer>
+                                        </Tooltip>
+                                    </Box>
+                                </DialogActions>
                             </Box>
                         </Box>
-                    </Box>
-                </Stack>
-                <Box
-                    aria-label={'save/cancel'}
-                    sx={{
-                        position: 'fixed',
-                        bottom: 0,
-                        width: '100%',
-                        alignItems: 'flex-end',
-                        gap: 5,
-                        paddingRight: 10,
-                    }}
-                >
-                    <DialogActions>
-                        <Box pr={5} pb={5} display={'flex'} gap={1}>
-                            <Tooltip title={t('cancel')}>
-                                <IconButton
-                                    // The teacher can cancel the group changes by clicking on the cross icon.
-                                    onClick={handleCancel}
-                                    sx={{
-                                        backgroundColor: 'secondary.main',
-                                        borderRadius: 2,
-                                    }}
-                                >
-                                    <ClearIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                            <Tooltip title={t('submit')}>
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'rectangular'}
-                                        width={40}
-                                        height={40}
-                                        sx={{
-                                            backgroundColor: 'primary.main',
-                                            borderRadius: 2,
-                                        }}
-                                    />
-                                ) : (
-                                    <>
-                                        <IconButton
-                                            // The teacher can save the group changes by clicking on the save icon.type="submit"
-                                            aria-label={'submit'}
-                                            type={'submit'}
-                                            sx={{
-                                                backgroundColor: 'primary.main',
-                                                borderRadius: 2,
-                                                color: 'background.default',
-                                                '&:hover': {
-                                                    backgroundColor:
-                                                        'secondary.main',
-                                                    color: 'text.primary',
-                                                },
-                                            }}
-                                        >
-                                            <SaveIcon fontSize={'medium'} />
-                                        </IconButton>
-                                    </>
-                                )}
-                            </Tooltip>
-                        </Box>
-                    </DialogActions>
-                </Box>
-            </Box>
-            {/* Warning popup for when the user wants to confirm the group changes */}
-            <WarningPopup
-                title={t('change_groups')}
-                content={t('cant_be_undone')}
-                buttonName={t('confirm')}
-                open={confirmOpen}
-                handleClose={handleCloseConfirm}
-                doAction={confirmSave}
-            />
-        </>
-    )
-}
+                        {/* Warning popup for when the user wants to confirm the group changes */}
+                        <WarningPopup
+                            title={t('change_groups')}
+                            content={t('cant_be_undone')}
+                            buttonName={t('confirm')}
+                            open={confirmOpen}
+                            handleClose={handleCloseConfirm}
+                            doAction={confirmSave}
+                        />
+                    </>
+                ):(
+                    navigate('/course/' + courseId + '/assignment/' + assignmentId + '/groups/choose')
+                )}
+            </>
+        )} 
+    </>
+)}
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index 04412290..c16f12a7 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -53,7 +53,7 @@ const router = createBrowserRouter([
         errorElement: <ErrorPage />,
     },
     {
-        path: '/groups/:assignmentId/choose',
+        path: '/course/:courseId/assignment/:assignmentId/groups/choose',
         element: <ChooseGroup />,
         errorElement: <ErrorPage />,
     },

From 7bc92cb9ae3c8d5219517c09b4b45f07ba0be2f8 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Thu, 16 May 2024 17:07:26 +0200
Subject: [PATCH 035/145] kleine fixes

---
 .../src/components/DeadlineCalendar.tsx       |  61 ++++---
 frontend/frontend/src/components/Header.tsx   |   3 +-
 frontend/frontend/src/i18n/en.ts              |   3 +-
 frontend/frontend/src/i18n/nl.ts              |   4 +-
 .../pages/assignmentPage/AssignmentPage.tsx   | 166 +++++++++++++++---
 .../src/pages/subjectsPage/ProjectsView.tsx   |   2 +-
 .../src/pages/subjectsPage/SubjectsPage.tsx   |  56 +++---
 .../pages/submissionPage/SubmissionPage.tsx   |  49 ++++--
 8 files changed, 243 insertions(+), 101 deletions(-)

diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index 8772029d..d0773591 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -5,7 +5,16 @@ import {
     PickersDayProps,
 } from '@mui/x-date-pickers'
 import dayjs, { Dayjs } from 'dayjs'
-import { Badge, SxProps, Stack, Typography, Box, List, ListItem, ListItemButton, ListItemText } from '@mui/material'
+import {
+    Badge,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+    Stack,
+    SxProps,
+    Typography,
+} from '@mui/material'
 import { useEffect, useRef, useState } from 'react'
 import AssignmentIcon from '@mui/icons-material/Assignment'
 import { useNavigate } from 'react-router-dom'
@@ -95,22 +104,26 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
             </Typography>
             <List>
                 {assignments
-                .filter((assignment: project) =>
-                    dayjs(assignment.deadline).isSame(selectedDay, 'day')
-                ).map((assignment: project) => 
-                    <ListItem>
-                        <ListItemButton
-                            sx={{
-                                border: 1
-                            }}
-                            onClick={() => handleProjectClick(assignment.vak, assignment.project_id)}
-                        >
-                            <ListItemText
-                                primary={assignment.titel}
-                            />
-                        </ListItemButton>
-                    </ListItem>
-                )}
+                    .filter((assignment: project) =>
+                        dayjs(assignment.deadline).isSame(selectedDay, 'day')
+                    )
+                    .map((assignment: project) => (
+                        <ListItem>
+                            <ListItemButton
+                                sx={{
+                                    border: 1,
+                                }}
+                                onClick={() =>
+                                    handleProjectClick(
+                                        assignment.vak,
+                                        assignment.project_id
+                                    )
+                                }
+                            >
+                                <ListItemText primary={assignment.titel} />
+                            </ListItemButton>
+                        </ListItem>
+                    ))}
             </List>
         </Stack>
     )
@@ -121,7 +134,10 @@ interface DeadlineCalendarProps {
     assignments: project[]
 }
 
-export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarProps) {
+export function DeadlineCalendar({
+    deadlines,
+    assignments,
+}: DeadlineCalendarProps) {
     const requestAbortController = useRef<AbortController | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [highlightedDays, setHighlightedDays] = useState<number[]>([])
@@ -173,9 +189,7 @@ export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarPro
 
     return (
         <>
-            <Stack
-                direction={"column"}
-            >
+            <Stack direction={'column'}>
                 {/*Calendar*/}
                 <DateCalendar
                     readOnly={false}
@@ -194,10 +208,7 @@ export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarPro
                         } as never,
                     }}
                 />
-                <DeadlineMenu
-                    assignments={assignments}
-                    selectedDay={value}
-                />
+                <DeadlineMenu assignments={assignments} selectedDay={value} />
             </Stack>
         </>
     )
diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
index 6ce687bb..bf43afc6 100644
--- a/frontend/frontend/src/components/Header.tsx
+++ b/frontend/frontend/src/components/Header.tsx
@@ -120,7 +120,8 @@ export const Header = ({ variant, title }: Props) => {
                                 </IconButton>
                             </Tooltip>
                             {/* Back Button (if variant is not default) */}
-                            {!(variant === 'default' || variant === 'main') && (
+                            {(variant === 'not_main' ||
+                                variant === 'editable') && (
                                 <Tooltip title={t('back')}>
                                     <IconButton
                                         onClick={handleBack}
diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index b1f09175..4379b7bb 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -100,7 +100,8 @@ const english = {
     join: 'Join',
     acces: 'This gives you access to the course.',
     copy_invite: 'Copy invitation link',
-    deadlines_on: 'Deadlines on'
+    deadlines_on: 'Deadlines on',
+    no_assignmentfile: 'No assignment file',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 3837bdf1..ab35624c 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -100,8 +100,8 @@ const dutch = {
     join: 'Voeg toe',
     acces: 'Dit geeft je toegang tot het vak.',
     copy_invite: 'Kopieer uitnodigingslink',
-
-    deadlines_on: 'Deadlines op'
+    deadlines_on: 'Deadlines op',
+    no_assignmentfile: 'Geen opdrachtbestand',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 7f0c136a..83dab4ce 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -66,13 +66,16 @@ export function AssignmentPage() {
     const [userLoading, setUserLoading] = useState(true)
 
     useEffect(() => {
+        async function fetchUser() {
+            setUserLoading(true)
+            setLoading(true)
+            const userResponse = await instance.get('/gebruikers/me/')
+            setUser(userResponse.data)
+            setUserLoading(false)
+        }
+
         async function fetchData() {
             try {
-                setUserLoading(true)
-                setLoading(true)
-                const userResponse = await instance.get('/gebruikers/me/')
-                setUser(userResponse.data)
-                setUserLoading(false)
                 const assignmentResponse = await instance.get(
                     `/projecten/${assignmentId}/`
                 )
@@ -100,15 +103,18 @@ export function AssignmentPage() {
                         return file
                     })
                 setAssignment(newAssignment)
-                if (userResponse.data) {
+                if (user) {
                     if (user.is_lesgever) {
                         const groupsResponse = await instance.get(
                             `/groepen/?project=${assignmentId}`
                         )
                         setGroups(groupsResponse.data)
                     } else {
+                        const groupResponse = await instance.get<[Group]>(
+                            `/groepen/?student=${user.user}&project=${assignmentId}`
+                        )
                         const submissionsResponse = await instance.get(
-                            `/indieningen/?vak=${courseId}`
+                            `/indieningen/?project=${assignmentId}&groep=${groupResponse.data[0].groep_id}`
                         )
                         setSubmissions(submissionsResponse.data)
                     }
@@ -120,8 +126,14 @@ export function AssignmentPage() {
             }
         }
 
-        fetchData().catch((err) => console.error(err))
-    }, [assignmentId, courseId, user.is_lesgever, submit])
+        // Ensure fetchUser completes before fetchData starts
+        ;(async () => {
+            if (user.user === 0) {
+                await fetchUser()
+            }
+            await fetchData() // Use await here to ensure fetchData waits for fetchUser to complete
+        })()
+    }, [assignmentId, courseId, user.is_lesgever, submit, user])
 
     // Function to download all submissions as a zip file
     const downloadAllSubmissions = () => {
@@ -213,12 +225,10 @@ export function AssignmentPage() {
                 },
             }
             const groupResponse = await instance.get(
-                `/groepen/?student=${user.user}`
+                `/groepen/?student=${user.user}&project=${assignmentId}`
             )
             if (groupResponse.data) {
-                const group = groupResponse.data.find(
-                    (group: Group) => String(group.project) === assignmentId
-                )
+                const group = groupResponse.data[0]
                 if (group) {
                     const formData = new FormData()
                     formData.append('groep', group.groep_id)
@@ -280,6 +290,28 @@ export function AssignmentPage() {
                                     backgroundColor: 'background.default',
                                 }}
                             >
+                                <Box
+                                    aria-label={'assignment-box'}
+                                    sx={{
+                                        padding: '20px',
+                                    }}
+                                >
+                                    <Stack direction={'column'}>
+                                        <Typography
+                                            variant={'h5'}
+                                            color={'text.primary'}
+                                            aria-label={'title'}
+                                            sx={{
+                                                fontWeight: 'bold',
+                                            }}
+                                        >
+                                            {t('assignment')}
+                                        </Typography>
+                                        <Typography color={'text.primary'}>
+                                            {assignment?.beschrijving}
+                                        </Typography>
+                                    </Stack>
+                                </Box>
                                 {/*deadline and group button */}
                                 <Box
                                     sx={{
@@ -559,6 +591,41 @@ export function AssignmentPage() {
                                     backgroundColor: 'background.default',
                                 }}
                             >
+                                {/*assignment description*/}
+                                <Box
+                                    aria-label={'assignment-box'}
+                                    sx={{
+                                        padding: '5px',
+                                    }}
+                                >
+                                    <Stack direction={'column'}>
+                                        {loading ? (
+                                            <Skeleton
+                                                variant="text"
+                                                width={200}
+                                                height={50}
+                                            />
+                                        ) : (
+                                            <>
+                                                <Typography
+                                                    variant={'h5'}
+                                                    color={'text.primary'}
+                                                    aria-label={'title'}
+                                                    sx={{
+                                                        fontWeight: 'bold',
+                                                    }}
+                                                >
+                                                    {t('assignment')}
+                                                </Typography>
+                                                <Typography
+                                                    color={'text.primary'}
+                                                >
+                                                    {assignment?.beschrijving}
+                                                </Typography>
+                                            </>
+                                        )}
+                                    </Stack>
+                                </Box>
                                 {/*deadline and groep button */}
                                 <Box
                                     sx={{
@@ -587,18 +654,26 @@ export function AssignmentPage() {
                                                     height={50}
                                                 />
                                             ) : (
-                                                <Typography
-                                                    variant="h6"
-                                                    color={'text.primary'}
-                                                >
-                                                    {assignment
-                                                        ? dayjs(
-                                                              assignment.deadline
-                                                          ).format(
-                                                              'DD/MM/YYYY-HH:MM'
-                                                          )
-                                                        : 'no deadline'}
-                                                </Typography>
+                                                <>
+                                                    {assignment !== undefined &&
+                                                        assignment.deadline !==
+                                                            null && (
+                                                            <Typography
+                                                                variant="h6"
+                                                                color={
+                                                                    'text.primary'
+                                                                }
+                                                            >
+                                                                {assignment
+                                                                    ? dayjs(
+                                                                          assignment.deadline
+                                                                      ).format(
+                                                                          'DD/MM/YYYY-HH:MM'
+                                                                      )
+                                                                    : 'no deadline'}
+                                                            </Typography>
+                                                        )}
+                                                </>
                                             )}
                                         </Box>
                                         <Box style={{ flexGrow: 1 }} />
@@ -633,6 +708,44 @@ export function AssignmentPage() {
                                         )}
                                     </Stack>
                                 </Box>
+                                {/*extra deadline*/}
+                                {assignment?.extra_deadline && (
+                                    <Box
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        alignItems={'center'}
+                                        gap={1}
+                                        pl={2.5}
+                                    >
+                                        <Typography
+                                            variant="h6"
+                                            color="text.primary"
+                                            fontWeight={'bold'}
+                                        >
+                                            Extra Deadline:
+                                        </Typography>
+                                        {loading ? (
+                                            <Skeleton
+                                                variant="text"
+                                                width={180}
+                                                height={50}
+                                            />
+                                        ) : (
+                                            <Typography
+                                                variant="h6"
+                                                color={'text.primary'}
+                                            >
+                                                {assignment
+                                                    ? dayjs(
+                                                          assignment.extra_deadline
+                                                      ).format(
+                                                          'DD/MM/YYYY-HH:MM'
+                                                      )
+                                                    : 'no deadline'}
+                                            </Typography>
+                                        )}
+                                    </Box>
+                                )}
                                 {/*download opgave*/}
                                 <Box
                                     aria-label={'file-box'}
@@ -660,6 +773,7 @@ export function AssignmentPage() {
                                     <Button
                                         startIcon={<DownloadIcon />}
                                         onClick={downloadAssignment}
+                                        disabled={assignment === undefined}
                                     >
                                         {loading ? (
                                             <Skeleton
@@ -674,7 +788,7 @@ export function AssignmentPage() {
                                             <>
                                                 {assignment
                                                     ? assignment.filename
-                                                    : 'error'}
+                                                    : t('no_assignmentfile')}
                                             </>
                                         )}
                                     </Button>
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index cbd51900..62e4d46d 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -1,4 +1,4 @@
-import { Card, Divider } from '../../components/CustomComponents.tsx'
+import { Divider } from '../../components/CustomComponents.tsx'
 import { Box, Skeleton, Typography } from '@mui/material'
 import List from '@mui/material/List'
 import { t } from 'i18next'
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 89aabcf2..abd72c50 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -71,7 +71,7 @@ export function SubjectsPage() {
     // State for loading the page
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
-    const [studentsLoading, setStudentsLoading] = useState(true);
+    const [studentsLoading, setStudentsLoading] = useState(true)
 
     useEffect(() => {
         // Get the data for this course.
@@ -136,27 +136,27 @@ export function SubjectsPage() {
 
     useEffect(() => {
         async function fetchStudents() {
-            setStudentsLoading(true);
-            const temp_students = [];
+            setStudentsLoading(true)
+            const temp_students = []
             for (const s of course?.studenten || []) {
                 try {
-                    const userResponse = await instance.get(`/gebruikers/${s}/`);
-                    temp_students.push(userResponse.data);
+                    const userResponse = await instance.get(`/gebruikers/${s}/`)
+                    temp_students.push(userResponse.data)
                 } catch (error) {
-                    console.error('Error fetching student data:', error);
-                    setFetchError(true);
+                    console.error('Error fetching student data:', error)
+                    setFetchError(true)
                 }
             }
             // Update the state with the fetched data
-            setStudents(temp_students);
-            setStudentsLoading(false);
+            setStudents(temp_students)
+            setStudentsLoading(false)
         }
-    
+
         // Fetch students
         fetchStudents().catch((error) =>
             console.error('Error fetching students data:', error)
-        );
-    }, [course]);
+        )
+    }, [course])
 
     const addProject = () => {
         console.log('add project')
@@ -261,15 +261,13 @@ export function SubjectsPage() {
                                     }}
                                 >
                                     {/* Give the student the option to select current or archived projects. */}
-                                    {course.gearchiveerd?
+                                    {course.gearchiveerd ? (
                                         <ProjectsView
                                             gebruiker={user}
                                             showAllAssignments={true}
                                             archived={true}
                                             assignments={assignments}
-                                            deleteAssignment={
-                                                deleteAssignment
-                                            }
+                                            deleteAssignment={deleteAssignment}
                                             archiveAssignment={
                                                 archiveAssignment
                                             }
@@ -278,7 +276,7 @@ export function SubjectsPage() {
                                             }
                                             courseId={courseID}
                                         />
-                                    :
+                                    ) : (
                                         <TabSwitcher
                                             titles={[
                                                 'current_projects',
@@ -319,7 +317,7 @@ export function SubjectsPage() {
                                                 />,
                                             ]}
                                         />
-                                    }
+                                    )}
                                 </Box>
                                 <Box
                                     display="flex"
@@ -383,7 +381,7 @@ export function SubjectsPage() {
                                 }}
                             >
                                 <Header
-                                    variant={'default'}
+                                    variant={'not_main'}
                                     title={course.naam}
                                 />
                                 <Box
@@ -393,24 +391,20 @@ export function SubjectsPage() {
                                         marginTop: 10,
                                     }}
                                 >
-                                    {course.gearchiveerd?
+                                    {course.gearchiveerd ? (
                                         <ProjectsView
                                             gebruiker={user}
                                             showAllAssignments={true}
                                             archived={true}
                                             assignments={assignments}
-                                            deleteAssignment={() =>
-                                                undefined
-                                            }
-                                            archiveAssignment={() =>
-                                                undefined
-                                            }
+                                            deleteAssignment={() => undefined}
+                                            archiveAssignment={() => undefined}
                                             changeVisibilityAssignment={() =>
                                                 undefined
                                             }
                                             courseId={courseID}
                                         />
-                                    :
+                                    ) : (
                                         <TabSwitcher
                                             titles={[
                                                 'current_projects',
@@ -451,7 +445,7 @@ export function SubjectsPage() {
                                                 />,
                                             ]}
                                         />
-                                    }
+                                    )}
                                     <WarningPopup
                                         title={t('join_course')}
                                         content={t('acces')}
@@ -470,8 +464,10 @@ export function SubjectsPage() {
                                     }}
                                 >
                                     <StudentPopUp
-                                        students={studentsLoading ? []: students}
-                                        text='students'
+                                        students={
+                                            studentsLoading ? [] : students
+                                        }
+                                        text="students"
                                     ></StudentPopUp>
                                 </Card>
                             </Stack>
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 818534ef..cd147c51 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -293,21 +293,40 @@ export function SubmissionPage() {
                             />
                         )}
                     </Box>
-                    <Box
-                        aria-label={'deadline'}
-                        sx={{
-                            padding: '20px',
-                        }}
-                    >
-                        <Typography variant={'h5'} color="text.primary">
-                            <strong>Deadline </strong>
-                            {project?.deadline
-                                ? dayjs(project.deadline).format(
-                                      'DD/MM/YYYY HH:mm'
-                                  )
-                                : 'error'}
-                        </Typography>
-                    </Box>
+                    {project?.deadline && (
+                        <Box
+                            aria-label={'deadline'}
+                            sx={{
+                                padding: '20px',
+                            }}
+                        >
+                            <Typography variant={'h5'} color="text.primary">
+                                <strong>Deadline </strong>
+                                {project?.deadline
+                                    ? dayjs(project.deadline).format(
+                                          'DD/MM/YYYY HH:mm'
+                                      )
+                                    : 'error'}
+                            </Typography>
+                        </Box>
+                    )}
+                    {project?.extra_deadline && (
+                        <Box
+                            aria-label={'extradeadline'}
+                            sx={{
+                                padding: '20px',
+                            }}
+                        >
+                            <Typography variant={'h5'} color="text.primary">
+                                <strong>Extra Deadline </strong>
+                                {project?.extra_deadline
+                                    ? dayjs(project.extra_deadline).format(
+                                          'DD/MM/YYYY HH:mm'
+                                      )
+                                    : 'error'}
+                            </Typography>
+                        </Box>
+                    )}
                     <Box
                         // This box shows the filename of the submission and
                         // allows the user to download the submission.

From 9bcc5d3a372bb6e07fbecff04f25e32fa599e646 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Thu, 16 May 2024 17:15:09 +0200
Subject: [PATCH 036/145] header fix

---
 .../frontend/src/pages/groupsPage/ChooseGroup.tsx     | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 9fd1dcc2..8598d003 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -75,11 +75,11 @@ export function ChooseGroup() {
     const [studenten,setStudenten]=useState<Record<number, User>>({});
     const [groups,setGroups]=useState<Group[]>([]);
     const [open,setOpen] = useState<boolean>(false);
-
     const [user, setUser] = useState<User>()
-
     const [assignment,setAssignment]= useState<Assignment>()
 
+    const [loading, setLoading] = useState(true)
+
     const assignmentId = params.assignmentId
 
     const handleClose = () => {
@@ -87,6 +87,7 @@ export function ChooseGroup() {
     }
 
     useEffect(()=>{
+        setLoading(true);
         instance
             .get('/gebruikers/me/')
             .then((res) => {
@@ -150,19 +151,19 @@ export function ChooseGroup() {
                             })
                         }
                     })
-                }
+                }   
             })
             .catch((err) => {
                 console.log(err)
             })
-
+            setLoading(false)
     },[])
 
 
     return (
         <>
             <Stack direction={'column'}>
-                <Header variant={'default'} title={"title"} />
+                <Header variant={'not_main'} title={loading ? '' : `${assignment?.titel}: ${t('groups')}`} />
                 <Stack
                     direction={'column'}
                     spacing={1}

From b6284d809bb76906970961575a7c193e3b3f1fef Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Thu, 16 May 2024 17:57:26 +0200
Subject: [PATCH 037/145] empty visuals have text now

---
 frontend/frontend/src/i18n/en.ts              |  3 ++
 frontend/frontend/src/i18n/nl.ts              |  3 ++
 .../src/pages/groupsPage/ChooseGroup.tsx      | 37 +++++++++----------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index b60ee1a7..62cc34a3 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -28,6 +28,7 @@ const english = {
     random: 'Random',
     members: 'Members',
     group_members: 'Members Of The Group',
+    no_members_yet: 'No members yet',
     assignmentName: 'Name assignment',
     upload_assignment: 'Upload assignment',
     description: 'Description assignment',
@@ -100,6 +101,8 @@ const english = {
     copy: 'Copy to clipboard',
     join_course: 'Join course?',
     join: 'Join',
+    join_group: 'Join',
+    leave: 'Leave',
     acces: 'This gives you access to the course.',
     deadlines_on: 'Deadlines on',
     email: 'email',
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index e853905b..1c258122 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -28,6 +28,7 @@ const dutch = {
     random: 'Willekeurige',
     members: 'Leden',
     group_members: 'Groepsleden',
+    no_members_yet: 'Nog geen leden',
     assignmentName: 'Naam opdracht',
     upload_assignment: 'Upload opgavebestand',
     description: 'Beschrijving opgave',
@@ -100,6 +101,8 @@ const dutch = {
     copy: 'Kopieer naar klembord',
     join_course: 'Voeg vak toe?',
     join: 'Voeg toe',
+    join_group: 'Wordt lid',
+    leave: 'Verlaat',
     acces: 'Dit geeft je toegang tot het vak.',
     deadlines_on: 'Deadlines op',
     email: 'email',
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 8598d003..67d74d7f 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -13,8 +13,7 @@ import List from '@mui/material/List'
 import { useEffect, useState } from 'react'
 import {Header} from "../../components/Header.tsx";
 import { t } from 'i18next'
-import AddCircle from '@mui/icons-material/AddCircle'
-import ClearIcon from '@mui/icons-material/Clear'
+import { Button } from '../../components/CustomComponents.tsx';
 import { useParams } from 'react-router-dom'
 import instance from "../../axiosConfig.ts";
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx';
@@ -44,25 +43,25 @@ function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> vo
     if(isin){
         return (
             <>
-                <IconButton
+                <Button
                     size={'small'}
                     sx={{ marginBottom: 1 }}
                     onClick={handleLeave}
                 >
-                    <ClearIcon />
-                </IconButton>
+                    <Typography>{t('leave')}</Typography>
+                </Button>
             </>
         )
     }
     return (
         <>
-            <IconButton
+            <Button
                 size={'small'}
                 sx={{ marginBottom: 1 }}
                 onClick={handleJoin}
             >
-                <AddCircle />
-            </IconButton>
+                <Typography>{t('join_group')}</Typography>
+            </Button>
         </>
     )
 }
@@ -323,17 +322,17 @@ export function ChooseGroup() {
                                         />
 
                                         <Box display={'flex'} flexDirection={'column'}>
-                                            {group.studenten.map((studentid)=>{
-                                                if(studenten[studentid]!=undefined){
-                                                    return (
-                                                        <>
-                                                            <Typography>
-                                                                {studenten[studentid].first_name+" "+studenten[studentid].last_name}
-                                                            </Typography>
-                                                        </>
-                                                        )
-                                                }
-                                            })}
+                                            {group.studenten.length > 0 ? (
+                                                    group.studenten.map((studentid) => (
+                                                        <Typography>
+                                                            {studenten[studentid] !== undefined
+                                                                ? `${studenten[studentid].first_name} ${studenten[studentid].last_name}`
+                                                                : t('members')}
+                                                        </Typography>
+                                                    ))
+                                                ) : (
+                                                    <Typography>{t('no_members_yet')}</Typography>
+                                                )}
 
                                         </Box>
 

From 8b145db97fe1fbad2cefffcdd3663af8598c98b2 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Thu, 16 May 2024 18:02:15 +0200
Subject: [PATCH 038/145] nicer visuals

---
 frontend/frontend/src/i18n/en.ts                       | 1 +
 frontend/frontend/src/i18n/nl.ts                       | 1 +
 frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 62cc34a3..9a9b8d08 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -27,6 +27,7 @@ const english = {
     students_choose: 'Students Can Choose',
     random: 'Random',
     members: 'Members',
+    members_loading: 'Members loading...',
     group_members: 'Members Of The Group',
     no_members_yet: 'No members yet',
     assignmentName: 'Name assignment',
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 1c258122..0d228bc1 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -29,6 +29,7 @@ const dutch = {
     members: 'Leden',
     group_members: 'Groepsleden',
     no_members_yet: 'Nog geen leden',
+    members_loading: 'Leden ophalen...',
     assignmentName: 'Naam opdracht',
     upload_assignment: 'Upload opgavebestand',
     description: 'Beschrijving opgave',
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 67d74d7f..06981491 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -327,7 +327,7 @@ export function ChooseGroup() {
                                                         <Typography>
                                                             {studenten[studentid] !== undefined
                                                                 ? `${studenten[studentid].first_name} ${studenten[studentid].last_name}`
-                                                                : t('members')}
+                                                                : t('members_loading')}
                                                         </Typography>
                                                     ))
                                                 ) : (

From 5585900542f131888363a26c080ce2b8c3eae8ea Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Fri, 17 May 2024 10:59:29 +0200
Subject: [PATCH 039/145] back button

---
 .../frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 1ae795ca..4f82f776 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -10,7 +10,7 @@ import {
     TextField,
     Typography,
 } from '@mui/material'
-import { Header } from '../../components/Header.tsx'
+import { Header } from '../../components/Header'
 import { Button } from '../../components/CustomComponents.tsx'
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
@@ -542,7 +542,7 @@ export function AddChangeSubjectPage() {
     return (
         <>
             <Stack direction={'column'}>
-                <Header variant={'default'} title={loading ? '' : title} />
+                <Header variant={loading ? 'default' : 'not_main'} title={loading ? '' : title} />
                 <Stack
                     direction={'column'}
                     spacing={5}

From 9c2ed024913d810e3a33760bea787c884e54bbc4 Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Fri, 17 May 2024 20:04:51 +0200
Subject: [PATCH 040/145] update model testen + start update serializer testen

---
 api/models/indiening.py                 |  2 +-
 api/tests/factories/indiening.py        | 16 ++-------
 api/tests/factories/score.py            |  3 +-
 api/tests/factories/template.py         |  1 +
 api/tests/models/test_indiening.py      | 32 ++++++------------
 api/tests/serializers/test_indiening.py | 44 +++----------------------
 6 files changed, 20 insertions(+), 78 deletions(-)
 create mode 100644 api/tests/factories/template.py

diff --git a/api/models/indiening.py b/api/models/indiening.py
index 953dd29a..ba31c65e 100644
--- a/api/models/indiening.py
+++ b/api/models/indiening.py
@@ -58,7 +58,7 @@ class Indiening(models.Model):
     indiening_id = models.AutoField(primary_key=True)
     groep = models.ForeignKey("Groep", on_delete=models.CASCADE)
     tijdstip = models.DateTimeField(auto_now_add=True)
-    bestand = models.FileField(upload_to=upload_to)
+    bestand = models.FileField(upload_to=upload_to, default="")
     status = models.IntegerField(default=0, choices=STATUS_CHOICES)
     result = models.TextField(default="", blank=True)
     artefacten = models.FileField(blank=True)
diff --git a/api/tests/factories/indiening.py b/api/tests/factories/indiening.py
index 35563f48..e1fc00be 100644
--- a/api/tests/factories/indiening.py
+++ b/api/tests/factories/indiening.py
@@ -1,5 +1,5 @@
 import factory
-from api.models.indiening import Indiening, IndieningBestand
+from api.models.indiening import Indiening
 from factory.django import DjangoModelFactory
 from factory import SubFactory
 from .groep import GroepFactory
@@ -15,6 +15,7 @@ class IndieningFactory(DjangoModelFactory):
     class Meta:
         model = Indiening
 
+    indiening_id = factory.Sequence(lambda n: n+1000)
     groep = SubFactory(GroepFactory)
     tijdstip = factory.LazyFunction(
         lambda: timezone.make_aware(
@@ -23,16 +24,5 @@ class Meta:
     )
     status = factory.Faker("boolean")
     result = factory.Faker("paragraph")
-    artefacten = None
-
-    indiening_bestanden = factory.RelatedFactory(
-        "api.tests.factories.indiening.IndieningBestandFactory", "indiening"
-    )
-
-
-class IndieningBestandFactory(DjangoModelFactory):
-    class Meta:
-        model = IndieningBestand
-
-    indiening = SubFactory(IndieningFactory)
     bestand = FileField(filename="test.txt", data=b"file content")
+    artefacten = None
diff --git a/api/tests/factories/score.py b/api/tests/factories/score.py
index 844bf18d..97ff855f 100644
--- a/api/tests/factories/score.py
+++ b/api/tests/factories/score.py
@@ -14,6 +14,5 @@ class Meta:
     @classmethod
     def _create(cls, model_class, *args, **kwargs):
         indiening = kwargs.pop("indiening")
-        max_score = indiening.groep.project.max_score
-        kwargs["score"] = random.randint(0, max_score)
+        kwargs["score"] = random.randint(0, indiening.groep.project.max_score)
         return super()._create(model_class, indiening=indiening, *args, **kwargs)
diff --git a/api/tests/factories/template.py b/api/tests/factories/template.py
new file mode 100644
index 00000000..f87f5c14
--- /dev/null
+++ b/api/tests/factories/template.py
@@ -0,0 +1 @@
+# TODO
\ No newline at end of file
diff --git a/api/tests/models/test_indiening.py b/api/tests/models/test_indiening.py
index e0f065d0..afc883f1 100644
--- a/api/tests/models/test_indiening.py
+++ b/api/tests/models/test_indiening.py
@@ -1,6 +1,5 @@
 from django.test import TestCase
-from django.core.files.uploadedfile import SimpleUploadedFile
-from api.tests.factories.indiening import IndieningFactory, IndieningBestandFactory
+from api.tests.factories.indiening import IndieningFactory
 from api.models.indiening import upload_to
 
 
@@ -20,30 +19,19 @@ def test_tijdstip(self):
     def test_status(self):
         self.assertIsNotNone(self.indiening.status)
 
-    def test_indiening_bestanden(self):
-        self.assertEqual(self.indiening.indiening_bestanden.count(), 1)
-
     def test_upload_to(self):
         filename = "test_indiening.txt"
         expected_path = (
             f"data/indieningen/indiening_{self.indiening.indiening_id}/{filename}"
         )
         self.assertEqual(upload_to(self.indiening, filename), expected_path)
-
-
-class IndieningBestandModelTest(TestCase):
-    def setUp(self):
-        self.indiening_bestand = IndieningBestandFactory.create(
-            bestand=SimpleUploadedFile("file.txt", b"file_content")
-        )
-
-    def test_str_method(self):
-        self.assertEqual(
-            str(self.indiening_bestand), str(self.indiening_bestand.bestand.name)
-        )
-
-    def test_indiening(self):
-        self.assertIsNotNone(self.indiening_bestand.indiening)
-
+    
+    def test_artefacten(self):
+        self.assertIsNotNone(self.indiening.artefacten)
+    
+    def test_result(self):
+        self.assertIsNotNone(self.indiening.result)
+    
     def test_bestand(self):
-        self.assertIsNotNone(self.indiening_bestand.bestand)
+        self.assertIsNotNone(self.indiening.bestand)
+
diff --git a/api/tests/serializers/test_indiening.py b/api/tests/serializers/test_indiening.py
index d0e9b53d..84c0bedc 100644
--- a/api/tests/serializers/test_indiening.py
+++ b/api/tests/serializers/test_indiening.py
@@ -1,7 +1,7 @@
 from django.test import TestCase
 from django.core.files.uploadedfile import SimpleUploadedFile
-from api.serializers.indiening import IndieningSerializer, IndieningBestandSerializer
-from api.tests.factories.indiening import IndieningFactory, IndieningBestandFactory
+from api.serializers.indiening import IndieningSerializer
+from api.tests.factories.indiening import IndieningFactory
 from api.tests.factories.groep import GroepFactory
 from api.tests.factories.restrictie import RestrictieFactory
 
@@ -24,9 +24,10 @@ def test_indiening_serializer_fields(self):
                     "status",
                     "result",
                     "artefacten",
-                    "indiening_bestanden",
+                    "bestand",
                 ]
             ),
+            
         )
 
     def test_indiening_serializer_create(self):
@@ -45,40 +46,3 @@ def test_indiening_serializer_update(self):
         self.assertTrue(serializer.is_valid())
         indiening = serializer.save()
         self.assertEqual(indiening.groep, self.indiening.groep)
-
-
-class IndieningBestandSerializerTest(TestCase):
-    def setUp(self):
-        self.indiening_bestand = IndieningBestandFactory.create(
-            bestand=SimpleUploadedFile("file.txt", b"file_content")
-        )
-        self.serializer = IndieningBestandSerializer(instance=self.indiening_bestand)
-
-    def test_indiening_bestand_serializer_fields(self):
-        data = self.serializer.data
-        self.assertEqual(
-            set(data.keys()), set(["indiening_bestand_id", "indiening", "bestand"])
-        )
-
-    def test_indiening_bestand_serializer_create(self):
-        indiening = IndieningFactory.create()
-        data = {
-            "indiening": indiening.indiening_id,
-            "bestand": SimpleUploadedFile("file.txt", b"file_content"),
-        }
-        serializer = IndieningBestandSerializer(data=data)
-        self.assertTrue(serializer.is_valid())
-        indiening_bestand = serializer.save()
-        self.assertEqual(indiening_bestand.indiening, indiening)
-
-    def test_indiening_bestand_serializer_update(self):
-        new_data = {
-            "indiening": self.indiening_bestand.indiening.indiening_id,
-            "bestand": SimpleUploadedFile("file.txt", b"file_content"),
-        }
-        serializer = IndieningBestandSerializer(
-            instance=self.indiening_bestand, data=new_data, partial=True
-        )
-        self.assertTrue(serializer.is_valid())
-        indiening_bestand = serializer.save()
-        self.assertEqual(indiening_bestand.indiening, self.indiening_bestand.indiening)

From 48e436c93c203559c791a0dc007e7a857a810a17 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Fri, 17 May 2024 20:41:26 +0200
Subject: [PATCH 041/145] popup als je nog niet in een groep zit + reroute naar
 groep selectie als studenten groep mogen kiezen

---
 frontend/frontend/src/i18n/en.ts              |  5 ++-
 frontend/frontend/src/i18n/nl.ts              |  5 ++-
 .../pages/assignmentPage/AssignmentPage.tsx   | 32 +++++++++++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 9a9b8d08..dca3ed59 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -107,7 +107,10 @@ const english = {
     acces: 'This gives you access to the course.',
     deadlines_on: 'Deadlines on',
     email: 'email',
-    copy_invite: 'Copy invitation link'
+    copy_invite: 'Copy invitation link',
+    noGroup: "You don't seem to be in a group yet.",
+    contactTeacher: 'Please contact your teacher.',
+    chooseGroup: 'Join a group before submitting.',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 0d228bc1..a94e024e 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -107,7 +107,10 @@ const dutch = {
     acces: 'Dit geeft je toegang tot het vak.',
     deadlines_on: 'Deadlines op',
     email: 'email',
-    copy_invite: 'Kopieer uitnodigingslink'
+    copy_invite: 'Kopieer uitnodigingslink',
+    noGroup: 'Je lijkt nog geen groep te hebben.',
+    chooseGroup: 'Kies een groep voor je indient',
+    contactTeacher: 'Gelieve contact op te nemen met je lesgever.',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 7f0c136a..922f3a09 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -24,6 +24,7 @@ import { Project } from '../scoresPage/ProjectScoresPage.tsx'
 import { GroupAccessComponent } from '../../components/GroupAccessComponent.tsx'
 import dayjs from 'dayjs'
 import DownloadIcon from '@mui/icons-material/Download'
+import WarningPopup from '../../components/WarningPopup.tsx'
 
 // group interface
 export interface Group {
@@ -65,6 +66,20 @@ export function AssignmentPage() {
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
 
+    // state for the warning popup
+    const [openNoGroup, setOpenNoGroup] = useState(false)
+
+    // Function to handle the error when the user has no group
+    function handleNoGroupError() {
+        if (assignment?.student_groep) {
+            navigate(
+                `/course/${courseId}/assignment/${assignmentId}/groups/choose`
+            )
+        } else {
+            setOpenNoGroup(false)
+        }
+    }
+
     useEffect(() => {
         async function fetchData() {
             try {
@@ -115,6 +130,7 @@ export function AssignmentPage() {
                 }
             } catch (error) {
                 console.error('Error fetching data:', error)
+                navigate('/error')
             } finally {
                 setLoading(false)
             }
@@ -205,6 +221,7 @@ export function AssignmentPage() {
     }
 
     // Function to upload submission file
+    // check for failures and open popup if no group
     const uploadIndiening = async () => {
         if (submissionFile) {
             const config = {
@@ -231,6 +248,7 @@ export function AssignmentPage() {
                         })
                     setSubmissionFile(undefined)
                 } else {
+                    setOpenNoGroup(true)
                     console.error(
                         'Group not found for assingmentId: ',
                         assignmentId
@@ -537,6 +555,7 @@ export function AssignmentPage() {
                             </Stack>
                         </>
                     ) : (
+                        // Rendering UI for student
                         <>
                             <Header
                                 variant={'not_main'}
@@ -940,6 +959,19 @@ export function AssignmentPage() {
                                     </Stack>
                                 </Box>
                             </Stack>
+                            <WarningPopup
+                                title={t('error')}
+                                content={
+                                    t('noGroup') +
+                                    (assignment?.student_groep
+                                        ? t('chooseGroup')
+                                        : t('contactTeacher'))
+                                }
+                                buttonName={'Ok'}
+                                open={openNoGroup}
+                                handleClose={() => setOpenNoGroup(false)}
+                                doAction={handleNoGroupError}
+                            />
                         </>
                     )}
                 </>

From b88b9f4bcba52219a0ba60047e8f14b95a886849 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Fri, 17 May 2024 21:42:09 +0200
Subject: [PATCH 042/145] change button action text

---
 .../frontend/src/pages/assignmentPage/AssignmentPage.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 922f3a09..41438343 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -967,7 +967,11 @@ export function AssignmentPage() {
                                         ? t('chooseGroup')
                                         : t('contactTeacher'))
                                 }
-                                buttonName={'Ok'}
+                                buttonName={
+                                    assignment?.student_groep
+                                        ? t('join')
+                                        : t('ok')
+                                }
                                 open={openNoGroup}
                                 handleClose={() => setOpenNoGroup(false)}
                                 doAction={handleNoGroupError}

From 84fb885b2403215f238a1df679061a2a2dedcea3 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 17 May 2024 22:04:31 +0200
Subject: [PATCH 043/145] start of template_ui integration

---
 .gitignore                                    |  3 +
 .../RestrictionsDialog.tsx                    | 57 +++++++++++++++++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8aac9a27..25975121 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,6 @@ uploads
 /data/
 cypress/screenshots
 /package-lock.json
+/frontend/package-lock.json
+/frontend/frontend/package-lock.json
+package-lock.json
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index c4a22edb..88fe686f 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -15,11 +15,12 @@ import {
     Select,
     TextField,
 } from '@mui/material'
-import { t } from 'i18next'
+import { t, use } from 'i18next'
 import { restriction } from './AddChangeAssignmentPage.tsx'
 import Switch from '@mui/material/Switch'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import RestrictionsTemplateUI from './RestrictionTemplateUI.tsx'
+import instance from '../../axiosConfig.ts'
 
 interface RestrictionsDialogProps {
     restrictions: restriction[]
@@ -32,6 +33,12 @@ enum restrictionExtension {
     Python = '.py',
 }
 
+export interface Template {
+    template_id: number
+    user: number
+    bestand: number
+}
+
 const code = `
 
 #@param
@@ -126,6 +133,24 @@ export default function RestrictionsDialog({
         setOpenTemplateInterface(true)
     }
 
+    const handleSaveTemplate = async (filename: string, 
+                                        fileExtension: restrictionExtension, 
+                                        code: string, 
+                                        templateMetaData: Template) => {
+        var file = new File([code], 
+                            `${filename}.${fileExtension}`, 
+                            {type: "text/plain"});
+        try {
+            await instance.put(`/templates/${templateMetaData.template_id}/`, {
+                template_id: templateMetaData.template_id,
+                user: templateMetaData.user,
+                bestand: file,
+            })
+        } catch (error) {
+            console.error('Error updating data:', error)
+        }
+    }
+
     // Buttons array for the vertical button group
     const buttons = [
         <Button id='upload' key="Upload" component={'label'}>
@@ -143,7 +168,31 @@ export default function RestrictionsDialog({
         </Button>,
     ]
 
-    const templates = [
+    React.useEffect(() => {
+        let templates: Template[] = []
+        async function fetchData() {
+            
+            try {
+                const response =
+                    await instance.get<Template[]>('/vakken/?in=true')
+                templates = response.data
+                
+                
+            } catch (error) {
+                console.error('Error fetching data:', error)
+            }
+        }
+
+        fetchData().catch((e) => {
+            console.error(e)
+        })
+        console.log("templates:")
+        console.log(templates)
+        console.log("----------")
+        
+    }, [])
+
+    const templateButtons = [
         <Button
             id='fileExtensionCheck'
             key="FileExtensionCheck"
@@ -219,7 +268,7 @@ export default function RestrictionsDialog({
                     variant={'outlined'}
                     color={'primary'}
                 >
-                    {templates}
+                    {templateButtons}
                 </ButtonGroup>
             </Box>
             <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
@@ -347,7 +396,7 @@ export default function RestrictionsDialog({
                                 <Button
                                     autoFocus
                                     color="inherit"
-                                    onClick={() => setPopupOpen(true)}
+                                    onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
                                 >
                                     save template
                                 </Button>

From 0ebfa6ed7bb7d2511f0b5932544b20e9369b03ca Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Fri, 17 May 2024 22:10:43 +0200
Subject: [PATCH 044/145] change put to post request

---
 .../src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 88fe686f..3129eee6 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -141,7 +141,7 @@ export default function RestrictionsDialog({
                             `${filename}.${fileExtension}`, 
                             {type: "text/plain"});
         try {
-            await instance.put(`/templates/${templateMetaData.template_id}/`, {
+            await instance.post(`/templates/`, {
                 template_id: templateMetaData.template_id,
                 user: templateMetaData.user,
                 bestand: file,

From 4c3c1f5ad3fd4a8f70381f1e7aba49f2bfd6ef79 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Fri, 17 May 2024 22:57:04 +0200
Subject: [PATCH 045/145] frontend aangepast aan indiening backend verandering

---
 .../SubmissionListItemTeacherPage.tsx         | 67 +++++++-------
 .../pages/assignmentPage/AssignmentPage.tsx   | 65 +++++++-------
 .../pages/scoresPage/ProjectScoresPage.tsx    | 69 +++++++-------
 .../pages/scoresPage/StudentScoreListItem.tsx | 90 ++++++++++---------
 .../pages/submissionPage/SubmissionPage.tsx   | 81 ++++++++---------
 5 files changed, 185 insertions(+), 187 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 366e1c86..27a4f734 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -61,7 +61,30 @@ export function SubmissionListItemTeacherPage({
                     submissionsResponse.data[
                         submissionsResponse.data.length - 1
                     ]
-                setSubmitted(lastSubmission)
+                const lastSubmissionResponse = await instance.get(`indieningen/${lastSubmission.indiening_id}/`)
+                //Get the submission file
+                const newSubmission: Submission = lastSubmissionResponse.data
+                newSubmission.filename = lastSubmissionResponse.data.bestand.replace(
+                    /^.*[\\/]/,
+                    ''
+                )
+                newSubmission.bestand = await instance
+                    .get(`/indieningen/${lastSubmission.indiening_id}/indiening_bestand`, {
+                        responseType: 'blob',
+                    }).then((res) => {
+                        let filename = 'indiening.zip'
+                        if (newSubmission.filename) {
+                            filename = newSubmission.filename
+                        }
+                        const blob = new Blob([res.data], {
+                            type: res.headers['content-type'],
+                        })
+                        const file: File = new File([blob], filename, {
+                            type: res.headers['content-type'],
+                        })
+                        return file
+                    })
+                setSubmitted(newSubmission)
                 if (lastSubmission) {
                     const scoreResponse = await instance.get(
                         `/scores/?indiening=${lastSubmission.indiening_id}`
@@ -78,38 +101,16 @@ export function SubmissionListItemTeacherPage({
 
     // Function to download the submission
     const downloadSubmission = () => {
-        if (submitted) {
-            instance
-                .get(
-                    `/indieningen/${submitted.indiening_id}/indiening_bestanden/`,
-                    { responseType: 'blob' }
-                )
-                .then((res) => {
-                    let filename = 'lege_indiening.zip'
-                    if (submitted.indiening_bestanden.length > 0) {
-                        filename =
-                            submitted.indiening_bestanden[0].bestand.replace(
-                                /^.*[\\/]/,
-                                ''
-                            )
-                    }
-                    const blob = new Blob([res.data], {
-                        type: res.headers['content-type'],
-                    })
-                    const file: File = new File([blob], filename, {
-                        type: res.headers['content-type'],
-                    })
-                    const url = window.URL.createObjectURL(file)
-                    const a = document.createElement('a')
-                    a.href = url
-                    a.download = filename
-                    document.body.appendChild(a)
-                    a.click()
-                    a.remove()
-                })
-                .catch((err) => {
-                    console.error(err)
-                })
+        if (submitted?.bestand) {
+            const url = window.URL.createObjectURL(submitted?.bestand)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = submitted.filename
+                ? submitted.filename
+                : 'opgave.zip'
+            document.body.appendChild(a)
+            a.click()
+            a.remove()
         }
     }
 
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 7f0c136a..fa52a508 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -127,38 +127,41 @@ export function AssignmentPage() {
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
         const downloadPromises: Promise<void>[] = []
-        submissions.forEach((submission, index) => {
-            // Iterating over submissions and creating promises for each download
+        submissions.forEach(submission => {
             downloadPromises.push(
-                new Promise((resolve, reject) => {
-                    instance
-                        .get(
-                            `/indieningen/${submission.indiening_id}/indiening_bestanden/`,
+                new Promise(async (resolve, reject) => {
+                    try {
+                        // Get the submission details
+                        const submissionResponse = await instance.get(
+                            `/indieningen/${submission.indiening_id}/`
+                        );
+                        const newSubmission = submissionResponse.data;
+                        // Get the submission file
+                        const fileResponse = await instance.get(
+                            `/indieningen/${submission.indiening_id}/indiening_bestand/`,
                             { responseType: 'blob' }
-                        )
-                        .then((res) => {
-                            let filename = 'lege_indiening_zip.zip'
-                            if (submission.indiening_bestanden.length > 0) {
-                                filename =
-                                    submission.indiening_bestanden[0].bestand.replace(
-                                        /^.*[\\/]/,
-                                        ''
-                                    )
-                            }
-                            if (filename !== 'lege_indiening_zip.zip') {
-                                zip.file(filename, res.data)
-                            }
-                            resolve()
-                        })
-                        .catch((err) => {
-                            console.error(
-                                `Error downloading submission ${index + 1}:`,
-                                err
-                            )
-                            reject(err)
-                        })
+                        );
+                        let filename = 'indiening.zip';
+                        if (newSubmission.bestand) {
+                            filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                        }
+                        const blob = new Blob([fileResponse.data], {
+                            type: fileResponse.headers['content-type'],
+                        });
+                        const file = new File([blob], filename, {
+                            type: fileResponse.headers['content-type'],
+                        });
+                        newSubmission.bestand = file;
+                        newSubmission.filename = filename;
+                        // Add the file to the zip
+                        zip.file(filename, fileResponse.data);
+                        resolve(newSubmission);
+                    } catch (err) {
+                        console.error(`Error downloading submission:`, err);
+                        reject(err);
+                    }
                 })
-            )
+            );
         })
         Promise.all(downloadPromises)
             .then(() => {
@@ -167,7 +170,7 @@ export function AssignmentPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions.zip'
+                        a.download = 'all_submissions_' + assignment?.titel + '_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
@@ -222,7 +225,7 @@ export function AssignmentPage() {
                 if (group) {
                     const formData = new FormData()
                     formData.append('groep', group.groep_id)
-                    formData.append('indiening_bestanden', submissionFile)
+                    formData.append('bestand', submissionFile)
 
                     await instance
                         .post('/indieningen/', formData, config)
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index b08cdd12..52613d78 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -56,16 +56,10 @@ interface Groep {
 export interface Indiening {
     indiening_id: number
     groep: number
+    bestand: File
     tijdstip: Date
     status: number
     result: string
-    indiening_bestanden: IndieningBestand[]
-}
-
-interface IndieningBestand {
-    indiening_bestand_id: number
-    indiening: number
-    bestand: string
 }
 
 interface Score {
@@ -166,36 +160,39 @@ export function ProjectScoresPage() {
         groepen
             .filter((groep) => groep.lastSubmission !== undefined)
             .map((groep) => groep.lastSubmission)
-            .forEach((submission, index) => {
+            .forEach(submission => {
                 downloadPromises.push(
-                    new Promise((resolve, reject) => {
-                        instance
-                            .get(
-                                `/indieningen/${submission?.indiening_id}/indiening_bestanden/`,
+                    new Promise(async (resolve, reject) => {
+                        try {
+                            // Get the submission details
+                            const submissionResponse = await instance.get(
+                                `/indieningen/${submission?.indiening_id}/`
+                            );
+                            const newSubmission = submissionResponse.data;
+                            // Get the submission file
+                            const fileResponse = await instance.get(
+                                `/indieningen/${submission?.indiening_id}/indiening_bestand/`,
                                 { responseType: 'blob' }
-                            )
-                            .then((res) => {
-                                let filename = 'lege_indiening_zip.zip'
-                                if (submission === undefined) return
-                                if (submission.indiening_bestanden.length > 0) {
-                                    filename =
-                                        submission?.indiening_bestanden[0].bestand.replace(
-                                            /^.*[\\/]/,
-                                            ''
-                                        )
-                                }
-                                if (filename !== 'lege_indiening_zip.zip') {
-                                    zip.file(filename, res.data)
-                                }
-                                resolve()
-                            })
-                            .catch((err) => {
-                                console.error(
-                                    `Error downloading submission ${index + 1}:`,
-                                    err
-                                )
-                                reject(err)
-                            })
+                            );
+                            let filename = 'indiening.zip';
+                            if (newSubmission.bestand) {
+                                filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                            }
+                            const blob = new Blob([fileResponse.data], {
+                                type: fileResponse.headers['content-type'],
+                            });
+                            const file = new File([blob], filename, {
+                                type: fileResponse.headers['content-type'],
+                            });
+                            newSubmission.bestand = file;
+                            newSubmission.filename = filename;
+                            // Add the file to the zip
+                            zip.file(filename, fileResponse.data);
+                            resolve(newSubmission);
+                        } catch (err) {
+                            console.error(`Error downloading submission:`, err);
+                            reject(err);
+                        }
                     })
                 )
             })
@@ -206,7 +203,7 @@ export function ProjectScoresPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions.zip'
+                        a.download = 'all_submissions_' + project?.titel +'_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
diff --git a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
index 8fbbf571..7805f909 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
@@ -1,7 +1,7 @@
 import { Divider } from '../../components/CustomComponents.tsx'
 import {
     CircularProgress,
-    IconButton,
+    ListItemIcon,
     ListItem,
     ListItemText,
     TextField,
@@ -59,37 +59,35 @@ export function StudentScoreListItem({
     }, [studenten])
 
     // Function to download a single submission
-    const downloadSubmission = () => {
+    const downloadSubmission = async () => {
         try {
-            instance
-                .get(
-                    `/indieningen/${lastSubmission?.indiening_id}/indiening_bestanden/`,
-                    { responseType: 'blob' }
-                )
-                .then((res) => {
-                    let filename = 'lege_indiening.zip'
-                    if (lastSubmission === undefined) return
-                    if (lastSubmission.indiening_bestanden.length > 0) {
-                        filename =
-                            lastSubmission.indiening_bestanden[0].bestand.replace(
-                                /^.*[\\/]/,
-                                ''
-                            )
-                    }
-                    const blob = new Blob([res.data], {
-                        type: res.headers['content-type'],
-                    })
-                    const file: File = new File([blob], filename, {
-                        type: res.headers['content-type'],
-                    })
-                    const url = window.URL.createObjectURL(file)
-                    const a = document.createElement('a')
-                    a.href = url
-                    a.download = filename
-                    document.body.appendChild(a)
-                    a.click()
-                    a.remove()
-                })
+            let filename = 'lege_indiening.zip'
+            // Get the submission details
+            const submissionResponse = await instance.get(
+                `/indieningen/${lastSubmission?.indiening_id}/`
+            );
+            const newSubmission = submissionResponse.data;
+            // Get the submission file
+            const fileResponse = await instance.get(
+                `/indieningen/${lastSubmission?.indiening_id}/indiening_bestand/`,
+                { responseType: 'blob' }
+            );
+            if (newSubmission.bestand) {
+                filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+            }
+            const blob = new Blob([fileResponse.data], {
+                type: fileResponse.headers['content-type'],
+            });
+            const file = new File([blob], filename, {
+                type: fileResponse.headers['content-type'],
+            });
+            const url = window.URL.createObjectURL(file)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = filename
+            document.body.appendChild(a)
+            a.click()
+            a.remove()
         } catch (error) {
             console.error(error)
         }
@@ -156,17 +154,25 @@ export function StudentScoreListItem({
                                 <ListItemText primary={'0/' + maxScore} />
                             )}
                         </ListItem>
-                        {/* Button to download submission */}
-                        <ListItem sx={{ maxWidth: '4%' }}>
-                            <IconButton
-                                onClick={downloadSubmission}
-                                edge="end"
-                                aria-label="download"
-                                disabled={lastSubmission == undefined}
-                            >
-                                <DownloadIcon />
-                            </IconButton>
-                        </ListItem>
+                        {/* Display download icon */}
+                    <ListItemText sx={{ maxWidth: 35 }}>
+                        <ListItemIcon>
+                            <div onClick={downloadSubmission}>
+                                {lastSubmission ? (
+                                    <DownloadIcon
+                                        sx={{
+                                            color: 'primary.main',
+                                            '&:hover': {
+                                                color: 'primary.light',
+                                            },
+                                        }}
+                                    />
+                                ) : (
+                                    <DownloadIcon sx={{ color: 'gray' }} />
+                                )}
+                            </div>
+                        </ListItemIcon>
+                    </ListItemText>
                     </>
                 </ListItem>
             </ListItem>
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index b1ffd957..3f5af53d 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -39,14 +39,11 @@ enum SubmissionStatus {
 export interface Submission {
     indiening_id: number
     groep: number
+    bestand: File
     tijdstip: Dayjs
     status: SubmissionStatus
     result: string
-    indiening_bestanden: {
-        indiening_bestand_id: number
-        bestand: string
-        indiening: number
-    }[]
+    filename?: string
 }
 
 // Define the structure of a restriction
@@ -102,37 +99,17 @@ export function SubmissionPage() {
 
     // Function to download the submission
     const downloadSubmission = () => {
-        instance
-            .get(`/indieningen/${submissionId}/indiening_bestanden/`, {
-                responseType: 'blob',
-            })
-            .then((res) => {
-                let filename = 'indiening.zip'
-                if (submission) {
-                    filename =
-                        submission.indiening_bestanden[0].bestand.replace(
-                            /^.*[\\/]/,
-                            ''
-                        )
-                }
-                const blob = new Blob([res.data], {
-                    type: res.headers['content-type'],
-                })
-                const file: File = new File([blob], filename, {
-                    type: res.headers['content-type'],
-                })
-                const url = window.URL.createObjectURL(file)
-                const a = document.createElement('a')
-                a.href = url
-                a.download = filename
-                document.body.appendChild(a)
-                a.click()
-                a.remove()
-            })
-            .catch((err) => {
-                console.error(err)
-                setFetchError(true)
-            })
+        if (submission?.bestand) {
+            const url = window.URL.createObjectURL(submission?.bestand)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = submission.filename
+                ? submission.filename
+                : 'opgave.zip'
+            document.body.appendChild(a)
+            a.click()
+            a.remove()
+        }
     }
 
     useEffect(() => {
@@ -152,11 +129,30 @@ export function SubmissionPage() {
                 )
                 setRestrictions(restrictions.data)
 
+                const submissionResponse = await instance.get(`indieningen/${submissionId}/`)
                 //Get the submission file
-                const submission = await instance.get(
-                    '/indieningen/' + submissionId + '/'
+                const newSubmission: Submission = submissionResponse.data
+                newSubmission.filename = submissionResponse.data.bestand.replace(
+                    /^.*[\\/]/,
+                    ''
                 )
-                setSubmission(submission.data)
+                newSubmission.bestand = await instance
+                    .get(`/indieningen/${submissionId}/indiening_bestand`, {
+                        responseType: 'blob',
+                    }).then((res) => {
+                        let filename = 'indiening.zip'
+                        if (newSubmission.filename) {
+                            filename = newSubmission.filename
+                        }
+                        const blob = new Blob([res.data], {
+                            type: res.headers['content-type'],
+                        })
+                        const file: File = new File([blob], filename, {
+                            type: res.headers['content-type'],
+                        })
+                        return file
+                    })
+                setSubmission(newSubmission)
                 // Get the current user
                 const userResponse = await instance.get('/gebruikers/me/')
                 setUser(userResponse.data)
@@ -342,12 +338,7 @@ export function SubmissionPage() {
                                 />
                             ) : (
                                 <>
-                                    {submission
-                                        ? submission.indiening_bestanden[0].bestand.replace(
-                                              /^.*[\\/]/,
-                                              ''
-                                          )
-                                        : 'error'}
+                                    {submission ? submission.filename : 'error'}
                                 </>
                             )}
                         </Button>

From 886aa7dc8f53fce14b56ec0abb2b767ff422d19a Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Fri, 17 May 2024 23:16:10 +0200
Subject: [PATCH 046/145] refactor groepen

---
 .../src/components/GroupAccessComponent.tsx   |  24 +-
 frontend/frontend/src/i18n/en.ts              |   3 +-
 frontend/frontend/src/i18n/nl.ts              |   3 +-
 .../AddChangeAssignmentPage.tsx               |  50 +-
 .../src/pages/groupsPage/GroupsPage.tsx       | 935 ++++++++++--------
 frontend/frontend/src/routes.tsx              |   2 +-
 6 files changed, 572 insertions(+), 445 deletions(-)

diff --git a/frontend/frontend/src/components/GroupAccessComponent.tsx b/frontend/frontend/src/components/GroupAccessComponent.tsx
index af831496..922896bc 100644
--- a/frontend/frontend/src/components/GroupAccessComponent.tsx
+++ b/frontend/frontend/src/components/GroupAccessComponent.tsx
@@ -1,8 +1,6 @@
 import { Button } from './CustomComponents'
-import { Box, Typography } from '@mui/material'
+import { Box } from '@mui/material'
 import { t } from 'i18next'
-import Switch from '@mui/material/Switch'
-import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 interface GroupAccessComponentProps {
@@ -20,17 +18,12 @@ export function GroupAccessComponent({
     courseid,
 }: GroupAccessComponentProps) {
     const navigate = useNavigate()
-    const [allowGroups, setAllowGroups] = useState(false)
 
     // Handle click event to navigate to the groups page
     const handleClick = () => {
         navigate(`/course/${courseid}/assignment/${assignmentid}/groups`)
     }
 
-    useEffect(() => {
-        //set max group size to 1 if groups are not allowed and register all students to a group of their own
-    }, [allowGroups])
-
     return (
         <>
             <Box
@@ -42,20 +35,7 @@ export function GroupAccessComponent({
                 marginBottom={2}
             >
                 {/* Button to navigate to groups page */}
-                {allowGroups ? (
-                    <Button onClick={handleClick}>{t('groups')}</Button>
-                ) : (
-                    // Show text indicating groups are not allowed
-                    <Typography color={'text.primary'} variant={'body1'}>
-                        {t('groups')}
-                    </Typography>
-                )}
-                {/* Switch to toggle group access */}
-                <Switch
-                    checked={allowGroups}
-                    onChange={() => setAllowGroups(!allowGroups)}
-                    color={'primary'}
-                />
+                <Button onClick={handleClick}>{t('groups')}</Button>
             </Box>
         </>
     )
diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 9a9b8d08..e42add02 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -107,7 +107,8 @@ const english = {
     acces: 'This gives you access to the course.',
     deadlines_on: 'Deadlines on',
     email: 'email',
-    copy_invite: 'Copy invitation link'
+    copy_invite: 'Copy invitation link',
+    n_of_members: 'Max Amount Of Members',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 0d228bc1..8ff480a3 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -107,7 +107,8 @@ const dutch = {
     acces: 'Dit geeft je toegang tot het vak.',
     deadlines_on: 'Deadlines op',
     email: 'email',
-    copy_invite: 'Kopieer uitnodigingslink'
+    copy_invite: 'Kopieer uitnodigingslink',
+    n_of_members: 'Max Aantal Leden',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 27a2a7dc..0068785f 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -99,6 +99,7 @@ export function AddChangeAssignmentPage() {
     const [maxScore, SetMaxScore] = useState<number>(20)
     const [cleared, setCleared] = useState<boolean>(false)
     const [filename, setFilename] = useState<string>('indiening.zip')
+    const [groupSize, setGroupSize] = useState<number>(1)
 
     // State for the error checks of the assignment
     const [assignmentErrors, setAssignmentErrors] = useState<errorChecks>({
@@ -183,15 +184,11 @@ export function AddChangeAssignmentPage() {
 
                     setVisible(assignment.zichtbaar)
                     if (assignment.deadline !== null) {
-                        setDueDate(
-                            dayjs(assignment.deadline)
-                        )
+                        setDueDate(dayjs(assignment.deadline))
                         console.log('deadline' + assignment.deadline)
                     }
                     if (assignment.extra_deadline !== null) {
-                        setExtraDueDate(
-                            dayjs(assignment.extra_deadline)
-                        )
+                        setExtraDueDate(dayjs(assignment.extra_deadline))
                         console.log(
                             'extra deadline' + assignment.extra_deadline
                         )
@@ -380,6 +377,7 @@ export function AddChangeAssignmentPage() {
         if (extraDueDate !== null) {
             formData.append('extra_deadline', extraDueDate.format())
         }
+        formData.append('max_groep_grootte', groupSize.toString())
 
         const config = {
             headers: {
@@ -540,7 +538,7 @@ export function AddChangeAssignmentPage() {
                         </Box>
                     </Box>
                     {/* Deadline section.
-                    There is both the normal deadline, 
+                    There is both the normal deadline,
                     and an extra deadline in case people need more time. */}
                     <Box
                         aria-label={'deadline'}
@@ -840,6 +838,44 @@ export function AddChangeAssignmentPage() {
                                     </IconButton>
                                 </Tooltip>
                             </Box>
+                            {/* change group size allowed, no need for extra group switch*/}
+                            {!assignmentId && (
+                                <Box
+                                    aria-label={'groupSize'}
+                                    display={'flex'}
+                                    flexDirection={'row'}
+                                    gap={1}
+                                    height={40}
+                                    alignItems={'center'}
+                                >
+                                    <Typography
+                                        fontWeight={'bold'}
+                                        color={'text.primary'}
+                                    >
+                                        {t('n_of_members')}
+                                    </Typography>
+                                    {loading ? (
+                                        <Skeleton
+                                            variant={'text'}
+                                            width={60}
+                                            height={60}
+                                        />
+                                    ) : (
+                                        <TextField
+                                            sx={{ width: 80 }}
+                                            label={'Group Size'}
+                                            type={'number'}
+                                            required
+                                            value={groupSize}
+                                            onChange={(event) =>
+                                                setGroupSize(
+                                                    parseInt(event.target.value)
+                                                )
+                                            }
+                                        />
+                                    )}
+                                </Box>
+                            )}
                             {/* This section allows the teacher to set the maximum score for the assignment.*/}
                             <Box
                                 aria-label={'maxScore'}
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 5c5ab068..5507032e 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -2,12 +2,12 @@ import { Header } from '../../components/Header.tsx'
 import { Button } from '../../components/CustomComponents.tsx'
 import {
     Box,
+    CircularProgress,
     Grid,
     IconButton,
     MenuItem,
     Select,
     SelectChangeEvent,
-    CircularProgress,
     Skeleton,
     Stack,
     Table,
@@ -31,7 +31,7 @@ import { Add } from '@mui/icons-material'
 import ClearIcon from '@mui/icons-material/Clear'
 import SaveIcon from '@mui/icons-material/Save'
 import WarningPopup from '../../components/WarningPopup.tsx'
-import { User } from '../subjectsPage/AddChangeSubjectPage.tsx' 
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 // group interface
 export interface Group {
@@ -40,6 +40,8 @@ export interface Group {
     project: number
 }
 
+//FIXME: groupsize should not be signed after creation of project, refactor!
+
 // Typescript typing for hashmap
 type Hashmap = Map<number, string>
 
@@ -414,149 +416,126 @@ export function GroupsPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-                        <Box
-                            component={'form'}
-                            onSubmit={handleSave}
-                            sx={{
-                                backgroundColor: 'background.default',
-                                height: '100%',
-                                width: '100%',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-start',
-                            }}
-                        >
-                            <Header
-                                variant={'default'}
-                                title={loading ? '' : `${projectName}: ${t('groups')}`}
-                            ></Header>
-                            <Stack
-                                marginTop={12}
-                                direction={'column'}
-                                spacing={4}
+                        <>
+                            <Box
+                                component={'form'}
+                                onSubmit={handleSave}
                                 sx={{
-                                    width: '100%',
-                                    height: '70 %',
                                     backgroundColor: 'background.default',
+                                    height: '100%',
+                                    width: '100%',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'flex-start',
                                 }}
                             >
-                                <Box>
-                                    <Box
-                                        sx={{
-                                            gap: 5,
-                                            padding: '20px',
-                                            backgroundColor: 'background.default',
-                                        }}
-                                    >
-                                        <Typography
-                                            variant="h5"
-                                            sx={{ fontWeight: 'bold' }}
-                                            color="text.primary"
+                                <Header
+                                    variant={'default'}
+                                    title={
+                                        loading
+                                            ? ''
+                                            : `${projectName}: ${t('groups')}`
+                                    }
+                                ></Header>
+                                <Stack
+                                    marginTop={12}
+                                    direction={'column'}
+                                    spacing={4}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70 %',
+                                        backgroundColor: 'background.default',
+                                    }}
+                                >
+                                    <Box>
+                                        <Box
+                                            sx={{
+                                                gap: 5,
+                                                padding: '20px',
+                                                backgroundColor:
+                                                    'background.default',
+                                            }}
                                         >
-                                            {t('groups')}
-                                        </Typography>
-                                        <Stack direction={'row'}>
-                                            <Grid container spacing={2} alignItems="center">
-                                                <Grid item>
-                                                    <Typography
-                                                        color="text.primary"
-                                                        fontWeight={'bold'}
-                                                    >
-                                                        {t('amount')} {t('members')}/
-                                                        {t('group')}
-                                                    </Typography>
-                                                </Grid>
-                                                <Grid item minWidth={3}>
-                                                    {loading ? (
-                                                        <Skeleton
-                                                            variant={'text'}
-                                                            width={80}
-                                                            height={80}
-                                                        />
-                                                    ) : (
-                                                        <TextField
-                                                            // The teacher can specify the maximum group size
-                                                            // If a number smaller than 1 is entered, the input will be ignored
-                                                            aria-label={'maxGroupSize'}
-                                                            value={newGroupSize}
-                                                            type={'number'}
-                                                            onChange={(newValue) => {
-                                                                if (
-                                                                    parseInt(
-                                                                        newValue.target
-                                                                            .value
-                                                                    ) < 1
-                                                                )
-                                                                    return
-                                                                handleGroupSizeChange(
-                                                                    parseInt(
-                                                                        newValue.target
-                                                                            .value
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                                color="text.primary"
+                                            >
+                                                {t('groups')}
+                                            </Typography>
+                                            <Stack direction={'row'}>
+                                                <Grid
+                                                    container
+                                                    spacing={2}
+                                                    alignItems="center"
+                                                >
+                                                    <Grid item>
+                                                        <Typography
+                                                            color="text.primary"
+                                                            fontWeight={'bold'}
+                                                        >
+                                                            {t('amount')}{' '}
+                                                            {t('members')}/
+                                                            {t('group')}
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item minWidth={3}>
+                                                        {loading ? (
+                                                            <Skeleton
+                                                                variant={'text'}
+                                                                width={80}
+                                                                height={80}
+                                                            />
+                                                        ) : (
+                                                            <TextField
+                                                                // The teacher can specify the maximum group size
+                                                                // If a number smaller than 1 is entered, the input will be ignored
+                                                                aria-label={
+                                                                    'maxGroupSize'
+                                                                }
+                                                                value={
+                                                                    newGroupSize
+                                                                }
+                                                                type={'number'}
+                                                                onChange={(
+                                                                    newValue
+                                                                ) => {
+                                                                    if (
+                                                                        parseInt(
+                                                                            newValue
+                                                                                .target
+                                                                                .value
+                                                                        ) < 1
                                                                     )
-                                                                )
-                                                            }}
-                                                            variant="outlined"
-                                                            sx={{ width: 80 }}
-                                                        />
-                                                    )}
+                                                                        return
+                                                                    handleGroupSizeChange(
+                                                                        parseInt(
+                                                                            newValue
+                                                                                .target
+                                                                                .value
+                                                                        )
+                                                                    )
+                                                                }}
+                                                                variant="outlined"
+                                                                sx={{
+                                                                    width: 80,
+                                                                }}
+                                                            />
+                                                        )}
+                                                    </Grid>
                                                 </Grid>
-                                            </Grid>
-                                        </Stack>
-                                        <Stack
-                                            direction="row"
-                                            alignItems="center"
-                                            spacing={10}
-                                            marginY={6}
-                                        >
-                                            {loading ? (
-                                                <Skeleton
-                                                    variant={'rectangular'}
-                                                    width={220}
-                                                    height={45}
-                                                    sx={{
-                                                        backgroundColor: 'secondary.main',
-                                                        borderRadius: 1,
-                                                    }}
-                                                />
-                                            ) : (
-                                                <Button
-                                                    // If a teacher doesn't want to create groups manually,
-                                                    // they can randomize the groups with a single click.variant={'contained'}
-                                                    disableElevation
-                                                    sx={{
-                                                        backgroundColor: 'secondary.main',
-                                                        padding: 1,
-                                                    }}
-                                                    onClick={randomGroups}
-                                                >
-                                                    <Typography
-                                                        color="text.primary"
-                                                        fontWeight={'bold'}
-                                                    >
-                                                        {t('random')} {t('groups')}
-                                                    </Typography>
-                                                </Button>
-                                            )}
-                                            <Box
-                                                // If the students are allowed to choose their own groups,
-                                                // the teacher can enable this feature with a switch.
-                                                display={'flex'}
-                                                flexDirection={'row'}
-                                                alignItems={'center'}
-                                                gap={2}
+                                            </Stack>
+                                            <Stack
+                                                direction="row"
+                                                alignItems="center"
+                                                spacing={10}
+                                                marginY={6}
                                             >
-                                                <Typography
-                                                    color="text.primary"
-                                                    fontWeight={'bold'}
-                                                >
-                                                    {t('students_choose')}
-                                                </Typography>
                                                 {loading ? (
                                                     <Skeleton
                                                         variant={'rectangular'}
-                                                        width={40}
-                                                        height={30}
+                                                        width={220}
+                                                        height={45}
                                                         sx={{
                                                             backgroundColor:
                                                                 'secondary.main',
@@ -564,212 +543,132 @@ export function GroupsPage() {
                                                         }}
                                                     />
                                                 ) : (
-                                                    <Switch />
+                                                    <Button
+                                                        // If a teacher doesn't want to create groups manually,
+                                                        // they can randomize the groups with a single click.variant={'contained'}
+                                                        disableElevation
+                                                        sx={{
+                                                            backgroundColor:
+                                                                'secondary.main',
+                                                            padding: 1,
+                                                        }}
+                                                        onClick={randomGroups}
+                                                    >
+                                                        <Typography
+                                                            color="text.primary"
+                                                            fontWeight={'bold'}
+                                                        >
+                                                            {t('random')}{' '}
+                                                            {t('groups')}
+                                                        </Typography>
+                                                    </Button>
                                                 )}
-                                            </Box>
-                                        </Stack>
-                                    </Box>
+                                                <Box
+                                                    // If the students are allowed to choose their own groups,
+                                                    // the teacher can enable this feature with a switch.
+                                                    display={'flex'}
+                                                    flexDirection={'row'}
+                                                    alignItems={'center'}
+                                                    gap={2}
+                                                >
+                                                    <Typography
+                                                        color="text.primary"
+                                                        fontWeight={'bold'}
+                                                    >
+                                                        {t('students_choose')}
+                                                    </Typography>
+                                                    {loading ? (
+                                                        <Skeleton
+                                                            variant={
+                                                                'rectangular'
+                                                            }
+                                                            width={40}
+                                                            height={30}
+                                                            sx={{
+                                                                backgroundColor:
+                                                                    'secondary.main',
+                                                                borderRadius: 1,
+                                                            }}
+                                                        />
+                                                    ) : (
+                                                        <Switch />
+                                                    )}
+                                                </Box>
+                                            </Stack>
+                                        </Box>
 
-                                    <Box
-                                        sx={{
-                                            marginTop: -3,
-                                            padding: '20px',
-                                            backgroundColor: 'background.default',
-                                        }}
-                                    >
                                         <Box
-                                            aria-label={'group_assigner'}
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            maxWidth={500}
-                                            justifyContent={'space-between'}
-                                            alignItems={'flex-start'}
+                                            sx={{
+                                                marginTop: -3,
+                                                padding: '20px',
+                                                backgroundColor:
+                                                    'background.default',
+                                            }}
                                         >
-                                            <TableContainer sx={{ maxHeight: '55vh' }}>
-                                                <Table
-                                                    // The teacher can see the available students
-                                                    // on the left side of the screen.
-                                                    // They are displayed in a table with a sticky header.aria-label={'studentTable'}
-                                                    stickyHeader
-                                                >
-                                                    <TableHead>
-                                                        <TableRow>
-                                                            <TableCell>
-                                                                <Typography
-                                                                    fontWeight={'bold'}
-                                                                >
-                                                                    {t('students')}
-                                                                </Typography>
-                                                            </TableCell>
-                                                        </TableRow>
-                                                    </TableHead>
-                                                    <TableBody>
-                                                        {loading ? (
-                                                            [...Array(3)].map(
-                                                                (_, index) => (
-                                                                    <Skeleton
-                                                                        key={index}
-                                                                        variant="text"
-                                                                        width={'100%'}
-                                                                        height={50}
-                                                                        sx={{ margin: 0 }}
-                                                                    />
-                                                                )
-                                                            )
-                                                        ) : (
-                                                            <>
-                                                                {availableStudents.map(
-                                                                    (student) => (
-                                                                        <TableRow
-                                                                            key={student}
-                                                                        >
-                                                                            <TableCell
-                                                                                sx={{
-                                                                                    height: 20,
-                                                                                    display:
-                                                                                        'flex',
-                                                                                    flexDirection:
-                                                                                        'row',
-                                                                                    justifyContent:
-                                                                                        'space-between',
-                                                                                    alignItems:
-                                                                                        'center',
-                                                                                }}
-                                                                            >
-                                                                                {studentNames.get(
-                                                                                    student
-                                                                                ) === ''
-                                                                                    ? student
-                                                                                    : studentNames.get(
-                                                                                        student
-                                                                                    )}
-                                                                                <IconButton // people can be added to groups by clicking on the plus icon
-                                                                                    disabled={
-                                                                                        newGroups[
-                                                                                            parseInt(
-                                                                                                currentGroup
-                                                                                            )
-                                                                                        ]
-                                                                                            ? newGroups[
-                                                                                                parseInt(
-                                                                                                    currentGroup
-                                                                                                )
-                                                                                            ]
-                                                                                                .studenten
-                                                                                                .length >=
-                                                                                            newGroupSize
-                                                                                            : true
-                                                                                    }
-                                                                                    onClick={() => {
-                                                                                        assignStudent(
-                                                                                            student,
-                                                                                            parseInt(
-                                                                                                currentGroup
-                                                                                            )
-                                                                                        )
-                                                                                    }}
-                                                                                >
-                                                                                    <Add />
-                                                                                </IconButton>
-                                                                            </TableCell>
-                                                                        </TableRow>
-                                                                    )
-                                                                )}
-                                                            </>
-                                                        )}
-                                                    </TableBody>
-                                                </Table>
-                                            </TableContainer>
-                                            <TableContainer sx={{ maxHeight: '55vh' }}>
-                                                <Table
-                                                    // The teacher can see the students in the specified group
-                                                    // on the right side of the screen.
-                                                    aria-label={'groupTable'}
-                                                    stickyHeader
-                                                    sx={{ maxHeight: '5    0svh' }}
+                                            <Box
+                                                aria-label={'group_assigner'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                maxWidth={500}
+                                                justifyContent={'space-between'}
+                                                alignItems={'flex-start'}
+                                            >
+                                                <TableContainer
+                                                    sx={{ maxHeight: '55vh' }}
                                                 >
-                                                    <TableHead>
-                                                        <TableRow>
-                                                            <TableCell>
-                                                                <Typography
-                                                                    fontWeight={'bold'}
-                                                                >
-                                                                    {t('group')}
-                                                                </Typography>
-                                                                {loading ? (
-                                                                    <Skeleton
-                                                                        variant="text"
-                                                                        width={'80%'}
-                                                                        height={70}
-                                                                        sx={{ margin: 0 }}
-                                                                    />
-                                                                ) : (
-                                                                    <>
-                                                                        <Select
-                                                                            // The teacher can select a group from the dropdown menu
-                                                                            aria-label={
-                                                                                'groupSelect'
+                                                    <Table
+                                                        // The teacher can see the available students
+                                                        // on the left side of the screen.
+                                                        // They are displayed in a table with a sticky header.aria-label={'studentTable'}
+                                                        stickyHeader
+                                                    >
+                                                        <TableHead>
+                                                            <TableRow>
+                                                                <TableCell>
+                                                                    <Typography
+                                                                        fontWeight={
+                                                                            'bold'
+                                                                        }
+                                                                    >
+                                                                        {t(
+                                                                            'students'
+                                                                        )}
+                                                                    </Typography>
+                                                                </TableCell>
+                                                            </TableRow>
+                                                        </TableHead>
+                                                        <TableBody>
+                                                            {loading ? (
+                                                                [
+                                                                    ...Array(3),
+                                                                ].map(
+                                                                    (
+                                                                        _,
+                                                                        index
+                                                                    ) => (
+                                                                        <Skeleton
+                                                                            key={
+                                                                                index
                                                                             }
-                                                                            value={
-                                                                                currentGroup
+                                                                            variant="text"
+                                                                            width={
+                                                                                '100%'
+                                                                            }
+                                                                            height={
+                                                                                50
                                                                             }
                                                                             sx={{
-                                                                                width: 200,
+                                                                                margin: 0,
                                                                             }}
-                                                                            onChange={
-                                                                                handleCurrentGroupChange
-                                                                            }
-                                                                            label={t(
-                                                                                'group'
-                                                                            )}
-                                                                        >
-                                                                            {newGroups.map(
-                                                                                (
-                                                                                    _,
-                                                                                    index
-                                                                                ) => (
-                                                                                    <MenuItem
-                                                                                        key={index.toString()}
-                                                                                        value={index.toString()}
-                                                                                    >
-                                                                                        {t(
-                                                                                            'group'
-                                                                                        ) +
-                                                                                            (index +
-                                                                                                1)}
-                                                                                    </MenuItem>
-                                                                                )
-                                                                            )}
-                                                                        </Select>
-                                                                    </>
-                                                                )}
-                                                            </TableCell>
-                                                        </TableRow>
-                                                    </TableHead>
-                                                    <TableBody>
-                                                        {loading ? (
-                                                            [...Array(3)].map(
-                                                                (_, index) => (
-                                                                    <Skeleton
-                                                                        key={index}
-                                                                        variant="text"
-                                                                        width={'100%'}
-                                                                        height={50}
-                                                                        sx={{ margin: 0 }}
-                                                                    />
+                                                                        />
+                                                                    )
                                                                 )
-                                                            )
-                                                        ) : (
-                                                            <>
-                                                                {newGroups[
-                                                                    parseInt(currentGroup)
-                                                                ] &&
-                                                                    newGroups[
-                                                                        parseInt(
-                                                                            currentGroup
-                                                                        )
-                                                                    ].studenten.map(
-                                                                        (student) => (
+                                                            ) : (
+                                                                <>
+                                                                    {availableStudents.map(
+                                                                        (
+                                                                            student
+                                                                        ) => (
                                                                             <TableRow
                                                                                 key={
                                                                                     student
@@ -790,10 +689,31 @@ export function GroupsPage() {
                                                                                 >
                                                                                     {studentNames.get(
                                                                                         student
-                                                                                    )}
-                                                                                    <IconButton // The teacher can remove students from the group by clicking on the cross icon
+                                                                                    ) ===
+                                                                                    ''
+                                                                                        ? student
+                                                                                        : studentNames.get(
+                                                                                              student
+                                                                                          )}
+                                                                                    <IconButton // people can be added to groups by clicking on the plus icon
+                                                                                        disabled={
+                                                                                            newGroups[
+                                                                                                parseInt(
+                                                                                                    currentGroup
+                                                                                                )
+                                                                                            ]
+                                                                                                ? newGroups[
+                                                                                                      parseInt(
+                                                                                                          currentGroup
+                                                                                                      )
+                                                                                                  ]
+                                                                                                      .studenten
+                                                                                                      .length >=
+                                                                                                  newGroupSize
+                                                                                                : true
+                                                                                        }
                                                                                         onClick={() => {
-                                                                                            removeStudent(
+                                                                                            assignStudent(
                                                                                                 student,
                                                                                                 parseInt(
                                                                                                     currentGroup
@@ -801,97 +721,286 @@ export function GroupsPage() {
                                                                                             )
                                                                                         }}
                                                                                     >
-                                                                                        <CancelIcon />
+                                                                                        <Add />
                                                                                     </IconButton>
                                                                                 </TableCell>
                                                                             </TableRow>
                                                                         )
                                                                     )}
-                                                            </>
-                                                        )}
-                                                    </TableBody>
-                                                </Table>
-                                            </TableContainer>
+                                                                </>
+                                                            )}
+                                                        </TableBody>
+                                                    </Table>
+                                                </TableContainer>
+                                                <TableContainer
+                                                    sx={{ maxHeight: '55vh' }}
+                                                >
+                                                    <Table
+                                                        // The teacher can see the students in the specified group
+                                                        // on the right side of the screen.
+                                                        aria-label={
+                                                            'groupTable'
+                                                        }
+                                                        stickyHeader
+                                                        sx={{
+                                                            maxHeight:
+                                                                '5    0svh',
+                                                        }}
+                                                    >
+                                                        <TableHead>
+                                                            <TableRow>
+                                                                <TableCell>
+                                                                    <Typography
+                                                                        fontWeight={
+                                                                            'bold'
+                                                                        }
+                                                                    >
+                                                                        {t(
+                                                                            'group'
+                                                                        )}
+                                                                    </Typography>
+                                                                    {loading ? (
+                                                                        <Skeleton
+                                                                            variant="text"
+                                                                            width={
+                                                                                '80%'
+                                                                            }
+                                                                            height={
+                                                                                70
+                                                                            }
+                                                                            sx={{
+                                                                                margin: 0,
+                                                                            }}
+                                                                        />
+                                                                    ) : (
+                                                                        <>
+                                                                            <Select
+                                                                                // The teacher can select a group from the dropdown menu
+                                                                                aria-label={
+                                                                                    'groupSelect'
+                                                                                }
+                                                                                value={
+                                                                                    currentGroup
+                                                                                }
+                                                                                sx={{
+                                                                                    width: 200,
+                                                                                }}
+                                                                                onChange={
+                                                                                    handleCurrentGroupChange
+                                                                                }
+                                                                                label={t(
+                                                                                    'group'
+                                                                                )}
+                                                                            >
+                                                                                {newGroups.map(
+                                                                                    (
+                                                                                        _,
+                                                                                        index
+                                                                                    ) => (
+                                                                                        <MenuItem
+                                                                                            key={index.toString()}
+                                                                                            value={index.toString()}
+                                                                                        >
+                                                                                            {t(
+                                                                                                'group'
+                                                                                            ) +
+                                                                                                (index +
+                                                                                                    1)}
+                                                                                        </MenuItem>
+                                                                                    )
+                                                                                )}
+                                                                            </Select>
+                                                                        </>
+                                                                    )}
+                                                                </TableCell>
+                                                            </TableRow>
+                                                        </TableHead>
+                                                        <TableBody>
+                                                            {loading ? (
+                                                                [
+                                                                    ...Array(3),
+                                                                ].map(
+                                                                    (
+                                                                        _,
+                                                                        index
+                                                                    ) => (
+                                                                        <Skeleton
+                                                                            key={
+                                                                                index
+                                                                            }
+                                                                            variant="text"
+                                                                            width={
+                                                                                '100%'
+                                                                            }
+                                                                            height={
+                                                                                50
+                                                                            }
+                                                                            sx={{
+                                                                                margin: 0,
+                                                                            }}
+                                                                        />
+                                                                    )
+                                                                )
+                                                            ) : (
+                                                                <>
+                                                                    {newGroups[
+                                                                        parseInt(
+                                                                            currentGroup
+                                                                        )
+                                                                    ] &&
+                                                                        newGroups[
+                                                                            parseInt(
+                                                                                currentGroup
+                                                                            )
+                                                                        ].studenten.map(
+                                                                            (
+                                                                                student
+                                                                            ) => (
+                                                                                <TableRow
+                                                                                    key={
+                                                                                        student
+                                                                                    }
+                                                                                >
+                                                                                    <TableCell
+                                                                                        sx={{
+                                                                                            height: 20,
+                                                                                            display:
+                                                                                                'flex',
+                                                                                            flexDirection:
+                                                                                                'row',
+                                                                                            justifyContent:
+                                                                                                'space-between',
+                                                                                            alignItems:
+                                                                                                'center',
+                                                                                        }}
+                                                                                    >
+                                                                                        {studentNames.get(
+                                                                                            student
+                                                                                        )}
+                                                                                        <IconButton // The teacher can remove students from the group by clicking on the cross icon
+                                                                                            onClick={() => {
+                                                                                                removeStudent(
+                                                                                                    student,
+                                                                                                    parseInt(
+                                                                                                        currentGroup
+                                                                                                    )
+                                                                                                )
+                                                                                            }}
+                                                                                        >
+                                                                                            <CancelIcon />
+                                                                                        </IconButton>
+                                                                                    </TableCell>
+                                                                                </TableRow>
+                                                                            )
+                                                                        )}
+                                                                </>
+                                                            )}
+                                                        </TableBody>
+                                                    </Table>
+                                                </TableContainer>
+                                            </Box>
                                         </Box>
                                     </Box>
-                                </Box>
-                            </Stack>
-                            <Box
-                                aria-label={'save/cancel'}
-                                sx={{
-                                    position: 'fixed',
-                                    bottom: 0,
-                                    width: '100%',
-                                    alignItems: 'flex-end',
-                                    gap: 5,
-                                    paddingRight: 10,
-                                }}
-                            >
-                                <DialogActions>
-                                    <Box pr={5} pb={5} display={'flex'} gap={1}>
-                                        <Tooltip title={t('cancel')}>
-                                            <IconButton
-                                                // The teacher can cancel the group changes by clicking on the cross icon.
-                                                onClick={handleCancel}
-                                                sx={{
-                                                    backgroundColor: 'secondary.main',
-                                                    borderRadius: 2,
-                                                }}
-                                            >
-                                                <ClearIcon fontSize={'medium'} />
-                                            </IconButton>
-                                        </Tooltip>
-                                        <Tooltip title={t('submit')}>
-                                            {loading ? (
-                                                <Skeleton
-                                                    variant={'rectangular'}
-                                                    width={40}
-                                                    height={40}
+                                </Stack>
+                                <Box
+                                    aria-label={'save/cancel'}
+                                    sx={{
+                                        position: 'fixed',
+                                        bottom: 0,
+                                        width: '100%',
+                                        alignItems: 'flex-end',
+                                        gap: 5,
+                                        paddingRight: 10,
+                                    }}
+                                >
+                                    <DialogActions>
+                                        <Box
+                                            pr={5}
+                                            pb={5}
+                                            display={'flex'}
+                                            gap={1}
+                                        >
+                                            <Tooltip title={t('cancel')}>
+                                                <IconButton
+                                                    // The teacher can cancel the group changes by clicking on the cross icon.
+                                                    onClick={handleCancel}
                                                     sx={{
-                                                        backgroundColor: 'primary.main',
+                                                        backgroundColor:
+                                                            'secondary.main',
                                                         borderRadius: 2,
                                                     }}
-                                                />
-                                            ) : (
-                                                <>
-                                                    <IconButton
-                                                        // The teacher can save the group changes by clicking on the save icon.type="submit"
-                                                        aria-label={'submit'}
-                                                        type={'submit'}
+                                                >
+                                                    <ClearIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title={t('submit')}>
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'rectangular'}
+                                                        width={40}
+                                                        height={40}
                                                         sx={{
-                                                            backgroundColor: 'primary.main',
+                                                            backgroundColor:
+                                                                'primary.main',
                                                             borderRadius: 2,
-                                                            color: 'background.default',
-                                                            '&:hover': {
-                                                                backgroundColor:
-                                                                    'secondary.main',
-                                                                color: 'text.primary',
-                                                            },
                                                         }}
-                                                    >
-                                                        <SaveIcon fontSize={'medium'} />
-                                                    </IconButton>
-                                                </>
-                                            )}
-                                        </Tooltip>
-                                    </Box>
-                                </DialogActions>
+                                                    />
+                                                ) : (
+                                                    <>
+                                                        <IconButton
+                                                            // The teacher can save the group changes by clicking on the save icon.type="submit"
+                                                            aria-label={
+                                                                'submit'
+                                                            }
+                                                            type={'submit'}
+                                                            sx={{
+                                                                backgroundColor:
+                                                                    'primary.main',
+                                                                borderRadius: 2,
+                                                                color: 'background.default',
+                                                                '&:hover': {
+                                                                    backgroundColor:
+                                                                        'secondary.main',
+                                                                    color: 'text.primary',
+                                                                },
+                                                            }}
+                                                        >
+                                                            <SaveIcon
+                                                                fontSize={
+                                                                    'medium'
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    </>
+                                                )}
+                                            </Tooltip>
+                                        </Box>
+                                    </DialogActions>
+                                </Box>
                             </Box>
-                        </Box>
-                        {/* Warning popup for when the user wants to confirm the group changes */}
-                        <WarningPopup
-                            title={t('change_groups')}
-                            content={t('cant_be_undone')}
-                            buttonName={t('confirm')}
-                            open={confirmOpen}
-                            handleClose={handleCloseConfirm}
-                            doAction={confirmSave}
-                        />
-                    </>
-                ):(
-                    navigate('/course/' + courseId + '/assignment/' + assignmentId + '/groups/choose')
-                )}
-            </>
-        )} 
-    </>
-)}
+                            {/* Warning popup for when the user wants to confirm the group changes */}
+                            <WarningPopup
+                                title={t('change_groups')}
+                                content={t('cant_be_undone')}
+                                buttonName={t('confirm')}
+                                open={confirmOpen}
+                                handleClose={handleCloseConfirm}
+                                doAction={confirmSave}
+                            />
+                        </>
+                    ) : (
+                        navigate(
+                            '/course/' +
+                                courseId +
+                                '/assignment/' +
+                                assignmentId +
+                                '/groups/choose'
+                        )
+                    )}
+                </>
+            )}
+        </>
+    )
+}
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index c16f12a7..598e9b66 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -8,7 +8,7 @@ import ErrorPage from './pages/ErrorPage.tsx'
 import MainPage from './pages/mainPage/MainPage.tsx'
 import { GroupsPage } from './pages/groupsPage/GroupsPage.tsx'
 import { AssignmentPage } from './pages/assignmentPage/AssignmentPage.tsx'
-import {ChooseGroup} from "./pages/groupsPage/ChooseGroup.tsx";
+import { ChooseGroup } from './pages/groupsPage/ChooseGroup.tsx'
 
 //TODO: add change/add course page when implemented
 const router = createBrowserRouter([

From b7b7fee47cba49e2884b4883a81dc33a5d49dd40 Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 13:37:21 +0200
Subject: [PATCH 047/145] fix indiening save functie + update serializer testen

---
 api/models/indiening.py                 | 41 +++++++++++++++----------
 api/serializers/project.py              |  2 +-
 api/tests/factories/indiening.py        |  1 -
 api/tests/factories/project.py          |  1 +
 api/tests/serializers/test_indiening.py | 13 ++++----
 api/tests/serializers/test_project.py   |  9 ++++++
 6 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/api/models/indiening.py b/api/models/indiening.py
index ba31c65e..45f327d2 100644
--- a/api/models/indiening.py
+++ b/api/models/indiening.py
@@ -1,4 +1,4 @@
-from django.db import models
+from django.db import IntegrityError, models
 from django.db.models.signals import post_save
 from django.dispatch import receiver
 from api.docker.python_entrypoint import run_tests_on
@@ -66,22 +66,31 @@ class Indiening(models.Model):
     def __str__(self):
         return str(self.indiening_id)
 
-    def save(self, *args, **kwargs):
-        # First save to generate the indiening_id if it doesn't exist
-        if not self.indiening_id:
-            super(Indiening, self).save(*args, **kwargs)
+def save(self, *args, **kwargs):
+    # Loop until the instance is saved successfully
+    while True:
+        try:
+            # First save to generate the indiening_id if it doesn't exist
+            if not self.indiening_id:
+                super(Indiening, self).save(*args, **kwargs)
+
+            # Update the bestand path if it's still using the temporary path
+            if "temp" in self.bestand.name:
+                old_file = self.bestand
+                new_path = self.bestand.name.replace(
+                    "temp", f"indiening_{self.indiening_id}"
+                )
+                default_storage.save(new_path, ContentFile(old_file.read()))
+                old_file.storage.delete(old_file.name)
+                self.bestand.name = new_path
 
-        # Update the bestand path if it's still using the temporary path
-        if "temp" in self.bestand.name:
-            old_file = self.bestand
-            new_path = self.bestand.name.replace(
-                "temp", f"indiening_{self.indiening_id}"
-            )
-            default_storage.save(new_path, ContentFile(old_file.read()))
-            old_file.storage.delete(old_file.name)
-            self.bestand.name = new_path
-
-        super(Indiening, self).save(*args, **kwargs)
+            super(Indiening, self).save(*args, **kwargs)
+            # If the instance was saved successfully, break the loop
+            break
+        except IntegrityError:
+            # If an IntegrityError was raised, the indiening_id was a duplicate,
+            # so we'll try again with a new one
+            pass
 
 
 def run_tests_async(instance):
diff --git a/api/serializers/project.py b/api/serializers/project.py
index 4966a7ce..46a2f09e 100644
--- a/api/serializers/project.py
+++ b/api/serializers/project.py
@@ -35,6 +35,7 @@ class Meta:
             "deadline",
             "extra_deadline",
             "max_score",
+            "aantal_groepen",
             "max_groep_grootte",
             "student_groep",
             "zichtbaar",
@@ -75,7 +76,6 @@ def update(self, instance, validated_data):
             Project: Het bijgewerkte project.
         """
         validated_data.pop("max_groep_grootte")
-        validated_data.pop("project_groep")
         validated_data.pop("aantal_groepen")
 
         deadline = validated_data.pop("deadline", instance.deadline)
diff --git a/api/tests/factories/indiening.py b/api/tests/factories/indiening.py
index e1fc00be..87999569 100644
--- a/api/tests/factories/indiening.py
+++ b/api/tests/factories/indiening.py
@@ -15,7 +15,6 @@ class IndieningFactory(DjangoModelFactory):
     class Meta:
         model = Indiening
 
-    indiening_id = factory.Sequence(lambda n: n+1000)
     groep = SubFactory(GroepFactory)
     tijdstip = factory.LazyFunction(
         lambda: timezone.make_aware(
diff --git a/api/tests/factories/project.py b/api/tests/factories/project.py
index ec5e5692..21c8af50 100644
--- a/api/tests/factories/project.py
+++ b/api/tests/factories/project.py
@@ -28,6 +28,7 @@ class Meta:
         )
     )
     max_score = factory.Faker("random_int", min=10, max=100)
+    aantal_groepen = factory.Faker("random_int", min=2, max=100)
     max_groep_grootte = factory.Faker("random_int", min=1, max=5)
     zichtbaar = factory.Faker("boolean")
     gearchiveerd = factory.Faker("boolean")
diff --git a/api/tests/serializers/test_indiening.py b/api/tests/serializers/test_indiening.py
index 84c0bedc..bbba3e56 100644
--- a/api/tests/serializers/test_indiening.py
+++ b/api/tests/serializers/test_indiening.py
@@ -7,12 +7,10 @@
 
 
 class IndieningSerializerTest(TestCase):
-    def setUp(self):
-        self.indiening = IndieningFactory.create()
-        self.serializer = IndieningSerializer(instance=self.indiening)
-        self.restrictie = RestrictieFactory(project=self.indiening.groep.project)
 
     def test_indiening_serializer_fields(self):
+        indiening = IndieningFactory.create()
+        self.serializer = IndieningSerializer(instance=indiening)
         data = self.serializer.data
         self.assertEqual(
             set(data.keys()),
@@ -39,10 +37,11 @@ def test_indiening_serializer_create(self):
         self.assertEqual(indiening.groep, groep)
 
     def test_indiening_serializer_update(self):
-        new_data = {"groep": self.indiening.groep.groep_id}
+        indiening = IndieningFactory.create()
+        new_data = {"groep": indiening.groep.groep_id}
         serializer = IndieningSerializer(
-            instance=self.indiening, data=new_data, partial=True
+            instance=indiening, data=new_data, partial=True
         )
         self.assertTrue(serializer.is_valid())
         indiening = serializer.save()
-        self.assertEqual(indiening.groep, self.indiening.groep)
+        self.assertEqual(indiening.groep, indiening.groep)
diff --git a/api/tests/serializers/test_project.py b/api/tests/serializers/test_project.py
index c5488b60..85b5aea7 100644
--- a/api/tests/serializers/test_project.py
+++ b/api/tests/serializers/test_project.py
@@ -26,6 +26,7 @@ def test_contains_expected_fields(self):
                 "deadline",
                 "extra_deadline",
                 "max_score",
+                "aantal_groepen",
                 "max_groep_grootte",
                 "student_groep",
                 "zichtbaar",
@@ -86,6 +87,7 @@ def test_validation_for_blank_items(self):
                 "deadline": "",
                 "extra_deadline": "",
                 "max_score": "",
+                'aantal_groepen': "",
                 "max_groep_grootte": "",
                 "zichtbaar": "",
                 "gearchiveerd": "",
@@ -103,6 +105,7 @@ def test_create(self):
             "deadline": self.serializer.data["deadline"],
             "extra_deadline": self.serializer.data["extra_deadline"],
             "max_score": 20,
+            'aantal_groepen': 50,
             "max_groep_grootte": 1,
             "zichtbaar": True,
             "gearchiveerd": False,
@@ -122,6 +125,7 @@ def test_create_no_deadline(self):
             "deadline": None,
             "extra_deadline": None,
             "max_score": 20,
+            'aantal_groepen': 50,
             "max_groep_grootte": 1,
             "zichtbaar": True,
             "gearchiveerd": False,
@@ -141,6 +145,7 @@ def test_create_invalid_deadline(self):
             "deadline": datetime.now() - timedelta(days=1),
             "extra_deadline": self.serializer.data["extra_deadline"],
             "max_score": 20,
+            'aantal_groepen': 50,
             "max_groep_grootte": 1,
             "zichtbaar": True,
             "gearchiveerd": False,
@@ -159,6 +164,7 @@ def test_create_invalid_extra_deadline(self):
             "deadline": self.serializer.data["deadline"],
             "extra_deadline": datetime.now() - timedelta(days=1),
             "max_score": 20,
+            'aantal_groepen': 50,
             "max_groep_grootte": 1,
             "zichtbaar": True,
             "gearchiveerd": False,
@@ -176,6 +182,7 @@ def test_update(self):
             "deadline": self.serializer.data["deadline"],
             "extra_deadline": self.serializer.data["extra_deadline"],
             "max_score": 20,
+            "aantal_groepen": 50,
             "max_groep_grootte": 1,
             "zichtbaar": True,
             "gearchiveerd": False,
@@ -193,3 +200,5 @@ def test_update_invalid_vak(self):
         serializer = ProjectSerializer(instance=self.project, data=data, partial=True)
         self.assertTrue(serializer.is_valid())
         self.assertRaises(ValidationError, serializer.save, raise_exception=True)
+    
+    # test voor validatie aantal groepen?

From 1a7cc496af362e90c72495b82a490e028884903f Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 15:48:29 +0200
Subject: [PATCH 048/145] update views testen

---
 api/models/indiening.py                 |  2 +-
 api/serializers/project.py              |  4 ++--
 api/tests/serializers/test_indiening.py | 16 ++++++++++++++--
 api/tests/views/test_indiening.py       |  5 ++---
 api/tests/views/test_project.py         |  3 ++-
 api/views/indiening.py                  |  2 --
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/api/models/indiening.py b/api/models/indiening.py
index 45f327d2..b131a965 100644
--- a/api/models/indiening.py
+++ b/api/models/indiening.py
@@ -58,7 +58,7 @@ class Indiening(models.Model):
     indiening_id = models.AutoField(primary_key=True)
     groep = models.ForeignKey("Groep", on_delete=models.CASCADE)
     tijdstip = models.DateTimeField(auto_now_add=True)
-    bestand = models.FileField(upload_to=upload_to, default="")
+    bestand = models.FileField(upload_to=upload_to)
     status = models.IntegerField(default=0, choices=STATUS_CHOICES)
     result = models.TextField(default="", blank=True)
     artefacten = models.FileField(blank=True)
diff --git a/api/serializers/project.py b/api/serializers/project.py
index 46a2f09e..3262b10a 100644
--- a/api/serializers/project.py
+++ b/api/serializers/project.py
@@ -75,8 +75,8 @@ def update(self, instance, validated_data):
         Returns:
             Project: Het bijgewerkte project.
         """
-        validated_data.pop("max_groep_grootte")
-        validated_data.pop("aantal_groepen")
+        validated_data.pop("max_groep_grootte", instance.max_groep_grootte)
+        validated_data.pop("aantal_groepen", instance.aantal_groepen)
 
         deadline = validated_data.pop("deadline", instance.deadline)
         extra_deadline = validated_data.pop("extra_deadline", instance.extra_deadline)
diff --git a/api/tests/serializers/test_indiening.py b/api/tests/serializers/test_indiening.py
index bbba3e56..301b493f 100644
--- a/api/tests/serializers/test_indiening.py
+++ b/api/tests/serializers/test_indiening.py
@@ -30,12 +30,23 @@ def test_indiening_serializer_fields(self):
 
     def test_indiening_serializer_create(self):
         groep = GroepFactory.create()
-        data = {"groep": groep.groep_id}
+        data = {"groep": groep.groep_id, "bestand": SimpleUploadedFile("bestand.txt", b"bestand_content")}
         serializer = IndieningSerializer(data=data)
         self.assertTrue(serializer.is_valid())
         indiening = serializer.save()
         self.assertEqual(indiening.groep, groep)
-
+    
+    def test_indiening_serializer_no_file(self):
+        groep = GroepFactory.create()
+        data = {"groep": groep.groep_id}
+        serializer = IndieningSerializer(data=data)
+        self.assertFalse(serializer.is_valid())
+    
+    def test_indiening_serializer_no_groep(self):
+        data = {"bestand": SimpleUploadedFile("bestand.txt", b"bestand_content")}
+        serializer = IndieningSerializer(data=data)
+        self.assertFalse(serializer.is_valid())
+    
     def test_indiening_serializer_update(self):
         indiening = IndieningFactory.create()
         new_data = {"groep": indiening.groep.groep_id}
@@ -45,3 +56,4 @@ def test_indiening_serializer_update(self):
         self.assertTrue(serializer.is_valid())
         indiening = serializer.save()
         self.assertEqual(indiening.groep, indiening.groep)
+        
diff --git a/api/tests/views/test_indiening.py b/api/tests/views/test_indiening.py
index 4ee80763..8296bde9 100644
--- a/api/tests/views/test_indiening.py
+++ b/api/tests/views/test_indiening.py
@@ -34,9 +34,8 @@ def test_indiening_list_post(self):
         data = {
             "groep": self.indiening2.groep_id,
         }
-        file1 = SimpleUploadedFile("file1.txt", b"file_content")
-        file2 = SimpleUploadedFile("file2.txt", b"file_content")
-        data["indiening_bestanden"] = [file1, file2]
+        file = SimpleUploadedFile("file1.txt", b"file_content")
+        data["bestand"] = file
         response = self.client.post(self.url, data, format="multipart")
         self.assertEqual(response.status_code, status.HTTP_201_CREATED)
         response = self.client.get(self.url)
diff --git a/api/tests/views/test_project.py b/api/tests/views/test_project.py
index 0ac75969..29850006 100644
--- a/api/tests/views/test_project.py
+++ b/api/tests/views/test_project.py
@@ -120,7 +120,7 @@ def test_project_detail_get_unauthorized(self):
         self.assertEqual(response.status_code, status.HTTP_403_FORBIDDEN)
 
     def test_invalid_project_detail_get(self):
-        response = self.client.get(reverse("project_detail", kwargs={"id": 69}))
+        response = self.client.get(reverse("project_detail", kwargs={"id": 6969}))
         self.assertEqual(response.status_code, status.HTTP_404_NOT_FOUND)
 
     def test_project_detail_put(self):
@@ -133,6 +133,7 @@ def test_project_detail_put(self):
             "deadline": self.project.deadline,
             "extra_deadline": self.project.extra_deadline,
             "max_score": self.project.max_score,
+            "aantal_groepen": self.project.aantal_groepen,
             "max_groep_grootte": self.project.max_groep_grootte,
             "zichtbaar": self.project.zichtbaar,
             "gearchiveerd": self.project.gearchiveerd,
diff --git a/api/views/indiening.py b/api/views/indiening.py
index f1b446ee..bfb1cda9 100644
--- a/api/views/indiening.py
+++ b/api/views/indiening.py
@@ -155,8 +155,6 @@ def indiening_detail_download_artefacten(request, id, format=None):
         return Response(status=status.HTTP_404_NOT_FOUND)
 
     if has_permissions(request.user):
-        return FileResponse(indiening.artefacten.open(), as_attachment=True)
-    if is_lesgever(request.user):
         try:
             return FileResponse(indiening.artefacten.open(), as_attachment=True)
         except (ValueError, FileNotFoundError):

From e2e2a01b091fa3c02c17f197d53561de501be848 Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 15:56:09 +0200
Subject: [PATCH 049/145] overal waar mogelijk PositiveSmallIntegerField
 gebruikt

---
 api/models/project.py                 | 6 +++---
 api/models/score.py                   | 2 +-
 api/models/vak.py                     | 2 +-
 api/tests/serializers/test_project.py | 2 --
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/api/models/project.py b/api/models/project.py
index 87ced63d..5966a86d 100644
--- a/api/models/project.py
+++ b/api/models/project.py
@@ -57,9 +57,9 @@ class Project(models.Model):
     vak = models.ForeignKey(Vak, on_delete=models.CASCADE)
     deadline = models.DateTimeField(null=True, blank=True)
     extra_deadline = models.DateTimeField(null=True, blank=True)
-    max_score = models.IntegerField(default=20)
-    aantal_groepen = models.IntegerField(default=10)
-    max_groep_grootte = models.IntegerField(default=1)
+    max_score = models.PositiveSmallIntegerField(default=20)
+    aantal_groepen = models.PositiveSmallIntegerField(default=10)
+    max_groep_grootte = models.PositiveSmallIntegerField(default=1)
     student_groep = models.BooleanField(default=False, blank=True)
     zichtbaar = models.BooleanField(default=True, blank=True)
     gearchiveerd = models.BooleanField(default=False, blank=True)
diff --git a/api/models/score.py b/api/models/score.py
index 16618224..ab3166f2 100644
--- a/api/models/score.py
+++ b/api/models/score.py
@@ -18,7 +18,7 @@ class Score(models.Model):
     """
 
     score_id = models.AutoField(primary_key=True)
-    score = models.SmallIntegerField()
+    score = models.PositiveSmallIntegerField()
     indiening = models.ForeignKey("Indiening", on_delete=models.CASCADE)
 
     def __str__(self):
diff --git a/api/models/vak.py b/api/models/vak.py
index f29101a8..8e79d91c 100644
--- a/api/models/vak.py
+++ b/api/models/vak.py
@@ -24,7 +24,7 @@ class Vak(models.Model):
 
     vak_id = models.AutoField(primary_key=True)
     naam = models.CharField(max_length=100)
-    jaartal = models.IntegerField(default=date.today().year)
+    jaartal = models.PositiveSmallIntegerField(default=date.today().year)
     gearchiveerd = models.BooleanField(default=False, blank=True)
     studenten = models.ManyToManyField(
         "Gebruiker", related_name="vak_gebruikers", blank=True
diff --git a/api/tests/serializers/test_project.py b/api/tests/serializers/test_project.py
index 85b5aea7..1cfc3311 100644
--- a/api/tests/serializers/test_project.py
+++ b/api/tests/serializers/test_project.py
@@ -200,5 +200,3 @@ def test_update_invalid_vak(self):
         serializer = ProjectSerializer(instance=self.project, data=data, partial=True)
         self.assertTrue(serializer.is_valid())
         self.assertRaises(ValidationError, serializer.save, raise_exception=True)
-    
-    # test voor validatie aantal groepen?

From c5f9d58bf9bc6e726ce6d0de8047da6fb36261c9 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sat, 18 May 2024 16:08:52 +0200
Subject: [PATCH 050/145] refactor groepen, group grootte is niet aanpasbaar na
 aanmaken groepen

---
 frontend/frontend/src/i18n/en.ts              |   3 +
 frontend/frontend/src/i18n/nl.ts              |   3 +
 .../pages/assignmentPage/AssignmentPage.tsx   |  18 +-
 .../src/pages/groupsPage/GroupsPage.tsx       | 208 ++++--------------
 4 files changed, 61 insertions(+), 171 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index e42add02..4d62824d 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -109,6 +109,9 @@ const english = {
     email: 'email',
     copy_invite: 'Copy invitation link',
     n_of_members: 'Max Amount Of Members',
+    existing_submissions:
+        'This could impact existing submissions. Are you sure?',
+    divide_groups: 'Divide Groups',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 8ff480a3..6db82aa3 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -109,6 +109,9 @@ const dutch = {
     email: 'email',
     copy_invite: 'Kopieer uitnodigingslink',
     n_of_members: 'Max Aantal Leden',
+    existing_submissions:
+        'Dit kan invloed hebben op bestaande indieningen. Weet je het zeker?',
+    divide_groups: 'Verdeel Groepen',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 7f0c136a..f72ed703 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -336,12 +336,20 @@ export function AssignmentPage() {
                                             }}
                                         />
                                     ) : (
-                                        <GroupAccessComponent
-                                            assignmentid={parseInt(
-                                                assignmentId
+                                        <>
+                                            {(assignment?.max_groep_grootte
+                                                ? assignment.max_groep_grootte
+                                                : 1) > 1 && (
+                                                <GroupAccessComponent
+                                                    assignmentid={parseInt(
+                                                        assignmentId
+                                                    )}
+                                                    courseid={parseInt(
+                                                        courseId
+                                                    )}
+                                                />
                                             )}
-                                            courseid={parseInt(courseId)}
-                                        />
+                                        </>
                                     )}
                                 </Box>
 
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 5507032e..7e392958 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -16,7 +16,6 @@ import {
     TableContainer,
     TableHead,
     TableRow,
-    TextField,
     Tooltip,
     Typography,
 } from '@mui/material'
@@ -59,15 +58,17 @@ export function GroupsPage() {
     )
     //state for new groups and new groupSize, don't change the old groups and groupSize until the user clicks save
     const [newGroups, setNewGroups] = useState<Group[]>([])
-    const [newGroupSize, setNewGroupSize] = useState(1)
     const [currentGroup, setCurrentGroup] = useState('')
     const [availableStudents, setAvailableStudents] = useState<number[]>([])
     const [projectName, setProjectName] = useState('')
     const [user, setUser] = useState<User>()
-
+    const [max_group_size, setMaxGroupSize] = useState(0)
     // confirmation dialog state
     const [confirmOpen, setConfirmOpen] = useState(false)
 
+    //random groups dialog state
+    const [randomOpen, setRandomOpen] = useState(false)
+
     // state for correct loading of the page
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
@@ -106,17 +107,15 @@ export function GroupsPage() {
         } else {
             // update the old groups with the new groups
             for (const group of newGroups) {
-                if (group.studenten.length !== 0) {
-                    instance
-                        .put('/groepen/' + group.groep_id + '/', {
-                            groep_id: group.groep_id,
-                            studenten: group.studenten,
-                            project: parseInt(assignmentId),
-                        })
-                        .catch((error) => {
-                            console.log(error)
-                        })
-                }
+                instance
+                    .put('/groepen/' + group.groep_id + '/', {
+                        groep_id: group.groep_id,
+                        studenten: group.studenten,
+                        project: parseInt(assignmentId),
+                    })
+                    .catch((error) => {
+                        console.log(error)
+                    })
             }
         }
         navigate('/course/' + courseId + '/assignment/' + assignmentId)
@@ -138,46 +137,6 @@ export function GroupsPage() {
         navigate('/course/' + courseId + '/assignment/' + assignmentId)
     }
 
-    // Change max group size
-    const handleGroupSizeChange = (newValue: number) => {
-        setNewGroupSize(newValue)
-        setAvailableStudents(() => Array.from(studentNames.keys()))
-        setCurrentGroup('0')
-        setNewGroups(() => {
-            const newGroups = []
-            for (
-                let i = 0;
-                i < Math.ceil(availableStudents.length / newValue);
-                i++
-            ) {
-                newGroups.push({
-                    studenten: [],
-                    project: parseInt(assignmentId),
-                })
-            }
-            return newGroups
-        })
-        async function fetchCourse() {
-            setLoading(true)
-            instance
-                .get('/vakken/' + courseId)
-                .then((response) => {
-                    setAvailableStudents(response.data.studenten)
-                })
-                .catch((error) => {
-                    console.error(error)
-                })
-            setLoading(false)
-        }
-        fetchCourse()
-            .catch((error) => {
-                console.error(error)
-            })
-            .catch((error) => {
-                console.log(error)
-            })
-    }
-
     //get the current groups and group size from the backend
     useEffect(() => {
         async function fetchData() {
@@ -236,7 +195,8 @@ export function GroupsPage() {
                 .get('/projecten/' + assignmentId)
                 .then((response) => {
                     setProjectName(response.data.titel)
-                    setNewGroupSize(response.data.max_groep_grootte)
+
+                    setMaxGroupSize(response.data.max_groep_grootte)
                 })
                 .catch((error) => {
                     console.log(error)
@@ -251,21 +211,6 @@ export function GroupsPage() {
                 .get<Group[]>(`/groepen/?project=${assignmentId}`)
                 .then((response) => {
                     const newgroups: Group[] = response.data
-                    if (
-                        newgroups.length <
-                        Math.ceil(studentNames.size / newGroupSize)
-                    ) {
-                        for (
-                            let i = newgroups.length;
-                            i < Math.ceil(studentNames.size / newGroupSize);
-                            i++
-                        ) {
-                            newgroups.push({
-                                studenten: [],
-                                project: parseInt(assignmentId),
-                            })
-                        }
-                    }
                     setNewGroups(newgroups)
                 })
                 .catch((error) => {
@@ -276,14 +221,11 @@ export function GroupsPage() {
             setLoading(false)
         }
 
-        fetchData()
-            .catch((error) => {
-                console.error(error)
-            })
-            .catch((error) => {
-                console.log(error)
-            })
-    }, [assignmentId, courseId, newGroupSize, studentNames.size])
+        fetchData().catch((error) => {
+            console.error(error)
+        })
+        setCurrentGroup('0')
+    }, [assignmentId, courseId, studentNames.size])
 
     useEffect(() => {
         setAvailableStudents(() =>
@@ -296,34 +238,6 @@ export function GroupsPage() {
         )
     }, [newGroups, studentNames])
 
-    // Create new groups when the group size changes
-    useEffect(() => {
-        if (newGroups.length === 0) {
-            setAvailableStudents(() => Array.from(studentNames.keys()))
-            setCurrentGroup('0')
-            setNewGroups(() => {
-                const newGroups = []
-                for (
-                    let i = 0;
-                    i < Math.ceil(availableStudents.length / newGroupSize);
-                    i++
-                ) {
-                    newGroups.push({
-                        studenten: [],
-                        project: parseInt(assignmentId),
-                    })
-                }
-                return newGroups
-            })
-        }
-    }, [
-        assignmentId,
-        availableStudents.length,
-        newGroupSize,
-        newGroups.length,
-        studentNames,
-    ])
-
     //Handle current group change
     const handleCurrentGroupChange = (event: SelectChangeEvent) => {
         setCurrentGroup(event.target.value as string)
@@ -332,22 +246,18 @@ export function GroupsPage() {
     // Randomise groups
     const randomGroups = () => {
         const students = Array.from(studentNames.keys())
-        const newGroups: Group[] = []
-        for (let i = 0; i < Math.ceil(students.length / newGroupSize); i++) {
-            newGroups.push({
-                studenten: [],
-                project: parseInt(assignmentId),
+        const shuffledStudents = students.sort(() => Math.random() - 0.5)
+        const randomisedGroups: Group[] = []
+        for (const group of newGroups) {
+            const sliceSize = Math.min(max_group_size, shuffledStudents.length)
+            randomisedGroups.push({
+                ...group,
+                studenten: shuffledStudents.slice(0, sliceSize),
             })
+            shuffledStudents.splice(0, sliceSize)
+            if (shuffledStudents.length === 0) break
         }
-        for (let i = 0; i < students.length; i++) {
-            let randomGroup = Math.floor(Math.random() * newGroups.length)
-            while (newGroups[randomGroup].studenten.length >= newGroupSize) {
-                randomGroup = Math.floor(Math.random() * newGroups.length)
-            }
-            newGroups[randomGroup].studenten.push(students[i])
-        }
-
-        setNewGroups(newGroups)
+        setNewGroups(randomisedGroups)
     }
 
     // assign a student to a group
@@ -479,50 +389,6 @@ export function GroupsPage() {
                                                             {t('group')}
                                                         </Typography>
                                                     </Grid>
-                                                    <Grid item minWidth={3}>
-                                                        {loading ? (
-                                                            <Skeleton
-                                                                variant={'text'}
-                                                                width={80}
-                                                                height={80}
-                                                            />
-                                                        ) : (
-                                                            <TextField
-                                                                // The teacher can specify the maximum group size
-                                                                // If a number smaller than 1 is entered, the input will be ignored
-                                                                aria-label={
-                                                                    'maxGroupSize'
-                                                                }
-                                                                value={
-                                                                    newGroupSize
-                                                                }
-                                                                type={'number'}
-                                                                onChange={(
-                                                                    newValue
-                                                                ) => {
-                                                                    if (
-                                                                        parseInt(
-                                                                            newValue
-                                                                                .target
-                                                                                .value
-                                                                        ) < 1
-                                                                    )
-                                                                        return
-                                                                    handleGroupSizeChange(
-                                                                        parseInt(
-                                                                            newValue
-                                                                                .target
-                                                                                .value
-                                                                        )
-                                                                    )
-                                                                }}
-                                                                variant="outlined"
-                                                                sx={{
-                                                                    width: 80,
-                                                                }}
-                                                            />
-                                                        )}
-                                                    </Grid>
                                                 </Grid>
                                             </Stack>
                                             <Stack
@@ -552,7 +418,9 @@ export function GroupsPage() {
                                                                 'secondary.main',
                                                             padding: 1,
                                                         }}
-                                                        onClick={randomGroups}
+                                                        onClick={() =>
+                                                            setRandomOpen(true)
+                                                        }
                                                     >
                                                         <Typography
                                                             color="text.primary"
@@ -709,7 +577,7 @@ export function GroupsPage() {
                                                                                                   ]
                                                                                                       .studenten
                                                                                                       .length >=
-                                                                                                  newGroupSize
+                                                                                                  max_group_size
                                                                                                 : true
                                                                                         }
                                                                                         onClick={() => {
@@ -989,6 +857,14 @@ export function GroupsPage() {
                                 handleClose={handleCloseConfirm}
                                 doAction={confirmSave}
                             />
+                            <WarningPopup
+                                title={t('random') + ' ' + t('groups') + '?'}
+                                content={t('existing_submissions')}
+                                buttonName={t('divide_groups')}
+                                open={randomOpen}
+                                handleClose={() => setRandomOpen(false)}
+                                doAction={randomGroups}
+                            />
                         </>
                     ) : (
                         navigate(

From 281326526cd305a8b3a5af964ca55f00ea5c089a Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 16:12:37 +0200
Subject: [PATCH 051/145] visual improvement voor testscript

---
 .../src/components/CustomComponents.tsx       |  28 +-
 .../RestrictionsDialog.tsx                    | 297 ++++++++++--------
 package-lock.json                             |   1 +
 package.json                                  |   1 +
 4 files changed, 188 insertions(+), 139 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 21d8c38e..50dca8a5 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -1,3 +1,4 @@
+import { darken,lighten } from '@mui/system';
 import {
     Button as BaseButton,
     Card as BaseCard,
@@ -13,12 +14,33 @@ export const Button = ({ children, ...props }: any) => {
             size="large"
             sx={{
                 maxHeight: '35px',
-                bgcolor: 'primary.main',
+                backgroundColor: 'primary.main',
                 textTransform: 'none',
                 color: 'primary.contrastText',
                 '&:hover': {
-                    backgroundColor: 'secondary.main',
-                    color: 'secondary.contrastText',
+                    backgroundColor: darken(theme.palette.primary.main,0.5),
+                },
+            }}
+            {...props}
+        >
+            {children}
+        </BaseButton>
+    )
+}
+
+export const SecundaryButton = ({ children, ...props }: any) => {
+    return (
+        <BaseButton
+            variant="contained"
+            disableElevation
+            size="large"
+            sx={{
+                maxHeight: '35px',
+                backgroundColor: 'secondary.main',
+                textTransform: 'none',
+                color: 'secondary.contrastText',
+                '&:hover': {
+                    backgroundColor: darken(theme.palette.secondary.main,0.2),
                 },
             }}
             {...props}
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 3129eee6..a9ce7250 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ChangeEvent, useState } from 'react'
-import { Button } from '../../components/CustomComponents.tsx'
+import { Card,Button,SecundaryButton } from '../../components/CustomComponents.tsx'
 import Dialog from '@mui/material/Dialog'
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography'
 import CloseIcon from '@mui/icons-material/Close'
 import {
     Box,
+    Stack,
     ButtonGroup,
     FormControl,
     MenuItem,
@@ -21,6 +22,7 @@ import Switch from '@mui/material/Switch'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import RestrictionsTemplateUI from './RestrictionTemplateUI.tsx'
 import instance from '../../axiosConfig.ts'
+import theme from "../../Theme.ts";
 
 interface RestrictionsDialogProps {
     restrictions: restriction[]
@@ -287,148 +289,171 @@ export default function RestrictionsDialog({
             </Dialog>
             {/* This is the code editor. */}
             <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>
-                <Box>
-                    <AppBar sx={{ position: 'relative' }}>
+                <Stack>
+                    <AppBar sx={{ position: 'relative' }} elevation={0}>
                         <Toolbar>
-                            <Box
-                                display={'flex'}
-                                flexDirection={'row'}
-                                alignItems={'center'}
-                                width={'100%'}
-                                justifyContent={'space-between'}
+                            <IconButton
+                                edge="start"
+                                color="inherit"
+                                onClick={handleCloseTextEditor}
+                                aria-label="close"
                             >
-                                <Box
-                                    display={'flex'}
-                                    flexDirection={'row'}
-                                    alignItems={'center'}
-                                    justifyContent={'flex-start'}
+                                <CloseIcon />
+                            </IconButton>
+                        </Toolbar>
+                    </AppBar>
+                    {/* name of template */}
+                    <Box
+                        padding='30px'
+                        display={'flex'}
+                        gap={3}
+                        alignItems={'center'}
+                    >
+                        <Typography
+                            variant={'h5'}
+                            color={'text.primary'}
+                            fontWeight={'bold'}
+                        >
+                            {t('name')}
+                        </Typography>
+                            <Box padding='14px'
+                                sx={{
+                                    border: `1.5px solid gray`,
+                                    borderRadius: 1,
+                                    '&:hover': {
+                                        border: `1.5px solid ${theme.palette.primary.main}`,
+                                    }
+                                }}>
+                            <TextField
+                                // Specify the name of the test script.
+                                value={restrictionName}
+                                required
+                                error={nameError}
+                                helperText={
+                                    nameError
+                                        ? t('is_required')
+                                        : ''
+                                }
+                                variant={'standard'}
+                                sx={{
+                                    marginTop: -1.2,
+                                    borderRadius: 1,
+                                }}
+                                onChange={(e) => {
+                                    setNameError(false)
+                                    setRestrictionName(
+                                        e.target.value
+                                    )
+                                }}
+                            />
+                            </Box>
+                    </Box>
+                    <Box
+                        padding='30px'
+                        display={'flex'}
+                        gap={5}
+                        alignItems={'center'}
+                    >
+
+                        <Typography
+                            variant={'h5'}
+                            color={'text.primary'}
+                            fontWeight={'bold'}
+                        >
+                            Type
+                        </Typography>
+                        <Box padding='5px'
+                             sx={{
+                                 border: `1.5px solid gray`,
+                                 borderRadius: 1,
+                                 '&:hover': {
+                                    border: `1.5px solid ${theme.palette.primary.main}`,
+                                 }
+                             }}
+                            >
+                            <FormControl
+                                size="small"
+                            >
+                                <Select
+                                    // Select the file extension of the test script.
+                                    // This can be for instance .py or .sh.
+                                    label={t('restrictionType')}
+                                    labelId={t('restrictionType')}
+                                    value={restrictionType}
+                                    required
+                                    autoWidth
+                                    variant={'standard'}
+                                    sx={{
+                                        borderRadius: 1,
+                                        padding: 0.5,
+                                    }}
+                                    onChange={(e) =>
+                                        setRestrictionType(
+                                            e.target
+                                                .value as restrictionExtension
+                                        )
+                                    }
                                 >
-                                    <IconButton
-                                        edge="start"
-                                        color="inherit"
-                                        onClick={handleCloseTextEditor}
-                                        aria-label="close"
+                                    <MenuItem
+                                        value={
+                                            restrictionExtension.Shell
+                                        }
+                                        color={'secondary.contrastText'}
                                     >
-                                        <CloseIcon />
-                                    </IconButton>
-                                    <Box
-                                        display={'flex'}
-                                        flexDirection={'row'}
-                                        alignItems={'center'}
-                                        padding={1}
-                                        justifyContent={'center'}
-                                        gap={1}
+                                        {restrictionExtension.Shell}
+                                    </MenuItem>
+                                    <MenuItem
+                                        value={
+                                            restrictionExtension.Python
+                                        }
                                     >
-                                        <TextField
-                                            // Specify the name of the test script.
-                                            label={t('name')}
-                                            value={restrictionName}
-                                            required
-                                            error={nameError}
-                                            helperText={
-                                                nameError
-                                                    ? t('is_required')
-                                                    : ''
-                                            }
-                                            variant={'standard'}
-                                            sx={{
-                                                '& .MuiInputBase-root': {
-                                                    color: 'secondary.main',
-                                                },
-                                                marginTop: -1.2,
-                                                borderRadius: 1,
-                                            }}
-                                            onChange={(e) => {
-                                                setNameError(false)
-                                                setRestrictionName(
-                                                    e.target.value
-                                                )
-                                            }}
-                                        />
-                                        <FormControl
-                                            sx={{ minWidth: 80 }}
-                                            size="small"
-                                        >
-                                            <Select
-                                                // Select the file extension of the test script.
-                                                // This can be for instance .py or .sh.
-                                                label={t('restrictionType')}
-                                                labelId={t('restrictionType')}
-                                                value={restrictionType}
-                                                variant={'standard'}
-                                                required
-                                                autoWidth
-                                                sx={{
-                                                    '& .MuiSelect-select': {
-                                                        color: 'secondary.main',
-                                                    },
-                                                    borderRadius: 1,
-                                                    padding: 0.5,
-                                                }}
-                                                onChange={(e) =>
-                                                    setRestrictionType(
-                                                        e.target
-                                                            .value as restrictionExtension
-                                                    )
-                                                }
-                                            >
-                                                <MenuItem
-                                                    value={
-                                                        restrictionExtension.Shell
-                                                    }
-                                                    color={'text.secondary'}
-                                                >
-                                                    {restrictionExtension.Shell}
-                                                </MenuItem>
-                                                <MenuItem
-                                                    value={
-                                                        restrictionExtension.Python
-                                                    }
-                                                >
-                                                    {
-                                                        restrictionExtension.Python
-                                                    }
-                                                </MenuItem>
-                                            </Select>
-                                        </FormControl>
-                                    </Box>
-                                </Box>
-                                <Button
-                                    autoFocus
-                                    color="inherit"
-                                    onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
-                                >
-                                    save template
-                                </Button>
-                                <Button
-                                    autoFocus
-                                    color="inherit"
-                                    onClick={() => setPopupOpen(true)}
-                                >
-                                    save
-                                </Button>
-                            </Box>
-                        </Toolbar>
-                    </AppBar>
+                                        {
+                                            restrictionExtension.Python
+                                        }
+                                    </MenuItem>
+                                </Select>
+                            </FormControl>
+                        </Box>
+                    </Box>
+
                     {/* TextField for entering test code */}
-                    <Box aria-label={'Content'} padding={1}>
-                        <TextField
-                            fullWidth
-                            value={textFieldContent}
-                            onChange={(e) =>
-                                setTextFieldContent(e.target.value)
-                            }
-                            id="filled-textarea"
-                            multiline
-                            label={'Test-Content'}
-                            variant="standard"
-                            sx={{
-                                overflowY: 'auto',
-                                maxHeight: '100%',
-                            }}
-                        />
+                    <Box padding='20px'>
+                        <Card>
+                            <Box aria-label={'Content'} padding={3}>
+                                <TextField
+                                    fullWidth
+                                    value={textFieldContent}
+                                    onChange={(e) =>
+                                        setTextFieldContent(e.target.value)
+                                    }
+                                    id="filled-textarea"
+                                    multiline
+                                    label={'Test-Content'}
+                                    variant="standard"
+                                    sx={{
+                                        overflowY: 'auto',
+                                        maxHeight: '100%',
+                                    }}
+                                />
+                            </Box>
+                        </Card>
                     </Box>
-                </Box>
+                    <Stack direction="row" padding='20px' spacing='20px'>
+                        <Button
+                            autoFocus
+                            color="inherit"
+                            onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
+                        >
+                            save template
+                        </Button>
+                        <SecundaryButton
+                            autoFocus
+                            onClick={() => setPopupOpen(true)}
+                        >
+                            save
+                        </SecundaryButton>
+                    </Stack>
+                </Stack>
             </Dialog>
             <WarningPopup
                 title={t('add_restriction') + '?'}
diff --git a/package-lock.json b/package-lock.json
index af2f3df8..e3f504c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@mui/material": "^5.15.12",
+        "@mui/system": "^5.15.15",
         "react-datepicker": "^6.2.0"
       }
     },
diff --git a/package.json b/package.json
index dde0d41f..59a924ab 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.12",
+    "@mui/system": "^5.15.15",
     "react-datepicker": "^6.2.0"
   }
 }

From 6aa12d14daae874594a9bef5f6b8e99ede349666 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Sat, 18 May 2024 16:13:52 +0200
Subject: [PATCH 052/145] visuals zijn correct nu

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 06981491..83317177 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -2,7 +2,6 @@ import {
     Box,
     Card,
     Divider,
-    IconButton,
     ListItem,
     ListItemText,
     Stack,
@@ -323,17 +322,21 @@ export function ChooseGroup() {
 
                                         <Box display={'flex'} flexDirection={'column'}>
                                             {group.studenten.length > 0 ? (
-                                                    group.studenten.map((studentid) => (
-                                                        <Typography>
-                                                            {studenten[studentid] !== undefined
-                                                                ? `${studenten[studentid].first_name} ${studenten[studentid].last_name}`
-                                                                : t('members_loading')}
-                                                        </Typography>
-                                                    ))
-                                                ) : (
-                                                    <Typography>{t('no_members_yet')}</Typography>
-                                                )}
-
+                                                group.studenten.map((studentid) => {
+                                                    const student = studenten[studentid];
+                                                    if (student) {
+                                                        console.log('Student:', student);
+                                                        return (
+                                                            <Typography key={studentid}>
+                                                                {student.first_name + " " + student.last_name}
+                                                            </Typography>
+                                                        );
+                                                    }
+                                                    return null;
+                                                })
+                                            ) : (
+                                                <Typography>{t('no_members_yet')}</Typography>
+                                            )}
                                         </Box>
 
                                         {joinLeaveButton(user!=undefined ? group.studenten.includes(user.user):false,handleJoin,handleLeave)}

From 2a4d1d1484a431e2b0f966558e51df56ae744be7 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Sat, 18 May 2024 16:34:41 +0200
Subject: [PATCH 053/145] leden loading

---
 .../src/pages/groupsPage/ChooseGroup.tsx      | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 83317177..f3e28daa 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -321,21 +321,27 @@ export function ChooseGroup() {
                                         />
 
                                         <Box display={'flex'} flexDirection={'column'}>
-                                            {group.studenten.length > 0 ? (
-                                                group.studenten.map((studentid) => {
-                                                    const student = studenten[studentid];
-                                                    if (student) {
-                                                        console.log('Student:', student);
-                                                        return (
-                                                            <Typography key={studentid}>
-                                                                {student.first_name + " " + student.last_name}
-                                                            </Typography>
-                                                        );
-                                                    }
-                                                    return null;
-                                                })
+                                            {loading ? (
+                                                <Typography>{t('members_loading')}</Typography>
                                             ) : (
-                                                <Typography>{t('no_members_yet')}</Typography>
+                                                <>
+                                                    {group.studenten.length > 0 ? (
+                                                        group.studenten.map((studentid) => {
+                                                            const student = studenten[studentid];
+                                                            if (student) {
+                                                                console.log('Student:', student);
+                                                                return (
+                                                                    <Typography key={studentid}>
+                                                                        {student.first_name + " " + student.last_name}
+                                                                    </Typography>
+                                                                );
+                                                            }
+                                                            return null;
+                                                        })
+                                                    ) : (
+                                                        <Typography>{t('no_members_yet')}</Typography>
+                                                    )}
+                                                </>
                                             )}
                                         </Box>
 

From acb4b6c0a0f2700ac60f87fd1340e5180f9b9aeb Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 17:06:28 +0200
Subject: [PATCH 054/145] template view testen

---
 api/models/template.py                 |  2 +-
 api/tests/factories/template.py        | 12 +++++-
 api/tests/models/test_template.py      | 20 +++++++++
 api/tests/serializers/test_template.py | 34 +++++++++++++++
 api/tests/views/test_template.py       | 60 ++++++++++++++++++++++++++
 5 files changed, 126 insertions(+), 2 deletions(-)
 create mode 100644 api/tests/models/test_template.py
 create mode 100644 api/tests/serializers/test_template.py
 create mode 100644 api/tests/views/test_template.py

diff --git a/api/models/template.py b/api/models/template.py
index 5e40a42b..4b7aac6e 100644
--- a/api/models/template.py
+++ b/api/models/template.py
@@ -13,7 +13,7 @@ def upload_to(instance, filename):
     Returns:
         str: Het pad waar het bestand moet worden opgeslagen.
     """
-    return f"data/templates/gebruiker_{instance.gebruiker.user.id}/{filename}"
+    return f"data/templates/gebruiker_{instance.user.id}/{filename}"
 
 
 class Template(models.Model):
diff --git a/api/tests/factories/template.py b/api/tests/factories/template.py
index f87f5c14..a457f48f 100644
--- a/api/tests/factories/template.py
+++ b/api/tests/factories/template.py
@@ -1 +1,11 @@
-# TODO
\ No newline at end of file
+import factory
+from factory.django import FileField
+from api.models.template import Template
+from api.tests.factories.gebruiker import UserFactory 
+
+class TemplateFactory(factory.django.DjangoModelFactory):
+    class Meta:
+        model = Template
+
+    user = factory.SubFactory(UserFactory)
+    bestand = FileField(filename="template.txt", data=b"file content")
\ No newline at end of file
diff --git a/api/tests/models/test_template.py b/api/tests/models/test_template.py
new file mode 100644
index 00000000..485bf88a
--- /dev/null
+++ b/api/tests/models/test_template.py
@@ -0,0 +1,20 @@
+from django.test import TestCase
+from api.tests.factories.template import TemplateFactory
+from api.models.template import Template
+from api.models.template import upload_to
+
+class TemplateModelTest(TestCase):
+    def setUp(self):
+        self.template = TemplateFactory.create()
+
+    def test_template_creation(self):
+        self.assertIsInstance(self.template, Template)
+        self.assertEqual(Template.objects.count(), 1)
+
+    def test_template_str(self):
+        self.assertEqual(str(self.template), self.template.bestand.name)
+
+    def test_upload_to(self):
+        filename = "test_template.txt"
+        expected_path = f"data/templates/gebruiker_{self.template.user.id}/{filename}"
+        self.assertEqual(upload_to(self.template, filename), expected_path)
\ No newline at end of file
diff --git a/api/tests/serializers/test_template.py b/api/tests/serializers/test_template.py
new file mode 100644
index 00000000..656b9ced
--- /dev/null
+++ b/api/tests/serializers/test_template.py
@@ -0,0 +1,34 @@
+from django.test import TestCase
+from rest_framework.exceptions import ValidationError
+from api.tests.factories.template import TemplateFactory
+from api.serializers.template import TemplateSerializer
+
+class TemplateSerializerTest(TestCase):
+    def setUp(self):
+        self.template = TemplateFactory.create()
+        self.serializer = TemplateSerializer(instance=self.template)
+
+    def test_contains_expected_fields(self):
+        data = self.serializer.data
+        self.assertCountEqual(data.keys(), ['template_id', 'user', 'bestand'])
+
+    def test_template_id_field_content(self):
+        data = self.serializer.data
+        self.assertEqual(data['template_id'], self.template.template_id)
+
+    def test_user_field_content(self):
+        data = self.serializer.data
+        self.assertEqual(data['user'], self.template.user.id)
+
+    def test_bestand_field_content(self):
+        data = self.serializer.data
+        self.assertEqual(data['bestand'], self.template.bestand.url)
+
+    def test_validation(self):
+        invalid_data = {
+            'user': '',
+            'bestand': '',
+        }
+        serializer = TemplateSerializer(data=invalid_data)
+        with self.assertRaises(ValidationError):
+            serializer.is_valid(raise_exception=True)
\ No newline at end of file
diff --git a/api/tests/views/test_template.py b/api/tests/views/test_template.py
new file mode 100644
index 00000000..11b3835f
--- /dev/null
+++ b/api/tests/views/test_template.py
@@ -0,0 +1,60 @@
+from django.urls import reverse
+from rest_framework.test import APIClient, APITestCase
+from api.tests.factories.template import TemplateFactory
+from api.models.template import Template
+from api.tests.factories.gebruiker import GebruikerFactory
+from django.core.files.uploadedfile import SimpleUploadedFile
+
+class TemplateListViewTest(APITestCase):
+    def setUp(self):
+        self.client = APIClient()
+        self.template = TemplateFactory.create()
+        self.teacher = GebruikerFactory.create(is_lesgever=True)
+        self.student = GebruikerFactory.create(is_lesgever=False)
+        self.client.force_login(self.teacher.user)
+        self.template_list_url = reverse('template_list')
+
+    def test_template_list_get(self):
+        response = self.client.get(self.template_list_url)
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(len(response.data), Template.objects.count())
+
+    def test_template_list_post(self):
+        data = {
+            'user': self.template.user.id,
+        }
+        file = SimpleUploadedFile("template.txt", b"file_content")
+        data["bestand"] = file
+        response = self.client.post(self.template_list_url, data)
+        self.assertEqual(response.status_code, 201)
+        self.assertEqual(Template.objects.count(), 2)
+
+
+class TemplateDetailViewTest(APITestCase):
+    def setUp(self):
+        self.client = APIClient()
+        self.template = TemplateFactory.create()
+        self.teacher = GebruikerFactory.create(is_lesgever=True)
+        self.student = GebruikerFactory.create(is_lesgever=False)
+        self.client.force_login(self.teacher.user)
+        self.template_detail_url = reverse('template_detail', kwargs={'id': self.template.template_id})
+    
+    def test_template_detail_get(self):
+        response = self.client.get(self.template_detail_url)
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.data['template_id'], self.template.template_id)
+
+    def test_template_detail_put(self):
+        data = {
+            'user': self.template.user.id,
+        }
+        file = SimpleUploadedFile("template.txt", b"file_content")
+        data["bestand"] = file
+        response = self.client.put(self.template_detail_url, data)
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.data['template_id'], self.template.template_id)
+
+    def test_template_detail_delete(self):
+        response = self.client.delete(self.template_detail_url)
+        self.assertEqual(response.status_code, 204)
+        self.assertEqual(Template.objects.count(), 0)
\ No newline at end of file

From ada5ddc5a8c22d69126a9c843725cc3ce11cc2d0 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 17:27:30 +0200
Subject: [PATCH 055/145] opschonen voeg restrictie toe window

---
 .../AddRestrictionButton.tsx                  |  4 +-
 .../RestrictionsDialog.tsx                    | 66 ++++++++++++-------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
index 4b36aa12..230b0d00 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button } from '../../components/CustomComponents.tsx'
+import { Button,SecundaryButton } from '../../components/CustomComponents.tsx'
 import Dialog, { DialogProps } from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
@@ -67,7 +67,7 @@ export default function AddRestrictionButton({
                 </DialogContent>
                 <DialogActions>
                     {/* Cancel Button */}
-                    <Button id='cancelButton' onClick={handleClose}>{t('cancel')}</Button>
+                    <SecundaryButton id='cancelButton' onClick={handleClose}>{t('cancel')}</SecundaryButton>
                 </DialogActions>
             </Dialog>
         </>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index a9ce7250..1dbc9eee 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -247,23 +247,21 @@ export default function RestrictionsDialog({
                 multiple
             />
             {/* Vertical button group */}
-            <ButtonGroup
-                orientation="vertical"
-                aria-label="Vertical button group"
-                variant={'outlined'}
-                color={'primary'}
+            <Box
+                padding='10px'
+                display={'flex'}
+                gap={5}
+                alignItems={'center'}
             >
-                {buttons}
-            </ButtonGroup>
-            <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
-                {/* This box will contain the templates */}
-                <Typography variant={'body2'}>
-                    {t('open_with_ui') + ':'}
-                </Typography>
-                <Switch
-                    value={openTemplateInUI}
-                    onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
-                />
+                <ButtonGroup
+                    orientation="vertical"
+                    aria-label="Vertical button group"
+                    variant={'outlined'}
+                    color={'primary'}
+                >
+
+                    {buttons}
+                </ButtonGroup>
                 <ButtonGroup
                     orientation="vertical"
                     aria-label="Vertical button group"
@@ -273,15 +271,33 @@ export default function RestrictionsDialog({
                     {templateButtons}
                 </ButtonGroup>
             </Box>
-            <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
-                <Typography variant={'body2'}>
-                    {t('must_pass') + ':'}
-                </Typography>
-                <Switch
-                    id='mustPassSwitch'
-                    value={mustPass}
-                    onChange={() => setMustPass(!mustPass)}
-                />
+            <Box
+                padding='10px'
+                display={'flex'}
+                gap={5}
+                alignItems={'center'}
+            >
+                <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
+                    {/* This box will contain the templates */}
+                    <Typography variant={'body2'}>
+                        {t('open_with_ui') + ':'}
+                    </Typography>
+                    <Switch
+                        value={openTemplateInUI}
+                        onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
+                    />
+
+                </Box>
+                <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
+                    <Typography variant={'body2'}>
+                        {t('must_pass') + ':'}
+                    </Typography>
+                    <Switch
+                        id='mustPassSwitch'
+                        value={mustPass}
+                        onChange={() => setMustPass(!mustPass)}
+                    />
+                </Box>
             </Box>
             {/* This is the template interface. */}
             <Dialog fullScreen open={openTemplateInterface} onClose={handleCloseTemplateInterface}>

From a5b151242dd80e35dc00573c48f68e9cd189e783 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Sat, 18 May 2024 17:37:12 +0200
Subject: [PATCH 056/145] lesgever url's niet meer beschikbaar voor studenten

---
 .../AddChangeAssignmentPage.tsx               | 35 ++++++++++++++-
 .../pages/assignmentPage/AssignmentPage.tsx   |  2 +-
 .../src/pages/groupsPage/ChooseGroup.tsx      | 37 +++++++++++++---
 .../src/pages/groupsPage/GroupsPage.tsx       |  2 +-
 .../pages/scoresPage/ProjectScoresPage.tsx    | 34 ++++++++++++++-
 .../subjectsPage/AddChangeSubjectPage.tsx     | 43 +++++++++++++++++--
 frontend/frontend/src/routes.tsx              |  4 ++
 7 files changed, 143 insertions(+), 14 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 27a2a7dc..33d50574 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -34,6 +34,7 @@ import instance from '../../axiosConfig.ts'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import AddRestrictionButton from './AddRestrictionButton.tsx'
 import { RestrictionCard } from '../../components/RestrictionCard.tsx'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 /**
  * This page is used to add or change an assignment.
@@ -87,6 +88,7 @@ export function AddChangeAssignmentPage() {
 
     //State for loading the data or showing skeletons
     const [loading, setLoading] = useState(false)
+    const [userLoading, setUserLoading] = useState(true)
 
     // State for the different fields of the assignment
     const [title, setTitle] = useState('')
@@ -100,6 +102,8 @@ export function AddChangeAssignmentPage() {
     const [cleared, setCleared] = useState<boolean>(false)
     const [filename, setFilename] = useState<string>('indiening.zip')
 
+    const [user, setUser] = useState<User>()
+
     // State for the error checks of the assignment
     const [assignmentErrors, setAssignmentErrors] = useState<errorChecks>({
         title: false,
@@ -160,7 +164,11 @@ export function AddChangeAssignmentPage() {
         //get the data
         const fetchData = async () => {
             //begin loading -> set loading to true
+            setUserLoading(true)
             setLoading(true)
+            const userResponse = await instance.get('/gebruikers/me/')
+            setUser(userResponse.data)
+            setUserLoading(false)
 
             //get the assignment
             await instance
@@ -447,6 +455,24 @@ export function AddChangeAssignmentPage() {
 
     return (
         <>
+            {/* Rendering different UI based on user role */}
+            {userLoading ? (
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                    }}
+                >
+                    <CircularProgress color={'primary'} />
+                    <Box></Box>
+                </Box>
+            ) : (
+                <>
+                    {user?.is_lesgever ? (
+                        // Rendering UI for teacher
+                    <>
             {/* Stack container for layout */}
             <Stack direction={'column'} paddingX={2}>
                 {/*very ugly but it works functionally*/}
@@ -965,5 +991,10 @@ export function AddChangeAssignmentPage() {
                 />
             </Stack>
         </>
-    )
-}
+    ):(
+        navigate('*')
+    )}
+</>
+)} 
+</>
+)}
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 11d1138f..27d0e5f4 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -46,7 +46,7 @@ export function AssignmentPage() {
 
     const goToGroups = () => {
         console.log('go to scores')
-        navigate(`/course/${courseId}/assignment/${assignmentId}/groups`)
+        navigate(`/course/${courseId}/assignment/${assignmentId}/groups/choose`)
     }
 
     // State variables
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index f3e28daa..fa379442 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -7,13 +7,14 @@ import {
     Stack,
     Typography,
     Dialog,
+    CircularProgress,
 } from '@mui/material'
 import List from '@mui/material/List'
 import { useEffect, useState } from 'react'
 import {Header} from "../../components/Header.tsx";
 import { t } from 'i18next'
 import { Button } from '../../components/CustomComponents.tsx';
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import instance from "../../axiosConfig.ts";
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx';
 
@@ -68,7 +69,7 @@ function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> vo
 export function ChooseGroup() {
 
     const params = useParams()
-
+    const navigate = useNavigate()
 
     const [studenten,setStudenten]=useState<Record<number, User>>({});
     const [groups,setGroups]=useState<Group[]>([]);
@@ -77,6 +78,7 @@ export function ChooseGroup() {
     const [assignment,setAssignment]= useState<Assignment>()
 
     const [loading, setLoading] = useState(true)
+    const [userLoading, setUserLoading] = useState(true)
 
     const assignmentId = params.assignmentId
 
@@ -85,6 +87,7 @@ export function ChooseGroup() {
     }
 
     useEffect(()=>{
+        setUserLoading(true)
         setLoading(true);
         instance
             .get('/gebruikers/me/')
@@ -94,6 +97,7 @@ export function ChooseGroup() {
             .catch((err) => {
                 console.log(err)
             })
+        setUserLoading(false)
         instance
             .get('/projecten/'+assignmentId+'/')
             .then((res) => {
@@ -160,7 +164,25 @@ export function ChooseGroup() {
 
     return (
         <>
-            <Stack direction={'column'}>
+            {/* Rendering different UI based on user role */}
+            {userLoading ? (
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                    }}
+                >
+                    <CircularProgress color={'primary'} />
+                    <Box></Box>
+                </Box>
+            ) : (
+                <>
+                    {!user?.is_lesgever ? (
+                        // Rendering UI for teacher
+                    <>
+                <Stack direction={'column'}>
                 <Header variant={'not_main'} title={loading ? '' : `${assignment?.titel}: ${t('groups')}`} />
                 <Stack
                     direction={'column'}
@@ -366,5 +388,10 @@ export function ChooseGroup() {
                 </Stack>
             </Stack>
         </>
-    )
-}
\ No newline at end of file
+    ):(
+        navigate('*')
+    )}
+</>
+)} 
+</>
+)}
\ No newline at end of file
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 5c5ab068..7b6fbac6 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -889,7 +889,7 @@ export function GroupsPage() {
                         />
                     </>
                 ):(
-                    navigate('/course/' + courseId + '/assignment/' + assignmentId + '/groups/choose')
+                    navigate('*')
                 )}
             </>
         )} 
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index 52613d78..09ae0368 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -19,6 +19,7 @@ import WarningPopup from '../../components/WarningPopup.tsx'
 import ErrorPage from '../ErrorPage.tsx'
 import JSZip from 'jszip'
 import Papa from 'papaparse'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 const VisuallyHiddenInput = styled('input')({
     clipPath: 'inset(50%)',
@@ -89,9 +90,11 @@ export function ProjectScoresPage() {
     const [project, setProject] = useState<Project>()
     const [groepen, setGroepen] = useState<ScoreGroep[]>([])
     const [fetchError, setFetchError] = useState(false)
+    const [user, setUser] = useState<User>()
 
     // State for loading the page properly
     const [loading, setLoading] = useState(true)
+    const [userLoading, setUserLoading] = useState(true)
 
     const navigate = useNavigate()
 
@@ -138,7 +141,11 @@ export function ProjectScoresPage() {
     useEffect(() => {
         async function fetchData() {
             try {
+                setUserLoading(true)
                 setLoading(true)
+                const userResponse = await instance.get('/gebruikers/me/')
+                setUser(userResponse.data)
+                setUserLoading(false)
                 const assignmentResponse = await instance.get(
                     `/projecten/${assignmentId}/`
                 )
@@ -275,6 +282,24 @@ export function ProjectScoresPage() {
 
     return (
         <>
+            {/* Rendering different UI based on user role */}
+            {userLoading ? (
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                    }}
+                >
+                    <CircularProgress color={'primary'} />
+                    <Box></Box>
+                </Box>
+            ) : (
+                <>
+                    {user?.is_lesgever ? (
+                        // Rendering UI for teacher
+                    <>
             <Stack
                 direction={'column'}
                 spacing={0}
@@ -413,5 +438,10 @@ export function ProjectScoresPage() {
                 />
             </Stack>
         </>
-    )
-}
+    ):(
+        navigate('*')
+    )}
+</>
+)} 
+</>
+)}
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 4f82f776..7868a6fc 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -9,11 +9,12 @@ import {
     Stack,
     TextField,
     Typography,
+    CircularProgress
 } from '@mui/material'
 import { Header } from '../../components/Header'
 import { Button } from '../../components/CustomComponents.tsx'
 import React, { ChangeEvent, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import List from '@mui/material/List'
 import { t } from 'i18next'
 import 'dayjs/locale/nl'
@@ -222,6 +223,8 @@ function DialogWindow(
 
 export function AddChangeSubjectPage() {
     const params = useParams()
+    const navigate = useNavigate()
+
     // State for the different fields of the subject
     const [title, setTitle] = useState<string>('')
     const [emailStudent, setEmailStudent] = useState<string>('')
@@ -234,11 +237,13 @@ export function AddChangeSubjectPage() {
     const [openTeacher, setOpenTeacher] = useState<boolean>(false)
     const [studentFile, setStudentFile] = useState<File>()
     const [teacherFile, setTeacherFile] = useState<File>()
+    const [user, setUser] = useState<User>()
 
     const [vakID, setVakID] = useState(params.courseId)
 
     // state for spinners
     const [loading, setLoading] = useState(false)
+    const [userLoading, setUserLoading] = useState(true)
 
     const handleCloseStudent = (): void => {
         setOpenStudent(false)
@@ -472,6 +477,12 @@ export function AddChangeSubjectPage() {
     }
 
     useEffect(() => {
+        async function fetchUser() {
+            setUserLoading(true)
+            const userResponse = await instance.get('/gebruikers/me/')
+            setUser(userResponse.data)
+            setUserLoading(false)
+        }
         async function fetchData() {
             setLoading(true)
             await instance
@@ -532,6 +543,9 @@ export function AddChangeSubjectPage() {
                 })
             setLoading(false)
         }
+        fetchUser().catch((err) => {
+            console.log(err)
+        })
         if (vakID != undefined) {
             fetchData().catch((err) => {
                 console.log(err)
@@ -541,6 +555,24 @@ export function AddChangeSubjectPage() {
 
     return (
         <>
+            {/* Rendering different UI based on user role */}
+            {userLoading ? (
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
+                    }}
+                >
+                    <CircularProgress color={'primary'} />
+                    <Box></Box>
+                </Box>
+            ) : (
+                <>
+                    {user?.is_lesgever ? (
+                        // Rendering UI for teacher
+                    <>
             <Stack direction={'column'}>
                 <Header variant={loading ? 'default' : 'not_main'} title={loading ? '' : title} />
                 <Stack
@@ -687,5 +719,10 @@ export function AddChangeSubjectPage() {
                 </Stack>
             </Stack>
         </>
-    )
-}
+    ):(
+        navigate('*')
+    )}
+</>
+)} 
+</>
+)}
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index c16f12a7..d6bca41d 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -64,6 +64,10 @@ const router = createBrowserRouter([
     },
     {
         path: '*',
+        element: <ErrorPage />, // todo: change to 404-page
+    },
+    {
+        path: '/error',
         element: <ErrorPage />,
     },
 ])

From cdbb8119c8b070dc66769f434c0cb6e412ec4b9d Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 18:56:13 +0200
Subject: [PATCH 057/145] coverage + linter

---
 .coverage                               | Bin 53248 -> 53248 bytes
 api/middleware.py                       |   1 -
 api/models/indiening.py                 |  39 ++++------
 api/models/project.py                   |   2 +-
 api/serializers/project.py              |   1 +
 api/tests/factories/project.py          |   1 +
 api/tests/factories/template.py         |   5 +-
 api/tests/models/test_indiening.py      |  64 +++++++++++++++--
 api/tests/models/test_score.py          |   4 +-
 api/tests/models/test_template.py       |   3 +-
 api/tests/serializers/test_indiening.py |  28 ++++----
 api/tests/serializers/test_project.py   |  44 +++++++++---
 api/tests/serializers/test_score.py     |  16 +++--
 api/tests/serializers/test_template.py  |  15 ++--
 api/tests/views/test_indiening.py       |  16 +++--
 api/tests/views/test_score.py           |  13 ++--
 api/tests/views/test_template.py        |  91 +++++++++++++++++++++---
 api/views/indiening.py                  |   2 +-
 api/views/template.py                   |   3 +-
 19 files changed, 259 insertions(+), 89 deletions(-)

diff --git a/.coverage b/.coverage
index a544a4fb6fb50abca336a93d8c92e8c3bab539f7..46f1401930854b2cd5057d4f2d08689e198ce4f0 100644
GIT binary patch
delta 1401
zcmY+DTWnNC7{|YJ=Co(eIdf)qx4Uh(+wPv;mixADFI<YyC?UGNs0j$MrGRy*6-sL<
zT?wIk@Ij-Li;Rgc0)6rU6iC(pri89WA3#%t2V)T0HJFGYZc7N%xUh9jTax-T^ZmZd
zeDj}g%pqhBq4QGxIzu@G^jCVC#^}q`L;fUja)7KQHvNu%M(@|_bO~R@$M6PRq}|od
zY6IE^tyE2^BkG{KNew8Ely8+oafkgyMXWYhWw<&k<VUdccte@JFVfYsYkOZL*t4&~
zhakckI~-P|qPhK*up$()tqlv<L|7NR>}fb86tK#Mpy1)OTFRe`8*WgfJOrDLH~8@0
z-d%fmy<jeac5bt}Mk2U*bTJ!h#9IIMo!q&?g&@j?nilKxI;hEEvBp}-iD19wa`r~{
z^!0YO_jOwBEq5T;YhmVZ(gZs@(X@<hZqfzHbC#(cz1@)>9<`Ei$4aqEpFOWxo`1ti
zjG)8nXsB5}-fR;WY3$%D#mwGl6KhmnhBw$O$3x9Gg%=EE5U5G&wHOVPdt`uoO%(l0
zJxUAo)p{1bhCjg@u}}L$J4erG8}%`DLV2uiRu3zK>H_6EHKCQo>t9{3u!=WoB%=!L
zWZPTH>Ab7@D^Y~A06P+vCEu)3&aQ-QLJ@0gS;*DKQeg;nT6tPeZ}&Tq_C9_+FRN$?
z@&{;Zsg^u*S-8J5614=+UxYTX2Q7v=tAAbvYG()A47R!vOS#pkiydrTqRz_iUWuZX
ziRZQCVgs$UQcfM(Z+Xc7#CNg>tt%wQDzwk?aosV0fq~W_ex^Hp=DOB|B{FkZTVVc$
z_2*Cr?<T-?7ceuomRPb&S}l6lqVZ7M&Ej>2ego(fy+wbfKhSUJS$dLw$Va}Hw$j(=
zdRj^IDIpKZ?_`vGPtK7O<YQuzUF3EC6-o)!)A~LA1|Rc}^qAX_1ZAl)=7Ci7rwj&j
zYWIW(CLDf_%ls(}m&P+87#kl$P9H}BA4iEt>Az12ljCWhv&dpasVacz$kQqqyOZ`6
z6mnKunEFhB+XJ!b$JgNU@O7B{0>gyt_Hy4+?^qR>zjaSzGa8$^(gE+ut^&>%7o<Fp
zydRHcC(`MY!sQE2k5%213c>j|cV{OL#M1a}TRvyb{811cd3;xvC&F!+W=6&*o_34&
zT#ia|2RzWfcKX!6!?#h6o0Em^lR{Gb#l3Ay`Q((8cxZE3HC#JP<cQ^1MRIn)CG#R&
z%t@4jY<F5koE$-}c><0=p~t~VwPOu}RZtI8TH?-{kp~~Z<x(IvyH(20OXX6&3(`?Y
zWIa(Qw}?p_Ozj)JE4T>fi^(YT$hJv!@`92q6wmW7!l_FSY=gfF6m0Er2zro9vx2qE
z{pT|d0K;5hDhcVBrgECE2A~QO-fV>%L<zWUd|hhGG#M}o@Z_s#7MQ|6GLbp<$yO{t
za@xzz9$gX?ydtM7L@^n9sTd?P1MkNYUFfv&>5n7V8)ZRK6zAvUEtRJjw1mmW>azI^
eEutlSMs5*zHcu7|V`lODXBM9?zWmhH%Krd$+?c=s

delta 1215
zcmY+CTTC2P7=Zt|l-Zd%bI#sj*b6S!6)4@sU2e5a**Du|h4^3^x!G8@8`KnBT9Guc
z(<gl}*!DzYA_7l7Xws5w1xy>ejkjnjnm)8%Dy%U^qq1ycnk8-l&#G(a)BOMUU(U>T
z#+Va~IbmLm9P}swAm5O8Ns1gMI{pQx@dWO`Chey7mNux>qddBVCeR^NrLL(Tspr*x
zHJ}ugPnFk|K_!s3nE#OZW)Dqu`RK)Hg*6!;J((Ojc5)~l7#R<`1&Gsg(cRP=l|@%M
z>5j@=HO)sKrbblbbUGCcaaHtMG{99d+AKQDjj>KybO>;St?<gHlFyH_o%MElrrUSE
z%ftt4)aVRyRyyAq=36YZCe|vN1vp*mrjZ!B|6SUM0H?|&dNrnsSb*{W!A4BuG`3=|
zmPiiAN7zC8(9Zg^kE2~pssM?9Cg!>%W%Sr^vh<NH3LEoLhSH&~8ypiF1Y+O_(n%Em
ziYM_UENiz&wKlEAwFYzty^ki*Ve+2(v6@o{l(_Pla!&~=Z>T|)l5d&NHJQHpREy|o
z65`a?S5wl;{Fy}ePS71SaW1;vQ^y=4u{tCS{nu+|LNh%9CUm{0S*+YS6YDgI&U)bp
z{jvW6>0g@;YCK)bWO8<z>J4%>da<{e8TIzHikAJtX|{6@zVAxS^ju%NNFEi&OEtO?
zLmX!90aVtel}pT+h#nCV^vr-Cm1U`|!V4vk4h`J!9rS3MKnmnL@-_K{d_XRc8S*mw
z50fN8o*?_kUg9JozJqV$>v##jgQxK;IEj1l0bGae+9p$VSxY%QA}2R`R&>aXUEe}r
z6i%$`ux@oT?04r7WbPK%X1V-o(Q9>;m@5|s7`wU|hLs<RUQab+2dZ-g9WrZ$!tm@Z
z-56uZ%5Q}bT&Z#BrS1Ak7>w_Sw-GCSn1GigdlkbCRXH6}+27NticGOM!(CahR+bK^
z%!Oe7nG+S+&Bd>b3X_vDt8*E6vx7yo4jyhx()Q|lVe2ugz0_}C?%)B$yx7FO2|Ttj
z=Cw`g@M6dI>|d8{R+iUUXSghX({Z%_p?pEi{AsZ;xZ83ZmQuzdEZQ;;f@C%`R%>Pq
zoW|QQ1#Smnq>;>U-~n@Hf?Jy4^Hb2SV1}LexDk#>PL0I@Z5cAV?kV|xK5K%)`0`Jj
z9Wma3mSIFP<(2$`oOSc_SXLRet05Q>RE33AioY4cka1PWEW@(jVPell)0W7e<zVAW
zFrMS#C~RSgVXx$8y#U#5jb3<dPe5?-jJET9Hgw1bVk8CEI<gDgljbjeUQPHVPLyTq
ZG#*sgh=;UM>Fj=X;dgPmZT9n~zX8z#W!L}!

diff --git a/api/middleware.py b/api/middleware.py
index 3e3e2962..ccfb6a28 100644
--- a/api/middleware.py
+++ b/api/middleware.py
@@ -72,7 +72,6 @@ def __call__(self, request):
 
 
 class DisableCSRFMiddleware(object):
-
     def __init__(self, get_response):
         self.get_response = get_response
 
diff --git a/api/models/indiening.py b/api/models/indiening.py
index b131a965..59ed23d8 100644
--- a/api/models/indiening.py
+++ b/api/models/indiening.py
@@ -1,4 +1,4 @@
-from django.db import IntegrityError, models
+from django.db import models
 from django.db.models.signals import post_save
 from django.dispatch import receiver
 from api.docker.python_entrypoint import run_tests_on
@@ -66,31 +66,18 @@ class Indiening(models.Model):
     def __str__(self):
         return str(self.indiening_id)
 
-def save(self, *args, **kwargs):
-    # Loop until the instance is saved successfully
-    while True:
-        try:
-            # First save to generate the indiening_id if it doesn't exist
-            if not self.indiening_id:
-                super(Indiening, self).save(*args, **kwargs)
-
-            # Update the bestand path if it's still using the temporary path
-            if "temp" in self.bestand.name:
-                old_file = self.bestand
-                new_path = self.bestand.name.replace(
-                    "temp", f"indiening_{self.indiening_id}"
-                )
-                default_storage.save(new_path, ContentFile(old_file.read()))
-                old_file.storage.delete(old_file.name)
-                self.bestand.name = new_path
-
-            super(Indiening, self).save(*args, **kwargs)
-            # If the instance was saved successfully, break the loop
-            break
-        except IntegrityError:
-            # If an IntegrityError was raised, the indiening_id was a duplicate,
-            # so we'll try again with a new one
-            pass
+    def save(self, *args, **kwargs):
+        # Update the bestand path if it's still using the temporary path
+        if "temp" in self.bestand.name:
+            old_file = self.bestand
+            new_path = self.bestand.name.replace(
+                "temp", f"indiening_{self.indiening_id}"
+            )
+            default_storage.save(new_path, ContentFile(old_file.read()))
+            old_file.storage.delete(old_file.name)
+            self.bestand.name = new_path
+
+        super(Indiening, self).save(*args, **kwargs)
 
 
 def run_tests_async(instance):
diff --git a/api/models/project.py b/api/models/project.py
index 5966a86d..7e2718d1 100644
--- a/api/models/project.py
+++ b/api/models/project.py
@@ -38,7 +38,7 @@ class Project(models.Model):
         Standaard ingesteld op 20.
         max_groep_grootte (IntegerField): Een veld voor het instellen van de max grootte van de groep voor het project.
         Standaard ingesteld op 1.
-        student_groep (BooleanField): Een veld om aan te geven of het een individueel project is of niet.
+        student_groep (BooleanField): Een veld om aan te geven of de studenten hun eigen groep mogen kiezen.
         Standaard ingesteld of False.
         zichtbaar (BooleanField): Een veld om aan te geven of het project zichtbaar is of niet.
         Standaard ingesteld op True.
diff --git a/api/serializers/project.py b/api/serializers/project.py
index 3262b10a..1208d2f9 100644
--- a/api/serializers/project.py
+++ b/api/serializers/project.py
@@ -76,6 +76,7 @@ def update(self, instance, validated_data):
             Project: Het bijgewerkte project.
         """
         validated_data.pop("max_groep_grootte", instance.max_groep_grootte)
+        validated_data.pop("student_groep", instance.student_groep)
         validated_data.pop("aantal_groepen", instance.aantal_groepen)
 
         deadline = validated_data.pop("deadline", instance.deadline)
diff --git a/api/tests/factories/project.py b/api/tests/factories/project.py
index 21c8af50..bac15392 100644
--- a/api/tests/factories/project.py
+++ b/api/tests/factories/project.py
@@ -30,5 +30,6 @@ class Meta:
     max_score = factory.Faker("random_int", min=10, max=100)
     aantal_groepen = factory.Faker("random_int", min=2, max=100)
     max_groep_grootte = factory.Faker("random_int", min=1, max=5)
+    student_groep = factory.Faker("boolean")
     zichtbaar = factory.Faker("boolean")
     gearchiveerd = factory.Faker("boolean")
diff --git a/api/tests/factories/template.py b/api/tests/factories/template.py
index a457f48f..1b52c7f8 100644
--- a/api/tests/factories/template.py
+++ b/api/tests/factories/template.py
@@ -1,11 +1,12 @@
 import factory
 from factory.django import FileField
 from api.models.template import Template
-from api.tests.factories.gebruiker import UserFactory 
+from api.tests.factories.gebruiker import UserFactory
+
 
 class TemplateFactory(factory.django.DjangoModelFactory):
     class Meta:
         model = Template
 
     user = factory.SubFactory(UserFactory)
-    bestand = FileField(filename="template.txt", data=b"file content")
\ No newline at end of file
+    bestand = FileField(filename="template.txt", data=b"file content")
diff --git a/api/tests/models/test_indiening.py b/api/tests/models/test_indiening.py
index afc883f1..cde9bb16 100644
--- a/api/tests/models/test_indiening.py
+++ b/api/tests/models/test_indiening.py
@@ -1,10 +1,16 @@
 from django.test import TestCase
 from api.tests.factories.indiening import IndieningFactory
 from api.models.indiening import upload_to
+from unittest.mock import patch, call, MagicMock
+from api.models.indiening import send_indiening_confirmation_mail
+import os
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
 
 
 class IndieningModelTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.indiening = IndieningFactory.create()
 
     def test_str_method(self):
@@ -25,13 +31,63 @@ def test_upload_to(self):
             f"data/indieningen/indiening_{self.indiening.indiening_id}/{filename}"
         )
         self.assertEqual(upload_to(self.indiening, filename), expected_path)
-    
+
     def test_artefacten(self):
         self.assertIsNotNone(self.indiening.artefacten)
-    
+
     def test_result(self):
         self.assertIsNotNone(self.indiening.result)
-    
+
     def test_bestand(self):
         self.assertIsNotNone(self.indiening.bestand)
 
+    # TODO: Fix this test
+    # @patch('smtplib.SMTP_SSL')
+    # @patch('ssl.create_default_context')
+    # def test_send_indiening_confirmation_mail(self, mock_create_default_context, mock_smtp):
+    #     # Create a test indiening object
+    #     mock_create_default_context.reset_mock()
+    #     mock_smtp.reset_mock()
+    #     indiening = self.indiening
+
+    #     smtp_server_address = "smtp.gmail.com"
+    #     smtp_port = 465
+    #     mail_username = os.environ.get("MAIL_USERNAME")
+    #     mail_app_password = os.environ.get("MAIL_APP_PASSWORD")
+    #     indiening_status = {
+    #         -1: "heeft niet alle testen geslaagd.",
+    #         0: "wordt nog getest...",
+    #         1: "heeft alle testen geslaagd!",
+    #     }
+
+    #     # Setup the mock SMTP_SSL object
+    #     mock_smtp_instance = MagicMock()
+    #     mock_smtp.return_value.__enter__.return_value = mock_smtp_instance
+
+    #     # Call the function
+    #     send_indiening_confirmation_mail(indiening)
+
+    #     # Check that create_default_context was called twice
+    #     assert mock_create_default_context.call_count == 1
+
+    #     # Check that SMTP_SSL was called with the correct arguments
+    #     assert mock_smtp.call_count == indiening.groep.studenten.count()
+    #     mock_smtp.assert_has_calls([call(smtp_server_address, smtp_port, context=mock_create_default_context.return_value)] * indiening.groep.studenten.count())
+
+    #     # Check that login was called with the correct arguments
+    #     mock_smtp_instance.login.assert_called_with(mail_username, mail_app_password)
+
+    #     # Check that sendmail was called with the correct arguments for each student
+    #     for student in indiening.groep.studenten.all():
+    #         plain_text = f"""
+    #         Beste {student.user.first_name} {student.user.last_name},
+
+    #         Dit is een bevestiging dat uw indiening voor het project {indiening.groep.project.titel} is ontvangen.
+    #         De indiening {indiening_status[indiening.status]}.
+    #         """
+    #         email = MIMEMultipart()
+    #         email["From"] = mail_username
+    #         email["To"] = student.user.email
+    #         email["Subject"] = "Bevestiging van indiening"
+    #         email.attach(MIMEText(plain_text, "plain"))
+    #         mock_smtp_instance.sendmail.assert_any_call(mail_username, student.user.email, email.as_string())
diff --git a/api/tests/models/test_score.py b/api/tests/models/test_score.py
index 63b46f67..c6046e72 100644
--- a/api/tests/models/test_score.py
+++ b/api/tests/models/test_score.py
@@ -1,10 +1,12 @@
 from django.test import TestCase
 from api.tests.factories.score import ScoreFactory
 from api.tests.factories.indiening import IndieningFactory
+from unittest.mock import patch
 
 
 class ScoreModelTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.indiening = IndieningFactory.create()
         self.score = ScoreFactory.create(indiening=self.indiening)
 
diff --git a/api/tests/models/test_template.py b/api/tests/models/test_template.py
index 485bf88a..8c95e481 100644
--- a/api/tests/models/test_template.py
+++ b/api/tests/models/test_template.py
@@ -3,6 +3,7 @@
 from api.models.template import Template
 from api.models.template import upload_to
 
+
 class TemplateModelTest(TestCase):
     def setUp(self):
         self.template = TemplateFactory.create()
@@ -17,4 +18,4 @@ def test_template_str(self):
     def test_upload_to(self):
         filename = "test_template.txt"
         expected_path = f"data/templates/gebruiker_{self.template.user.id}/{filename}"
-        self.assertEqual(upload_to(self.template, filename), expected_path)
\ No newline at end of file
+        self.assertEqual(upload_to(self.template, filename), expected_path)
diff --git a/api/tests/serializers/test_indiening.py b/api/tests/serializers/test_indiening.py
index 301b493f..24821279 100644
--- a/api/tests/serializers/test_indiening.py
+++ b/api/tests/serializers/test_indiening.py
@@ -3,12 +3,12 @@
 from api.serializers.indiening import IndieningSerializer
 from api.tests.factories.indiening import IndieningFactory
 from api.tests.factories.groep import GroepFactory
-from api.tests.factories.restrictie import RestrictieFactory
+from unittest.mock import patch
 
 
 class IndieningSerializerTest(TestCase):
-
-    def test_indiening_serializer_fields(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_indiening_serializer_fields(self, mock_send_mail):
         indiening = IndieningFactory.create()
         self.serializer = IndieningSerializer(instance=indiening)
         data = self.serializer.data
@@ -25,29 +25,34 @@ def test_indiening_serializer_fields(self):
                     "bestand",
                 ]
             ),
-            
         )
 
-    def test_indiening_serializer_create(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_indiening_serializer_create(self, mock_send_mail):
         groep = GroepFactory.create()
-        data = {"groep": groep.groep_id, "bestand": SimpleUploadedFile("bestand.txt", b"bestand_content")}
+        data = {
+            "groep": groep.groep_id,
+            "bestand": SimpleUploadedFile("bestand.txt", b"bestand_content"),
+        }
         serializer = IndieningSerializer(data=data)
         self.assertTrue(serializer.is_valid())
         indiening = serializer.save()
         self.assertEqual(indiening.groep, groep)
-    
+
     def test_indiening_serializer_no_file(self):
         groep = GroepFactory.create()
         data = {"groep": groep.groep_id}
         serializer = IndieningSerializer(data=data)
         self.assertFalse(serializer.is_valid())
-    
-    def test_indiening_serializer_no_groep(self):
+
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_indiening_serializer_no_groep(self, mock_send_mail):
         data = {"bestand": SimpleUploadedFile("bestand.txt", b"bestand_content")}
         serializer = IndieningSerializer(data=data)
         self.assertFalse(serializer.is_valid())
-    
-    def test_indiening_serializer_update(self):
+
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_indiening_serializer_update(self, mock_send_mail):
         indiening = IndieningFactory.create()
         new_data = {"groep": indiening.groep.groep_id}
         serializer = IndieningSerializer(
@@ -56,4 +61,3 @@ def test_indiening_serializer_update(self):
         self.assertTrue(serializer.is_valid())
         indiening = serializer.save()
         self.assertEqual(indiening.groep, indiening.groep)
-        
diff --git a/api/tests/serializers/test_project.py b/api/tests/serializers/test_project.py
index 1cfc3311..9db3b211 100644
--- a/api/tests/serializers/test_project.py
+++ b/api/tests/serializers/test_project.py
@@ -6,6 +6,7 @@
 from api.tests.factories.vak import VakFactory
 from django.core.files.uploadedfile import SimpleUploadedFile
 from datetime import datetime, timedelta
+from django.utils import timezone
 
 
 class ProjectSerializerTest(APITestCase):
@@ -87,8 +88,9 @@ def test_validation_for_blank_items(self):
                 "deadline": "",
                 "extra_deadline": "",
                 "max_score": "",
-                'aantal_groepen': "",
+                "aantal_groepen": "",
                 "max_groep_grootte": "",
+                "student_groep": "",
                 "zichtbaar": "",
                 "gearchiveerd": "",
             }
@@ -102,18 +104,40 @@ def test_create(self):
             "beschrijving": "Dit is een test project.",
             "opgave_bestand": SimpleUploadedFile("file.txt", b"file_content"),
             "vak": vak,
-            "deadline": self.serializer.data["deadline"],
-            "extra_deadline": self.serializer.data["extra_deadline"],
+            "deadline": timezone.now() + timedelta(days=1),
+            "extra_deadline": timezone.now() + timedelta(days=2),
             "max_score": 20,
-            'aantal_groepen': 50,
+            "aantal_groepen": 50,
             "max_groep_grootte": 1,
+            "student_groep": False,
             "zichtbaar": True,
             "gearchiveerd": False,
         }
         serializer = ProjectSerializer(data=data)
         self.assertTrue(serializer.is_valid())
         project = serializer.save()
-        self.assertEqual(project.deadline, parse(data["deadline"]))
+        self.assertEqual(project.deadline, data["deadline"])
+
+    def test_create_higher_grootte(self):
+        vak = VakFactory.create().vak_id
+        data = {
+            "titel": "test project",
+            "beschrijving": "Dit is een test project.",
+            "opgave_bestand": SimpleUploadedFile("file.txt", b"file_content"),
+            "vak": vak,
+            "deadline": timezone.now() + timedelta(days=1),
+            "extra_deadline": timezone.now() + timedelta(days=2),
+            "max_score": 20,
+            "aantal_groepen": 50,
+            "max_groep_grootte": 5,
+            "student_groep": False,
+            "zichtbaar": True,
+            "gearchiveerd": False,
+        }
+        serializer = ProjectSerializer(data=data)
+        self.assertTrue(serializer.is_valid())
+        project = serializer.save()
+        self.assertEqual(project.deadline, data["deadline"])
 
     def test_create_no_deadline(self):
         vak = VakFactory.create().vak_id
@@ -125,8 +149,9 @@ def test_create_no_deadline(self):
             "deadline": None,
             "extra_deadline": None,
             "max_score": 20,
-            'aantal_groepen': 50,
+            "aantal_groepen": 50,
             "max_groep_grootte": 1,
+            "student_groep": False,
             "zichtbaar": True,
             "gearchiveerd": False,
         }
@@ -145,8 +170,9 @@ def test_create_invalid_deadline(self):
             "deadline": datetime.now() - timedelta(days=1),
             "extra_deadline": self.serializer.data["extra_deadline"],
             "max_score": 20,
-            'aantal_groepen': 50,
+            "aantal_groepen": 50,
             "max_groep_grootte": 1,
+            "student_groep": False,
             "zichtbaar": True,
             "gearchiveerd": False,
         }
@@ -164,8 +190,9 @@ def test_create_invalid_extra_deadline(self):
             "deadline": self.serializer.data["deadline"],
             "extra_deadline": datetime.now() - timedelta(days=1),
             "max_score": 20,
-            'aantal_groepen': 50,
+            "aantal_groepen": 50,
             "max_groep_grootte": 1,
+            "student_groep": False,
             "zichtbaar": True,
             "gearchiveerd": False,
         }
@@ -184,6 +211,7 @@ def test_update(self):
             "max_score": 20,
             "aantal_groepen": 50,
             "max_groep_grootte": 1,
+            "student_groep": False,
             "zichtbaar": True,
             "gearchiveerd": False,
         }
diff --git a/api/tests/serializers/test_score.py b/api/tests/serializers/test_score.py
index 4e03e789..decbb449 100644
--- a/api/tests/serializers/test_score.py
+++ b/api/tests/serializers/test_score.py
@@ -3,10 +3,12 @@
 from api.serializers.score import ScoreSerializer
 from api.tests.factories.score import ScoreFactory
 from api.tests.factories.indiening import IndieningFactory
+from unittest.mock import patch
 
 
 class ScoreSerializerTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.score = ScoreFactory.create()
         self.score.score = self.score.indiening.groep.project.max_score
         self.score.save()
@@ -28,7 +30,8 @@ def test_score_field_content(self):
         data = self.serializer.data
         self.assertEqual(data["score"], self.score.score)
 
-    def test_score_serializer_create(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_score_serializer_create(self, mock_send_mail):
         indiening = IndieningFactory.create()
         max_score = indiening.groep.project.max_score
         data = {"indiening": indiening.indiening_id, "score": max_score}
@@ -38,7 +41,8 @@ def test_score_serializer_create(self):
         self.assertEqual(score.indiening, indiening)
         self.assertEqual(score.score, data["score"])
 
-    def test_score_serializer_create_invalid(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_score_serializer_create_invalid(self, mock_send_mail):
         indiening = IndieningFactory.create()
         max_score = indiening.groep.project.max_score
         data = {"indiening": indiening.indiening_id, "score": max_score}
@@ -50,7 +54,8 @@ def test_score_serializer_create_invalid(self):
         self.assertTrue(new_serializer.is_valid())
         self.assertRaises(ValidationError, new_serializer.save, raise_exception=True)
 
-    def test_score_serializer_create_invalid_high_score(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_score_serializer_create_invalid_high_score(self, mock_send_mail):
         indiening = IndieningFactory.create()
         max_score = indiening.groep.project.max_score
         data = {"indiening": indiening.indiening_id, "score": max_score + 1}
@@ -70,7 +75,8 @@ def test_score_serializer_update(self):
         score = serializer.save()
         self.assertEqual(score.score, new_data["score"])
 
-    def test_score_serializer_update_invalid(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_score_serializer_update_invalid(self, mock_send_mail):
         indiening = IndieningFactory.create()
         new_data = {
             "score": indiening.groep.project.max_score,
diff --git a/api/tests/serializers/test_template.py b/api/tests/serializers/test_template.py
index 656b9ced..24747198 100644
--- a/api/tests/serializers/test_template.py
+++ b/api/tests/serializers/test_template.py
@@ -3,6 +3,7 @@
 from api.tests.factories.template import TemplateFactory
 from api.serializers.template import TemplateSerializer
 
+
 class TemplateSerializerTest(TestCase):
     def setUp(self):
         self.template = TemplateFactory.create()
@@ -10,25 +11,25 @@ def setUp(self):
 
     def test_contains_expected_fields(self):
         data = self.serializer.data
-        self.assertCountEqual(data.keys(), ['template_id', 'user', 'bestand'])
+        self.assertCountEqual(data.keys(), ["template_id", "user", "bestand"])
 
     def test_template_id_field_content(self):
         data = self.serializer.data
-        self.assertEqual(data['template_id'], self.template.template_id)
+        self.assertEqual(data["template_id"], self.template.template_id)
 
     def test_user_field_content(self):
         data = self.serializer.data
-        self.assertEqual(data['user'], self.template.user.id)
+        self.assertEqual(data["user"], self.template.user.id)
 
     def test_bestand_field_content(self):
         data = self.serializer.data
-        self.assertEqual(data['bestand'], self.template.bestand.url)
+        self.assertEqual(data["bestand"], self.template.bestand.url)
 
     def test_validation(self):
         invalid_data = {
-            'user': '',
-            'bestand': '',
+            "user": "",
+            "bestand": "",
         }
         serializer = TemplateSerializer(data=invalid_data)
         with self.assertRaises(ValidationError):
-            serializer.is_valid(raise_exception=True)
\ No newline at end of file
+            serializer.is_valid(raise_exception=True)
diff --git a/api/tests/views/test_indiening.py b/api/tests/views/test_indiening.py
index 8296bde9..7e299b77 100644
--- a/api/tests/views/test_indiening.py
+++ b/api/tests/views/test_indiening.py
@@ -6,10 +6,12 @@
 from rest_framework import status
 from django.core.files.uploadedfile import SimpleUploadedFile
 from django.core.files.base import ContentFile
+from unittest.mock import patch
 
 
 class IndieningListViewTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.client = APIClient()
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
@@ -30,7 +32,8 @@ def test_indiening_list_get_as_student(self):
         self.assertEqual(response.status_code, status.HTTP_200_OK)
         self.assertEqual(len(response.data), 1)
 
-    def test_indiening_list_post(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_indiening_list_post(self, mock_send_mail):
         data = {
             "groep": self.indiening2.groep_id,
         }
@@ -96,7 +99,8 @@ def test_indiening_list_post_invalid(self):
 
 
 class IndieningDetailViewTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.client = APIClient()
         self.gebruiker = GebruikerFactory.create()
         self.gebruiker.user.is_superuser = True
@@ -133,7 +137,8 @@ def test_indiening_detail_delete_unauthorized(self):
 
 
 class IndieningDetailDownloadBestandenTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.client = APIClient()
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
@@ -167,7 +172,8 @@ def test_indiening_detail_download_bestanden_get_invalid(self):
 
 
 class IndieningDetailDownloadArtefactenTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.client = APIClient()
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
diff --git a/api/tests/views/test_score.py b/api/tests/views/test_score.py
index 8c3fd933..961e49f5 100644
--- a/api/tests/views/test_score.py
+++ b/api/tests/views/test_score.py
@@ -5,10 +5,12 @@
 from rest_framework.test import APIClient
 from django.urls import reverse
 from rest_framework import status
+from unittest.mock import patch
 
 
 class ScoreListViewTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.client = APIClient()
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
@@ -39,7 +41,8 @@ def test_score_list_get_invalid_indiening(self):
         response = self.client.get(self.url, {"indiening": "indiening"})
         self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
 
-    def test_score_list_post(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_score_list_post(self, mock_send_mail):
         indiening = IndieningFactory.create()
         data = {
             "score_id": self.score1.score_id,
@@ -49,7 +52,8 @@ def test_score_list_post(self):
         response = self.client.post(self.url, data, format="json")
         self.assertEqual(response.status_code, status.HTTP_201_CREATED)
 
-    def test_score_list_post_unauthorized(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def test_score_list_post_unauthorized(self, mock_send_mail):
         self.client.force_login(self.student.user)
         indiening = IndieningFactory.create()
         data = {
@@ -71,7 +75,8 @@ def test_score_list_post_invalid(self):
 
 
 class ScoreDetailViewTest(TestCase):
-    def setUp(self):
+    @patch("api.models.indiening.send_indiening_confirmation_mail")
+    def setUp(self, mock_send_mail):
         self.client = APIClient()
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
diff --git a/api/tests/views/test_template.py b/api/tests/views/test_template.py
index 11b3835f..355d6f15 100644
--- a/api/tests/views/test_template.py
+++ b/api/tests/views/test_template.py
@@ -4,24 +4,42 @@
 from api.models.template import Template
 from api.tests.factories.gebruiker import GebruikerFactory
 from django.core.files.uploadedfile import SimpleUploadedFile
+from rest_framework import status
+
 
 class TemplateListViewTest(APITestCase):
     def setUp(self):
         self.client = APIClient()
-        self.template = TemplateFactory.create()
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
+        self.template = TemplateFactory.create(user=self.teacher.user)
         self.client.force_login(self.teacher.user)
-        self.template_list_url = reverse('template_list')
+        self.template_list_url = reverse("template_list")
 
     def test_template_list_get(self):
         response = self.client.get(self.template_list_url)
-        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
         self.assertEqual(len(response.data), Template.objects.count())
 
+    def test_template_list_get_as_student(self):
+        self.client.force_login(self.student.user)
+        response = self.client.get(self.template_list_url)
+        self.assertEqual(response.status_code, status.HTTP_403_FORBIDDEN)
+
+    def test_template_list_get_with_teacher(self):
+        response = self.client.get(
+            self.template_list_url, {"lesgever_id": self.teacher.user.id}
+        )
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        self.assertEqual(len(response.data), 1)
+
+    def test_template_list_get_with_invalid_teacher(self):
+        response = self.client.get(self.template_list_url, {"lesgever_id": "invalid"})
+        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
+
     def test_template_list_post(self):
         data = {
-            'user': self.template.user.id,
+            "user": self.template.user.id,
         }
         file = SimpleUploadedFile("template.txt", b"file_content")
         data["bestand"] = file
@@ -29,6 +47,25 @@ def test_template_list_post(self):
         self.assertEqual(response.status_code, 201)
         self.assertEqual(Template.objects.count(), 2)
 
+    def test_template_list_post_as_student(self):
+        self.client.force_login(self.student.user)
+        data = {
+            "user": self.template.user.id,
+        }
+        file = SimpleUploadedFile("template.txt", b"file_content")
+        data["bestand"] = file
+        response = self.client.post(self.template_list_url, data)
+        self.assertEqual(response.status_code, 403)
+        self.assertEqual(Template.objects.count(), 1)
+
+    def test_template_list_post_with_invalid_data(self):
+        data = {
+            "user": self.template.user.id,
+        }
+        response = self.client.post(self.template_list_url, data)
+        self.assertEqual(response.status_code, 400)
+        self.assertEqual(Template.objects.count(), 1)
+
 
 class TemplateDetailViewTest(APITestCase):
     def setUp(self):
@@ -37,24 +74,58 @@ def setUp(self):
         self.teacher = GebruikerFactory.create(is_lesgever=True)
         self.student = GebruikerFactory.create(is_lesgever=False)
         self.client.force_login(self.teacher.user)
-        self.template_detail_url = reverse('template_detail', kwargs={'id': self.template.template_id})
-    
+        self.template_detail_url = reverse(
+            "template_detail", kwargs={"id": self.template.template_id}
+        )
+
     def test_template_detail_get(self):
         response = self.client.get(self.template_detail_url)
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(response.data['template_id'], self.template.template_id)
+        self.assertEqual(response.data["template_id"], self.template.template_id)
+
+    def test_template_detail_get_as_student(self):
+        self.client.force_login(self.student.user)
+        response = self.client.get(self.template_detail_url)
+        self.assertEqual(response.status_code, 403)
+
+    def test_template_detail_get_invalid(self):
+        response = self.client.get(reverse("template_detail", kwargs={"id": 6969}))
+        self.assertEqual(response.status_code, 404)
 
     def test_template_detail_put(self):
         data = {
-            'user': self.template.user.id,
+            "user": self.template.user.id,
         }
         file = SimpleUploadedFile("template.txt", b"file_content")
         data["bestand"] = file
         response = self.client.put(self.template_detail_url, data)
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(response.data['template_id'], self.template.template_id)
+        self.assertEqual(response.data["template_id"], self.template.template_id)
+
+    def test_template_detail_patch(self):
+        data = {"bestand": SimpleUploadedFile("template.txt", b"different_content")}
+        response = self.client.patch(self.template_detail_url, data)
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.data["template_id"], self.template.template_id)
+
+    def test_template_detail_put_as_student(self):
+        self.client.force_login(self.student.user)
+        data = {
+            "user": self.template.user.id,
+        }
+        file = SimpleUploadedFile("template.txt", b"file_content")
+        data["bestand"] = file
+        response = self.client.put(self.template_detail_url, data)
+        self.assertEqual(response.status_code, 403)
+
+    def test_template_detail_put_with_invalid_data(self):
+        data = {
+            "user": self.template.user.id,
+        }
+        response = self.client.put(self.template_detail_url, data)
+        self.assertEqual(response.status_code, 400)
 
     def test_template_detail_delete(self):
         response = self.client.delete(self.template_detail_url)
         self.assertEqual(response.status_code, 204)
-        self.assertEqual(Template.objects.count(), 0)
\ No newline at end of file
+        self.assertEqual(Template.objects.count(), 0)
diff --git a/api/views/indiening.py b/api/views/indiening.py
index bfb1cda9..3fd65c97 100644
--- a/api/views/indiening.py
+++ b/api/views/indiening.py
@@ -7,7 +7,7 @@
 from api.models.vak import Vak
 from api.models.project import Project
 from api.serializers.indiening import IndieningSerializer
-from api.utils import has_permissions, contains, is_lesgever
+from api.utils import has_permissions, contains
 
 from django.http import FileResponse
 
diff --git a/api/views/template.py b/api/views/template.py
index e4400c71..ea82f40c 100644
--- a/api/views/template.py
+++ b/api/views/template.py
@@ -45,7 +45,8 @@ def template_list(request, format=None):
                 serializer.save()
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        return Response(status=status.HTTP_403_FORBIDDEN)
+
+    return Response(status=status.HTTP_403_FORBIDDEN)
 
 
 @api_view(["GET", "PUT", "PATCH", "DELETE"])

From 772106c52f209a52e3d9cbdf62dd4b3ee5252c2a Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 19:01:32 +0200
Subject: [PATCH 058/145] linter

---
 api/tests/models/test_indiening.py | 34 +++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/api/tests/models/test_indiening.py b/api/tests/models/test_indiening.py
index cde9bb16..26f5eb8e 100644
--- a/api/tests/models/test_indiening.py
+++ b/api/tests/models/test_indiening.py
@@ -1,11 +1,12 @@
 from django.test import TestCase
 from api.tests.factories.indiening import IndieningFactory
 from api.models.indiening import upload_to
-from unittest.mock import patch, call, MagicMock
-from api.models.indiening import send_indiening_confirmation_mail
-import os
-from email.mime.multipart import MIMEMultipart
-from email.mime.text import MIMEText
+from unittest.mock import patch  # , MagicMock, call
+
+# from api.models.indiening import send_indiening_confirmation_mail
+# from email.mime.multipart import MIMEMultipart
+# from email.mime.text import MIMEText
+# import os
 
 
 class IndieningModelTest(TestCase):
@@ -42,9 +43,11 @@ def test_bestand(self):
         self.assertIsNotNone(self.indiening.bestand)
 
     # TODO: Fix this test
-    # @patch('smtplib.SMTP_SSL')
-    # @patch('ssl.create_default_context')
-    # def test_send_indiening_confirmation_mail(self, mock_create_default_context, mock_smtp):
+    # @patch("smtplib.SMTP_SSL")
+    # @patch("ssl.create_default_context")
+    # def test_send_indiening_confirmation_mail(
+    #     self, mock_create_default_context, mock_smtp
+    # ):
     #     # Create a test indiening object
     #     mock_create_default_context.reset_mock()
     #     mock_smtp.reset_mock()
@@ -72,7 +75,16 @@ def test_bestand(self):
 
     #     # Check that SMTP_SSL was called with the correct arguments
     #     assert mock_smtp.call_count == indiening.groep.studenten.count()
-    #     mock_smtp.assert_has_calls([call(smtp_server_address, smtp_port, context=mock_create_default_context.return_value)] * indiening.groep.studenten.count())
+    #     mock_smtp.assert_has_calls(
+    #         [
+    #             call(
+    #                 smtp_server_address,
+    #                 smtp_port,
+    #                 context=mock_create_default_context.return_value,
+    #             )
+    #         ]
+    #         * indiening.groep.studenten.count()
+    #     )
 
     #     # Check that login was called with the correct arguments
     #     mock_smtp_instance.login.assert_called_with(mail_username, mail_app_password)
@@ -90,4 +102,6 @@ def test_bestand(self):
     #         email["To"] = student.user.email
     #         email["Subject"] = "Bevestiging van indiening"
     #         email.attach(MIMEText(plain_text, "plain"))
-    #         mock_smtp_instance.sendmail.assert_any_call(mail_username, student.user.email, email.as_string())
+    #         mock_smtp_instance.sendmail.assert_any_call(
+    #             mail_username, student.user.email, email.as_string()
+    #         )

From 98ad892f2daeb5d4b935d3131566b40083d4015f Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 19:19:51 +0200
Subject: [PATCH 059/145] herwerking test_script popup en revert van
 test_script page ui

---
 frontend/frontend/src/i18n/en.ts              |   4 +-
 frontend/frontend/src/i18n/nl.ts              |   4 +-
 .../AddRestrictionButton.tsx                  |   1 +
 .../RestrictionsDialog.tsx                    | 370 ++++++++----------
 4 files changed, 181 insertions(+), 198 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index 7973fc17..20202eb6 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -100,7 +100,9 @@ const english = {
     join: 'Join',
     acces: 'This gives you access to the course.',
     deadlines_on: 'Deadlines on',
-    open_with_ui: 'Open with UI'
+    open_with_ui: 'Open with UI',
+    choose_existing: 'Choose existing',
+    make_new_script: 'Make new script',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index 0cc0da7c..3d7b7fcd 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -100,7 +100,9 @@ const dutch = {
     join: 'Voeg toe',
     acces: 'Dit geeft je toegang tot het vak.',
     deadlines_on: 'Deadlines op',
-    open_with_ui: 'Open met UI'
+    open_with_ui: 'Open met UI',
+    choose_existing: 'Kies een bestaand script',
+    make_new_script: 'Maak nieuw script aan'
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
index 230b0d00..555ba832 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
@@ -68,6 +68,7 @@ export default function AddRestrictionButton({
                 <DialogActions>
                     {/* Cancel Button */}
                     <SecundaryButton id='cancelButton' onClick={handleClose}>{t('cancel')}</SecundaryButton>
+
                 </DialogActions>
             </Dialog>
         </>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 1dbc9eee..84e038e9 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -14,7 +14,7 @@ import {
     FormControl,
     MenuItem,
     Select,
-    TextField,
+    TextField, Divider,
 } from '@mui/material'
 import { t, use } from 'i18next'
 import { restriction } from './AddChangeAssignmentPage.tsx'
@@ -156,7 +156,7 @@ export default function RestrictionsDialog({
     // Buttons array for the vertical button group
     const buttons = [
         <Button id='upload' key="Upload" component={'label'}>
-            Upload
+            Upload script
             <input hidden type="file" multiple onChange={handleUploadedFiles} />
         </Button>,
         <Button
@@ -247,21 +247,38 @@ export default function RestrictionsDialog({
                 multiple
             />
             {/* Vertical button group */}
+            <Typography variant={'h6'} color={'secondary.contrastText'}>
+                {t('make_new_script')+":"}
+            </Typography>
+
+            <Box paddingTop='5px'
+                display={'flex'}
+                gap={5}
+                alignItems={'center'}
+            >
+                {buttons}
+            </Box>
+            <Box paddingTop='5px'display={'flex'} flexDirection={'row'} alignItems={'center'}>
+                <Typography variant={'body2'}>
+                    {t('must_pass') + ':'}
+                </Typography>
+                <Switch
+                    id='mustPassSwitch'
+                    value={mustPass}
+                    onChange={() => setMustPass(!mustPass)}
+                />
+            </Box>
+            <Box padding='20px'/>
+            <Typography variant={'h6'} color={'secondary.contrastText'}>
+                {t('choose_existing')+":"}
+            </Typography>
             <Box
-                padding='10px'
+                paddingTop='5px'
+                paddingBottom='5px'
                 display={'flex'}
                 gap={5}
                 alignItems={'center'}
             >
-                <ButtonGroup
-                    orientation="vertical"
-                    aria-label="Vertical button group"
-                    variant={'outlined'}
-                    color={'primary'}
-                >
-
-                    {buttons}
-                </ButtonGroup>
                 <ButtonGroup
                     orientation="vertical"
                     aria-label="Vertical button group"
@@ -270,34 +287,18 @@ export default function RestrictionsDialog({
                 >
                     {templateButtons}
                 </ButtonGroup>
+
             </Box>
-            <Box
-                padding='10px'
-                display={'flex'}
-                gap={5}
-                alignItems={'center'}
-            >
-                <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
-                    {/* This box will contain the templates */}
-                    <Typography variant={'body2'}>
-                        {t('open_with_ui') + ':'}
-                    </Typography>
-                    <Switch
-                        value={openTemplateInUI}
-                        onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
-                    />
+            <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
+                {/* This box will contain the templates */}
+                <Typography variant={'body2'}>
+                    {t('open_with_ui') + ':'}
+                </Typography>
+                <Switch
+                    value={openTemplateInUI}
+                    onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
+                />
 
-                </Box>
-                <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
-                    <Typography variant={'body2'}>
-                        {t('must_pass') + ':'}
-                    </Typography>
-                    <Switch
-                        id='mustPassSwitch'
-                        value={mustPass}
-                        onChange={() => setMustPass(!mustPass)}
-                    />
-                </Box>
             </Box>
             {/* This is the template interface. */}
             <Dialog fullScreen open={openTemplateInterface} onClose={handleCloseTemplateInterface}>
@@ -305,171 +306,148 @@ export default function RestrictionsDialog({
             </Dialog>
             {/* This is the code editor. */}
             <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>
-                <Stack>
-                    <AppBar sx={{ position: 'relative' }} elevation={0}>
+                <Box>
+                    <AppBar sx={{ position: 'relative' }}>
                         <Toolbar>
-                            <IconButton
-                                edge="start"
-                                color="inherit"
-                                onClick={handleCloseTextEditor}
-                                aria-label="close"
-                            >
-                                <CloseIcon />
-                            </IconButton>
-                        </Toolbar>
-                    </AppBar>
-                    {/* name of template */}
-                    <Box
-                        padding='30px'
-                        display={'flex'}
-                        gap={3}
-                        alignItems={'center'}
-                    >
-                        <Typography
-                            variant={'h5'}
-                            color={'text.primary'}
-                            fontWeight={'bold'}
-                        >
-                            {t('name')}
-                        </Typography>
-                            <Box padding='14px'
-                                sx={{
-                                    border: `1.5px solid gray`,
-                                    borderRadius: 1,
-                                    '&:hover': {
-                                        border: `1.5px solid ${theme.palette.primary.main}`,
-                                    }
-                                }}>
-                            <TextField
-                                // Specify the name of the test script.
-                                value={restrictionName}
-                                required
-                                error={nameError}
-                                helperText={
-                                    nameError
-                                        ? t('is_required')
-                                        : ''
-                                }
-                                variant={'standard'}
-                                sx={{
-                                    marginTop: -1.2,
-                                    borderRadius: 1,
-                                }}
-                                onChange={(e) => {
-                                    setNameError(false)
-                                    setRestrictionName(
-                                        e.target.value
-                                    )
-                                }}
-                            />
-                            </Box>
-                    </Box>
-                    <Box
-                        padding='30px'
-                        display={'flex'}
-                        gap={5}
-                        alignItems={'center'}
-                    >
-
-                        <Typography
-                            variant={'h5'}
-                            color={'text.primary'}
-                            fontWeight={'bold'}
-                        >
-                            Type
-                        </Typography>
-                        <Box padding='5px'
-                             sx={{
-                                 border: `1.5px solid gray`,
-                                 borderRadius: 1,
-                                 '&:hover': {
-                                    border: `1.5px solid ${theme.palette.primary.main}`,
-                                 }
-                             }}
-                            >
-                            <FormControl
-                                size="small"
+                            <Box
+                                display={'flex'}
+                                flexDirection={'row'}
+                                alignItems={'center'}
+                                width={'100%'}
+                                justifyContent={'space-between'}
                             >
-                                <Select
-                                    // Select the file extension of the test script.
-                                    // This can be for instance .py or .sh.
-                                    label={t('restrictionType')}
-                                    labelId={t('restrictionType')}
-                                    value={restrictionType}
-                                    required
-                                    autoWidth
-                                    variant={'standard'}
-                                    sx={{
-                                        borderRadius: 1,
-                                        padding: 0.5,
-                                    }}
-                                    onChange={(e) =>
-                                        setRestrictionType(
-                                            e.target
-                                                .value as restrictionExtension
-                                        )
-                                    }
+                                <Box
+                                    display={'flex'}
+                                    flexDirection={'row'}
+                                    alignItems={'center'}
+                                    justifyContent={'flex-start'}
                                 >
-                                    <MenuItem
-                                        value={
-                                            restrictionExtension.Shell
-                                        }
-                                        color={'secondary.contrastText'}
+                                    <IconButton
+                                        edge="start"
+                                        color="inherit"
+                                        onClick={handleCloseTextEditor}
+                                        aria-label="close"
                                     >
-                                        {restrictionExtension.Shell}
-                                    </MenuItem>
-                                    <MenuItem
-                                        value={
-                                            restrictionExtension.Python
-                                        }
+                                        <CloseIcon />
+                                    </IconButton>
+                                    <Box
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        alignItems={'center'}
+                                        padding={1}
+                                        justifyContent={'center'}
+                                        gap={1}
                                     >
-                                        {
-                                            restrictionExtension.Python
-                                        }
-                                    </MenuItem>
-                                </Select>
-                            </FormControl>
-                        </Box>
-                    </Box>
-
-                    {/* TextField for entering test code */}
-                    <Box padding='20px'>
-                        <Card>
-                            <Box aria-label={'Content'} padding={3}>
-                                <TextField
-                                    fullWidth
-                                    value={textFieldContent}
-                                    onChange={(e) =>
-                                        setTextFieldContent(e.target.value)
-                                    }
-                                    id="filled-textarea"
-                                    multiline
-                                    label={'Test-Content'}
-                                    variant="standard"
-                                    sx={{
-                                        overflowY: 'auto',
-                                        maxHeight: '100%',
-                                    }}
-                                />
+                                        <TextField
+                                            // Specify the name of the test script.
+                                            label={t('name')}
+                                            value={restrictionName}
+                                            required
+                                            error={nameError}
+                                            helperText={
+                                                nameError
+                                                    ? t('is_required')
+                                                    : ''
+                                            }
+                                            variant={'standard'}
+                                            sx={{
+                                                '& .MuiInputBase-root': {
+                                                    color: 'secondary.main',
+                                                },
+                                                marginTop: -1.2,
+                                                borderRadius: 1,
+                                            }}
+                                            onChange={(e) => {
+                                                setNameError(false)
+                                                setRestrictionName(
+                                                    e.target.value
+                                                )
+                                            }}
+                                        />
+                                        <FormControl
+                                            sx={{ minWidth: 80 }}
+                                            size="small"
+                                        >
+                                            <Select
+                                                // Select the file extension of the test script.
+                                                // This can be for instance .py or .sh.
+                                                label={t('restrictionType')}
+                                                labelId={t('restrictionType')}
+                                                value={restrictionType}
+                                                variant={'standard'}
+                                                required
+                                                autoWidth
+                                                sx={{
+                                                    '& .MuiSelect-select': {
+                                                        color: 'secondary.main',
+                                                    },
+                                                    borderRadius: 1,
+                                                    padding: 0.5,
+                                                }}
+                                                onChange={(e) =>
+                                                    setRestrictionType(
+                                                        e.target
+                                                            .value as restrictionExtension
+                                                    )
+                                                }
+                                            >
+                                                <MenuItem
+                                                    value={
+                                                        restrictionExtension.Shell
+                                                    }
+                                                    color={'text.secondary'}
+                                                >
+                                                    {restrictionExtension.Shell}
+                                                </MenuItem>
+                                                <MenuItem
+                                                    value={
+                                                        restrictionExtension.Python
+                                                    }
+                                                >
+                                                    {
+                                                        restrictionExtension.Python
+                                                    }
+                                                </MenuItem>
+                                            </Select>
+                                        </FormControl>
+                                    </Box>
+                                </Box>
+                                <Button
+                                    autoFocus
+                                    color="inherit"
+                                    onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
+                                >
+                                    save template
+                                </Button>
+                                <Button
+                                    autoFocus
+                                    color="inherit"
+                                    onClick={() => setPopupOpen(true)}
+                                >
+                                    save
+                                </Button>
                             </Box>
-                        </Card>
+                        </Toolbar>
+                    </AppBar>
+                    {/* TextField for entering test code */}
+                    <Box aria-label={'Content'} padding={1}>
+                        <TextField
+                            fullWidth
+                            value={textFieldContent}
+                            onChange={(e) =>
+                                setTextFieldContent(e.target.value)
+                            }
+                            id="filled-textarea"
+                            multiline
+                            label={'Test-Content'}
+                            variant="standard"
+                            sx={{
+                                overflowY: 'auto',
+                                maxHeight: '100%',
+                            }}
+                        />
                     </Box>
-                    <Stack direction="row" padding='20px' spacing='20px'>
-                        <Button
-                            autoFocus
-                            color="inherit"
-                            onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
-                        >
-                            save template
-                        </Button>
-                        <SecundaryButton
-                            autoFocus
-                            onClick={() => setPopupOpen(true)}
-                        >
-                            save
-                        </SecundaryButton>
-                    </Stack>
-                </Stack>
+                </Box>
             </Dialog>
             <WarningPopup
                 title={t('add_restriction') + '?'}

From 94105e6fdb2924c1a1566f177a4023f41fcaac74 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 19:45:44 +0200
Subject: [PATCH 060/145] template example page bijgewerkt

---
 .../RestrictionTemplateUI.tsx                 |   9 +-
 .../RestrictionsDialog.tsx                    | 100 ++++++++++--------
 2 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index ca3b9240..90e5f01b 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
+import {SecundaryButton} from "../../components/CustomComponents.tsx";
 
 
 const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, extension: string) => {
@@ -135,13 +136,13 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
                     <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
                         {templateName}
                     </Typography>
-                    <Button
+                    <SecundaryButton
                         autoFocus
                         color="inherit"
                         onClick={() => saveRestrictionTemplate(restrictionCode, paramsState, templateExtension)}
                     >
                         save
-                    </Button>
+                    </SecundaryButton>
                 </Toolbar>
             </AppBar>
             <Box aria-label={'Content'} padding={1}>
@@ -157,7 +158,6 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
                                 <TextField
                                     type='number'
                                     value={paramsState[param.variable]}
-                                    fullWidth
                                     onChange={(e) => handleArrayChange(param.variable, Number(e.target.value))}
                                 />
                             </>
@@ -172,7 +172,6 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
                                 <TextField
                                     type='text'
                                     value={paramsState[param.variable]}
-                                    fullWidth
                                     onChange={(e) => handleArrayChange(param.variable, e.target.value)}
                                 />
                             </>
@@ -215,7 +214,7 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
                                         </ListItem>
                                     ))}
                                 </List>
-                                <Button variant="outlined" onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</Button>
+                                <SecundaryButton onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</SecundaryButton>
                             </div>
                         )}
                     </div>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 84e038e9..228d7ab4 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ChangeEvent, useState } from 'react'
-import { Card,Button,SecundaryButton } from '../../components/CustomComponents.tsx'
+import {Button, Card, SecundaryButton} from '../../components/CustomComponents.tsx'
 import Dialog from '@mui/material/Dialog'
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
@@ -9,12 +9,11 @@ import Typography from '@mui/material/Typography'
 import CloseIcon from '@mui/icons-material/Close'
 import {
     Box,
-    Stack,
     ButtonGroup,
     FormControl,
     MenuItem,
     Select,
-    TextField, Divider,
+    TextField,
 } from '@mui/material'
 import { t, use } from 'i18next'
 import { restriction } from './AddChangeAssignmentPage.tsx'
@@ -22,7 +21,6 @@ import Switch from '@mui/material/Switch'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import RestrictionsTemplateUI from './RestrictionTemplateUI.tsx'
 import instance from '../../axiosConfig.ts'
-import theme from "../../Theme.ts";
 
 interface RestrictionsDialogProps {
     restrictions: restriction[]
@@ -279,15 +277,21 @@ export default function RestrictionsDialog({
                 gap={5}
                 alignItems={'center'}
             >
-                <ButtonGroup
-                    orientation="vertical"
-                    aria-label="Vertical button group"
-                    variant={'outlined'}
-                    color={'primary'}
+                <Box
+                    sx={{
+                        maxHeight: 150,
+                        overflowY: 'auto',
+                    }}
                 >
-                    {templateButtons}
-                </ButtonGroup>
-
+                    <ButtonGroup
+                        orientation="vertical"
+                        aria-label="Vertical button group"
+                        variant={'outlined'}
+                        color={'primary'}
+                    >
+                        {templateButtons}
+                    </ButtonGroup>
+            </Box>
             </Box>
             <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
                 {/* This box will contain the templates */}
@@ -307,7 +311,7 @@ export default function RestrictionsDialog({
             {/* This is the code editor. */}
             <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>
                 <Box>
-                    <AppBar sx={{ position: 'relative' }}>
+                    <AppBar elevation={0} sx={{ position: 'relative' }}>
                         <Toolbar>
                             <Box
                                 display={'flex'}
@@ -412,40 +416,52 @@ export default function RestrictionsDialog({
                                         </FormControl>
                                     </Box>
                                 </Box>
-                                <Button
-                                    autoFocus
-                                    color="inherit"
-                                    onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
-                                >
-                                    save template
-                                </Button>
-                                <Button
-                                    autoFocus
-                                    color="inherit"
-                                    onClick={() => setPopupOpen(true)}
+                                <Box
+                                    display="flex"
+                                    flexDirection="row"
+                                    justifyContent="space-between"
+                                    alignItems="center"
                                 >
-                                    save
-                                </Button>
+                                    <SecundaryButton
+                                        autoFocus
+                                        color="inherit"
+                                        onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
+                                    >
+                                        save as template
+                                    </SecundaryButton>
+                                    <Box paddingRight='10px'/>
+                                    <SecundaryButton
+                                        autoFocus
+                                        color="inherit"
+                                        onClick={() => setPopupOpen(true)}
+                                    >
+                                        save
+                                    </SecundaryButton>
+                                </Box>
                             </Box>
                         </Toolbar>
                     </AppBar>
                     {/* TextField for entering test code */}
-                    <Box aria-label={'Content'} padding={1}>
-                        <TextField
-                            fullWidth
-                            value={textFieldContent}
-                            onChange={(e) =>
-                                setTextFieldContent(e.target.value)
-                            }
-                            id="filled-textarea"
-                            multiline
-                            label={'Test-Content'}
-                            variant="standard"
-                            sx={{
-                                overflowY: 'auto',
-                                maxHeight: '100%',
-                            }}
-                        />
+                    <Box padding='20px'>
+                        <Card>
+                            <Box aria-label={'Content'} padding={1}>
+                                <TextField
+                                    fullWidth
+                                    value={textFieldContent}
+                                    onChange={(e) =>
+                                        setTextFieldContent(e.target.value)
+                                    }
+                                    id="filled-textarea"
+                                    multiline
+                                    label={'Test-Content'}
+                                    variant="standard"
+                                    sx={{
+                                        overflowY: 'auto',
+                                        maxHeight: '100%',
+                                    }}
+                                />
+                            </Box>
+                        </Card>
                     </Box>
                 </Box>
             </Dialog>

From 8ef5e5ea76f000a93402e67e3d58619a55204cb7 Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 20:04:42 +0200
Subject: [PATCH 061/145] confirmation mail test

---
 api/tests/models/test_indiening.py | 152 ++++++++++++++++-------------
 1 file changed, 84 insertions(+), 68 deletions(-)

diff --git a/api/tests/models/test_indiening.py b/api/tests/models/test_indiening.py
index 26f5eb8e..041a60e7 100644
--- a/api/tests/models/test_indiening.py
+++ b/api/tests/models/test_indiening.py
@@ -1,12 +1,11 @@
 from django.test import TestCase
 from api.tests.factories.indiening import IndieningFactory
 from api.models.indiening import upload_to
-from unittest.mock import patch  # , MagicMock, call
-
-# from api.models.indiening import send_indiening_confirmation_mail
-# from email.mime.multipart import MIMEMultipart
-# from email.mime.text import MIMEText
-# import os
+from unittest.mock import patch, MagicMock, call
+from api.models.indiening import send_indiening_confirmation_mail
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
+import os
 
 
 class IndieningModelTest(TestCase):
@@ -43,65 +42,82 @@ def test_bestand(self):
         self.assertIsNotNone(self.indiening.bestand)
 
     # TODO: Fix this test
-    # @patch("smtplib.SMTP_SSL")
-    # @patch("ssl.create_default_context")
-    # def test_send_indiening_confirmation_mail(
-    #     self, mock_create_default_context, mock_smtp
-    # ):
-    #     # Create a test indiening object
-    #     mock_create_default_context.reset_mock()
-    #     mock_smtp.reset_mock()
-    #     indiening = self.indiening
-
-    #     smtp_server_address = "smtp.gmail.com"
-    #     smtp_port = 465
-    #     mail_username = os.environ.get("MAIL_USERNAME")
-    #     mail_app_password = os.environ.get("MAIL_APP_PASSWORD")
-    #     indiening_status = {
-    #         -1: "heeft niet alle testen geslaagd.",
-    #         0: "wordt nog getest...",
-    #         1: "heeft alle testen geslaagd!",
-    #     }
-
-    #     # Setup the mock SMTP_SSL object
-    #     mock_smtp_instance = MagicMock()
-    #     mock_smtp.return_value.__enter__.return_value = mock_smtp_instance
-
-    #     # Call the function
-    #     send_indiening_confirmation_mail(indiening)
-
-    #     # Check that create_default_context was called twice
-    #     assert mock_create_default_context.call_count == 1
-
-    #     # Check that SMTP_SSL was called with the correct arguments
-    #     assert mock_smtp.call_count == indiening.groep.studenten.count()
-    #     mock_smtp.assert_has_calls(
-    #         [
-    #             call(
-    #                 smtp_server_address,
-    #                 smtp_port,
-    #                 context=mock_create_default_context.return_value,
-    #             )
-    #         ]
-    #         * indiening.groep.studenten.count()
-    #     )
-
-    #     # Check that login was called with the correct arguments
-    #     mock_smtp_instance.login.assert_called_with(mail_username, mail_app_password)
-
-    #     # Check that sendmail was called with the correct arguments for each student
-    #     for student in indiening.groep.studenten.all():
-    #         plain_text = f"""
-    #         Beste {student.user.first_name} {student.user.last_name},
-
-    #         Dit is een bevestiging dat uw indiening voor het project {indiening.groep.project.titel} is ontvangen.
-    #         De indiening {indiening_status[indiening.status]}.
-    #         """
-    #         email = MIMEMultipart()
-    #         email["From"] = mail_username
-    #         email["To"] = student.user.email
-    #         email["Subject"] = "Bevestiging van indiening"
-    #         email.attach(MIMEText(plain_text, "plain"))
-    #         mock_smtp_instance.sendmail.assert_any_call(
-    #             mail_username, student.user.email, email.as_string()
-    #         )
+    @patch('smtplib.SMTP_SSL')
+    @patch('ssl.create_default_context')
+    def test_send_indiening_confirmation_mail(self, mock_create_default_context, mock_smtp):
+        indiening = self.indiening
+        project = indiening.groep.project
+
+        smtp_server_address = "smtp.gmail.com"
+        smtp_port = 465
+        mail_username = os.environ.get("MAIL_USERNAME")
+        mail_app_password = os.environ.get("MAIL_APP_PASSWORD")
+        indiening_status = {
+            -1: "heeft niet alle testen geslaagd.",
+            0: "wordt nog getest...",
+            1: "heeft alle testen geslaagd!",
+        }
+        project_url = f"https://sel2-4.ugent.be/course/{project.vak.vak_id}/assignment/{project.project_id}"
+        indiening_url = f"https://sel2-4.ugent.be/course/{project.vak.vak_id}/assignment/ \
+            {project.project_id}/submission/{indiening.indiening_id}"
+
+        # Setup the mock SMTP_SSL object
+        mock_smtp_instance = MagicMock()
+        mock_smtp.return_value.__enter__.return_value = mock_smtp_instance
+
+        # Call the function
+        send_indiening_confirmation_mail(indiening)
+
+        # Check that create_default_context was called once
+        assert mock_create_default_context.call_count == 1
+
+        # Check that SMTP_SSL was called with the correct arguments
+        assert mock_smtp.call_count == indiening.groep.studenten.count()
+        mock_smtp.assert_has_calls([call(smtp_server_address, smtp_port, context=mock_create_default_context.return_value)] * indiening.groep.studenten.count())
+
+        # Check that login was called with the correct arguments
+        mock_smtp_instance.login.assert_called_with(mail_username, mail_app_password)
+
+
+        # Check that sendmail was called once for each student
+        assert mock_smtp_instance.sendmail.call_count == indiening.groep.studenten.count()
+
+        # Check that sendmail was called with the correct arguments
+        for student in indiening.groep.studenten.all():
+            subject = "Indieningsontvangst"
+
+            email = MIMEMultipart("alternative")
+            email["Subject"] = subject
+            email["From"] = mail_username
+            email["To"] = student.user.email
+
+            plain_text = f"""
+            Beste {student.user.first_name} {student.user.last_name},
+
+            Dit is een bevestiging dat uw indiening voor het project {project.titel} is ontvangen.
+            De indiening {indiening_status[indiening.status]}.
+            """
+
+            html_text = f"""
+            <html>
+            <body>
+            <p>Beste {student.user.first_name} {student.user.last_name}</p>
+            <p>Dit is een bevestiging dat uw indiening voor het project \
+                <a href="{project_url}">{project.titel}</a> is ontvangen.</p>
+            <p>De <a href="{indiening_url}">indiening</a> {indiening_status[indiening.status]}</p>
+            </body>
+            </html>
+            """
+
+            email.attach(MIMEText(plain_text, "plain"))
+            email.attach(MIMEText(html_text, "html"))
+            
+            call_args_list = mock_smtp_instance.sendmail.call_args_list
+            for mock_call in call_args_list:
+                sent_mail_username, sent_student_email, sent_email_content = mock_call.args
+                assert sent_mail_username == mail_username
+                assert sent_student_email == student.user.email
+                assert subject in sent_email_content
+                assert f"Beste {student.user.first_name} {student.user.last_name}" in sent_email_content
+                assert f"Dit is een bevestiging dat uw indiening voor het project {project.titel} is ontvangen." in sent_email_content
+                assert f"De indiening {indiening_status[indiening.status]}" in sent_email_content
\ No newline at end of file

From 143257ccea85c18936ff842301e660a8c9e8dd77 Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 20:05:08 +0200
Subject: [PATCH 062/145] linter

---
 api/tests/models/test_indiening.py | 47 +++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/api/tests/models/test_indiening.py b/api/tests/models/test_indiening.py
index 041a60e7..9949de8d 100644
--- a/api/tests/models/test_indiening.py
+++ b/api/tests/models/test_indiening.py
@@ -42,9 +42,11 @@ def test_bestand(self):
         self.assertIsNotNone(self.indiening.bestand)
 
     # TODO: Fix this test
-    @patch('smtplib.SMTP_SSL')
-    @patch('ssl.create_default_context')
-    def test_send_indiening_confirmation_mail(self, mock_create_default_context, mock_smtp):
+    @patch("smtplib.SMTP_SSL")
+    @patch("ssl.create_default_context")
+    def test_send_indiening_confirmation_mail(
+        self, mock_create_default_context, mock_smtp
+    ):
         indiening = self.indiening
         project = indiening.groep.project
 
@@ -73,14 +75,24 @@ def test_send_indiening_confirmation_mail(self, mock_create_default_context, moc
 
         # Check that SMTP_SSL was called with the correct arguments
         assert mock_smtp.call_count == indiening.groep.studenten.count()
-        mock_smtp.assert_has_calls([call(smtp_server_address, smtp_port, context=mock_create_default_context.return_value)] * indiening.groep.studenten.count())
+        mock_smtp.assert_has_calls(
+            [
+                call(
+                    smtp_server_address,
+                    smtp_port,
+                    context=mock_create_default_context.return_value,
+                )
+            ]
+            * indiening.groep.studenten.count()
+        )
 
         # Check that login was called with the correct arguments
         mock_smtp_instance.login.assert_called_with(mail_username, mail_app_password)
 
-
         # Check that sendmail was called once for each student
-        assert mock_smtp_instance.sendmail.call_count == indiening.groep.studenten.count()
+        assert (
+            mock_smtp_instance.sendmail.call_count == indiening.groep.studenten.count()
+        )
 
         # Check that sendmail was called with the correct arguments
         for student in indiening.groep.studenten.all():
@@ -111,13 +123,26 @@ def test_send_indiening_confirmation_mail(self, mock_create_default_context, moc
 
             email.attach(MIMEText(plain_text, "plain"))
             email.attach(MIMEText(html_text, "html"))
-            
+
             call_args_list = mock_smtp_instance.sendmail.call_args_list
             for mock_call in call_args_list:
-                sent_mail_username, sent_student_email, sent_email_content = mock_call.args
+                (
+                    sent_mail_username,
+                    sent_student_email,
+                    sent_email_content,
+                ) = mock_call.args
                 assert sent_mail_username == mail_username
                 assert sent_student_email == student.user.email
                 assert subject in sent_email_content
-                assert f"Beste {student.user.first_name} {student.user.last_name}" in sent_email_content
-                assert f"Dit is een bevestiging dat uw indiening voor het project {project.titel} is ontvangen." in sent_email_content
-                assert f"De indiening {indiening_status[indiening.status]}" in sent_email_content
\ No newline at end of file
+                assert (
+                    f"Beste {student.user.first_name} {student.user.last_name}"
+                    in sent_email_content
+                )
+                assert (
+                    f"Dit is een bevestiging dat uw indiening voor het project {project.titel} is ontvangen."
+                    in sent_email_content
+                )
+                assert (
+                    f"De indiening {indiening_status[indiening.status]}"
+                    in sent_email_content
+                )

From a61dfcff537e53b0890afc5b8fa7ca6bf80c74fa Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Sat, 18 May 2024 20:10:55 +0200
Subject: [PATCH 063/145] coverage verslag + TODO verwijderd

---
 .coverage                          | Bin 53248 -> 53248 bytes
 api/tests/models/test_indiening.py |   1 -
 2 files changed, 1 deletion(-)

diff --git a/.coverage b/.coverage
index 46f1401930854b2cd5057d4f2d08689e198ce4f0..5452ddc7ad4003912f0fa0f52f8081184174c770 100644
GIT binary patch
delta 131
zcmV-}0DS*|paX!Q1F!~wLdyUT_Yc|+&=18Axeu-no)3o)e-CmGRu4-LKo2Sp5)TLt
z?GD=x$PT^^sScM8gbsQRW)4seISw5T2@UlP;tk8Q5fFn7v(b%<0UR0&1OW*)3;ydp
l{t*BGAb=-;3BUx9-QFe*`vH@3k0u5Q000B<53`<+VnEvkDnkGO

delta 125
zcmV-@0D}L3paX!Q1F!~wLeT&Z_Yc|+&=18Axeu-no)3o)e-CmGTn|wXMh`F#7!M8(
z^A6z-&JM&5uMV9KiVlDdYz|fqKMo@f4-NYb=nc`c5fF(Dv&)T(0TvVs1OW*u3;ydp
f{t*BGAb=-;3BUx9lX8zH1_c0s0r&^Ao{wTc{3a+x

diff --git a/api/tests/models/test_indiening.py b/api/tests/models/test_indiening.py
index 9949de8d..cc579b81 100644
--- a/api/tests/models/test_indiening.py
+++ b/api/tests/models/test_indiening.py
@@ -41,7 +41,6 @@ def test_result(self):
     def test_bestand(self):
         self.assertIsNotNone(self.indiening.bestand)
 
-    # TODO: Fix this test
     @patch("smtplib.SMTP_SSL")
     @patch("ssl.create_default_context")
     def test_send_indiening_confirmation_mail(

From 24c90162c5448442058793ecd43093d1a4079c06 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 21:12:20 +0200
Subject: [PATCH 064/145] added secondary button in custom components

---
 .../src/components/CustomComponents.tsx       | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 21d8c38e..8fc4d6e3 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -1,3 +1,4 @@
+import { darken,lighten } from '@mui/system';
 import {
     Button as BaseButton,
     Card as BaseCard,
@@ -13,12 +14,33 @@ export const Button = ({ children, ...props }: any) => {
             size="large"
             sx={{
                 maxHeight: '35px',
-                bgcolor: 'primary.main',
+                backgroundColor: 'primary.main',
                 textTransform: 'none',
                 color: 'primary.contrastText',
                 '&:hover': {
-                    backgroundColor: 'secondary.main',
-                    color: 'secondary.contrastText',
+                    backgroundColor: darken(theme.palette.primary.main,0.5),
+                },
+            }}
+            {...props}
+        >
+            {children}
+        </BaseButton>
+    )
+}
+
+export const SecundaryButton = ({ children, ...props }: any) => {
+    return (
+        <BaseButton
+            variant="contained"
+            disableElevation
+            size="large"
+            sx={{
+                maxHeight: '35px',
+                backgroundColor: 'secondary.main',
+                textTransform: 'none',
+                color: 'secondary.contrastText',
+                '&:hover': {
+                    backgroundColor: darken(theme.palette.secondary.main,0.2),
                 },
             }}
             {...props}
@@ -59,3 +81,4 @@ export const Divider = ({ children, ...props }: any) => {
 }
 
 export default { Button, Card, Divider }
+``
\ No newline at end of file

From 376097f51af320e28a81ed61d33b43d68ed3d40b Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 21:30:40 +0200
Subject: [PATCH 065/145] fixed subject page

---
 frontend/frontend/src/components/CustomComponents.tsx     | 1 -
 frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx | 2 ++
 frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx | 8 +++-----
 frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx | 4 ++--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 8fc4d6e3..50dca8a5 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -81,4 +81,3 @@ export const Divider = ({ children, ...props }: any) => {
 }
 
 export default { Button, Card, Divider }
-``
\ No newline at end of file
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index cbd51900..74e72937 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -150,6 +150,7 @@ export function ProjectsView({
 
     return (
         <>
+            <Card>
             <Box
                 aria-label={'courseHeader'}
                 sx={{
@@ -305,6 +306,7 @@ export function ProjectsView({
                     </Box>
                 </Box>
             </Box>
+            </Card>
         </>
     )
 }
diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
index 7d5529bb..7628bb67 100644
--- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
@@ -1,7 +1,7 @@
 import { User } from './AddChangeSubjectPage'
 import * as React from 'react'
 import { IconButton, List, ListItem, ListItemText, Typography } from '@mui/material'
-import { Button } from '../../components/CustomComponents'
+import {Button, SecundaryButton} from '../../components/CustomComponents'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import CloseIcon from '@mui/icons-material/Close'
@@ -23,15 +23,13 @@ export default function StudentPopUp({ students, text }: StudentPopUpProps) {
     return (
         <>
             {/* Students Button */}
-            <Button
-                variant="contained"
-                color="secondary"
+            <SecundaryButton
                 onClick={() => {
                     setOpen(true)
                 }}
             >
                 {t(text)}
-            </Button>
+            </SecundaryButton>
             {/* Students Dialog */}
             <Dialog
                 open={open}
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 89aabcf2..d757177a 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -461,7 +461,7 @@ export function SubjectsPage() {
                                         doAction={confirmJoinCourse}
                                     />
                                 </Box>
-                                <Card
+                                <Box
                                     sx={{
                                         padding: 0,
                                         backgroundColor: 'background.default',
@@ -473,7 +473,7 @@ export function SubjectsPage() {
                                         students={studentsLoading ? []: students}
                                         text='students'
                                     ></StudentPopUp>
-                                </Card>
+                                </Box>
                             </Stack>
                         </>
                     )}

From 12d18d842c07c0e507171df13ec00db25cbafd8b Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Sat, 18 May 2024 21:46:54 +0200
Subject: [PATCH 066/145] assignmentpage crasht niet meer als de student niet
 ingeschreven is in een groep

---
 .../src/pages/assignmentPage/AssignmentPage.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 20d62583..14a2ca6f 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -128,10 +128,12 @@ export function AssignmentPage() {
                         const groupResponse = await instance.get<[Group]>(
                             `/groepen/?student=${user.user}&project=${assignmentId}`
                         )
-                        const submissionsResponse = await instance.get(
-                            `/indieningen/?project=${assignmentId}&groep=${groupResponse.data[0].groep_id}`
-                        )
-                        setSubmissions(submissionsResponse.data)
+                        if (groupResponse.data.length > 0){
+                            const submissionsResponse = await instance.get(
+                                `/indieningen/?project=${assignmentId}&groep=${groupResponse.data[0].groep_id}`
+                            )
+                            setSubmissions(submissionsResponse.data)
+                        }
                     }
                 }
             } catch (error) {

From fd66fed46bb322634d38fe1231ce730f9f5bb9ad Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sat, 18 May 2024 22:53:11 +0200
Subject: [PATCH 067/145] api calls voor files in orde gebracht enkel nog fout
 in backend

---
 .../AddChangeAssignmentPage.tsx               |  25 ++-
 .../AddRestrictionButton.tsx                  |   9 +-
 .../RestrictionsDialog.tsx                    | 203 +++++++++++-------
 3 files changed, 142 insertions(+), 95 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 42a5cecb..0fb6230c 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -99,7 +99,7 @@ export function AddChangeAssignmentPage() {
     const [maxScore, SetMaxScore] = useState<number>(20)
     const [cleared, setCleared] = useState<boolean>(false)
     const [filename, setFilename] = useState<string>('indiening.zip')
-
+    const [currentUser, setCurrentUser] = useState<number>(0)
     // State for the error checks of the assignment
     const [assignmentErrors, setAssignmentErrors] = useState<errorChecks>({
         title: false,
@@ -161,6 +161,8 @@ export function AddChangeAssignmentPage() {
         const fetchData = async () => {
             //begin loading -> set loading to true
             setLoading(true)
+            const user = await instance.get('/gebruikers/me')
+            setCurrentUser(user.data.user)
 
             //get the assignment
             await instance
@@ -183,15 +185,11 @@ export function AddChangeAssignmentPage() {
 
                     setVisible(assignment.zichtbaar)
                     if (assignment.deadline !== null) {
-                        setDueDate(
-                            dayjs(assignment.deadline)
-                        )
+                        setDueDate(dayjs(assignment.deadline))
                         console.log('deadline' + assignment.deadline)
                     }
                     if (assignment.extra_deadline !== null) {
-                        setExtraDueDate(
-                            dayjs(assignment.extra_deadline)
-                        )
+                        setExtraDueDate(dayjs(assignment.extra_deadline))
                         console.log(
                             'extra deadline' + assignment.extra_deadline
                         )
@@ -512,7 +510,7 @@ export function AddChangeAssignmentPage() {
                         </Box>
                         {/* File Upload button */}
                         <Box
-                            id='uploadButton'
+                            id="uploadButton"
                             padding={0}
                             marginRight={3}
                             display={'flex'}
@@ -784,6 +782,7 @@ export function AddChangeAssignmentPage() {
                                         setRestrictions={(newRestrictions) =>
                                             setRestrictions(newRestrictions)
                                         }
+                                        userid={currentUser}
                                     ></AddRestrictionButton>
                                 </Tooltip>
                             </Box>
@@ -816,7 +815,7 @@ export function AddChangeAssignmentPage() {
                                     <IconButton
                                         // Allows the teacher to select whether
                                         // the assignment is visible to students or not.
-                                        id='visibilityOn'
+                                        id="visibilityOn"
                                         color={'info'}
                                         onClick={() => setVisible(!visible)}
                                     >
@@ -824,7 +823,7 @@ export function AddChangeAssignmentPage() {
                                     </IconButton>
                                 ) : (
                                     <IconButton
-                                        id='visibilityOff'
+                                        id="visibilityOff"
                                         color={'info'}
                                         onClick={() => setVisible(!visible)}
                                     >
@@ -835,7 +834,7 @@ export function AddChangeAssignmentPage() {
                                 )}
                                 <Tooltip title={t('remove')}>
                                     <IconButton
-                                        id='delete'
+                                        id="delete"
                                         color={'warning'}
                                         onClick={openDeleteConfirmation}
                                     >
@@ -855,7 +854,7 @@ export function AddChangeAssignmentPage() {
                                 alignItems={'center'}
                             >
                                 <Typography
-                                    id='maxScore'
+                                    id="maxScore"
                                     fontWeight={'bold'}
                                     color={'text.primary'}
                                 >
@@ -920,7 +919,7 @@ export function AddChangeAssignmentPage() {
                             </Tooltip>
                             <Tooltip title={t('submit')}>
                                 <IconButton
-                                    id='submit'
+                                    id="submit"
                                     type="submit"
                                     aria-label={'submit'}
                                     sx={{
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
index 4b36aa12..bb6b6df2 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
@@ -16,11 +16,13 @@ import { restriction } from './AddChangeAssignmentPage.tsx'
  */
 
 interface AddRestrictionButtonProps {
+    userid: number
     restrictions: restriction[]
     setRestrictions: (restriction: restriction[]) => void
 }
 
 export default function AddRestrictionButton({
+    userid,
     restrictions,
     setRestrictions,
 }: AddRestrictionButtonProps) {
@@ -35,7 +37,7 @@ export default function AddRestrictionButton({
         <>
             {/* Add Restriction Button */}
             <IconButton
-                id='addRestrictionButton'
+                id="addRestrictionButton"
                 sx={{
                     bgcolor: 'secondary.main',
                     marginRight: 1,
@@ -60,6 +62,7 @@ export default function AddRestrictionButton({
                 </DialogTitle>
                 <DialogContent dividers={scroll === 'paper'}>
                     <RestrictionsDialog
+                        userid={userid}
                         closeParentDialog={handleClose}
                         restrictions={restrictions}
                         setRestrictions={setRestrictions}
@@ -67,7 +70,9 @@ export default function AddRestrictionButton({
                 </DialogContent>
                 <DialogActions>
                     {/* Cancel Button */}
-                    <Button id='cancelButton' onClick={handleClose}>{t('cancel')}</Button>
+                    <Button id="cancelButton" onClick={handleClose}>
+                        {t('cancel')}
+                    </Button>
                 </DialogActions>
             </Dialog>
         </>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index a9ce7250..cca0b17a 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { ChangeEvent, useState } from 'react'
-import { Card,Button,SecundaryButton } from '../../components/CustomComponents.tsx'
+import {
+    Button,
+    Card,
+    SecundaryButton,
+} from '../../components/CustomComponents.tsx'
 import Dialog from '@mui/material/Dialog'
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
@@ -9,22 +13,23 @@ import Typography from '@mui/material/Typography'
 import CloseIcon from '@mui/icons-material/Close'
 import {
     Box,
-    Stack,
     ButtonGroup,
     FormControl,
     MenuItem,
     Select,
+    Stack,
     TextField,
 } from '@mui/material'
-import { t, use } from 'i18next'
+import { t } from 'i18next'
 import { restriction } from './AddChangeAssignmentPage.tsx'
 import Switch from '@mui/material/Switch'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import RestrictionsTemplateUI from './RestrictionTemplateUI.tsx'
 import instance from '../../axiosConfig.ts'
-import theme from "../../Theme.ts";
+import theme from '../../Theme.ts'
 
 interface RestrictionsDialogProps {
+    userid: number
     restrictions: restriction[]
     setRestrictions: (restriction: restriction[]) => void
     closeParentDialog: () => void
@@ -38,7 +43,7 @@ enum restrictionExtension {
 export interface Template {
     template_id: number
     user: number
-    bestand: number
+    bestand: string
 }
 
 const code = `
@@ -71,6 +76,7 @@ pi=3.14159
  * @returns {React.ReactElement} - Dialog component.
  */
 export default function RestrictionsDialog({
+    userid,
     restrictions,
     setRestrictions,
     closeParentDialog,
@@ -85,6 +91,7 @@ export default function RestrictionsDialog({
         useState<restrictionExtension>(restrictionExtension.Shell)
     const [nameError, setNameError] = useState(false)
     const [popupOpen, setPopupOpen] = useState(false)
+    const [myTemplates, setMyTemplates] = useState<Template[]>([])
 
     // function to handle the uploaded files and send them to the parent component
     const handleUploadedFiles = (e: ChangeEvent<HTMLInputElement>) => {
@@ -135,19 +142,27 @@ export default function RestrictionsDialog({
         setOpenTemplateInterface(true)
     }
 
-    const handleSaveTemplate = async (filename: string, 
-                                        fileExtension: restrictionExtension, 
-                                        code: string, 
-                                        templateMetaData: Template) => {
-        var file = new File([code], 
-                            `${filename}.${fileExtension}`, 
-                            {type: "text/plain"});
+    //upload the test script as a template for later use
+    const handleSaveTemplate = async (
+        filename: string,
+        fileExtension: restrictionExtension,
+        code: string
+    ) => {
+        const file = new File([code], `${filename}.${fileExtension}`, {
+            type: 'text/plain',
+        })
         try {
-            await instance.post(`/templates/`, {
-                template_id: templateMetaData.template_id,
-                user: templateMetaData.user,
-                bestand: file,
-            })
+            const config = {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            }
+            const formdata = new FormData()
+
+            formdata.append('user', userid.toString())
+            formdata.append('bestand', file)
+
+            await instance.post(`/templates/`, formdata, config)
         } catch (error) {
             console.error('Error updating data:', error)
         }
@@ -155,12 +170,12 @@ export default function RestrictionsDialog({
 
     // Buttons array for the vertical button group
     const buttons = [
-        <Button id='upload' key="Upload" component={'label'}>
+        <Button id="upload" key="Upload" component={'label'}>
             Upload
             <input hidden type="file" multiple onChange={handleUploadedFiles} />
         </Button>,
         <Button
-            id='newScript'
+            id="newScript"
             key="New_Script"
             onClick={() => {
                 handleClickOpenTextEditor()
@@ -171,15 +186,15 @@ export default function RestrictionsDialog({
     ]
 
     React.useEffect(() => {
-        let templates: Template[] = []
         async function fetchData() {
-            
             try {
-                const response =
-                    await instance.get<Template[]>('/vakken/?in=true')
-                templates = response.data
-                
-                
+                const response = await instance.get<Template[]>(
+                    `/templates/?lesgever_id=${userid}`
+                )
+                setMyTemplates(response.data)
+                console.log('templates:')
+                console.log(response.data)
+                console.log('----------')
             } catch (error) {
                 console.error('Error fetching data:', error)
             }
@@ -188,15 +203,11 @@ export default function RestrictionsDialog({
         fetchData().catch((e) => {
             console.error(e)
         })
-        console.log("templates:")
-        console.log(templates)
-        console.log("----------")
-        
-    }, [])
+    }, [userid])
 
     const templateButtons = [
         <Button
-            id='fileExtensionCheck'
+            id="fileExtensionCheck"
             key="FileExtensionCheck"
             onClick={() => {
                 setTextFieldContent(code)
@@ -210,7 +221,7 @@ export default function RestrictionsDialog({
             File Extension Check
         </Button>,
         <Button
-            id='filesPresentCheck'
+            id="filesPresentCheck"
             key="FilesPresentCheck"
             onClick={() => {
                 setTextFieldContent(code)
@@ -272,23 +283,61 @@ export default function RestrictionsDialog({
                 >
                     {templateButtons}
                 </ButtonGroup>
+                {/* This button groups shows the templates the teacher has made */}
+                <ButtonGroup
+                    orientation="vertical"
+                    aria-label="My templates"
+                    variant={'outlined'}
+                    color={'primary'}
+                >
+                    {myTemplates.map((template) => (
+                        <Button
+                            key={template.template_id}
+                            onClick={async () => {
+                                const response = await instance.get(
+                                    `/templates/${template.template_id}/template/?content=true`
+                                )
+                                setTextFieldContent(response.data.content)
+                                if (openTemplateInUI) {
+                                    handleClickOpenTemplateInterface()
+                                } else {
+                                    handleClickOpenTextEditor()
+                                }
+                            }}
+                        >
+                            {template.bestand.replace(/^.*[\\/]/, '')}
+                        </Button>
+                    ))}
+                </ButtonGroup>
             </Box>
             <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
                 <Typography variant={'body2'}>
                     {t('must_pass') + ':'}
                 </Typography>
                 <Switch
-                    id='mustPassSwitch'
+                    id="mustPassSwitch"
                     value={mustPass}
                     onChange={() => setMustPass(!mustPass)}
                 />
             </Box>
             {/* This is the template interface. */}
-            <Dialog fullScreen open={openTemplateInterface} onClose={handleCloseTemplateInterface}>
-                <RestrictionsTemplateUI restrictionCode={code} handleCloseTemplateInterface={handleCloseTemplateInterface} templateFileName='template_example.sh'/>
+            <Dialog
+                fullScreen
+                open={openTemplateInterface}
+                onClose={handleCloseTemplateInterface}
+            >
+                <RestrictionsTemplateUI
+                    restrictionCode={code}
+                    handleCloseTemplateInterface={handleCloseTemplateInterface}
+                    templateFileName="template_example.sh"
+                />
             </Dialog>
             {/* This is the code editor. */}
-            <Dialog fullScreen open={openTextEditor} onClose={handleCloseTextEditor}>
+            <Dialog
+                fullScreen
+                open={openTextEditor}
+                onClose={handleCloseTextEditor}
+            >
                 <Stack>
                     <AppBar sx={{ position: 'relative' }} elevation={0}>
                         <Toolbar>
@@ -304,7 +353,7 @@ export default function RestrictionsDialog({
                     </AppBar>
                     {/* name of template */}
                     <Box
-                        padding='30px'
+                        padding="30px"
                         display={'flex'}
                         gap={3}
                         alignItems={'center'}
@@ -316,24 +365,22 @@ export default function RestrictionsDialog({
                         >
                             {t('name')}
                         </Typography>
-                            <Box padding='14px'
-                                sx={{
-                                    border: `1.5px solid gray`,
-                                    borderRadius: 1,
-                                    '&:hover': {
-                                        border: `1.5px solid ${theme.palette.primary.main}`,
-                                    }
-                                }}>
+                        <Box
+                            padding="14px"
+                            sx={{
+                                border: `1.5px solid gray`,
+                                borderRadius: 1,
+                                '&:hover': {
+                                    border: `1.5px solid ${theme.palette.primary.main}`,
+                                },
+                            }}
+                        >
                             <TextField
                                 // Specify the name of the test script.
                                 value={restrictionName}
                                 required
                                 error={nameError}
-                                helperText={
-                                    nameError
-                                        ? t('is_required')
-                                        : ''
-                                }
+                                helperText={nameError ? t('is_required') : ''}
                                 variant={'standard'}
                                 sx={{
                                     marginTop: -1.2,
@@ -341,20 +388,17 @@ export default function RestrictionsDialog({
                                 }}
                                 onChange={(e) => {
                                     setNameError(false)
-                                    setRestrictionName(
-                                        e.target.value
-                                    )
+                                    setRestrictionName(e.target.value)
                                 }}
                             />
-                            </Box>
+                        </Box>
                     </Box>
                     <Box
-                        padding='30px'
+                        padding="30px"
                         display={'flex'}
                         gap={5}
                         alignItems={'center'}
                     >
-
                         <Typography
                             variant={'h5'}
                             color={'text.primary'}
@@ -362,18 +406,17 @@ export default function RestrictionsDialog({
                         >
                             Type
                         </Typography>
-                        <Box padding='5px'
-                             sx={{
-                                 border: `1.5px solid gray`,
-                                 borderRadius: 1,
-                                 '&:hover': {
+                        <Box
+                            padding="5px"
+                            sx={{
+                                border: `1.5px solid gray`,
+                                borderRadius: 1,
+                                '&:hover': {
                                     border: `1.5px solid ${theme.palette.primary.main}`,
-                                 }
-                             }}
-                            >
-                            <FormControl
-                                size="small"
-                            >
+                                },
+                            }}
+                        >
+                            <FormControl size="small">
                                 <Select
                                     // Select the file extension of the test script.
                                     // This can be for instance .py or .sh.
@@ -395,21 +438,15 @@ export default function RestrictionsDialog({
                                     }
                                 >
                                     <MenuItem
-                                        value={
-                                            restrictionExtension.Shell
-                                        }
+                                        value={restrictionExtension.Shell}
                                         color={'secondary.contrastText'}
                                     >
                                         {restrictionExtension.Shell}
                                     </MenuItem>
                                     <MenuItem
-                                        value={
-                                            restrictionExtension.Python
-                                        }
+                                        value={restrictionExtension.Python}
                                     >
-                                        {
-                                            restrictionExtension.Python
-                                        }
+                                        {restrictionExtension.Python}
                                     </MenuItem>
                                 </Select>
                             </FormControl>
@@ -417,7 +454,7 @@ export default function RestrictionsDialog({
                     </Box>
 
                     {/* TextField for entering test code */}
-                    <Box padding='20px'>
+                    <Box padding="20px">
                         <Card>
                             <Box aria-label={'Content'} padding={3}>
                                 <TextField
@@ -438,11 +475,17 @@ export default function RestrictionsDialog({
                             </Box>
                         </Card>
                     </Box>
-                    <Stack direction="row" padding='20px' spacing='20px'>
+                    <Stack direction="row" padding="20px" spacing="20px">
                         <Button
                             autoFocus
                             color="inherit"
-                            onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
+                            onClick={() =>
+                                handleSaveTemplate(
+                                    restrictionName,
+                                    restrictionType,
+                                    textFieldContent
+                                )
+                            } // bestand if maakt niet uit, wordt toch niet gebruikt
                         >
                             save template
                         </Button>

From a7afed7365fd4caeb4b03063ccadf5a7da41e35a Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sat, 18 May 2024 23:20:57 +0200
Subject: [PATCH 068/145] added evenlyspaced row and added it to assignmentPage

---
 .../src/components/CustomComponents.tsx       |  32 ++-
 .../SubmissionListItemStudentPage.tsx         |  66 ++---
 .../SubmissionListItemTeacherPage.tsx         |  83 +++---
 .../pages/assignmentPage/AssignmentPage.tsx   | 236 ++++++------------
 4 files changed, 172 insertions(+), 245 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 50dca8a5..d879e97d 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -3,6 +3,7 @@ import {
     Button as BaseButton,
     Card as BaseCard,
     Divider as BaseDivider,
+    Box
 } from '@mui/material'
 import theme from '../Theme.ts'
 
@@ -80,4 +81,33 @@ export const Divider = ({ children, ...props }: any) => {
     )
 }
 
-export default { Button, Card, Divider }
+export const EvenlySpacedRow = ({items}) => {
+    return (
+        <Box
+            width={'100%'}
+            display="flex"
+            justifyContent={'space-between'}
+        >
+            {items.map((item, index) => (
+
+                <Box
+                    key={index}
+                     width={(100/items.length)+'%'}
+                     sx={{
+                         border: '1px solid red',
+                         display: 'flex',
+                         alignItems: 'center',
+                         justifyContent: index == 0 ? 'left' : ( index == items.length - 1 ? 'right' : 'center' )
+                     }}>
+                    <Box>
+                        {item}
+                    </Box>
+                </Box>
+            ))}
+    </Box>
+    )
+}
+
+
+
+export default { Button, Card, Divider, EvenlySpacedRow }
diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
index d5ed7d60..fd19610b 100644
--- a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -1,3 +1,4 @@
+import { EvenlySpacedRow} from "./CustomComponents.tsx";
 import {
     ListItem,
     ListItemButton,
@@ -49,46 +50,31 @@ export function SubmissionListItemStudentPage({
 
     return (
         <>
-            <ListItem key={realId} sx={{ margin: 0 }} disablePadding={true}>
-                <ListItemButton
-                    sx={{
-                        width: '100%',
-                        height: 30,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        paddingX: 5,
-                        paddingY: 3,
-                        borderRadius: 2,
-                    }}
-                    onClick={handleSubmissionClick}
-                >
-                    {/* Display submission id */}
-                    <ListItemText
-                        sx={{
-                            maxWidth: 110,
-                            color: 'primary.main',
-                            '&:hover': {
-                                color: 'primary.light',
-                            },
-                        }}
-                        primary={visualId}
-                    />
-                    {/* Display submission timestamp */}
-                    <ListItemText
-                        sx={{ maxWidth: 150 }}
-                        primary={timestamp ? timestamp : t('time')}
-                    />
-                    {/* Display submission status icon */}
-                    <ListItemIcon sx={{ minWidth: 35 }}>
-                        {status ? (
-                            <CheckCircleOutlineIcon
-                                sx={{ color: 'success.main' }}
-                            />
-                        ) : (
-                            <HighlightOffIcon sx={{ color: 'error.main' }} />
-                        )}
-                    </ListItemIcon>
+            <ListItem key={realId} sx={{ margin: 0 }} disablePadding>
+                <ListItemButton onClick={handleSubmissionClick}>
+                    <EvenlySpacedRow items={[
+                        <ListItemText
+                            sx={{
+                                color: 'primary.main',
+                                '&:hover': {
+                                    color: 'primary.light',
+                                },
+                            }}
+                            primary={visualId}
+                        />,
+                        <ListItemText
+                            primary={timestamp ? timestamp : t('time')}
+                        />,
+                        <ListItemIcon sx={{ minWidth: 35 }}>
+                            {status ? (
+                                <CheckCircleOutlineIcon
+                                    sx={{ color: 'success.main' }}
+                                />
+                            ) : (
+                                <HighlightOffIcon sx={{ color: 'error.main' }} />
+                            )}
+                        </ListItemIcon>
+                    ]}/>
                 </ListItemButton>
             </ListItem>
         </>
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 27a4f734..2904972e 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -13,6 +13,7 @@ import instance from '../axiosConfig'
 import { Submission } from '../pages/submissionPage/SubmissionPage.tsx'
 import { t } from 'i18next'
 import dayjs from 'dayjs'
+import {EvenlySpacedRow} from "./CustomComponents.tsx";
 
 interface SubmissionListItemTeacherPageProps {
     relative_group_id: string
@@ -126,21 +127,11 @@ export function SubmissionListItemTeacherPage({
 
     return (
         <>
-            <ListItem id={group_id} sx={{ margin: 0 }} disablePadding={true}>
+            <ListItem id={group_id} sx={{ margin: 0 }} disablePadding>
                 <ListItemButton
-                    sx={{
-                        width: '100%',
-                        height: 40,
-                        paddingX: 4,
-                        paddingY: 3,
-                        borderRadius: 2,
-                        display: 'flex',
-                        flexDirection: 'row',
-                    }}
                     onClick={handleSubmissionClick}
                 >
-                    {/* Display group id */}
-                    <ListItemText
+                    <EvenlySpacedRow items={[<ListItemText
                         sx={{
                             maxWidth: '24%',
                             color: 'primary.main',
@@ -149,41 +140,36 @@ export function SubmissionListItemTeacherPage({
                             },
                         }}
                         primary={relative_group_id}
-                    />
-                    {/* Display submission timestamp */}
-                    <ListItemText
-                        sx={{ minWidth: '24%' }}
-                        primary={
-                            submitted
-                                ? dayjs(submitted.tijdstip).format(
-                                      'DD/MM/YYYY HH:mm'
-                                  )
-                                : '-'
-                        }
-                    />
-                    {/* Display score */}
-                    <ListItemText
-                        sx={{ minWidth: '24%' }}
-                        primary={
-                            score
-                                ? `${Number(score.score)}` + '/20'
-                                : t('no_score_yet')
-                        }
-                    />
-                    {/* Display submission status icon */}
-                    <ListItemIcon sx={{ minWidth: '24%' }}>
-                        {!submitted?.status ? (
-                            <HighlightOffIcon sx={{ color: 'error.main' }} />
-                        ) : (
-                            submitted !== undefined && (
-                                <CheckCircleOutlineIcon
-                                    sx={{ color: 'success.main' }}
-                                />
-                            )
-                        )}
-                    </ListItemIcon>
-                    {/* Display download icon */}
-                    <ListItemText sx={{ maxWidth: 35 }}>
+                    />,
+                        <ListItemText
+                            sx={{ minWidth: '24%' }}
+                            primary={
+                                submitted
+                                    ? dayjs(submitted.tijdstip).format(
+                                        'DD/MM/YYYY HH:mm'
+                                    )
+                                    : '-'
+                            }
+                        />,
+                        <ListItemText
+                            sx={{ minWidth: '24%' }}
+                            primary={
+                                score
+                                    ? `${Number(score.score)}` + '/20'
+                                    : t('no_score_yet')
+                            }
+                        />,
+                        <ListItemIcon sx={{ minWidth: '24%' }}>
+                            {!submitted?.status ? (
+                                <HighlightOffIcon sx={{ color: 'error.main' }} />
+                            ) : (
+                                submitted !== undefined && (
+                                    <CheckCircleOutlineIcon
+                                        sx={{ color: 'success.main' }}
+                                    />
+                                )
+                            )}
+                        </ListItemIcon>,
                         <ListItemIcon>
                             <div onClick={handleDownloadClick}>
                                 {submitted ? (
@@ -200,7 +186,8 @@ export function SubmissionListItemTeacherPage({
                                 )}
                             </div>
                         </ListItemIcon>
-                    </ListItemText>
+                    ]}>
+                    </EvenlySpacedRow>
                 </ListItemButton>
             </ListItem>
         </>
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 27d0e5f4..9ad89bfc 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -2,12 +2,10 @@ import { Header } from '../../components/Header.tsx'
 import FileUploadButton from '../../components/FileUploadButton.tsx'
 import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx'
 import { SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx'
+import {Card, Button, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
 import {
     Box,
-    Button,
-    Card,
     CircularProgress,
-    Divider,
     List,
     Skeleton,
     Stack,
@@ -367,15 +365,7 @@ export function AssignmentPage() {
                                 </Box>
 
                                 {/* Assignment description */}
-                                <Card
-                                    elevation={1}
-                                    sx={{
-                                        color: 'text.primary',
-                                        padding: '20px',
-                                        backgroundColor: 'background.default',
-                                        borderRadius: 2,
-                                    }}
-                                >
+                                <Card sx={{padding: '20px'}}>
                                     <Stack direction={'column'}>
                                         <Typography
                                             sx={{
@@ -405,45 +395,31 @@ export function AssignmentPage() {
                         It shows metadata about the submissions and allows the teacher to download them.
                         The metadata includes group number, submission time, score, and status.
                         */}
-                                <Card
-                                    elevation={1}
-                                    sx={{
-                                        color: 'text.primary',
-                                        backgroundColor: 'background.default',
-                                        borderRadius: 2,
-                                        padding: '20px',
-                                    }}
-                                >
-                                    <Box
-                                        display={'flex'}
-                                        flexDirection={'row'}
-                                        justifyContent={'space-between'}
-                                        pl={3}
-                                        pr={3}
-                                    >
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                <Card sx={{padding: '20px'}}>
+                                    <EvenlySpacedRow items={[
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('group')}
-                                        </Typography>
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                        </Typography>,
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('time')}
-                                        </Typography>
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                        </Typography>,
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             Score
-                                        </Typography>
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                        </Typography>,
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             Status
-                                        </Typography>
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                        </Typography>,
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('download')}
                                         </Typography>
-                                    </Box>
+                                    ]}
+                                    />
                                     <Box
                                         style={{
                                             maxHeight: '40vh',
                                             overflow: 'auto',
                                         }}
                                     >
-                                        <Divider color={'text.main'}></Divider>
                                         {loading ? (
                                             [...Array(3)].map((_, index) => (
                                                 <Skeleton
@@ -455,49 +431,35 @@ export function AssignmentPage() {
                                                 />
                                             ))
                                         ) : (
-                                            <List disablePadding={true}>
+                                            <List>
                                                 {groups.map((group) => (
                                                     <Box key={group.groep_id}>
-                                                        <Divider
-                                                            color={'text.main'}
-                                                        ></Divider>
-                                                        <Box
-                                                            display={'flex'}
-                                                            flexDirection={
-                                                                'row'
+                                                        <Divider/>
+                                                        <SubmissionListItemTeacherPage
+                                                            relative_group_id={(
+                                                                group.groep_id -
+                                                                Math.min(
+                                                                    ...groups.map(
+                                                                        (
+                                                                            group
+                                                                        ) =>
+                                                                            group.groep_id
+                                                                    )
+                                                                ) +
+                                                                1
+                                                            ).toString()}
+                                                            group_id={group.groep_id.toString()}
+                                                            assignment_id={
+                                                                assignmentId
+                                                                    ? assignmentId
+                                                                    : ''
                                                             }
-                                                            justifyContent={
-                                                                'space-between'
+                                                            course_id={
+                                                                courseId
+                                                                    ? courseId
+                                                                    : ''
                                                             }
-                                                            pl={3}
-                                                            pr={3}
-                                                        >
-                                                            <SubmissionListItemTeacherPage
-                                                                relative_group_id={(
-                                                                    group.groep_id -
-                                                                    Math.min(
-                                                                        ...groups.map(
-                                                                            (
-                                                                                group
-                                                                            ) =>
-                                                                                group.groep_id
-                                                                        )
-                                                                    ) +
-                                                                    1
-                                                                ).toString()}
-                                                                group_id={group.groep_id.toString()}
-                                                                assignment_id={
-                                                                    assignmentId
-                                                                        ? assignmentId
-                                                                        : ''
-                                                                }
-                                                                course_id={
-                                                                    courseId
-                                                                        ? courseId
-                                                                        : ''
-                                                                }
-                                                            />
-                                                        </Box>
+                                                        />
                                                     </Box>
                                                 ))}
                                             </List>
@@ -703,15 +665,7 @@ export function AssignmentPage() {
                                 </Box>
 
                                 {/* Assignment */}
-                                <Card
-                                    elevation={1}
-                                    sx={{
-                                        color: 'text.primary',
-                                        padding: '20px',
-                                        backgroundColor: 'background.default',
-                                        borderRadius: 2,
-                                    }}
-                                >
+                                <Card sx={{ padding: '20px' }}>
                                     <Stack direction={'column'}>
                                         <Typography
                                             sx={{
@@ -749,31 +703,23 @@ export function AssignmentPage() {
                                         padding: 2,
                                     }}
                                 >
-                                    <Box
-                                        display={'flex'}
-                                        flexDirection={'row'}
-                                        justifyContent={'space-between'}
-                                        pl={3}
-                                        pr={3}
-                                    >
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                   <EvenlySpacedRow items={[
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('submission')}
-                                        </Typography>
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                        </Typography>,
+                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('time')}
-                                        </Typography>
-                                        <Typography sx={{ fontWeight: 'bold' }}>
+                                        </Typography>,
+                                        <Typography variant={'h5'}  sx={{ fontWeight: 'bold' }}>
                                             Status
                                         </Typography>
-                                    </Box>
+                                        ]}/>
                                     <Box
                                         style={{
                                             maxHeight: '40vh',
                                         }}
                                     >
-                                        <Divider color={'text.main'}></Divider>
                                         <List
-                                            disablePadding={true}
                                             sx={{
                                                 height: '100%',
                                                 minHeight: '20vh',
@@ -812,63 +758,41 @@ export function AssignmentPage() {
                                                                             submission.indiening_id
                                                                         }
                                                                     >
-                                                                        <Divider
-                                                                            color={
-                                                                                'text.main'
-                                                                            }
-                                                                        ></Divider>
-                                                                        <Box
-                                                                            display={
-                                                                                'flex'
-                                                                            }
-                                                                            flexDirection={
-                                                                                'row'
-                                                                            }
-                                                                            justifyContent={
-                                                                                'space-between'
+                                                                        <Divider/>
+                                                                        <SubmissionListItemStudentPage
+                                                                            realId={submission.indiening_id.toString()}
+                                                                            visualId={(
+                                                                                submission.indiening_id -
+                                                                                Math.min(
+                                                                                    ...submissions.map(
+                                                                                        (
+                                                                                            submission
+                                                                                        ) =>
+                                                                                            submission.indiening_id
+                                                                                    )
+                                                                                ) +
+                                                                                1
+                                                                            ).toString()}
+                                                                            timestamp={dayjs(
+                                                                                submission.tijdstip
+                                                                            ).format(
+                                                                                'DD/MM/YYYY HH:mm'
+                                                                            )}
+                                                                            status={
+                                                                                submission.status >
+                                                                                0
                                                                             }
-                                                                            pl={
-                                                                                3
+                                                                            assignment_id={
+                                                                                assignmentId
+                                                                                    ? assignmentId
+                                                                                    : ''
                                                                             }
-                                                                            pr={
-                                                                                3
+                                                                            course_id={
+                                                                                courseId
+                                                                                    ? courseId
+                                                                                    : ''
                                                                             }
-                                                                        >
-                                                                            <SubmissionListItemStudentPage
-                                                                                realId={submission.indiening_id.toString()}
-                                                                                visualId={(
-                                                                                    submission.indiening_id -
-                                                                                    Math.min(
-                                                                                        ...submissions.map(
-                                                                                            (
-                                                                                                submission
-                                                                                            ) =>
-                                                                                                submission.indiening_id
-                                                                                        )
-                                                                                    ) +
-                                                                                    1
-                                                                                ).toString()}
-                                                                                timestamp={dayjs(
-                                                                                    submission.tijdstip
-                                                                                ).format(
-                                                                                    'DD/MM/YYYY HH:mm'
-                                                                                )}
-                                                                                status={
-                                                                                    submission.status >
-                                                                                    0
-                                                                                }
-                                                                                assignment_id={
-                                                                                    assignmentId
-                                                                                        ? assignmentId
-                                                                                        : ''
-                                                                                }
-                                                                                course_id={
-                                                                                    courseId
-                                                                                        ? courseId
-                                                                                        : ''
-                                                                                }
-                                                                            />
-                                                                        </Box>
+                                                                        />
                                                                     </Box>
                                                                 )
                                                             )

From ef6022fc95084f221ac9653cfe0d48b631c76634 Mon Sep 17 00:00:00 2001
From: Robbe <robbe.schildermans@ugent.be>
Date: Sun, 19 May 2024 02:54:05 +0200
Subject: [PATCH 069/145] error 404: commit message not found

---
 frontend/frontend/src/pages/FourOFourPage.tsx | 106 ++++++++++++++++++
 frontend/frontend/src/routes.tsx              |   7 +-
 2 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 frontend/frontend/src/pages/FourOFourPage.tsx

diff --git a/frontend/frontend/src/pages/FourOFourPage.tsx b/frontend/frontend/src/pages/FourOFourPage.tsx
new file mode 100644
index 00000000..b4e2098d
--- /dev/null
+++ b/frontend/frontend/src/pages/FourOFourPage.tsx
@@ -0,0 +1,106 @@
+import { Box, Typography } from '@mui/material'
+import { t } from 'i18next'
+
+export default function FourOFourPage() {
+    return (
+        <>
+            <Box
+                position="fixed"
+                top={0}
+                left={0}
+                height="100%"
+                width="100%"
+                component="div"
+                sx={{
+                    backgroundColor: 'secondary.main',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    display: 'flex',
+                    backgroundSize: 'cover',
+                }}
+            >
+                <Box
+                    className="background-image"
+                    component="div"
+                    height="100%"
+                    width="100%"
+                    top={0}
+                    left={0}
+                    sx={{
+                        backgroundImage: `url(/assets/ufo-logo-3375276369.png)`,
+                        opacity: 0.2,
+                        position: 'fixed',
+                        backgroundSize: 'cover',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        padding: 0,
+                        margin: 0,
+                        zIndex: -1,
+                    }}
+                />
+                <Box
+                    component="div"
+                    className="contentContainer"
+                    display="flex"
+                    position={'relative'}
+                    flexDirection="column"
+                    alignItems="center"
+                    justifyContent={'center'}
+                    alignSelf={'center'}
+                    maxWidth="60%"
+                    maxHeight="60%"
+                >
+                    <Box
+                        component="div"
+                        className="upperContainer"
+                        display="flex"
+                        flexDirection="row"
+                        alignItems="center"
+                        justifyContent={'center'}
+                        alignSelf={'center'}
+                    >
+                        <Box
+                            component="img"
+                            src={t('logo_blue')}
+                            alt="logo"
+                            sx={{
+                                maxHeight: '20%',
+                                maxWidth: '30%',
+                            }}
+                        />
+                        <Box
+                            component="div"
+                            display="flex"
+                            flexDirection="column"
+                            maxWidth={'40%'}
+                            maxHeight={'30%'}
+                        >
+                            <Typography
+                                variant="h4"
+                                sx={{
+                                    color: 'error.main',
+                                    maxWidth: '100%',
+                                    maxHeight: '50%',
+                                }}
+                            >
+                                {"404"}
+                            </Typography>
+                            <Typography
+                                variant={'h5'}
+                                sx={{
+                                    color: 'error.main',
+                                    maxWidth: '100%',
+                                    maxHeight: '50%',
+                                }}
+                            >
+                                {"Error: Page not found"}
+                            </Typography>
+                        </Box>
+                    </Box>
+                </Box>
+            </Box>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index c16f12a7..bb1d3b5d 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -5,6 +5,7 @@ import { ProjectScoresPage } from './pages/scoresPage/ProjectScoresPage.tsx'
 import { AddChangeAssignmentPage } from './pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx'
 import { AddChangeSubjectPage } from './pages/subjectsPage/AddChangeSubjectPage.tsx'
 import ErrorPage from './pages/ErrorPage.tsx'
+import FourOFourPage from "./pages/FourOFourPage.tsx";
 import MainPage from './pages/mainPage/MainPage.tsx'
 import { GroupsPage } from './pages/groupsPage/GroupsPage.tsx'
 import { AssignmentPage } from './pages/assignmentPage/AssignmentPage.tsx'
@@ -63,9 +64,13 @@ const router = createBrowserRouter([
         errorElement: <ErrorPage />,
     },
     {
-        path: '*',
+        path: '/error',
         element: <ErrorPage />,
     },
+    {
+        path: '*',
+        element: <FourOFourPage />,
+    },
 ])
 
 export default router

From b565725e526aa9808b1e10834e27ecd9302acb45 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 10:25:50 +0200
Subject: [PATCH 070/145] alignment fixed for assignment and subjectpage

---
 .../src/components/CustomComponents.tsx       |  6 +-
 .../SubmissionListItemStudentPage.tsx         | 23 ++++---
 .../SubmissionListItemTeacherPage.tsx         | 64 +++++++++--------
 .../pages/assignmentPage/AssignmentPage.tsx   | 68 +++++++++++--------
 .../AssignmentListItemSubjectsPage.tsx        | 46 ++++---------
 .../src/pages/subjectsPage/ProjectsView.tsx   | 37 ++++------
 6 files changed, 119 insertions(+), 125 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index d879e97d..8551f35d 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -92,12 +92,12 @@ export const EvenlySpacedRow = ({items}) => {
 
                 <Box
                     key={index}
-                     width={(100/items.length)+'%'}
+                     width={(index == 0 || index == items.length-1) ? ((50/items.length)+'%') : ((100 - (100/items.length))/(items.length-2) +'%')}
                      sx={{
-                         border: '1px solid red',
+                         //border: '1px solid red',
                          display: 'flex',
                          alignItems: 'center',
-                         justifyContent: index == 0 ? 'left' : ( index == items.length - 1 ? 'right' : 'center' )
+                         justifyContent: 'center'
                      }}>
                     <Box>
                         {item}
diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
index fd19610b..68840f6f 100644
--- a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -4,6 +4,7 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
+    Box,
 } from '@mui/material'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
@@ -50,7 +51,7 @@ export function SubmissionListItemStudentPage({
 
     return (
         <>
-            <ListItem key={realId} sx={{ margin: 0 }} disablePadding>
+            <ListItem key={realId} sx={{ maxHeight: '30px' }} disablePadding>
                 <ListItemButton onClick={handleSubmissionClick}>
                     <EvenlySpacedRow items={[
                         <ListItemText
@@ -65,15 +66,17 @@ export function SubmissionListItemStudentPage({
                         <ListItemText
                             primary={timestamp ? timestamp : t('time')}
                         />,
-                        <ListItemIcon sx={{ minWidth: 35 }}>
-                            {status ? (
-                                <CheckCircleOutlineIcon
-                                    sx={{ color: 'success.main' }}
-                                />
-                            ) : (
-                                <HighlightOffIcon sx={{ color: 'error.main' }} />
-                            )}
-                        </ListItemIcon>
+                        <Box sx={{ maxWidth: '24px', }}>
+                            <ListItemIcon sx={{ minWidth: 35 }}>
+                                {status ? (
+                                    <CheckCircleOutlineIcon
+                                        sx={{ color: 'success.main' }}
+                                    />
+                                ) : (
+                                    <HighlightOffIcon sx={{ color: 'error.main' }} />
+                                )}
+                            </ListItemIcon>
+                        </Box>
                     ]}/>
                 </ListItemButton>
             </ListItem>
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 2904972e..cfaa2dc4 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -3,6 +3,7 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
+    Box
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import DownloadIcon from '@mui/icons-material/Download'
@@ -127,13 +128,14 @@ export function SubmissionListItemTeacherPage({
 
     return (
         <>
-            <ListItem id={group_id} sx={{ margin: 0 }} disablePadding>
+            <ListItem id={group_id} sx={{maxHeight: '30px'}} disablePadding>
                 <ListItemButton
                     onClick={handleSubmissionClick}
                 >
-                    <EvenlySpacedRow items={[<ListItemText
+                    <EvenlySpacedRow
+
+                        items={[<ListItemText
                         sx={{
-                            maxWidth: '24%',
                             color: 'primary.main',
                             '&:hover': {
                                 color: 'primary.light',
@@ -142,7 +144,6 @@ export function SubmissionListItemTeacherPage({
                         primary={relative_group_id}
                     />,
                         <ListItemText
-                            sx={{ minWidth: '24%' }}
                             primary={
                                 submitted
                                     ? dayjs(submitted.tijdstip).format(
@@ -152,40 +153,43 @@ export function SubmissionListItemTeacherPage({
                             }
                         />,
                         <ListItemText
-                            sx={{ minWidth: '24%' }}
                             primary={
                                 score
                                     ? `${Number(score.score)}` + '/20'
                                     : t('no_score_yet')
                             }
                         />,
-                        <ListItemIcon sx={{ minWidth: '24%' }}>
-                            {!submitted?.status ? (
-                                <HighlightOffIcon sx={{ color: 'error.main' }} />
-                            ) : (
-                                submitted !== undefined && (
-                                    <CheckCircleOutlineIcon
-                                        sx={{ color: 'success.main' }}
-                                    />
-                                )
-                            )}
-                        </ListItemIcon>,
-                        <ListItemIcon>
-                            <div onClick={handleDownloadClick}>
-                                {submitted ? (
-                                    <DownloadIcon
-                                        sx={{
-                                            color: 'primary.main',
-                                            '&:hover': {
-                                                color: 'primary.light',
-                                            },
-                                        }}
-                                    />
+                        <Box sx={{ maxWidth: '24px'}}>
+                            <ListItemIcon>
+                                {!submitted?.status ? (
+                                    <HighlightOffIcon sx={{ color: 'error.main' }} />
                                 ) : (
-                                    <DownloadIcon sx={{ color: 'gray' }} />
+                                    submitted !== undefined && (
+                                        <CheckCircleOutlineIcon
+                                            sx={{ color: 'success.main' }}
+                                        />
+                                    )
                                 )}
-                            </div>
-                        </ListItemIcon>
+                            </ListItemIcon>
+                        </Box>,
+                        <Box sx={{ maxWidth: '24px'}}>
+                            <ListItemIcon>
+                                <div onClick={handleDownloadClick}>
+                                    {submitted ? (
+                                        <DownloadIcon
+                                            sx={{
+                                                color: 'primary.main',
+                                                '&:hover': {
+                                                    color: 'primary.light',
+                                                },
+                                            }}
+                                        />
+                                    ) : (
+                                        <DownloadIcon sx={{ color: 'gray' }} />
+                                    )}
+                                </div>
+                            </ListItemIcon>
+                        </Box>
                     ]}>
                     </EvenlySpacedRow>
                 </ListItemButton>
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 9ad89bfc..4b0b5b06 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -395,7 +395,15 @@ export function AssignmentPage() {
                         It shows metadata about the submissions and allows the teacher to download them.
                         The metadata includes group number, submission time, score, and status.
                         */}
-                                <Card sx={{padding: '20px'}}>
+                                <Card>
+                                    <Box
+                                        aria-label={'courseHeader'}
+                                        sx={{
+                                            backgroundColor: 'secondary.main',
+                                            height: 20,
+                                            padding: 3,
+                                        }}
+                                    >
                                     <EvenlySpacedRow items={[
                                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('group')}
@@ -414,12 +422,16 @@ export function AssignmentPage() {
                                         </Typography>
                                     ]}
                                     />
-                                    <Box
-                                        style={{
-                                            maxHeight: '40vh',
-                                            overflow: 'auto',
+                                </Box>
+                                <Divider/>
+                                <Box
+                                        sx={{
+                                            position: 'relative', top: '-6px',
+                                            height: 340,
                                         }}
-                                    >
+                                >
+                                    <Box sx={{ width: '100%', height: 320, overflow: 'auto' }}>
+                                    <List DisablePadding>
                                         {loading ? (
                                             [...Array(3)].map((_, index) => (
                                                 <Skeleton
@@ -431,10 +443,10 @@ export function AssignmentPage() {
                                                 />
                                             ))
                                         ) : (
-                                            <List>
-                                                {groups.map((group) => (
-                                                    <Box key={group.groep_id}>
-                                                        <Divider/>
+                                                <>
+                                                {groups.map((group,index) => (
+                                                    <>
+                                                        {index != 0 ?  <Divider/> : <></>}
                                                         <SubmissionListItemTeacherPage
                                                             relative_group_id={(
                                                                 group.groep_id -
@@ -460,10 +472,12 @@ export function AssignmentPage() {
                                                                     : ''
                                                             }
                                                         />
-                                                    </Box>
+                                                    </>
                                                 ))}
-                                            </List>
+                                                </>
                                         )}
+                                        </List>
+                                        </Box>
                                     </Box>
                                 </Card>
 
@@ -694,15 +708,15 @@ export function AssignmentPage() {
                                 </Card>
 
                                 {/* Submissions */}
-                                <Card
-                                    elevation={1}
-                                    sx={{
-                                        color: 'text.primary',
-                                        backgroundColor: 'background.default',
-                                        borderRadius: 2,
-                                        padding: 2,
-                                    }}
-                                >
+                                <Card>
+                                    <Box
+                                        aria-label={'courseHeader'}
+                                        sx={{
+                                            backgroundColor: 'secondary.main',
+                                            height: 20,
+                                            padding: 3,
+                                        }}
+                                    >
                                    <EvenlySpacedRow items={[
                                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                                             {t('submission')}
@@ -714,9 +728,12 @@ export function AssignmentPage() {
                                             Status
                                         </Typography>
                                         ]}/>
+                                    </Box>
+                                    <Divider/>
                                     <Box
                                         style={{
-                                            maxHeight: '40vh',
+                                            position: 'relative', top: '-6px',
+                                            maxHeight: 340,
                                         }}
                                     >
                                         <List
@@ -749,16 +766,13 @@ export function AssignmentPage() {
                                                                     ? 1
                                                                     : -1
                                                             )
-                                                            .map(
-                                                                (
-                                                                    submission
-                                                                ) => (
+                                                            .map((submission,index) => (
                                                                     <Box
                                                                         key={
                                                                             submission.indiening_id
                                                                         }
                                                                     >
-                                                                        <Divider/>
+                                                                        {index != 0 ?  <Divider/> : <></>}
                                                                         <SubmissionListItemStudentPage
                                                                             realId={submission.indiening_id.toString()}
                                                                             visualId={(
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 25ff8fd2..7c3f81ec 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -13,6 +13,7 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import React, { useState } from 'react'
 import dayjs, { Dayjs } from 'dayjs'
 import { Score } from '../../components/SubmissionListItemTeacherPage.tsx'
+import {EvenlySpacedRow} from "../../components/CustomComponents.tsx";
 
 /**
  * This component is used to display a single assignment in the list of assignments.
@@ -71,32 +72,15 @@ export function AssignmentListItemSubjectsPage({
 
     return (
         <>
-            <ListItem
-                key={projectName}
-                sx={{ margin: 0 }}
-                disablePadding={true}
+            <ListItem key={projectName}  disablePadding sx={{ maxHeight: '30px'}}
             >
-                <ListItemButton
-                    onClick={handleProjectClick}
-                    sx={{
-                        width: '100%',
-                        height: 30,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        paddingX: 3,
-                        paddingY: 3,
-                        borderRadius: 2,
-                    }}
-                >
+                <ListItemButton onClick={handleProjectClick}>
                     {isStudent ? (
-                        <>
+                        <EvenlySpacedRow items={[
                             <ListItemText
-                                sx={{ maxWidth: 120 }}
                                 primary={projectName}
-                            />
+                            />,
                             <ListItemText
-                                sx={{ maxWidth: 150 }}
                                 primary={
                                     dueDate
                                         ? dayjs(dueDate).format(
@@ -104,9 +88,8 @@ export function AssignmentListItemSubjectsPage({
                                           )
                                         : t('no_deadline')
                                 }
-                            />
+                            />,
                             <ListItemText
-                                sx={{ maxWidth: 170 }}
                                 primary={
                                     submissions > 0
                                         ? submissions > 1
@@ -118,10 +101,10 @@ export function AssignmentListItemSubjectsPage({
                                               t('submission')
                                         : t('no_submissions')
                                 }
-                            />
+                            />,
+                            <>
                             {submissions > 0 ? (
                                 <ListItemText
-                                    sx={{ maxWidth: 80 }}
                                     primary={
                                         score
                                             ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)`
@@ -130,20 +113,19 @@ export function AssignmentListItemSubjectsPage({
                                 />
                             ) : (
                                 <ListItemText
-                                    sx={{ maxWidth: 80 }}
                                     primary={`0/${maxScore} (0%)`}
                                 />
                             )}
-                        </>
+                            </>
+                            ]}/>
                     ) : (
                         <>
                             {/* In case of the user being the teacher: */}
+                            <EvenlySpacedRow items={[
                             <ListItemText
-                                sx={{ maxWidth: 100 }}
                                 primary={projectName}
-                            />
+                            />,
                             <ListItemText
-                                sx={{ maxWidth: 150 }}
                                 primary={
                                     dueDate
                                         ? dayjs(dueDate).format(
@@ -151,14 +133,14 @@ export function AssignmentListItemSubjectsPage({
                                           )
                                         : t('no_deadline')
                                 }
-                            />
+                            />,
                             <ButtonActions
                                 archived={archived}
                                 startVisible={visible}
                                 deleteEvent={deleteEvent}
                                 archiveEvent={archiveEvent}
                                 visibilityEvent={visibilityEvent}
-                            />
+                            />]}/>
                         </>
                     )}
                 </ListItemButton>
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index 74e72937..09f1e01c 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -1,4 +1,4 @@
-import { Card, Divider } from '../../components/CustomComponents.tsx'
+import {Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
 import { Box, Skeleton, Typography } from '@mui/material'
 import List from '@mui/material/List'
 import { t } from 'i18next'
@@ -155,42 +155,42 @@ export function ProjectsView({
                 aria-label={'courseHeader'}
                 sx={{
                     backgroundColor: 'secondary.main',
-                    margin: 0,
-                    height: 50,
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
+                    height: 20,
                     padding: 3,
                 }}
             >
                 {!gebruiker.is_lesgever ? (
                     <>
                         {/* Show the UI from the perspective of a student. */}
+                        <EvenlySpacedRow items={[
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             Project
-                        </Typography>
+                        </Typography>,
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             Deadline
-                        </Typography>
+                        </Typography>,
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             {t('submissions')}
-                        </Typography>
+                        </Typography>,
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             Score
                         </Typography>
+                            ]}/>
                     </>
                 ) : (
                     <>
                         {/* Show the UI from the perspective of a teacher. */}
+                        <EvenlySpacedRow items={[
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             Project
-                        </Typography>
+                        </Typography>,
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             Deadline
-                        </Typography>
+                        </Typography>,
                         <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
                             {t('edit')}
-                        </Typography>
+                        </Typography>]}
+                        />
                     </>
                 )}
             </Box>
@@ -199,17 +199,11 @@ export function ProjectsView({
                 sx={{
                     backgroundColor: 'background.default',
                     height: 340,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    padding: 1,
-                    borderRadius: 2,
-                    paddingBottom: 0,
                 }}
             >
-                <Box display={'flex'} flexDirection={'row'}>
                     <Box sx={{ width: '100%', height: 320, overflow: 'auto' }}>
                         {/* The list below will display the projects with their information */}
-                        <List disablePadding={true}>
+                        <List disablePadding>
                             {loading ? (
                                 [...Array(3).keys()].map((index) => (
                                     <Skeleton
@@ -239,6 +233,7 @@ export function ProjectsView({
                                         )
                                         .map((project) => (
                                             <>
+                                                <Divider/>
                                                 <AssignmentListItemSubjectsPage
                                                     key={
                                                         project.assignment
@@ -295,9 +290,6 @@ export function ProjectsView({
                                                     courseId={courseId}
                                                     assignmentId={project.assignment.project_id.toString()}
                                                 />
-                                                <Divider
-                                                    color={'text.main'}
-                                                ></Divider>
                                             </>
                                         ))}
                                 </>
@@ -305,7 +297,6 @@ export function ProjectsView({
                         </List>
                     </Box>
                 </Box>
-            </Box>
             </Card>
         </>
     )

From c9617831c24ebedb34e2b10810d8e9387dff454b Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 10:51:42 +0200
Subject: [PATCH 071/145] knoppen assignmentpage fix

---
 .../src/components/CustomComponents.tsx       |  4 +-
 .../pages/assignmentPage/AssignmentPage.tsx   | 95 +++++++------------
 .../src/pages/subjectsPage/SubjectsPage.tsx   |  9 +-
 3 files changed, 39 insertions(+), 69 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 8551f35d..848b299a 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -14,7 +14,7 @@ export const Button = ({ children, ...props }: any) => {
             disableElevation
             size="large"
             sx={{
-                maxHeight: '35px',
+                maxHeight: '40px',
                 backgroundColor: 'primary.main',
                 textTransform: 'none',
                 color: 'primary.contrastText',
@@ -36,7 +36,7 @@ export const SecundaryButton = ({ children, ...props }: any) => {
             disableElevation
             size="large"
             sx={{
-                maxHeight: '35px',
+                maxHeight: '40px',
                 backgroundColor: 'secondary.main',
                 textTransform: 'none',
                 color: 'secondary.contrastText',
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 4b0b5b06..9e8000f8 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -2,10 +2,10 @@ import { Header } from '../../components/Header.tsx'
 import FileUploadButton from '../../components/FileUploadButton.tsx'
 import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx'
 import { SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx'
-import {Card, Button, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import {Card, Button, Divider, EvenlySpacedRow, SecundaryButton} from '../../components/CustomComponents.tsx'
 import {
     Box,
-    CircularProgress,
+    CircularProgress, Grid,
     List,
     Skeleton,
     Stack,
@@ -840,65 +840,42 @@ export function AssignmentPage() {
                                 </Card>
 
                                 {/*Upload button, this is what the student will see. */}
-                                <Box
-                                    sx={{
-                                        width: '100%',
-                                        backgroundColor: 'background.default',
-                                    }}
-                                >
-                                    <Stack
-                                        direction={'row'}
-                                        alignItems={'flex-start'}
-                                        justifyContent={'flex-end'}
-                                        width={'100%'}
-                                    >
-                                        {
-                                            <FileUploadButton
-                                                name={t('upload')}
-                                                path={
-                                                    loading
-                                                        ? new File(
-                                                              [],
-                                                              t('loading') +
-                                                                  '...'
-                                                          )
-                                                        : submissionFile
-                                                }
-                                                onFileChange={handleFileChange}
-                                                fileTypes={[
-                                                    '.zip',
-                                                    '.pdf',
-                                                    '.txt',
-                                                ]}
-                                                tooltip={t('uploadToolTip')}
-                                            />
-                                        }
-                                        <Box
-                                            sx={{
-                                                padding: 1.2,
-                                                mr: 3,
-                                            }}
+                                <Grid container spacing={2}>
+                                <Grid>
+                                <FileUploadButton
+                                    name={t('upload')}
+                                    path={
+                                        loading
+                                            ? new File(
+                                                  [],
+                                                  t('loading') +
+                                                      '...'
+                                              )
+                                            : submissionFile
+                                    }
+                                    onFileChange={handleFileChange}
+                                    fileTypes={[
+                                        '.zip',
+                                        '.pdf',
+                                        '.txt',
+                                    ]}
+                                    tooltip={t('uploadToolTip')}
+                                />
+                                </Grid>
+                                <Grid>
+                                <Box  sx={{ position: 'relative', top: '8px', ml: 2}}>
+                                    <Tooltip title={t('upload')}>
+                                        <SecundaryButton
+                                            onClick={uploadIndiening}
                                         >
-                                            <Tooltip title={t('upload')}>
-                                                <Button
-                                                    variant={'contained'}
-                                                    disableElevation
-                                                    sx={{
-                                                        textTransform: 'none',
-                                                    }}
-                                                    onClick={uploadIndiening}
-                                                >
-                                                    <Typography
-                                                        padding={0}
-                                                        margin={0}
-                                                    >
-                                                        {t('submit')}
-                                                    </Typography>
-                                                </Button>
-                                            </Tooltip>
-                                        </Box>
-                                    </Stack>
+                                            <Typography>
+                                                {t('submit')}
+                                            </Typography>
+                                        </SecundaryButton>
+                                    </Tooltip>
                                 </Box>
+                                </Grid>
+                                </Grid>
                             </Stack>
                             <WarningPopup
                                 title={t('error')}
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index d757177a..3770ae4b 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -461,14 +461,7 @@ export function SubjectsPage() {
                                         doAction={confirmJoinCourse}
                                     />
                                 </Box>
-                                <Box
-                                    sx={{
-                                        padding: 0,
-                                        backgroundColor: 'background.default',
-                                        width: 'fit-content',
-                                        height: 'fit-content',
-                                    }}
-                                >
+                                <Box sx={{paddingLeft: '20px'}}>
                                     <StudentPopUp
                                         students={studentsLoading ? []: students}
                                         text='students'

From 9e5ae3f25bcc7a542e69251611ff36d74f799c25 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 11:11:44 +0200
Subject: [PATCH 072/145] updated group page

---
 .../src/pages/groupsPage/GroupsPage.tsx       | 939 +++++++++---------
 1 file changed, 470 insertions(+), 469 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 7b6fbac6..d889c68d 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -1,5 +1,5 @@
 import { Header } from '../../components/Header.tsx'
-import { Button } from '../../components/CustomComponents.tsx'
+import { Button, Card } from '../../components/CustomComponents.tsx'
 import {
     Box,
     Grid,
@@ -7,14 +7,12 @@ import {
     MenuItem,
     Select,
     SelectChangeEvent,
-    CircularProgress,
     Skeleton,
     Stack,
     Table,
     TableBody,
     TableCell,
     TableContainer,
-    TableHead,
     TableRow,
     TextField,
     Tooltip,
@@ -31,7 +29,6 @@ import { Add } from '@mui/icons-material'
 import ClearIcon from '@mui/icons-material/Clear'
 import SaveIcon from '@mui/icons-material/Save'
 import WarningPopup from '../../components/WarningPopup.tsx'
-import { User } from '../subjectsPage/AddChangeSubjectPage.tsx' 
 
 // group interface
 export interface Group {
@@ -61,14 +58,12 @@ export function GroupsPage() {
     const [currentGroup, setCurrentGroup] = useState('')
     const [availableStudents, setAvailableStudents] = useState<number[]>([])
     const [projectName, setProjectName] = useState('')
-    const [user, setUser] = useState<User>()
 
     // confirmation dialog state
     const [confirmOpen, setConfirmOpen] = useState(false)
 
     // state for correct loading of the page
     const [loading, setLoading] = useState(true)
-    const [userLoading, setUserLoading] = useState(true)
 
     // handle confirmation dialog
     const confirmSave = async () => {
@@ -179,11 +174,7 @@ export function GroupsPage() {
     //get the current groups and group size from the backend
     useEffect(() => {
         async function fetchData() {
-            setUserLoading(true)
             setLoading(true)
-            const userResponse = await instance.get('/gebruikers/me/')
-            setUser(userResponse.data)
-            setUserLoading(false)
             // Get the student names
             await instance
                 .get('/vakken/' + courseId)
@@ -197,8 +188,8 @@ export function GroupsPage() {
                                 newStudentNames.set(
                                     student,
                                     response.data.first_name +
-                                        ' ' +
-                                        response.data.last_name
+                                    ' ' +
+                                    response.data.last_name
                                 )
                             })
                             .catch((error) => {
@@ -212,12 +203,12 @@ export function GroupsPage() {
                                 newStudentNames.set(
                                     student,
                                     response.data.first_name +
-                                        ' ' +
-                                        response.data.last_name
+                                    ' ' +
+                                    response.data.last_name
                                 )
                                 console.log(
                                     'available names:' +
-                                        Array.from(newStudentNames.entries())
+                                    Array.from(newStudentNames.entries())
                                 )
                             })
                     }
@@ -397,501 +388,511 @@ export function GroupsPage() {
 
     return (
         <>
-            {/* Rendering different UI based on user role */}
-            {userLoading ? (
-                <Box
+            <Box
+                component={'form'}
+                onSubmit={handleSave}
+                sx={{
+                    backgroundColor: 'background.default',
+                    height: '100%',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'flex-start',
+                }}
+            >
+                <Header
+                    variant={'default'}
+                    title={loading ? '' : `${projectName}: ${t('groups')}`}
+                ></Header>
+                <Stack
+                    marginTop={12}
+                    direction={'column'}
+                    spacing={4}
                     sx={{
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100vh',
+                        width: '100%',
+                        height: '70 %',
+                        backgroundColor: 'background.default',
                     }}
                 >
-                    <CircularProgress color={'primary'} />
-                    <Box></Box>
-                </Box>
-            ) : (
-                <>
-                    {user?.is_lesgever ? (
-                        // Rendering UI for teacher
-                    <>
+                    <Box>
                         <Box
-                            component={'form'}
-                            onSubmit={handleSave}
                             sx={{
+                                gap: 5,
+                                padding: '20px',
                                 backgroundColor: 'background.default',
-                                height: '100%',
-                                width: '100%',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-start',
                             }}
                         >
-                            <Header
-                                variant={'default'}
-                                title={loading ? '' : `${projectName}: ${t('groups')}`}
-                            ></Header>
+                            <Typography
+                                variant="h5"
+                                sx={{ fontWeight: 'bold' }}
+                                color="text.primary"
+                            >
+                                {t('groups')}
+                            </Typography>
+                            <Stack direction={'row'}>
+                                <Grid container spacing={2} alignItems="center">
+                                    <Grid item>
+                                        <Typography
+                                            color="text.primary"
+                                            fontWeight={'bold'}
+                                        >
+                                            {t('amount')} {t('members')}/
+                                            {t('group')}
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item minWidth={3}>
+                                        {loading ? (
+                                            <Skeleton
+                                                variant={'text'}
+                                                width={80}
+                                                height={80}
+                                            />
+                                        ) : (
+                                            <TextField
+                                                // The teacher can specify the maximum group size
+                                                // If a number smaller than 1 is entered, the input will be ignored
+                                                aria-label={'maxGroupSize'}
+                                                value={newGroupSize}
+                                                type={'number'}
+                                                onChange={(newValue) => {
+                                                    if (
+                                                        parseInt(
+                                                            newValue.target
+                                                                .value
+                                                        ) < 1
+                                                    )
+                                                        return
+                                                    handleGroupSizeChange(
+                                                        parseInt(
+                                                            newValue.target
+                                                                .value
+                                                        )
+                                                    )
+                                                }}
+                                                variant="outlined"
+                                                sx={{ width: 80 }}
+                                            />
+                                        )}
+                                    </Grid>
+                                </Grid>
+                            </Stack>
                             <Stack
-                                marginTop={12}
-                                direction={'column'}
-                                spacing={4}
+                                direction="row"
+                                alignItems="center"
+                                spacing={10}
+                                marginY={6}
+                            >
+                                {loading ? (
+                                    <Skeleton
+                                        variant={'rectangular'}
+                                        width={220}
+                                        height={45}
+                                        sx={{
+                                            backgroundColor: 'secondary.main',
+                                            borderRadius: 1,
+                                        }}
+                                    />
+                                ) : (
+                                    <Button
+                                        // If a teacher doesn't want to create groups manually,
+                                        // they can randomize the groups with a single click.variant={'contained'}
+                                        onClick={randomGroups}
+                                    >
+                                        {t('random')} {t('groups')}
+                                    </Button>
+                                )}
+                                <Box
+                                    // If the students are allowed to choose their own groups,
+                                    // the teacher can enable this feature with a switch.
+                                    display={'flex'}
+                                    flexDirection={'row'}
+                                    alignItems={'center'}
+                                    gap={2}
+                                >
+                                    <Typography
+                                        color="text.primary"
+                                        fontWeight={'bold'}
+                                    >
+                                        {t('students_choose')}
+                                    </Typography>
+                                    {loading ? (
+                                        <Skeleton
+                                            variant={'rectangular'}
+                                            width={40}
+                                            height={30}
+                                            sx={{
+                                                backgroundColor:
+                                                    'secondary.main',
+                                                borderRadius: 1,
+                                            }}
+                                        />
+                                    ) : (
+                                        <Switch />
+                                    )}
+                                </Box>
+                            </Stack>
+                        </Box>
+
+                        <Box
+                            sx={{
+                                marginTop: -3,
+                                padding: '20px',
+                                backgroundColor: 'background.default',
+                            }}
+                        >
+                            <Box
+                                aria-label={'group_assigner'}
+                                display={'flex'}
+                                flexDirection={'row'}
+                                justifyContent={'flex-start'} // Change to flex-start
+                                alignItems={'flex-start'}
                                 sx={{
-                                    width: '100%',
-                                    height: '70 %',
-                                    backgroundColor: 'background.default',
+                                    '& > *:not(:last-child)': {
+                                        marginRight: '40px', // Add right margin of 20 pixels
+                                    },
                                 }}
                             >
-                                <Box>
+                                <Card>
                                     <Box
-                                        sx={{
-                                            gap: 5,
-                                            padding: '20px',
-                                            backgroundColor: 'background.default',
-                                        }}
+                                        bgcolor={'primary.light'}
+                                        padding={'17px'}
                                     >
-                                        <Typography
-                                            variant="h5"
-                                            sx={{ fontWeight: 'bold' }}
-                                            color="text.primary"
-                                        >
-                                            {t('groups')}
-                                        </Typography>
                                         <Stack direction={'row'}>
-                                            <Grid container spacing={2} alignItems="center">
+                                            <Grid
+                                                container
+                                                spacing={1}
+                                                alignItems="center"
+                                            >
                                                 <Grid item>
                                                     <Typography
-                                                        color="text.primary"
-                                                        fontWeight={'bold'}
+                                                        variant="h5"
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                        }}
                                                     >
-                                                        {t('amount')} {t('members')}/
                                                         {t('group')}
                                                     </Typography>
                                                 </Grid>
-                                                <Grid item minWidth={3}>
+                                                <Grid item>
                                                     {loading ? (
                                                         <Skeleton
                                                             variant={'text'}
                                                             width={80}
                                                             height={80}
                                                         />
-                                                    ) : (
-                                                        <TextField
-                                                            // The teacher can specify the maximum group size
-                                                            // If a number smaller than 1 is entered, the input will be ignored
-                                                            aria-label={'maxGroupSize'}
-                                                            value={newGroupSize}
-                                                            type={'number'}
-                                                            onChange={(newValue) => {
-                                                                if (
-                                                                    parseInt(
-                                                                        newValue.target
-                                                                            .value
-                                                                    ) < 1
-                                                                )
-                                                                    return
-                                                                handleGroupSizeChange(
-                                                                    parseInt(
-                                                                        newValue.target
-                                                                            .value
-                                                                    )
-                                                                )
-                                                            }}
-                                                            variant="outlined"
-                                                            sx={{ width: 80 }}
-                                                        />
-                                                    )}
+                                                    ) : (<Select
+                                                        aria-label={
+                                                            'groupSelect'
+                                                        }
+                                                        value={currentGroup}
+                                                        sx={{ width: 120 }}
+                                                        onChange={
+                                                            handleCurrentGroupChange
+                                                        }
+                                                        label={t('group')}
+                                                    >
+                                                        {newGroups.map(
+                                                            (_, index) => (
+                                                                <MenuItem
+                                                                    key={index.toString()}
+                                                                    value={index.toString()}
+                                                                >
+                                                                    {t(
+                                                                            'group'
+                                                                        ) +
+                                                                        (index +
+                                                                            1)}
+                                                                </MenuItem>
+                                                            )
+                                                        )}
+                                                    </Select>)
+                                                    }
                                                 </Grid>
                                             </Grid>
                                         </Stack>
-                                        <Stack
-                                            direction="row"
-                                            alignItems="center"
-                                            spacing={10}
-                                            marginY={6}
+                                    </Box>
+                                    <TableContainer sx={{ maxHeight: '55vh' }}>
+                                        <Table
+                                            // The teacher can see the students in the specified group
+                                            // on the right side of the screen.
+                                            aria-label={'groupTable'}
+                                            stickyHeader
+                                            sx={{ maxHeight: '5    0svh' }}
                                         >
-                                            {loading ? (
-                                                <Skeleton
-                                                    variant={'rectangular'}
-                                                    width={220}
-                                                    height={45}
-                                                    sx={{
-                                                        backgroundColor: 'secondary.main',
-                                                        borderRadius: 1,
-                                                    }}
-                                                />
-                                            ) : (
-                                                <Button
-                                                    // If a teacher doesn't want to create groups manually,
-                                                    // they can randomize the groups with a single click.variant={'contained'}
-                                                    disableElevation
-                                                    sx={{
-                                                        backgroundColor: 'secondary.main',
-                                                        padding: 1,
-                                                    }}
-                                                    onClick={randomGroups}
-                                                >
-                                                    <Typography
-                                                        color="text.primary"
-                                                        fontWeight={'bold'}
-                                                    >
-                                                        {t('random')} {t('groups')}
-                                                    </Typography>
-                                                </Button>
-                                            )}
-                                            <Box
-                                                // If the students are allowed to choose their own groups,
-                                                // the teacher can enable this feature with a switch.
-                                                display={'flex'}
-                                                flexDirection={'row'}
-                                                alignItems={'center'}
-                                                gap={2}
-                                            >
-                                                <Typography
-                                                    color="text.primary"
-                                                    fontWeight={'bold'}
-                                                >
-                                                    {t('students_choose')}
-                                                </Typography>
+                                            <TableBody>
                                                 {loading ? (
-                                                    <Skeleton
-                                                        variant={'rectangular'}
-                                                        width={40}
-                                                        height={30}
-                                                        sx={{
-                                                            backgroundColor:
-                                                                'secondary.main',
-                                                            borderRadius: 1,
-                                                        }}
-                                                    />
+                                                    [...Array(3)].map(
+                                                        (_, index) => (
+                                                            <Skeleton
+                                                                key={index}
+                                                                variant="text"
+                                                                width={'100%'}
+                                                                height={50}
+                                                                sx={{
+                                                                    margin: 0,
+                                                                }}
+                                                            />
+                                                        )
+                                                    )
                                                 ) : (
-                                                    <Switch />
-                                                )}
-                                            </Box>
-                                        </Stack>
-                                    </Box>
-
-                                    <Box
-                                        sx={{
-                                            marginTop: -3,
-                                            padding: '20px',
-                                            backgroundColor: 'background.default',
-                                        }}
-                                    >
-                                        <Box
-                                            aria-label={'group_assigner'}
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            maxWidth={500}
-                                            justifyContent={'space-between'}
-                                            alignItems={'flex-start'}
-                                        >
-                                            <TableContainer sx={{ maxHeight: '55vh' }}>
-                                                <Table
-                                                    // The teacher can see the available students
-                                                    // on the left side of the screen.
-                                                    // They are displayed in a table with a sticky header.aria-label={'studentTable'}
-                                                    stickyHeader
-                                                >
-                                                    <TableHead>
-                                                        <TableRow>
-                                                            <TableCell>
-                                                                <Typography
-                                                                    fontWeight={'bold'}
-                                                                >
-                                                                    {t('students')}
-                                                                </Typography>
-                                                            </TableCell>
-                                                        </TableRow>
-                                                    </TableHead>
-                                                    <TableBody>
-                                                        {loading ? (
-                                                            [...Array(3)].map(
-                                                                (_, index) => (
-                                                                    <Skeleton
-                                                                        key={index}
-                                                                        variant="text"
-                                                                        width={'100%'}
-                                                                        height={50}
-                                                                        sx={{ margin: 0 }}
-                                                                    />
+                                                    <>
+                                                        {newGroups[
+                                                                parseInt(
+                                                                    currentGroup
                                                                 )
-                                                            )
-                                                        ) : (
-                                                            <>
-                                                                {availableStudents.map(
-                                                                    (student) => (
-                                                                        <TableRow
-                                                                            key={student}
-                                                                        >
-                                                                            <TableCell
-                                                                                sx={{
-                                                                                    height: 20,
-                                                                                    display:
-                                                                                        'flex',
-                                                                                    flexDirection:
-                                                                                        'row',
-                                                                                    justifyContent:
-                                                                                        'space-between',
-                                                                                    alignItems:
-                                                                                        'center',
-                                                                                }}
-                                                                            >
-                                                                                {studentNames.get(
-                                                                                    student
-                                                                                ) === ''
-                                                                                    ? student
-                                                                                    : studentNames.get(
-                                                                                        student
-                                                                                    )}
-                                                                                <IconButton // people can be added to groups by clicking on the plus icon
-                                                                                    disabled={
-                                                                                        newGroups[
-                                                                                            parseInt(
-                                                                                                currentGroup
-                                                                                            )
-                                                                                        ]
-                                                                                            ? newGroups[
-                                                                                                parseInt(
-                                                                                                    currentGroup
-                                                                                                )
-                                                                                            ]
-                                                                                                .studenten
-                                                                                                .length >=
-                                                                                            newGroupSize
-                                                                                            : true
-                                                                                    }
-                                                                                    onClick={() => {
-                                                                                        assignStudent(
-                                                                                            student,
-                                                                                            parseInt(
-                                                                                                currentGroup
-                                                                                            )
-                                                                                        )
-                                                                                    }}
-                                                                                >
-                                                                                    <Add />
-                                                                                </IconButton>
-                                                                            </TableCell>
-                                                                        </TableRow>
-                                                                    )
-                                                                )}
-                                                            </>
-                                                        )}
-                                                    </TableBody>
-                                                </Table>
-                                            </TableContainer>
-                                            <TableContainer sx={{ maxHeight: '55vh' }}>
-                                                <Table
-                                                    // The teacher can see the students in the specified group
-                                                    // on the right side of the screen.
-                                                    aria-label={'groupTable'}
-                                                    stickyHeader
-                                                    sx={{ maxHeight: '5    0svh' }}
-                                                >
-                                                    <TableHead>
-                                                        <TableRow>
-                                                            <TableCell>
-                                                                <Typography
-                                                                    fontWeight={'bold'}
-                                                                >
-                                                                    {t('group')}
-                                                                </Typography>
-                                                                {loading ? (
-                                                                    <Skeleton
-                                                                        variant="text"
-                                                                        width={'80%'}
-                                                                        height={70}
-                                                                        sx={{ margin: 0 }}
-                                                                    />
-                                                                ) : (
-                                                                    <>
-                                                                        <Select
-                                                                            // The teacher can select a group from the dropdown menu
-                                                                            aria-label={
-                                                                                'groupSelect'
-                                                                            }
-                                                                            value={
-                                                                                currentGroup
-                                                                            }
+                                                                ] &&
+                                                            newGroups[
+                                                                parseInt(
+                                                                    currentGroup
+                                                                )
+                                                                ].studenten.map(
+                                                                (student) => (
+                                                                    <TableRow
+                                                                        key={
+                                                                            student
+                                                                        }
+                                                                    >
+                                                                        <TableCell
                                                                             sx={{
-                                                                                width: 200,
+                                                                                height: 20,
+                                                                                display:
+                                                                                    'flex',
+                                                                                flexDirection:
+                                                                                    'row',
+                                                                                justifyContent:
+                                                                                    'space-between',
+                                                                                alignItems:
+                                                                                    'center',
                                                                             }}
-                                                                            onChange={
-                                                                                handleCurrentGroupChange
-                                                                            }
-                                                                            label={t(
-                                                                                'group'
-                                                                            )}
                                                                         >
-                                                                            {newGroups.map(
-                                                                                (
-                                                                                    _,
-                                                                                    index
-                                                                                ) => (
-                                                                                    <MenuItem
-                                                                                        key={index.toString()}
-                                                                                        value={index.toString()}
-                                                                                    >
-                                                                                        {t(
-                                                                                            'group'
-                                                                                        ) +
-                                                                                            (index +
-                                                                                                1)}
-                                                                                    </MenuItem>
-                                                                                )
+                                                                            {studentNames.get(
+                                                                                student
                                                                             )}
-                                                                        </Select>
-                                                                    </>
-                                                                )}
-                                                            </TableCell>
-                                                        </TableRow>
-                                                    </TableHead>
-                                                    <TableBody>
-                                                        {loading ? (
-                                                            [...Array(3)].map(
-                                                                (_, index) => (
-                                                                    <Skeleton
-                                                                        key={index}
-                                                                        variant="text"
-                                                                        width={'100%'}
-                                                                        height={50}
-                                                                        sx={{ margin: 0 }}
-                                                                    />
-                                                                )
-                                                            )
-                                                        ) : (
-                                                            <>
-                                                                {newGroups[
-                                                                    parseInt(currentGroup)
-                                                                ] &&
-                                                                    newGroups[
-                                                                        parseInt(
-                                                                            currentGroup
-                                                                        )
-                                                                    ].studenten.map(
-                                                                        (student) => (
-                                                                            <TableRow
-                                                                                key={
-                                                                                    student
-                                                                                }
+                                                                            <IconButton // The teacher can remove students from the group by clicking on the cross icon
+                                                                                onClick={() => {
+                                                                                    removeStudent(
+                                                                                        student,
+                                                                                        parseInt(
+                                                                                            currentGroup
+                                                                                        )
+                                                                                    )
+                                                                                }}
                                                                             >
-                                                                                <TableCell
-                                                                                    sx={{
-                                                                                        height: 20,
-                                                                                        display:
-                                                                                            'flex',
-                                                                                        flexDirection:
-                                                                                            'row',
-                                                                                        justifyContent:
-                                                                                            'space-between',
-                                                                                        alignItems:
-                                                                                            'center',
-                                                                                    }}
-                                                                                >
-                                                                                    {studentNames.get(
+                                                                                <CancelIcon />
+                                                                            </IconButton>
+                                                                        </TableCell>
+                                                                    </TableRow>
+                                                                )
+                                                            )}
+                                                    </>
+                                                )}
+                                            </TableBody>
+                                        </Table>
+                                    </TableContainer>
+                                </Card>
+                                <Card>
+                                    <Box
+                                        bgcolor={'primary.light'}
+                                        padding={'30px'}
+                                    >
+                                        <Typography
+                                            variant="h5"
+                                            sx={{ fontWeight: 'bold' }}
+                                        >
+                                            {t('studenten')}
+                                        </Typography>
+                                    </Box>
+                                    <TableContainer sx={{ maxHeight: '55vh' }}>
+                                        <Table
+                                            // The teacher can see the available students
+                                            // on the left side of the screen.
+                                            // They are displayed in a table with a sticky header.aria-label={'studentTable'}
+                                        >
+                                            <TableBody>
+                                                {loading ? (
+                                                    [...Array(3)].map(
+                                                        (_, index) => (
+                                                            <Skeleton
+                                                                key={index}
+                                                                variant="text"
+                                                                width={'100%'}
+                                                                height={50}
+                                                                sx={{
+                                                                    margin: 0,
+                                                                }}
+                                                            />
+                                                        )
+                                                    )
+                                                ) : (
+                                                    <>
+                                                        <Stack
+                                                            direction={'row'}
+                                                        >
+                                                            {chunkArray(
+                                                                availableStudents,
+                                                                Math.floor(
+                                                                    Math.sqrt(
+                                                                        availableStudents.length
+                                                                    )
+                                                                ) + 1
+                                                            ).map(
+                                                                (students) => (
+                                                                    <Box>
+                                                                        {students.map(
+                                                                            (
+                                                                                student
+                                                                            ) => (
+                                                                                <TableRow
+                                                                                    key={
                                                                                         student
-                                                                                    )}
-                                                                                    <IconButton // The teacher can remove students from the group by clicking on the cross icon
-                                                                                        onClick={() => {
-                                                                                            removeStudent(
-                                                                                                student,
-                                                                                                parseInt(
-                                                                                                    currentGroup
-                                                                                                )
-                                                                                            )
+                                                                                    }
+                                                                                >
+                                                                                    <TableCell
+                                                                                        sx={{
+                                                                                            height: 20,
+                                                                                            display:
+                                                                                                'flex',
+                                                                                            flexDirection:
+                                                                                                'row',
+                                                                                            justifyContent:
+                                                                                                'space-between',
+                                                                                            alignItems:
+                                                                                                'center',
                                                                                         }}
                                                                                     >
-                                                                                        <CancelIcon />
-                                                                                    </IconButton>
-                                                                                </TableCell>
-                                                                            </TableRow>
-                                                                        )
-                                                                    )}
-                                                            </>
-                                                        )}
-                                                    </TableBody>
-                                                </Table>
-                                            </TableContainer>
-                                        </Box>
-                                    </Box>
-                                </Box>
-                            </Stack>
-                            <Box
-                                aria-label={'save/cancel'}
-                                sx={{
-                                    position: 'fixed',
-                                    bottom: 0,
-                                    width: '100%',
-                                    alignItems: 'flex-end',
-                                    gap: 5,
-                                    paddingRight: 10,
-                                }}
-                            >
-                                <DialogActions>
-                                    <Box pr={5} pb={5} display={'flex'} gap={1}>
-                                        <Tooltip title={t('cancel')}>
-                                            <IconButton
-                                                // The teacher can cancel the group changes by clicking on the cross icon.
-                                                onClick={handleCancel}
-                                                sx={{
-                                                    backgroundColor: 'secondary.main',
-                                                    borderRadius: 2,
-                                                }}
-                                            >
-                                                <ClearIcon fontSize={'medium'} />
-                                            </IconButton>
-                                        </Tooltip>
-                                        <Tooltip title={t('submit')}>
-                                            {loading ? (
-                                                <Skeleton
-                                                    variant={'rectangular'}
-                                                    width={40}
-                                                    height={40}
-                                                    sx={{
-                                                        backgroundColor: 'primary.main',
-                                                        borderRadius: 2,
-                                                    }}
-                                                />
-                                            ) : (
-                                                <>
-                                                    <IconButton
-                                                        // The teacher can save the group changes by clicking on the save icon.type="submit"
-                                                        aria-label={'submit'}
-                                                        type={'submit'}
-                                                        sx={{
-                                                            backgroundColor: 'primary.main',
-                                                            borderRadius: 2,
-                                                            color: 'background.default',
-                                                            '&:hover': {
-                                                                backgroundColor:
-                                                                    'secondary.main',
-                                                                color: 'text.primary',
-                                                            },
-                                                        }}
-                                                    >
-                                                        <SaveIcon fontSize={'medium'} />
-                                                    </IconButton>
-                                                </>
-                                            )}
-                                        </Tooltip>
-                                    </Box>
-                                </DialogActions>
+                                                                                        {studentNames.get(
+                                                                                            student
+                                                                                        ) ===
+                                                                                        ''
+                                                                                            ? student
+                                                                                            : studentNames.get(
+                                                                                                student
+                                                                                            )}
+                                                                                        <IconButton // people can be added to groups by clicking on the plus icon
+                                                                                            disabled={
+                                                                                                newGroups[
+                                                                                                    parseInt(
+                                                                                                        currentGroup
+                                                                                                    )
+                                                                                                    ]
+                                                                                                    ? newGroups[
+                                                                                                        parseInt(
+                                                                                                            currentGroup
+                                                                                                        )
+                                                                                                        ]
+                                                                                                        .studenten
+                                                                                                        .length >=
+                                                                                                    newGroupSize
+                                                                                                    : true
+                                                                                            }
+                                                                                            onClick={() => {
+                                                                                                assignStudent(
+                                                                                                    student,
+                                                                                                    parseInt(
+                                                                                                        currentGroup
+                                                                                                    )
+                                                                                                )
+                                                                                            }}
+                                                                                        >
+                                                                                            <Add />
+                                                                                        </IconButton>
+                                                                                    </TableCell>
+                                                                                </TableRow>
+                                                                            )
+                                                                        )}
+                                                                    </Box>
+                                                                )
+                                                            )}
+                                                        </Stack>
+                                                    </>
+                                                )}
+                                            </TableBody>
+                                        </Table>
+                                    </TableContainer>
+                                </Card>
                             </Box>
                         </Box>
-                        {/* Warning popup for when the user wants to confirm the group changes */}
-                        <WarningPopup
-                            title={t('change_groups')}
-                            content={t('cant_be_undone')}
-                            buttonName={t('confirm')}
-                            open={confirmOpen}
-                            handleClose={handleCloseConfirm}
-                            doAction={confirmSave}
-                        />
-                    </>
-                ):(
-                    navigate('*')
-                )}
-            </>
-        )} 
-    </>
-)}
+                    </Box>
+                </Stack>
+                <Box
+                    aria-label={'save/cancel'}
+                    sx={{
+                        position: 'fixed',
+                        bottom: 0,
+                        width: '100%',
+                        alignItems: 'flex-end',
+                        gap: 5,
+                        paddingRight: 10,
+                    }}
+                >
+                    <DialogActions>
+                        <Box pr={5} pb={5} display={'flex'} gap={1}>
+                            <Tooltip title={t('cancel')}>
+                                <IconButton
+                                    // The teacher can cancel the group changes by clicking on the cross icon.
+                                    onClick={handleCancel}
+                                    sx={{
+                                        backgroundColor: 'secondary.main',
+                                        borderRadius: 2,
+                                    }}
+                                >
+                                    <ClearIcon fontSize={'medium'} />
+                                </IconButton>
+                            </Tooltip>
+                            <Tooltip title={t('submit')}>
+                                {loading ? (
+                                    <Skeleton
+                                        variant={'rectangular'}
+                                        width={40}
+                                        height={40}
+                                        sx={{
+                                            backgroundColor: 'primary.main',
+                                            borderRadius: 2,
+                                        }}
+                                    />
+                                ) : (
+                                    <>
+                                        <IconButton
+                                            // The teacher can save the group changes by clicking on the save icon.type="submit"
+                                            aria-label={'submit'}
+                                            sx={{
+                                                backgroundColor: 'primary.main',
+                                                borderRadius: 2,
+                                                color: 'background.default',
+                                                '&:hover': {
+                                                    backgroundColor:
+                                                        'secondary.main',
+                                                    color: 'text.primary',
+                                                },
+                                            }}
+                                        >
+                                            <SaveIcon fontSize={'medium'} />
+                                        </IconButton>
+                                    </>
+                                )}
+                            </Tooltip>
+                        </Box>
+                    </DialogActions>
+                </Box>
+            </Box>
+            {/* Warning popup for when the user wants to confirm the group changes */}
+            <WarningPopup
+                title={t('change_groups')}
+                content={t('cant_be_undone')}
+                buttonName={t('confirm')}
+                open={confirmOpen}
+                handleClose={handleCloseConfirm}
+                doAction={confirmSave}
+            />
+        </>
+    )
+}
+
+function chunkArray<T>(arr: T[], chunkSize: number): T[][] {
+    let result: T[][] = []
+    for (let i = 0; i < arr.length; i += chunkSize) {
+        let chunk: T[] = arr.slice(i, i + chunkSize)
+        result.push(chunk)
+    }
+    return result
+}

From 683eb92e5a7bfd00443ff4286ed4db53c599b7ac Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 19 May 2024 13:04:22 +0200
Subject: [PATCH 073/145] templates added restriction rows

---
 .../RestrictionTemplateUI.tsx                 | 47 +++++++++++++++++--
 .../RestrictionsDialog.tsx                    | 44 ++---------------
 2 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index ca3b9240..c6949096 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -6,13 +6,18 @@ import Typography from '@mui/material/Typography';
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
+import { restriction } from './AddChangeAssignmentPage.tsx'
 
 
-const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, extension: string) => {
+const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, templateFileName: string) => {
     // This function will save the restriction template with the given parameters.
     // It finds the #@param tags in the restriction code and replaces the values with the given parameters.
     // It does this with javascript regexp
     
+    // get the extension after the dot of the filename
+    const extension = templateFileName.split('.').pop();
+    
+
     let newRestrictionCode = restrictionCode;
     Object.keys(params).forEach(key => {
         // match on the #@param tag and the variable name
@@ -52,11 +57,25 @@ const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string
     return newRestrictionCode;
 }
 
+interface RestrictionTemplateUIProps {
+    restrictionCode: string;
+    handleCloseTemplateInterface: () => void;
+    templateFileName: string;
+    restrictions: restriction[];
+    setRestrictions: (restriction: restriction[]) => void
+}
+
 /**
  * This UI will show different fields for parameters regarding the restrictions template.
  * @returns {React.ReactElement} - The rendered component.
  */
-export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemplateInterface, templateFileName }: { restrictionCode: string, handleCloseTemplateInterface: () => void, templateFileName: string }) {
+export default function RestrictionTemplateUI({ 
+    restrictionCode, 
+    handleCloseTemplateInterface, 
+    templateFileName ,
+    restrictions,
+    setRestrictions
+}: RestrictionTemplateUIProps) {
     
     // De onderste twee rijen code zouden bijvoorbeeld het volgende doen
     // voor de templateFileName 'template.sh':
@@ -85,6 +104,26 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
         setParamsState(initialState);
     });
 
+    //handle the submission of the form
+    const handleSubmit = (code: string) => {
+        /*if (restrictionName === '') {
+            setNameError(true)
+            return
+        }*/
+
+        const newRestriction: restriction = {
+            script: templateFileName,
+            file: new File(
+                [code],
+                templateFileName,
+                { type: 'text/plain' }
+            ),
+            moet_slagen: false,
+        }
+        setRestrictions([...restrictions, newRestriction])
+        handleCloseTemplateInterface()
+    }
+
     // All functions beneath are for handling the array type of parameters.
     const handleArrayChange = (variable: string, newValue: string) => {
         setParamsState(prevState => ({
@@ -138,7 +177,9 @@ export default function RestrictionTemplateUI({ restrictionCode, handleCloseTemp
                     <Button
                         autoFocus
                         color="inherit"
-                        onClick={() => saveRestrictionTemplate(restrictionCode, paramsState, templateExtension)}
+                        onClick={() => handleSubmit(
+                            saveRestrictionTemplate(restrictionCode, paramsState, templateFileName)
+                        )}
                     >
                         save
                     </Button>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index cca0b17a..07d5ac69 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -148,7 +148,9 @@ export default function RestrictionsDialog({
         fileExtension: restrictionExtension,
         code: string
     ) => {
-        const file = new File([code], `${filename}.${fileExtension}`, {
+        // note how we don't write a dot between the filename and the file extension
+        // this is because the file extension already starts with a dot
+        const file = new File([code], `${filename}${fileExtension}`, {
             type: 'text/plain',
         })
         try {
@@ -205,36 +207,6 @@ export default function RestrictionsDialog({
         })
     }, [userid])
 
-    const templateButtons = [
-        <Button
-            id="fileExtensionCheck"
-            key="FileExtensionCheck"
-            onClick={() => {
-                setTextFieldContent(code)
-                if (openTemplateInUI) {
-                    handleClickOpenTemplateInterface()
-                } else {
-                    handleClickOpenTextEditor()
-                }
-            }}
-        >
-            File Extension Check
-        </Button>,
-        <Button
-            id="filesPresentCheck"
-            key="FilesPresentCheck"
-            onClick={() => {
-                setTextFieldContent(code)
-                if (openTemplateInUI) {
-                    handleClickOpenTemplateInterface()
-                } else {
-                    handleClickOpenTextEditor()
-                }
-            }}
-        >
-            Files Present Check
-        </Button>,
-    ]
 
     const handleCloseTextEditor = () => {
         setOpenTextEditor(false)
@@ -275,14 +247,6 @@ export default function RestrictionsDialog({
                     value={openTemplateInUI}
                     onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
                 />
-                <ButtonGroup
-                    orientation="vertical"
-                    aria-label="Vertical button group"
-                    variant={'outlined'}
-                    color={'primary'}
-                >
-                    {templateButtons}
-                </ButtonGroup>
                 {/* This button groups shows the templates the teacher has made */}
                 <ButtonGroup
                     orientation="vertical"
@@ -330,6 +294,8 @@ export default function RestrictionsDialog({
                     restrictionCode={code}
                     handleCloseTemplateInterface={handleCloseTemplateInterface}
                     templateFileName="template_example.sh"
+                    restrictions={restrictions}
+                    setRestrictions={setRestrictions}
                 />
             </Dialog>
             {/* This is the code editor. */}

From 06c1c46746cc13194f2999476a89d6ff1c0906fd Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Sun, 19 May 2024 13:08:03 +0200
Subject: [PATCH 074/145] studentpopup op assignmentpage

---
 frontend/frontend/src/i18n/en.ts              |  1 -
 frontend/frontend/src/i18n/nl.ts              |  1 -
 .../pages/assignmentPage/AssignmentPage.tsx   | 86 +++++++++++++++----
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index b2b33236..a533e24c 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -109,7 +109,6 @@ const english = {
     deadlines_on: 'Deadlines on',
     no_assignmentfile: 'No assignment file',
     email: 'email',
-    copy_invite: 'Copy invitation link',
     n_of_members: 'Max Amount Of Members',
     existing_submissions:
         'This could impact existing submissions. Are you sure?',
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index fcff447d..bfcb54c1 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -109,7 +109,6 @@ const dutch = {
     no_assignmentfile: 'Geen opdrachtbestand',
     deadlines_on: 'Deadlines op',
     email: 'email',
-    copy_invite: 'Kopieer uitnodigingslink',
     n_of_members: 'Max Aantal Leden',
     existing_submissions:
         'Dit kan invloed hebben op bestaande indieningen. Weet je het zeker?',
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 058d36a8..e833ba36 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -25,6 +25,8 @@ import { GroupAccessComponent } from '../../components/GroupAccessComponent.tsx'
 import dayjs from 'dayjs'
 import DownloadIcon from '@mui/icons-material/Download'
 import WarningPopup from '../../components/WarningPopup.tsx'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
+import StudentPopUp from '../subjectsPage/StudentPopUp.tsx'
 
 // group interface
 export interface Group {
@@ -62,9 +64,12 @@ export function AssignmentPage() {
     const [groups, setGroups] = useState<Group[]>([])
     const [submissionFile, setSubmissionFile] = useState<File>()
     const [submit, setSubmit] = useState(false)
+    const [students, setStudents] = useState<User[]>([])
+
     //state for loading the page
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
+    const [studentsLoading, setStudentsLoading] = useState(true)
 
     // state for the warning popup
     const [openNoGroup, setOpenNoGroup] = useState(false)
@@ -153,6 +158,30 @@ export function AssignmentPage() {
         })()
     }, [assignmentId, courseId, user.is_lesgever, submit, user])
 
+    useEffect(() => {
+        async function fetchStudents() {
+            setStudentsLoading(true)
+            const groupResponse = await instance.get(`groepen/?student=${user.user}&project=${assignmentId}`)
+            const group: Group = groupResponse.data[0]
+            const temp_students = []
+            for (const s of group.studenten || []) {
+                try {
+                    const userResponse = await instance.get(`/gebruikers/${s}/`)
+                    temp_students.push(userResponse.data)
+                } catch (error) {
+                    console.error('Error fetching student data:', error)
+                }
+            }
+            // Update the state with the fetched data
+            setStudents(temp_students)
+            setStudentsLoading(false)
+        }
+        // Fetch students
+        fetchStudents().catch((error) =>
+            console.error('Error fetching students data:', error)
+        )
+    }, [user, assignment, groups])
+
     // Function to download all submissions as a zip file
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
@@ -665,7 +694,8 @@ export function AssignmentPage() {
                                         backgroundColor: 'background.default',
                                     }}
                                 >
-                                    <Stack direction={'row'}>
+                                    <Stack direction={'row'}
+                                            position='relative'>
                                         <Box
                                             display={'flex'}
                                             flexDirection={'row'}
@@ -721,22 +751,46 @@ export function AssignmentPage() {
                                             />
                                         ) : (
                                             <>
-                                                {assignment?.student_groep && (
-                                                    <Button
-                                                        sx={{
-                                                            bgcolor:
-                                                                'secondary.main',
-                                                            textTransform:
-                                                                'none',
-                                                        }}
-                                                        onClick={goToGroups}
-                                                    >
-                                                        <Typography color="secondary.contrastText">
-                                                            {t('group')}
+                                            {assignment?.student_groep ? (
+                                                <Button
+                                                    sx={{
+                                                        bgcolor: 'secondary.main',
+                                                        textTransform: 'none',
+                                                    }}
+                                                    onClick={goToGroups}
+                                                >
+                                                    <Typography color="secondary.contrastText">
+                                                        {t('group')}
+                                                    </Typography>
+                                                </Button>
+                                            ) : (
+                                                <Box
+                                                    sx={{
+                                                        position: 'absolute',
+                                                        top: 90,
+                                                        right: 50,
+                                                        display: 'flex',
+                                                        justifyContent: 'flex-end',
+                                                        zIndex: 1,
+                                                        marginTop: '-40px',
+                                                    }}
+                                                >
+                                                    {assignment?.max_groep_grootte === 1 ? (
+                                                        <Typography variant="body1">
+                                                            {user.first_name + ' ' + user.last_name}
                                                         </Typography>
-                                                    </Button>
-                                                )}
-                                            </>
+                                                    ) : (
+                                                        <>
+                                                        {console.log(students)}
+                                                        <StudentPopUp
+                                                            students={studentsLoading ? [] : students}
+                                                            text="group_members"
+                                                        />
+                                                        </>
+                                                    )}
+                                                </Box>
+                                            )}
+                                        </>
                                         )}
                                     </Stack>
                                 </Box>

From 56dd272a9ec0fc8cf2625b91d09f59fa33c9b77a Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 19 May 2024 13:18:52 +0200
Subject: [PATCH 075/145] add must pass to restriction list

---
 .../src/components/RestrictionCard.tsx        | 23 ++++++++++++++++++-
 .../AddChangeAssignmentPage.tsx               |  6 +++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/frontend/src/components/RestrictionCard.tsx b/frontend/frontend/src/components/RestrictionCard.tsx
index e6b33f79..1512e395 100644
--- a/frontend/frontend/src/components/RestrictionCard.tsx
+++ b/frontend/frontend/src/components/RestrictionCard.tsx
@@ -1,6 +1,8 @@
 import { restriction } from '../pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx'
-import { Box, IconButton, Typography } from '@mui/material'
+import { Box, IconButton, Switch, Typography } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
+import React from 'react'
+import { t } from 'i18next'
 
 interface RestrictionCardProps {
     restriction: restriction
@@ -13,6 +15,9 @@ export function RestrictionCard({
     restrictions,
     setRestrictions,
 }: RestrictionCardProps) {
+
+    const [mustPass, setMustPass] = React.useState(false)
+
     //handle the removal of the restriction from the list
     const handleRemove = () => {
         setRestrictions(restrictions.filter((r) => r !== restriction))
@@ -29,6 +34,22 @@ export function RestrictionCard({
                 <Typography id='script' variant={'body2'}>
                     {restriction.script.replace(/^.*[\\/]/, '')}
                 </Typography>
+                {/*<Box>
+                    <Typography variant={'body2'}>
+                        {t('must_pass') + ':'}
+                    </Typography>
+                    <Switch
+                        id="mustPassSwitch"
+                        value={mustPass}
+                        onChange={() => setMustPass(!mustPass)}
+                    />
+                </Box>*/}
+                <Switch
+                    id="mustPassSwitch"
+                    value={mustPass}
+                    onChange={() => setMustPass(!mustPass)}
+                />
+                        
                 <IconButton id='closeButton' onClick={handleRemove}>
                     <CloseIcon />
                 </IconButton>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 0fb6230c..75ab8723 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -732,7 +732,13 @@ export function AddChangeAssignmentPage() {
                             <Typography variant={'h5'} fontWeight={'bold'}>
                                 {t('restrictions')}
                             </Typography>
+                            
                             <Box sx={{ padding: 1 }}>
+                                <Box display="flex" flexDirection="row" justifyContent="space-between" sx={{ padding: 1 }}>
+                                    <Typography variant="body1">Name</Typography>
+                                    <Typography variant="body1">Must pass</Typography>
+                                    <Typography variant="body1">Delete</Typography>
+                                </Box>
                                 {/*This list will render the restrictions that are added to the assignment.*/}
                                 <List
                                     sx={{

From 2d690292924efcfa84b1592f58f512845ee2c6a2 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 13:56:19 +0200
Subject: [PATCH 076/145] opzoeken student werkt

---
 .../src/pages/groupsPage/GroupsPage.tsx       | 80 +++++++++++++++----
 package-lock.json                             |  6 ++
 package.json                                  |  1 +
 3 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index d889c68d..deee1d56 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -1,6 +1,7 @@
 import { Header } from '../../components/Header.tsx'
 import { Button, Card } from '../../components/CustomComponents.tsx'
 import {
+    Autocomplete,
     Box,
     Grid,
     IconButton,
@@ -135,6 +136,7 @@ export function GroupsPage() {
     const handleGroupSizeChange = (newValue: number) => {
         setNewGroupSize(newValue)
         setAvailableStudents(() => Array.from(studentNames.keys()))
+        setFilteredStudents(availableStudents);
         setCurrentGroup('0')
         setNewGroups(() => {
             const newGroups = []
@@ -156,6 +158,7 @@ export function GroupsPage() {
                 .get('/vakken/' + courseId)
                 .then((response) => {
                     setAvailableStudents(response.data.studenten)
+                    setFilteredStudents(availableStudents)
                 })
                 .catch((error) => {
                     console.error(error)
@@ -283,12 +286,14 @@ export function GroupsPage() {
                     )
             )
         )
+        setFilteredStudents(availableStudents);
     }, [newGroups, studentNames])
 
     // Create new groups when the group size changes
     useEffect(() => {
         if (newGroups.length === 0) {
             setAvailableStudents(() => Array.from(studentNames.keys()))
+            setFilteredStudents(availableStudents);
             setCurrentGroup('0')
             setNewGroups(() => {
                 const newGroups = []
@@ -346,6 +351,7 @@ export function GroupsPage() {
             (student) => student !== studentId
         )
         setAvailableStudents(updatedAvailableStudents)
+        setFilteredStudents(availableStudents);
         // Then, create a new copy of the newGroups array with the updated group
         const updatedNewGroups = newGroups.map((group, index) => {
             if (index === groupId) {
@@ -386,6 +392,26 @@ export function GroupsPage() {
         setNewGroups(updatedNewGroups)
     }
 
+    const [filteredStudents, setFilteredStudents] = useState(availableStudents);
+
+    // for filtering students
+    const handleAutocompleteChange = (_, value) => {
+        if(value){
+            setFilteredStudents([value])
+        }
+    };
+
+    const resetAutocompleteChange = () => {
+        setFilteredStudents(availableStudents);
+    }
+
+    const filterOptions = (_,{ inputValue }) => {
+        const filtered = availableStudents.filter((option) => {
+            const label = studentNames.get(option);
+            return label?.toLowerCase().startsWith(inputValue.toLowerCase());
+        });
+        return filtered;
+    };
     return (
         <>
             <Box
@@ -532,7 +558,6 @@ export function GroupsPage() {
                                 </Box>
                             </Stack>
                         </Box>
-
                         <Box
                             sx={{
                                 marginTop: -3,
@@ -693,14 +718,42 @@ export function GroupsPage() {
                                 <Card>
                                     <Box
                                         bgcolor={'primary.light'}
-                                        padding={'30px'}
+                                        padding={'17px'}
                                     >
-                                        <Typography
-                                            variant="h5"
-                                            sx={{ fontWeight: 'bold' }}
-                                        >
-                                            {t('studenten')}
-                                        </Typography>
+                                        <Stack direction={'row'}>
+                                            <Grid
+                                                container
+                                                alignItems="center"
+                                            >
+                                                <Grid>
+                                                    <Typography
+                                                        variant="h5"
+                                                        sx={{ fontWeight: 'bold' }}
+                                                    >
+                                                        {t('studenten')}
+                                                    </Typography>
+                                                </Grid>
+                                                <Box paddingLeft={1}></Box>
+                                                <Grid>
+                                                    <Box sx={{ width: '200px' }}>
+                                                        {loading ? (
+                                                            <Skeleton
+                                                                variant={'text'}
+                                                                width={160}
+                                                                height={80}
+                                                            />
+                                                        ) : (
+                                                            <Autocomplete
+                                                                options={availableStudents}
+                                                                getOptionLabel={(student) => studentNames.get(student)}
+                                                                onChange={handleAutocompleteChange}
+                                                                filterOptions={filterOptions}
+                                                                renderInput={(student) => <TextField {...student} />}
+                                                            />)}
+                                                    </Box>
+                                                </Grid>
+                                            </Grid>
+                                        </Stack>
                                     </Box>
                                     <TableContainer sx={{ maxHeight: '55vh' }}>
                                         <Table
@@ -729,12 +782,10 @@ export function GroupsPage() {
                                                             direction={'row'}
                                                         >
                                                             {chunkArray(
-                                                                availableStudents,
-                                                                Math.floor(
-                                                                    Math.sqrt(
-                                                                        availableStudents.length
-                                                                    )
-                                                                ) + 1
+                                                                filteredStudents,
+                                                                Math.ceil(
+                                                                        Math.sqrt(filteredStudents.length)
+                                                                )
                                                             ).map(
                                                                 (students) => (
                                                                     <Box>
@@ -792,6 +843,7 @@ export function GroupsPage() {
                                                                                                         currentGroup
                                                                                                     )
                                                                                                 )
+                                                                                                resetAutocompleteChange()
                                                                                             }}
                                                                                         >
                                                                                             <Add />
diff --git a/package-lock.json b/package-lock.json
index de269d44..1b8a0d3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@mui/material": "^5.15.12",
+        "lodash": "^4.17.21",
         "react-datepicker": "^6.2.0"
       }
     },
@@ -768,6 +769,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
diff --git a/package.json b/package.json
index dde0d41f..f4a11f7a 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.12",
+    "lodash": "^4.17.21",
     "react-datepicker": "^6.2.0"
   }
 }

From 1da472259b7ee2682708001ddfd8c58f73d0dafc Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 14:26:10 +0200
Subject: [PATCH 077/145] error met inladen user

---
 .../AddChangeAssignmentPage.tsx               | 1217 +++++++++--------
 .../subjectsPage/AddChangeSubjectPage.tsx     |  326 ++---
 2 files changed, 831 insertions(+), 712 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 54e32149..667d5978 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -163,14 +163,15 @@ export function AddChangeAssignmentPage() {
     //set the initial values of the assignment if it is an edit
     useEffect(() => {
         //get the data
-        const fetchData = async () => {
-            //begin loading -> set loading to true
+        const fetchUser = async () => {
             setUserLoading(true)
-            setLoading(true)
             const userResponse = await instance.get('/gebruikers/me/')
             setUser(userResponse.data)
             setUserLoading(false)
-
+        }
+        const fetchData = async () => {
+            //begin loading -> set loading to true
+            setLoading(true)
             //get the assignment
             await instance
                 .get<getAssignment>(`/projecten/${assignmentId}`)
@@ -262,6 +263,9 @@ export function AddChangeAssignmentPage() {
         }
 
         //if there is an assignmentId, get the data else use the default values
+        fetchUser().catch((error) => {
+            console.error(error)
+        })
         if (assignmentId !== undefined) {
             fetchData().catch((error) => {
                 console.error(error)
@@ -470,567 +474,664 @@ export function AddChangeAssignmentPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            {/* Stack container for layout */}
-            <Stack direction={'column'} paddingX={2}>
-                {/*very ugly but it works functionally*/}
-                {loading ? (
-                    <Header variant={'default'} title={''} />
-                ) : (
-                    <Header variant={'default'} title={title} />
-                )}
-                {/* Form for submitting assignment */}
-                <Stack
-                    direction={'column'}
-                    marginTop={11}
-                    component={'form'}
-                    onSubmit={handleSubmit}
-                >
-                    <Box
-                        aria-label={'title_and_upload'}
-                        padding={2}
-                        paddingRight={0}
-                        gap={1}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        width={'98%'}
-                        justifyContent={'space-between'}
-                    >
-                        <Box
-                            aria-label={'title'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* Here the user gets to specify the assignment name */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('assignmentName')}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={'Title'}
-                                    error={assignmentErrors.title}
-                                    value={title}
-                                    helperText={
-                                        assignmentErrors.title
-                                            ? t('name') + ' ' + t('is_required')
-                                            : ''
-                                    }
-                                    onChange={(event) =>
-                                        setTitle(event.target.value)
-                                    }
-                                />
-                            )}
-                        </Box>
-                        {/* File Upload button */}
-                        <Box
-                            padding={0}
-                            marginRight={3}
-                            display={'flex'}
-                            flexDirection={'column'}
-                            alignItems={'flex-start'}
-                        >
-                            {loading ? (
-                                <FileUploadButton
-                                    name={t('upload_assignment')}
-                                    tooltip={t('uploadToolTip')}
-                                    onFileChange={() => {
-                                        console.log('loading')
-                                    }}
-                                    fileTypes={['.pdf', '.zip']}
-                                    path={new File([], 'loading...')}
-                                />
-                            ) : (
-                                <FileUploadButton
-                                    name={t('upload_assignment')}
-                                    path={assignmentFile}
-                                    onFileChange={handleFileChange}
-                                    fileTypes={['.pdf', '.zip']}
-                                    tooltip={t('uploadToolTip')}
-                                />
-                            )}
-                        </Box>
-                    </Box>
-                    {/* Deadline section.
+                        <>
+                            {/* Stack container for layout */}
+                            <Stack direction={'column'} paddingX={2}>
+                                {/*very ugly but it works functionally*/}
+                                {loading ? (
+                                    <Header variant={'default'} title={''} />
+                                ) : (
+                                    <Header variant={'default'} title={title} />
+                                )}
+                                {/* Form for submitting assignment */}
+                                <Stack
+                                    direction={'column'}
+                                    marginTop={11}
+                                    component={'form'}
+                                    onSubmit={handleSubmit}
+                                >
+                                    <Box
+                                        aria-label={'title_and_upload'}
+                                        padding={2}
+                                        paddingRight={0}
+                                        gap={1}
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        width={'98%'}
+                                        justifyContent={'space-between'}
+                                    >
+                                        <Box
+                                            aria-label={'title'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* Here the user gets to specify the assignment name */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('assignmentName')}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={'Title'}
+                                                    error={
+                                                        assignmentErrors.title
+                                                    }
+                                                    value={title}
+                                                    helperText={
+                                                        assignmentErrors.title
+                                                            ? t('name') +
+                                                              ' ' +
+                                                              t('is_required')
+                                                            : ''
+                                                    }
+                                                    onChange={(event) =>
+                                                        setTitle(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                />
+                                            )}
+                                        </Box>
+                                        {/* File Upload button */}
+                                        <Box
+                                            padding={0}
+                                            marginRight={3}
+                                            display={'flex'}
+                                            flexDirection={'column'}
+                                            alignItems={'flex-start'}
+                                        >
+                                            {loading ? (
+                                                <FileUploadButton
+                                                    name={t(
+                                                        'upload_assignment'
+                                                    )}
+                                                    tooltip={t('uploadToolTip')}
+                                                    onFileChange={() => {
+                                                        console.log('loading')
+                                                    }}
+                                                    fileTypes={['.pdf', '.zip']}
+                                                    path={
+                                                        new File(
+                                                            [],
+                                                            'loading...'
+                                                        )
+                                                    }
+                                                />
+                                            ) : (
+                                                <FileUploadButton
+                                                    name={t(
+                                                        'upload_assignment'
+                                                    )}
+                                                    path={assignmentFile}
+                                                    onFileChange={
+                                                        handleFileChange
+                                                    }
+                                                    fileTypes={['.pdf', '.zip']}
+                                                    tooltip={t('uploadToolTip')}
+                                                />
+                                            )}
+                                        </Box>
+                                    </Box>
+                                    {/* Deadline section.
                     There is both the normal deadline,
                     and an extra deadline in case people need more time. */}
-                    <Box
-                        aria-label={'deadline'}
-                        padding={2}
-                        display={'flex'}
-                        flexDirection={{
-                            xs: 'column',
-                            sm: 'column',
-                            md: 'row',
-                        }}
-                        gap={5}
-                    >
-                        <Box
-                            aria-label={'initial_deadline'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* This section renders the normal deadline. */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                Deadline:
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <LocalizationProvider
-                                    dateAdapter={AdapterDayjs}
-                                    adapterLocale="nl"
-                                >
-                                    <DateTimePicker
-                                        format="DD/MM/YYYY HH:mm"
-                                        value={dueDate}
-                                        disablePast
-                                        label={t('optional')}
-                                        sx={{ width: 250 }}
-                                        viewRenderers={{
-                                            hours: renderTimeViewClock,
-                                            minutes: renderTimeViewClock,
-                                            seconds: renderTimeViewClock,
-                                        }}
-                                        onError={(newError) =>
-                                            SetDeadlineError(newError)
-                                        }
-                                        slotProps={{
-                                            field: {
-                                                clearable: true,
-                                                onClear: () => setCleared(true),
-                                            },
-                                            textField: {
-                                                helperText: errorMessage,
-                                            },
-                                        }}
-                                        onChange={(newValue) =>
-                                            setDueDate(newValue)
-                                        }
-                                    />
-                                </LocalizationProvider>
-                            )}
-                        </Box>
-                        <Box
-                            aria-label={'secondary_deadline'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* This section renders the extra deadline. */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                Extra Deadline:
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <LocalizationProvider
-                                    dateAdapter={AdapterDayjs}
-                                    adapterLocale="nl"
-                                >
-                                    <DateTimePicker
-                                        format="DD/MM/YYYY HH:mm"
-                                        value={extraDueDate}
-                                        disablePast
-                                        label={t('optional')}
-                                        sx={{ width: 250 }}
-                                        viewRenderers={{
-                                            hours: renderTimeViewClock,
-                                            minutes: renderTimeViewClock,
-                                            seconds: renderTimeViewClock,
-                                        }}
-                                        slotProps={{
-                                            field: {
-                                                clearable: true,
-                                                onClear: () => setCleared(true),
-                                            },
-                                            textField: {
-                                                error: deadlineCheckError,
-                                                helperText: deadlineCheckError
-                                                    ? t('deadlineCheck')
-                                                    : '',
-                                            },
+                                    <Box
+                                        aria-label={'deadline'}
+                                        padding={2}
+                                        display={'flex'}
+                                        flexDirection={{
+                                            xs: 'column',
+                                            sm: 'column',
+                                            md: 'row',
                                         }}
-                                        onChange={(newValue) =>
-                                            setExtraDueDate(newValue)
-                                        }
-                                    />
-                                </LocalizationProvider>
-                            )}
-                        </Box>
-                    </Box>
-                    {/* Description section */}
-                    <Card aria-label={'description'}>
-                        <Box
-                            padding={2}
-                            maxHeight={'20svh'}
-                            minHeight={'20svh'}
-                        >
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('description')}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={'100%'}
-                                    height={60}
-                                />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={'Description'}
-                                    variant={'standard'}
-                                    multiline
-                                    value={description}
-                                    onChange={(event) =>
-                                        setDescription(event.target.value)
-                                    }
-                                    fullWidth
-                                    error={assignmentErrors.description}
-                                    // Show an error message if the description is not filled in.
-                                    helperText={
-                                        assignmentErrors.description
-                                            ? t('descriptionName') +
-                                              ' ' +
-                                              t('is_required')
-                                            : ''
-                                    }
-                                    sx={{
-                                        overflowY: 'auto',
-                                        maxHeight: '25svh',
-                                    }}
-                                />
-                            )}
-                        </Box>
-                    </Card>
-                    {/* Restrictions section */}
-                    <Box
-                        aria-label={'restrictions'}
-                        marginTop={3}
-                        display={'flex'}
-                        flexDirection={'row'}
-                    >
-                        <Card
-                            sx={{
-                                padding: 1,
-                                backgroundColor: 'background.default',
-                                width: '70%',
-                                height: '28svh',
-                            }}
-                        >
-                            <Typography variant={'h5'} fontWeight={'bold'}>
-                                {t('restrictions')}
-                            </Typography>
-                            <Box sx={{ padding: 1 }}>
-                                {/*This list will render the restrictions that are added to the assignment.*/}
-                                <List
-                                    sx={{
-                                        maxHeight: '18vh',
-                                        overflowY: 'auto',
-                                    }}
-                                >
-                                    {loading ? (
-                                        <CircularProgress color={'primary'} />
-                                    ) : (
-                                        <>
-                                            {restrictions.map(
-                                                (restriction, index) => {
-                                                    return (
-                                                        <ListItem key={index}>
-                                                            <RestrictionCard
-                                                                restriction={
-                                                                    restriction
-                                                                }
-                                                                restrictions={
-                                                                    restrictions
-                                                                }
-                                                                setRestrictions={
-                                                                    setRestrictions
-                                                                }
-                                                            />
-                                                        </ListItem>
-                                                    )
-                                                }
-                                            )}
-                                        </>
-                                    )}
-                                </List>
-                            </Box>
-                            <Box
-                                width={'100%'}
-                                display={'flex'}
-                                justifyContent={'flex-end'}
-                            >
-                                <Tooltip title={t('add_restriction')}>
-                                    <AddRestrictionButton
-                                        // When this button is clicked, a pop up will show.
-                                        // This popup will allow you to choose to make a restriction yourself,
-                                        // create one starting from a template,
-                                        // or choose a file from the system.
-                                        restrictions={restrictions}
-                                        setRestrictions={(newRestrictions) =>
-                                            setRestrictions(newRestrictions)
-                                        }
-                                    ></AddRestrictionButton>
-                                </Tooltip>
-                            </Box>
-                        </Card>
-                    </Box>
-                    {/* Main actions section */}
-                    <Box
-                        aria-label={'main actions'}
-                        marginTop={3}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        width={'100%'}
-                        justifyContent={'space-between'}
-                    >
-                        <Box
-                            aria-label={'visibility_and_groups'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={10}
-                            alignItems={'center'}
-                            padding={2}
-                        >
-                            <Box
-                                aria-label={'main actions'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                alignItems={'center'}
-                            >
-                                {visible ? (
-                                    <IconButton
-                                        // Allows the teacher to select whether
-                                        // the assignment is visible to students or not.
-                                        color={'info'}
-                                        onClick={() => setVisible(!visible)}
+                                        gap={5}
                                     >
-                                        <VisibilityIcon fontSize={'medium'} />
-                                    </IconButton>
-                                ) : (
-                                    <IconButton
-                                        color={'info'}
-                                        onClick={() => setVisible(!visible)}
-                                    >
-                                        <VisibilityOffIcon
-                                            fontSize={'medium'}
-                                        />
-                                    </IconButton>
-                                )}
-                                <Tooltip title={t('remove')}>
-                                    <IconButton
-                                        color={'warning'}
-                                        onClick={openDeleteConfirmation}
+                                        <Box
+                                            aria-label={'initial_deadline'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* This section renders the normal deadline. */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                Deadline:
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <LocalizationProvider
+                                                    dateAdapter={AdapterDayjs}
+                                                    adapterLocale="nl"
+                                                >
+                                                    <DateTimePicker
+                                                        format="DD/MM/YYYY HH:mm"
+                                                        value={dueDate}
+                                                        disablePast
+                                                        label={t('optional')}
+                                                        sx={{ width: 250 }}
+                                                        viewRenderers={{
+                                                            hours: renderTimeViewClock,
+                                                            minutes:
+                                                                renderTimeViewClock,
+                                                            seconds:
+                                                                renderTimeViewClock,
+                                                        }}
+                                                        onError={(newError) =>
+                                                            SetDeadlineError(
+                                                                newError
+                                                            )
+                                                        }
+                                                        slotProps={{
+                                                            field: {
+                                                                clearable: true,
+                                                                onClear: () =>
+                                                                    setCleared(
+                                                                        true
+                                                                    ),
+                                                            },
+                                                            textField: {
+                                                                helperText:
+                                                                    errorMessage,
+                                                            },
+                                                        }}
+                                                        onChange={(newValue) =>
+                                                            setDueDate(newValue)
+                                                        }
+                                                    />
+                                                </LocalizationProvider>
+                                            )}
+                                        </Box>
+                                        <Box
+                                            aria-label={'secondary_deadline'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* This section renders the extra deadline. */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                Extra Deadline:
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <LocalizationProvider
+                                                    dateAdapter={AdapterDayjs}
+                                                    adapterLocale="nl"
+                                                >
+                                                    <DateTimePicker
+                                                        format="DD/MM/YYYY HH:mm"
+                                                        value={extraDueDate}
+                                                        disablePast
+                                                        label={t('optional')}
+                                                        sx={{ width: 250 }}
+                                                        viewRenderers={{
+                                                            hours: renderTimeViewClock,
+                                                            minutes:
+                                                                renderTimeViewClock,
+                                                            seconds:
+                                                                renderTimeViewClock,
+                                                        }}
+                                                        slotProps={{
+                                                            field: {
+                                                                clearable: true,
+                                                                onClear: () =>
+                                                                    setCleared(
+                                                                        true
+                                                                    ),
+                                                            },
+                                                            textField: {
+                                                                error: deadlineCheckError,
+                                                                helperText:
+                                                                    deadlineCheckError
+                                                                        ? t(
+                                                                              'deadlineCheck'
+                                                                          )
+                                                                        : '',
+                                                            },
+                                                        }}
+                                                        onChange={(newValue) =>
+                                                            setExtraDueDate(
+                                                                newValue
+                                                            )
+                                                        }
+                                                    />
+                                                </LocalizationProvider>
+                                            )}
+                                        </Box>
+                                    </Box>
+                                    {/* Description section */}
+                                    <Card aria-label={'description'}>
+                                        <Box
+                                            padding={2}
+                                            maxHeight={'20svh'}
+                                            minHeight={'20svh'}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('description')}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={'100%'}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={'Description'}
+                                                    variant={'standard'}
+                                                    multiline
+                                                    value={description}
+                                                    onChange={(event) =>
+                                                        setDescription(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                    fullWidth
+                                                    error={
+                                                        assignmentErrors.description
+                                                    }
+                                                    // Show an error message if the description is not filled in.
+                                                    helperText={
+                                                        assignmentErrors.description
+                                                            ? t(
+                                                                  'descriptionName'
+                                                              ) +
+                                                              ' ' +
+                                                              t('is_required')
+                                                            : ''
+                                                    }
+                                                    sx={{
+                                                        overflowY: 'auto',
+                                                        maxHeight: '25svh',
+                                                    }}
+                                                />
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    {/* Restrictions section */}
+                                    <Box
+                                        aria-label={'restrictions'}
+                                        marginTop={3}
+                                        display={'flex'}
+                                        flexDirection={'row'}
                                     >
-                                        <DeleteForeverIcon
-                                            fontSize={'medium'}
-                                        />
-                                    </IconButton>
-                                </Tooltip>
-                            </Box>
-                            {/* change group size allowed, no need for extra group switch*/}
-                            {!assignmentId && (
-                                <Box
-                                    aria-label={'groupSize'}
-                                    display={'flex'}
-                                    flexDirection={'row'}
-                                    gap={1}
-                                    height={40}
-                                    alignItems={'center'}
-                                >
-                                    <Typography
-                                        fontWeight={'bold'}
-                                        color={'text.primary'}
+                                        <Card
+                                            sx={{
+                                                padding: 1,
+                                                backgroundColor:
+                                                    'background.default',
+                                                width: '70%',
+                                                height: '28svh',
+                                            }}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('restrictions')}
+                                            </Typography>
+                                            <Box sx={{ padding: 1 }}>
+                                                {/*This list will render the restrictions that are added to the assignment.*/}
+                                                <List
+                                                    sx={{
+                                                        maxHeight: '18vh',
+                                                        overflowY: 'auto',
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <CircularProgress
+                                                            color={'primary'}
+                                                        />
+                                                    ) : (
+                                                        <>
+                                                            {restrictions.map(
+                                                                (
+                                                                    restriction,
+                                                                    index
+                                                                ) => {
+                                                                    return (
+                                                                        <ListItem
+                                                                            key={
+                                                                                index
+                                                                            }
+                                                                        >
+                                                                            <RestrictionCard
+                                                                                restriction={
+                                                                                    restriction
+                                                                                }
+                                                                                restrictions={
+                                                                                    restrictions
+                                                                                }
+                                                                                setRestrictions={
+                                                                                    setRestrictions
+                                                                                }
+                                                                            />
+                                                                        </ListItem>
+                                                                    )
+                                                                }
+                                                            )}
+                                                        </>
+                                                    )}
+                                                </List>
+                                            </Box>
+                                            <Box
+                                                width={'100%'}
+                                                display={'flex'}
+                                                justifyContent={'flex-end'}
+                                            >
+                                                <Tooltip
+                                                    title={t('add_restriction')}
+                                                >
+                                                    <AddRestrictionButton
+                                                        // When this button is clicked, a pop up will show.
+                                                        // This popup will allow you to choose to make a restriction yourself,
+                                                        // create one starting from a template,
+                                                        // or choose a file from the system.
+                                                        restrictions={
+                                                            restrictions
+                                                        }
+                                                        setRestrictions={(
+                                                            newRestrictions
+                                                        ) =>
+                                                            setRestrictions(
+                                                                newRestrictions
+                                                            )
+                                                        }
+                                                    ></AddRestrictionButton>
+                                                </Tooltip>
+                                            </Box>
+                                        </Card>
+                                    </Box>
+                                    {/* Main actions section */}
+                                    <Box
+                                        aria-label={'main actions'}
+                                        marginTop={3}
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        width={'100%'}
+                                        justifyContent={'space-between'}
                                     >
-                                        {t('n_of_members')}
-                                    </Typography>
-                                    {loading ? (
-                                        <Skeleton
-                                            variant={'text'}
-                                            width={60}
-                                            height={60}
-                                        />
-                                    ) : (
-                                        <TextField
-                                            sx={{ width: 80 }}
-                                            label={'Group Size'}
-                                            type={'number'}
-                                            required
-                                            value={groupSize}
-                                            onChange={(event) =>
-                                                setGroupSize(
-                                                    parseInt(event.target.value)
-                                                )
-                                            }
-                                        />
-                                    )}
-                                </Box>
-                            )}
-                            {/* This section allows the teacher to set the maximum score for the assignment.*/}
-                            <Box
-                                aria-label={'maxScore'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                gap={1}
-                                height={40}
-                                alignItems={'center'}
-                            >
-                                <Typography
-                                    fontWeight={'bold'}
-                                    color={'text.primary'}
-                                >
-                                    Max Score
-                                </Typography>
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'text'}
-                                        width={60}
-                                        height={60}
-                                    />
-                                ) : (
-                                    <TextField
-                                        sx={{ width: 80 }}
-                                        required
-                                        label={'Max Score'}
-                                        type={'number'}
-                                        value={maxScore}
-                                        onChange={(event) => {
-                                            if (event.target.value !== '') {
-                                                const newScore = Math.max(
-                                                    parseInt(
-                                                        event.target.value
-                                                    ),
-                                                    0
-                                                )
-                                                SetMaxScore
-                                                    ? SetMaxScore(newScore)
-                                                    : undefined
-                                            } else {
-                                                SetMaxScore
-                                                    ? SetMaxScore(
-                                                          parseInt(
-                                                              event.target.value
-                                                          )
-                                                      )
-                                                    : undefined
-                                            }
-                                        }}
-                                    />
-                                )}
-                            </Box>
-                        </Box>
-                        {/* Submit and Cancel buttons */}
-                        <Box
-                            aria-label={'submit_and_cancel'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={1}
-                            alignItems={'center'}
-                        >
-                            <Tooltip title={t('cancel')}>
-                                <IconButton
-                                    onClick={() => setCancelConfirmation(true)}
-                                    sx={{
-                                        backgroundColor: 'secondary.main',
-                                        borderRadius: 2,
-                                    }}
-                                >
-                                    <ClearIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                            <Tooltip title={t('submit')}>
-                                <IconButton
-                                    type="submit"
-                                    aria-label={'submit'}
-                                    sx={{
-                                        backgroundColor: 'primary.main',
-                                        borderRadius: 2,
-                                        color: 'background.default',
-                                        '&:hover': {
-                                            backgroundColor: 'secondary.main',
-                                            color: 'text.primary',
-                                        },
-                                    }}
-                                >
-                                    <SaveIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                        </Box>
-                    </Box>
-                </Stack>
+                                        <Box
+                                            aria-label={'visibility_and_groups'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={10}
+                                            alignItems={'center'}
+                                            padding={2}
+                                        >
+                                            <Box
+                                                aria-label={'main actions'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                alignItems={'center'}
+                                            >
+                                                {visible ? (
+                                                    <IconButton
+                                                        // Allows the teacher to select whether
+                                                        // the assignment is visible to students or not.
+                                                        color={'info'}
+                                                        onClick={() =>
+                                                            setVisible(!visible)
+                                                        }
+                                                    >
+                                                        <VisibilityIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                ) : (
+                                                    <IconButton
+                                                        color={'info'}
+                                                        onClick={() =>
+                                                            setVisible(!visible)
+                                                        }
+                                                    >
+                                                        <VisibilityOffIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                )}
+                                                <Tooltip title={t('remove')}>
+                                                    <IconButton
+                                                        color={'warning'}
+                                                        onClick={
+                                                            openDeleteConfirmation
+                                                        }
+                                                    >
+                                                        <DeleteForeverIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Box>
+                                            {/* change group size allowed, no need for extra group switch*/}
+                                            {!assignmentId && (
+                                                <Box
+                                                    aria-label={'groupSize'}
+                                                    display={'flex'}
+                                                    flexDirection={'row'}
+                                                    gap={1}
+                                                    height={40}
+                                                    alignItems={'center'}
+                                                >
+                                                    <Typography
+                                                        fontWeight={'bold'}
+                                                        color={'text.primary'}
+                                                    >
+                                                        {t('n_of_members')}
+                                                    </Typography>
+                                                    {loading ? (
+                                                        <Skeleton
+                                                            variant={'text'}
+                                                            width={60}
+                                                            height={60}
+                                                        />
+                                                    ) : (
+                                                        <TextField
+                                                            sx={{ width: 80 }}
+                                                            label={'Group Size'}
+                                                            type={'number'}
+                                                            required
+                                                            value={groupSize}
+                                                            onChange={(event) =>
+                                                                setGroupSize(
+                                                                    parseInt(
+                                                                        event
+                                                                            .target
+                                                                            .value
+                                                                    )
+                                                                )
+                                                            }
+                                                        />
+                                                    )}
+                                                </Box>
+                                            )}
+                                            {/* This section allows the teacher to set the maximum score for the assignment.*/}
+                                            <Box
+                                                aria-label={'maxScore'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                gap={1}
+                                                height={40}
+                                                alignItems={'center'}
+                                            >
+                                                <Typography
+                                                    fontWeight={'bold'}
+                                                    color={'text.primary'}
+                                                >
+                                                    Max Score
+                                                </Typography>
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'text'}
+                                                        width={60}
+                                                        height={60}
+                                                    />
+                                                ) : (
+                                                    <TextField
+                                                        sx={{ width: 80 }}
+                                                        required
+                                                        label={'Max Score'}
+                                                        type={'number'}
+                                                        value={maxScore}
+                                                        onChange={(event) => {
+                                                            if (
+                                                                event.target
+                                                                    .value !==
+                                                                ''
+                                                            ) {
+                                                                const newScore =
+                                                                    Math.max(
+                                                                        parseInt(
+                                                                            event
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                        0
+                                                                    )
+                                                                SetMaxScore
+                                                                    ? SetMaxScore(
+                                                                          newScore
+                                                                      )
+                                                                    : undefined
+                                                            } else {
+                                                                SetMaxScore
+                                                                    ? SetMaxScore(
+                                                                          parseInt(
+                                                                              event
+                                                                                  .target
+                                                                                  .value
+                                                                          )
+                                                                      )
+                                                                    : undefined
+                                                            }
+                                                        }}
+                                                    />
+                                                )}
+                                            </Box>
+                                        </Box>
+                                        {/* Submit and Cancel buttons */}
+                                        <Box
+                                            aria-label={'submit_and_cancel'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={1}
+                                            alignItems={'center'}
+                                        >
+                                            <Tooltip title={t('cancel')}>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        setCancelConfirmation(
+                                                            true
+                                                        )
+                                                    }
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'secondary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                >
+                                                    <ClearIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title={t('submit')}>
+                                                <IconButton
+                                                    type="submit"
+                                                    aria-label={'submit'}
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'primary.main',
+                                                        borderRadius: 2,
+                                                        color: 'background.default',
+                                                        '&:hover': {
+                                                            backgroundColor:
+                                                                'secondary.main',
+                                                            color: 'text.primary',
+                                                        },
+                                                    }}
+                                                >
+                                                    <SaveIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </Box>
+                                    </Box>
+                                </Stack>
 
-                {/* Popup for adding restrictions */}
+                                {/* Popup for adding restrictions */}
 
-                {/* Confirmation popup for deleting project */}
+                                {/* Confirmation popup for deleting project */}
 
-                <WarningPopup
-                    title={t('remove') + ' Project?'}
-                    content={t('cant_be_undone')}
-                    buttonName={t('remove')}
-                    open={deleteConfirmation}
-                    handleClose={closeDeletion}
-                    doAction={handleRemove}
-                />
-                {/* Confirmation popup for saving project */}
-                <WarningPopup
-                    title={t('save_project_warning')}
-                    content={t('visible_for_everyone')}
-                    buttonName={t('confirm')}
-                    open={saveConfirmation}
-                    handleClose={closeSaveConfirmation}
-                    doAction={uploadAssignment}
-                />
-                {/* Confirmation popup for canceling changes*/}
-                <WarningPopup
-                    title={t('undo_changes_warning')}
-                    content={t('cant_be_undone')}
-                    buttonName={t('confirm')}
-                    open={cancelConfirmation}
-                    handleClose={closeCancel}
-                    doAction={handleCancel}
-                />
-            </Stack>
+                                <WarningPopup
+                                    title={t('remove') + ' Project?'}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('remove')}
+                                    open={deleteConfirmation}
+                                    handleClose={closeDeletion}
+                                    doAction={handleRemove}
+                                />
+                                {/* Confirmation popup for saving project */}
+                                <WarningPopup
+                                    title={t('save_project_warning')}
+                                    content={t('visible_for_everyone')}
+                                    buttonName={t('confirm')}
+                                    open={saveConfirmation}
+                                    handleClose={closeSaveConfirmation}
+                                    doAction={uploadAssignment}
+                                />
+                                {/* Confirmation popup for canceling changes*/}
+                                <WarningPopup
+                                    title={t('undo_changes_warning')}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('confirm')}
+                                    open={cancelConfirmation}
+                                    handleClose={closeCancel}
+                                    doAction={handleCancel}
+                                />
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 7868a6fc..58bae7af 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -1,6 +1,7 @@
-import { Divider, Card } from '../../components/CustomComponents.tsx'
+import { Button, Card, Divider } from '../../components/CustomComponents.tsx'
 import {
     Box,
+    CircularProgress,
     IconButton,
     ListItem,
     ListItemButton,
@@ -9,10 +10,8 @@ import {
     Stack,
     TextField,
     Typography,
-    CircularProgress
 } from '@mui/material'
 import { Header } from '../../components/Header'
-import { Button } from '../../components/CustomComponents.tsx'
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import List from '@mui/material/List'
@@ -572,157 +571,176 @@ export function AddChangeSubjectPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            <Stack direction={'column'}>
-                <Header variant={loading ? 'default' : 'not_main'} title={loading ? '' : title} />
-                <Stack
-                    direction={'column'}
-                    spacing={5}
-                    marginTop={11}
-                    sx={{
-                        width: '100%',
-                        height: '70%',
-                        backgroundColor: 'background.default',
-                    }}
-                >
-                    <Box
-                        sx={{
-                            backgroundColor: 'background.default',
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }}
-                    >
-                        <Box
-                            // This box contains the title of the subject.
-                            // This title can be changed if necessary.
-                            aria-label={'title'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('subject_name') + ':'}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
+                        <>
+                            <Stack direction={'column'}>
+                                <Header
+                                    variant={loading ? 'default' : 'not_main'}
+                                    title={loading ? '' : title}
                                 />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={t('title')}
-                                    onChange={(event) =>
-                                        setTitle(event.target.value)
-                                    }
-                                    sx={{ height: 60 }}
-                                />
-                            )}
-                        </Box>
-                        <Box padding={'20px'}>
-                            <Button
-                                /* This is the large save button on the top of the page */
-                                onClick={handleSave}
-                            >
-                                {t('save')}
-                            </Button>
-                        </Box>
-                    </Box>
-                    <Card>
-                        <Box bgcolor={'primary.light'} padding={'20px'}>
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                            >
-                                {t('students')}
-                            </Typography>
-                        </Box>
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            alignItems={'center'}
-                            gap={1}
-                            style={{ maxHeight: 300, overflow: 'auto' }}
-                        >
-                            {UserList(
-                                loading,
-                                students,
-                                setSelectedStudent,
-                                setOpenStudent
-                            )}
-                        </Box>
-                    </Card>
-                    <Box marginTop={-30}>
-                        {UploadPart(
-                            studentFile,
-                            handleStudentFileChange,
-                            setEmailStudent,
-                            handleAddStudent,
-                            t('upload_students')
-                        )}
-                    </Box>
-
-                    {DialogWindow(
-                        handleCloseStudent,
-                        openStudent,
-                        handleRemoveStudent,
-                        t('delete_student')
-                    )}
-
-                    <Card>
-                        <Box bgcolor={'primary.light'} padding={'20px'}>
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                            >
-                                {t('teachers')}
-                            </Typography>
-                        </Box>
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            alignItems={'center'}
-                            style={{ maxHeight: 300, overflow: 'auto' }}
-                        >
-                            {UserList(
-                                loading,
-                                teachers,
-                                setSelectedTeacher,
-                                setOpenTeacher
-                            )}
-                        </Box>
-                    </Card>
-                    <Box marginTop={1}>
-                        {UploadPart(
-                            teacherFile,
-                            handleTeacherFileChange,
-                            setEmailTeacher,
-                            handleAddTeacher,
-                            t('upload_teachers')
-                        )}
-                    </Box>
-
-                    {DialogWindow(
-                        handleCloseTeacher,
-                        openTeacher,
-                        handleRemoveTeacher,
-                        t('delete_teacher')
+                                <Stack
+                                    direction={'column'}
+                                    spacing={5}
+                                    marginTop={11}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70%',
+                                        backgroundColor: 'background.default',
+                                    }}
+                                >
+                                    <Box
+                                        sx={{
+                                            backgroundColor:
+                                                'background.default',
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        <Box
+                                            // This box contains the title of the subject.
+                                            // This title can be changed if necessary.
+                                            aria-label={'title'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('subject_name') + ':'}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={t('title')}
+                                                    onChange={(event) =>
+                                                        setTitle(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                    sx={{ height: 60 }}
+                                                />
+                                            )}
+                                        </Box>
+                                        <Box padding={'20px'}>
+                                            <Button
+                                                /* This is the large save button on the top of the page */
+                                                onClick={handleSave}
+                                            >
+                                                {t('save')}
+                                            </Button>
+                                        </Box>
+                                    </Box>
+                                    <Card>
+                                        <Box
+                                            bgcolor={'primary.light'}
+                                            padding={'20px'}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('students')}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            alignItems={'center'}
+                                            gap={1}
+                                            style={{
+                                                maxHeight: 300,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            {UserList(
+                                                loading,
+                                                students,
+                                                setSelectedStudent,
+                                                setOpenStudent
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    <Box marginTop={-30}>
+                                        {UploadPart(
+                                            studentFile,
+                                            handleStudentFileChange,
+                                            setEmailStudent,
+                                            handleAddStudent,
+                                            t('upload_students')
+                                        )}
+                                    </Box>
+
+                                    {DialogWindow(
+                                        handleCloseStudent,
+                                        openStudent,
+                                        handleRemoveStudent,
+                                        t('delete_student')
+                                    )}
+
+                                    <Card>
+                                        <Box
+                                            bgcolor={'primary.light'}
+                                            padding={'20px'}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('teachers')}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            alignItems={'center'}
+                                            style={{
+                                                maxHeight: 300,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            {UserList(
+                                                loading,
+                                                teachers,
+                                                setSelectedTeacher,
+                                                setOpenTeacher
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    <Box marginTop={1}>
+                                        {UploadPart(
+                                            teacherFile,
+                                            handleTeacherFileChange,
+                                            setEmailTeacher,
+                                            handleAddTeacher,
+                                            t('upload_teachers')
+                                        )}
+                                    </Box>
+
+                                    {DialogWindow(
+                                        handleCloseTeacher,
+                                        openTeacher,
+                                        handleRemoveTeacher,
+                                        t('delete_teacher')
+                                    )}
+                                </Stack>
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
                     )}
-                </Stack>
-            </Stack>
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}

From 8b70f49c4fd9a0b7a2bab1086ab4202e979f775f Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 19 May 2024 14:31:34 +0200
Subject: [PATCH 078/145] functionality moet slagen

---
 .../src/components/RestrictionCard.tsx        | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontend/frontend/src/components/RestrictionCard.tsx b/frontend/frontend/src/components/RestrictionCard.tsx
index 1512e395..cd87abb1 100644
--- a/frontend/frontend/src/components/RestrictionCard.tsx
+++ b/frontend/frontend/src/components/RestrictionCard.tsx
@@ -16,13 +16,18 @@ export function RestrictionCard({
     setRestrictions,
 }: RestrictionCardProps) {
 
-    const [mustPass, setMustPass] = React.useState(false)
+    const [mustPass, setMustPass] = React.useState(restriction.moet_slagen)
 
     //handle the removal of the restriction from the list
     const handleRemove = () => {
         setRestrictions(restrictions.filter((r) => r !== restriction))
     }
 
+    const handleMustPassChange = () => {
+        setMustPass(!mustPass);
+        restriction.moet_slagen = !restriction.moet_slagen;
+    }
+
     return (
         <>
             <Box
@@ -34,22 +39,12 @@ export function RestrictionCard({
                 <Typography id='script' variant={'body2'}>
                     {restriction.script.replace(/^.*[\\/]/, '')}
                 </Typography>
-                {/*<Box>
-                    <Typography variant={'body2'}>
-                        {t('must_pass') + ':'}
-                    </Typography>
-                    <Switch
-                        id="mustPassSwitch"
-                        value={mustPass}
-                        onChange={() => setMustPass(!mustPass)}
-                    />
-                </Box>*/}
                 <Switch
                     id="mustPassSwitch"
                     value={mustPass}
-                    onChange={() => setMustPass(!mustPass)}
+                    onChange={() => handleMustPassChange()}
                 />
-                        
+
                 <IconButton id='closeButton' onClick={handleRemove}>
                     <CloseIcon />
                 </IconButton>

From 33f043c69de4fc1d5ccd6829d8c2ff9d5772b266 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 19 May 2024 14:33:24 +0200
Subject: [PATCH 079/145] fix frontend bug

---
 frontend/frontend/src/components/RestrictionCard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/frontend/src/components/RestrictionCard.tsx b/frontend/frontend/src/components/RestrictionCard.tsx
index cd87abb1..c4d957d3 100644
--- a/frontend/frontend/src/components/RestrictionCard.tsx
+++ b/frontend/frontend/src/components/RestrictionCard.tsx
@@ -42,6 +42,7 @@ export function RestrictionCard({
                 <Switch
                     id="mustPassSwitch"
                     value={mustPass}
+                    checked={mustPass}
                     onChange={() => handleMustPassChange()}
                 />
 

From 54a2e64f04f6e52cf3761bdf463c6fe13f927b0f Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Sun, 19 May 2024 14:51:48 +0200
Subject: [PATCH 080/145] groep ids kloppen nu op assignment page voor
 leerkrachten

---
 .../SubmissionListItemTeacherPage.tsx         |  6 +++---
 .../pages/assignmentPage/AssignmentPage.tsx   | 21 +++++++------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 27a4f734..3b5650c1 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -15,7 +15,7 @@ import { t } from 'i18next'
 import dayjs from 'dayjs'
 
 interface SubmissionListItemTeacherPageProps {
-    relative_group_id: string
+    group_name: string
     group_id: string
     assignment_id: string
     course_id: string
@@ -32,7 +32,7 @@ export interface Score {
  * @param {SubmissionListItemTeacherPageProps} props - Props for SubmissionListItemTeacherPage component
  */
 export function SubmissionListItemTeacherPage({
-    relative_group_id,
+    group_name,
     group_id,
     assignment_id,
     course_id,
@@ -148,7 +148,7 @@ export function SubmissionListItemTeacherPage({
                                 color: 'primary.light',
                             },
                         }}
-                        primary={relative_group_id}
+                        primary={group_name}
                     />
                     {/* Display submission timestamp */}
                     <ListItemText
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index e833ba36..5102d5a8 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -527,7 +527,7 @@ export function AssignmentPage() {
                                             ))
                                         ) : (
                                             <List disablePadding={true}>
-                                                {groups.map((group) => (
+                                                {groups.map((group, index) => (
                                                     <Box key={group.groep_id}>
                                                         <Divider
                                                             color={'text.main'}
@@ -544,18 +544,13 @@ export function AssignmentPage() {
                                                             pr={3}
                                                         >
                                                             <SubmissionListItemTeacherPage
-                                                                relative_group_id={(
-                                                                    group.groep_id -
-                                                                    Math.min(
-                                                                        ...groups.map(
-                                                                            (
-                                                                                group
-                                                                            ) =>
-                                                                                group.groep_id
-                                                                        )
-                                                                    ) +
-                                                                    1
-                                                                ).toString()}
+                                                                group_name={
+                                                                    assignment
+                                                                        ? assignment.max_groep_grootte > 1
+                                                                            ? t('group') + ' ' + (index + 1).toString()
+                                                                            : t('group') + ' ' + (index + 1).toString() //TODO Dit vervangen door de naam van de student
+                                                                        : ''
+                                                                }
                                                                 group_id={group.groep_id.toString()}
                                                                 assignment_id={
                                                                     assignmentId

From 2dcb9222ead0ef5f2f222a7974bea1d18cfa1041 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 15:46:40 +0200
Subject: [PATCH 081/145] type errors weggekregen

---
 .../src/pages/groupsPage/GroupsPage.tsx       | 188 ++++++++++--------
 1 file changed, 109 insertions(+), 79 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index deee1d56..38707a4d 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -136,7 +136,7 @@ export function GroupsPage() {
     const handleGroupSizeChange = (newValue: number) => {
         setNewGroupSize(newValue)
         setAvailableStudents(() => Array.from(studentNames.keys()))
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
         setCurrentGroup('0')
         setNewGroups(() => {
             const newGroups = []
@@ -191,8 +191,8 @@ export function GroupsPage() {
                                 newStudentNames.set(
                                     student,
                                     response.data.first_name +
-                                    ' ' +
-                                    response.data.last_name
+                                        ' ' +
+                                        response.data.last_name
                                 )
                             })
                             .catch((error) => {
@@ -206,12 +206,12 @@ export function GroupsPage() {
                                 newStudentNames.set(
                                     student,
                                     response.data.first_name +
-                                    ' ' +
-                                    response.data.last_name
+                                        ' ' +
+                                        response.data.last_name
                                 )
                                 console.log(
                                     'available names:' +
-                                    Array.from(newStudentNames.entries())
+                                        Array.from(newStudentNames.entries())
                                 )
                             })
                     }
@@ -286,14 +286,14 @@ export function GroupsPage() {
                     )
             )
         )
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
     }, [newGroups, studentNames])
 
     // Create new groups when the group size changes
     useEffect(() => {
         if (newGroups.length === 0) {
             setAvailableStudents(() => Array.from(studentNames.keys()))
-            setFilteredStudents(availableStudents);
+            setFilteredStudents(availableStudents)
             setCurrentGroup('0')
             setNewGroups(() => {
                 const newGroups = []
@@ -351,7 +351,7 @@ export function GroupsPage() {
             (student) => student !== studentId
         )
         setAvailableStudents(updatedAvailableStudents)
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
         // Then, create a new copy of the newGroups array with the updated group
         const updatedNewGroups = newGroups.map((group, index) => {
             if (index === groupId) {
@@ -392,26 +392,28 @@ export function GroupsPage() {
         setNewGroups(updatedNewGroups)
     }
 
-    const [filteredStudents, setFilteredStudents] = useState(availableStudents);
+    const [filteredStudents, setFilteredStudents] = useState(availableStudents)
 
     // for filtering students
-    const handleAutocompleteChange = (_, value) => {
-        if(value){
+    const handleAutocompleteChange = (_: unknown, value: number | null) => {
+        if (value) {
             setFilteredStudents([value])
         }
-    };
+    }
 
     const resetAutocompleteChange = () => {
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
     }
 
-    const filterOptions = (_,{ inputValue }) => {
-        const filtered = availableStudents.filter((option) => {
-            const label = studentNames.get(option);
-            return label?.toLowerCase().startsWith(inputValue.toLowerCase());
-        });
-        return filtered;
-    };
+    const filterOptions = (
+        _: unknown,
+        { inputValue }: { inputValue: string }
+    ) => {
+        return availableStudents.filter((option) => {
+            const label = studentNames.get(option)
+            return label?.toLowerCase().startsWith(inputValue.toLowerCase())
+        })
+    }
     return (
         <>
             <Box
@@ -605,33 +607,34 @@ export function GroupsPage() {
                                                             width={80}
                                                             height={80}
                                                         />
-                                                    ) : (<Select
-                                                        aria-label={
-                                                            'groupSelect'
-                                                        }
-                                                        value={currentGroup}
-                                                        sx={{ width: 120 }}
-                                                        onChange={
-                                                            handleCurrentGroupChange
-                                                        }
-                                                        label={t('group')}
-                                                    >
-                                                        {newGroups.map(
-                                                            (_, index) => (
-                                                                <MenuItem
-                                                                    key={index.toString()}
-                                                                    value={index.toString()}
-                                                                >
-                                                                    {t(
+                                                    ) : (
+                                                        <Select
+                                                            aria-label={
+                                                                'groupSelect'
+                                                            }
+                                                            value={currentGroup}
+                                                            sx={{ width: 120 }}
+                                                            onChange={
+                                                                handleCurrentGroupChange
+                                                            }
+                                                            label={t('group')}
+                                                        >
+                                                            {newGroups.map(
+                                                                (_, index) => (
+                                                                    <MenuItem
+                                                                        key={index.toString()}
+                                                                        value={index.toString()}
+                                                                    >
+                                                                        {t(
                                                                             'group'
                                                                         ) +
-                                                                        (index +
-                                                                            1)}
-                                                                </MenuItem>
-                                                            )
-                                                        )}
-                                                    </Select>)
-                                                    }
+                                                                            (index +
+                                                                                1)}
+                                                                    </MenuItem>
+                                                                )
+                                                            )}
+                                                        </Select>
+                                                    )}
                                                 </Grid>
                                             </Grid>
                                         </Stack>
@@ -662,15 +665,15 @@ export function GroupsPage() {
                                                 ) : (
                                                     <>
                                                         {newGroups[
-                                                                parseInt(
-                                                                    currentGroup
-                                                                )
-                                                                ] &&
+                                                            parseInt(
+                                                                currentGroup
+                                                            )
+                                                        ] &&
                                                             newGroups[
                                                                 parseInt(
                                                                     currentGroup
                                                                 )
-                                                                ].studenten.map(
+                                                            ].studenten.map(
                                                                 (student) => (
                                                                     <TableRow
                                                                         key={
@@ -721,21 +724,22 @@ export function GroupsPage() {
                                         padding={'17px'}
                                     >
                                         <Stack direction={'row'}>
-                                            <Grid
-                                                container
-                                                alignItems="center"
-                                            >
+                                            <Grid container alignItems="center">
                                                 <Grid>
                                                     <Typography
                                                         variant="h5"
-                                                        sx={{ fontWeight: 'bold' }}
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                        }}
                                                     >
                                                         {t('studenten')}
                                                     </Typography>
                                                 </Grid>
                                                 <Box paddingLeft={1}></Box>
                                                 <Grid>
-                                                    <Box sx={{ width: '200px' }}>
+                                                    <Box
+                                                        sx={{ width: '200px' }}
+                                                    >
                                                         {loading ? (
                                                             <Skeleton
                                                                 variant={'text'}
@@ -744,12 +748,36 @@ export function GroupsPage() {
                                                             />
                                                         ) : (
                                                             <Autocomplete
-                                                                options={availableStudents}
-                                                                getOptionLabel={(student) => studentNames.get(student)}
-                                                                onChange={handleAutocompleteChange}
-                                                                filterOptions={filterOptions}
-                                                                renderInput={(student) => <TextField {...student} />}
-                                                            />)}
+                                                                options={
+                                                                    availableStudents
+                                                                }
+                                                                getOptionLabel={(
+                                                                    student
+                                                                ) => {
+                                                                    const name =
+                                                                        studentNames.get(
+                                                                            student
+                                                                        )
+                                                                    return name !=
+                                                                        null
+                                                                        ? name
+                                                                        : '' // This checks for both null and undefined
+                                                                }}
+                                                                onChange={
+                                                                    handleAutocompleteChange
+                                                                }
+                                                                filterOptions={
+                                                                    filterOptions
+                                                                }
+                                                                renderInput={(
+                                                                    student
+                                                                ) => (
+                                                                    <TextField
+                                                                        {...student}
+                                                                    />
+                                                                )}
+                                                            />
+                                                        )}
                                                     </Box>
                                                 </Grid>
                                             </Grid>
@@ -757,9 +785,9 @@ export function GroupsPage() {
                                     </Box>
                                     <TableContainer sx={{ maxHeight: '55vh' }}>
                                         <Table
-                                            // The teacher can see the available students
-                                            // on the left side of the screen.
-                                            // They are displayed in a table with a sticky header.aria-label={'studentTable'}
+                                        // The teacher can see the available students
+                                        // on the left side of the screen.
+                                        // They are displayed in a table with a sticky header.aria-label={'studentTable'}
                                         >
                                             <TableBody>
                                                 {loading ? (
@@ -784,7 +812,9 @@ export function GroupsPage() {
                                                             {chunkArray(
                                                                 filteredStudents,
                                                                 Math.ceil(
-                                                                        Math.sqrt(filteredStudents.length)
+                                                                    Math.sqrt(
+                                                                        filteredStudents.length
+                                                                    )
                                                                 )
                                                             ).map(
                                                                 (students) => (
@@ -817,23 +847,23 @@ export function GroupsPage() {
                                                                                         ''
                                                                                             ? student
                                                                                             : studentNames.get(
-                                                                                                student
-                                                                                            )}
+                                                                                                  student
+                                                                                              )}
                                                                                         <IconButton // people can be added to groups by clicking on the plus icon
                                                                                             disabled={
                                                                                                 newGroups[
                                                                                                     parseInt(
                                                                                                         currentGroup
                                                                                                     )
-                                                                                                    ]
+                                                                                                ]
                                                                                                     ? newGroups[
-                                                                                                        parseInt(
-                                                                                                            currentGroup
-                                                                                                        )
-                                                                                                        ]
-                                                                                                        .studenten
-                                                                                                        .length >=
-                                                                                                    newGroupSize
+                                                                                                          parseInt(
+                                                                                                              currentGroup
+                                                                                                          )
+                                                                                                      ]
+                                                                                                          .studenten
+                                                                                                          .length >=
+                                                                                                      newGroupSize
                                                                                                     : true
                                                                                             }
                                                                                             onClick={() => {
@@ -941,9 +971,9 @@ export function GroupsPage() {
 }
 
 function chunkArray<T>(arr: T[], chunkSize: number): T[][] {
-    let result: T[][] = []
+    const result: T[][] = []
     for (let i = 0; i < arr.length; i += chunkSize) {
-        let chunk: T[] = arr.slice(i, i + chunkSize)
+        const chunk: T[] = arr.slice(i, i + chunkSize)
         result.push(chunk)
     }
     return result

From 55dd981a3a2fa90efc358bbae0a0fd771763ee30 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 15:55:06 +0200
Subject: [PATCH 082/145] fixed unused imports

---
 .../AddRestrictionButton.tsx                  |  4 +-
 .../RestrictionsDialog.tsx                    | 93 +++++++++++--------
 2 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
index 5128d626..173e5851 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button,SecundaryButton } from '../../components/CustomComponents.tsx'
+import { SecundaryButton } from '../../components/CustomComponents.tsx'
 import Dialog, { DialogProps } from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
@@ -37,7 +37,7 @@ export default function AddRestrictionButton({
         <>
             {/* Add Restriction Button */}
             <IconButton
-                id='addRestrictionButton'
+                id="addRestrictionButton"
                 sx={{
                     bgcolor: 'secondary.main',
                     marginRight: 1,
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 3c690aee..c008f5ab 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react'
 import { ChangeEvent, useState } from 'react'
-import {Button, Card, SecundaryButton,
+import {
+    Button,
+    Card,
+    SecundaryButton,
 } from '../../components/CustomComponents.tsx'
 import Dialog from '@mui/material/Dialog'
 import AppBar from '@mui/material/AppBar'
@@ -14,7 +17,6 @@ import {
     FormControl,
     MenuItem,
     Select,
-    Stack,
     TextField,
 } from '@mui/material'
 import { t } from 'i18next'
@@ -255,33 +257,39 @@ export default function RestrictionsDialog({
             />
             {/* Vertical button group */}
             <Typography variant={'h6'} color={'secondary.contrastText'}>
-                {t('make_new_script')+":"}
+                {t('make_new_script') + ':'}
             </Typography>
 
-            <Box paddingTop='5px'
+            <Box
+                paddingTop="5px"
                 display={'flex'}
                 gap={5}
                 alignItems={'center'}
             >
                 {buttons}
             </Box>
-            <Box paddingTop='5px'display={'flex'} flexDirection={'row'} alignItems={'center'}>
+            <Box
+                paddingTop="5px"
+                display={'flex'}
+                flexDirection={'row'}
+                alignItems={'center'}
+            >
                 <Typography variant={'body2'}>
                     {t('must_pass') + ':'}
                 </Typography>
                 <Switch
-                    id='mustPassSwitch'
+                    id="mustPassSwitch"
                     value={mustPass}
                     onChange={() => setMustPass(!mustPass)}
                 />
             </Box>
-            <Box padding='20px'/>
+            <Box padding="20px" />
             <Typography variant={'h6'} color={'secondary.contrastText'}>
-                {t('choose_existing')+":"}
+                {t('choose_existing') + ':'}
             </Typography>
             <Box
-                paddingTop='5px'
-                paddingBottom='5px'
+                paddingTop="5px"
+                paddingBottom="5px"
                 display={'flex'}
                 gap={5}
                 alignItems={'center'}
@@ -300,33 +308,33 @@ export default function RestrictionsDialog({
                     >
                         {templateButtons}
                     </ButtonGroup>
-                {/* This button groups shows the templates the teacher has made */}
-                <ButtonGroup
-                    orientation="vertical"
-                    aria-label="My templates"
-                    variant={'outlined'}
-                    color={'primary'}
-                >
-                    {myTemplates.map((template) => (
-                        <Button
-                            key={template.template_id}
-                            onClick={async () => {
-                                const response = await instance.get(
-                                    `/templates/${template.template_id}/template/?content=true`
-                                )
-                                setTextFieldContent(response.data.content)
-                                if (openTemplateInUI) {
-                                    handleClickOpenTemplateInterface()
-                                } else {
-                                    handleClickOpenTextEditor()
-                                }
-                            }}
-                        >
-                            {template.bestand.replace(/^.*[\\/]/, '')}
-                        </Button>
-                    ))}
-                </ButtonGroup>
-            </Box>
+                    {/* This button groups shows the templates the teacher has made */}
+                    <ButtonGroup
+                        orientation="vertical"
+                        aria-label="My templates"
+                        variant={'outlined'}
+                        color={'primary'}
+                    >
+                        {myTemplates.map((template) => (
+                            <Button
+                                key={template.template_id}
+                                onClick={async () => {
+                                    const response = await instance.get(
+                                        `/templates/${template.template_id}/template/?content=true`
+                                    )
+                                    setTextFieldContent(response.data.content)
+                                    if (openTemplateInUI) {
+                                        handleClickOpenTemplateInterface()
+                                    } else {
+                                        handleClickOpenTextEditor()
+                                    }
+                                }}
+                            >
+                                {template.bestand.replace(/^.*[\\/]/, '')}
+                            </Button>
+                        ))}
+                    </ButtonGroup>
+                </Box>
             </Box>
             <Box display={'flex'} flexDirection={'row'} alignItems={'center'}>
                 {/* This box will contain the templates */}
@@ -337,7 +345,6 @@ export default function RestrictionsDialog({
                     value={openTemplateInUI}
                     onChange={() => setOpenTemplateInUI(!openTemplateInUI)}
                 />
-
             </Box>
             {/* This is the template interface. */}
             <Dialog
@@ -472,11 +479,17 @@ export default function RestrictionsDialog({
                                     <SecundaryButton
                                         autoFocus
                                         color="inherit"
-                                        onClick={() => handleSaveTemplate(restrictionName, restrictionType, textFieldContent, {template_id: 1, user: 1, bestand: 0})} // bestand if maakt niet uit, wordt toch niet gebruikt
+                                        onClick={() =>
+                                            handleSaveTemplate(
+                                                restrictionName,
+                                                restrictionType,
+                                                textFieldContent
+                                            )
+                                        } // bestand if maakt niet uit, wordt toch niet gebruikt
                                     >
                                         save as template
                                     </SecundaryButton>
-                                    <Box paddingRight='10px'/>
+                                    <Box paddingRight="10px" />
                                     <SecundaryButton
                                         autoFocus
                                         color="inherit"

From 5d0c2222dabba54292d0a344b949578c561a86d9 Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Sun, 19 May 2024 16:09:29 +0200
Subject: [PATCH 083/145] project pagina werkt terug als er geen
 opdrachtsbestand is

---
 .../pages/assignmentPage/AssignmentPage.tsx   | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 5102d5a8..92a9fb05 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -100,28 +100,30 @@ export function AssignmentPage() {
                     `/projecten/${assignmentId}/`
                 )
                 const newAssignment: Project = assignmentResponse.data
-                newAssignment.filename =
-                    assignmentResponse.data.opgave_bestand.replace(
-                        /^.*[\\/]/,
-                        ''
-                    )
-                newAssignment.opgave_bestand = await instance
-                    .get(`/projecten/${assignmentId}/opgave_bestand/`, {
-                        responseType: 'blob',
-                    })
-                    .then((res) => {
-                        let filename = 'indiening.zip'
-                        if (newAssignment.filename) {
-                            filename = newAssignment.filename
-                        }
-                        const blob = new Blob([res.data], {
-                            type: res.headers['content-type'],
+                if (assignmentResponse.data.opgave_bestand) {
+                    newAssignment.filename =
+                        assignmentResponse.data.opgave_bestand.replace(
+                            /^.*[\\/]/,
+                            ''
+                        )
+                    newAssignment.opgave_bestand = await instance
+                        .get(`/projecten/${assignmentId}/opgave_bestand/`, {
+                            responseType: 'blob',
                         })
-                        const file: File = new File([blob], filename, {
-                            type: res.headers['content-type'],
+                        .then((res) => {
+                            let filename = 'indiening.zip'
+                            if (newAssignment.filename) {
+                                filename = newAssignment.filename
+                            }
+                            const blob = new Blob([res.data], {
+                                type: res.headers['content-type'],
+                            })
+                            const file: File = new File([blob], filename, {
+                                type: res.headers['content-type'],
+                            })
+                            return file
                         })
-                        return file
-                    })
+                }
                 setAssignment(newAssignment)
                 if (user) {
                     if (user.is_lesgever) {
@@ -854,7 +856,7 @@ export function AssignmentPage() {
                                     <Button
                                         startIcon={<DownloadIcon />}
                                         onClick={downloadAssignment}
-                                        disabled={assignment === undefined}
+                                        disabled={assignment === undefined || assignment.filename === undefined}
                                     >
                                         {loading ? (
                                             <Skeleton
@@ -869,6 +871,8 @@ export function AssignmentPage() {
                                             <>
                                                 {assignment
                                                     ? assignment.filename
+                                                        ? assignment.filename
+                                                        : t('no_assignmentfile')
                                                     : t('no_assignmentfile')}
                                             </>
                                         )}

From af5db55c007194bf76fd0b36d38c2a565474076a Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 16:36:07 +0200
Subject: [PATCH 084/145] made clickable area of listitems for assigment and
 subject page smaller

---
 .../frontend/src/components/SubmissionListItemStudentPage.tsx | 4 +++-
 .../frontend/src/components/SubmissionListItemTeacherPage.tsx | 2 +-
 .../src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
index 68840f6f..f1d8ff2e 100644
--- a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -52,7 +52,9 @@ export function SubmissionListItemStudentPage({
     return (
         <>
             <ListItem key={realId} sx={{ maxHeight: '30px' }} disablePadding>
-                <ListItemButton onClick={handleSubmissionClick}>
+                <ListItemButton
+                    sx={{maxHeight: '30px'}}
+                    onClick={handleSubmissionClick}>
                     <EvenlySpacedRow items={[
                         <ListItemText
                             sx={{
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index cfaa2dc4..692d56e0 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -129,7 +129,7 @@ export function SubmissionListItemTeacherPage({
     return (
         <>
             <ListItem id={group_id} sx={{maxHeight: '30px'}} disablePadding>
-                <ListItemButton
+                <ListItemButton sx={{maxHeight: '30px'}}
                     onClick={handleSubmissionClick}
                 >
                     <EvenlySpacedRow
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 7c3f81ec..59e3112d 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -74,7 +74,9 @@ export function AssignmentListItemSubjectsPage({
         <>
             <ListItem key={projectName}  disablePadding sx={{ maxHeight: '30px'}}
             >
-                <ListItemButton onClick={handleProjectClick}>
+                <ListItemButton
+                    sx={{maxHeight: '30px'}}
+                    onClick={handleProjectClick}>
                     {isStudent ? (
                         <EvenlySpacedRow items={[
                             <ListItemText

From f0eab2ef33a858ad3adf275a89ebfe340ffe2fbd Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 16:38:38 +0200
Subject: [PATCH 085/145] typo in secondaryButton

---
 frontend/frontend/src/components/CustomComponents.tsx       | 4 ++--
 .../frontend/src/pages/assignmentPage/AssignmentPage.tsx    | 6 +++---
 frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx   | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 848b299a..61dbd4cb 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -1,4 +1,4 @@
-import { darken,lighten } from '@mui/system';
+import { darken } from '@mui/system';
 import {
     Button as BaseButton,
     Card as BaseCard,
@@ -29,7 +29,7 @@ export const Button = ({ children, ...props }: any) => {
     )
 }
 
-export const SecundaryButton = ({ children, ...props }: any) => {
+export const SecondaryButton = ({ children, ...props }: any) => {
     return (
         <BaseButton
             variant="contained"
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 9e8000f8..5405f44c 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -2,7 +2,7 @@ import { Header } from '../../components/Header.tsx'
 import FileUploadButton from '../../components/FileUploadButton.tsx'
 import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx'
 import { SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx'
-import {Card, Button, Divider, EvenlySpacedRow, SecundaryButton} from '../../components/CustomComponents.tsx'
+import {Card, Button, Divider, EvenlySpacedRow, SecondaryButton} from '../../components/CustomComponents.tsx'
 import {
     Box,
     CircularProgress, Grid,
@@ -865,13 +865,13 @@ export function AssignmentPage() {
                                 <Grid>
                                 <Box  sx={{ position: 'relative', top: '8px', ml: 2}}>
                                     <Tooltip title={t('upload')}>
-                                        <SecundaryButton
+                                        <SecondaryButton
                                             onClick={uploadIndiening}
                                         >
                                             <Typography>
                                                 {t('submit')}
                                             </Typography>
-                                        </SecundaryButton>
+                                        </SecondaryButton>
                                     </Tooltip>
                                 </Box>
                                 </Grid>
diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
index 7628bb67..6f7d73ee 100644
--- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
@@ -1,7 +1,7 @@
 import { User } from './AddChangeSubjectPage'
 import * as React from 'react'
 import { IconButton, List, ListItem, ListItemText, Typography } from '@mui/material'
-import {Button, SecundaryButton} from '../../components/CustomComponents'
+import {Button, SecondaryButton} from '../../components/CustomComponents'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import CloseIcon from '@mui/icons-material/Close'
@@ -23,13 +23,13 @@ export default function StudentPopUp({ students, text }: StudentPopUpProps) {
     return (
         <>
             {/* Students Button */}
-            <SecundaryButton
+            <SecondaryButton
                 onClick={() => {
                     setOpen(true)
                 }}
             >
                 {t(text)}
-            </SecundaryButton>
+            </SecondaryButton>
             {/* Students Dialog */}
             <Dialog
                 open={open}

From 881b2f10c62eefaccfc0056a9bd49b1cbfb36c5f Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Sun, 19 May 2024 16:40:54 +0200
Subject: [PATCH 086/145] bij projecten zonder groepen worden nu student namen
 getoond

---
 .../pages/assignmentPage/AssignmentPage.tsx   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 92a9fb05..e537b83f 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -62,6 +62,7 @@ export function AssignmentPage() {
     const [assignment, setAssignment] = useState<Project>()
     const [submissions, setSubmissions] = useState<Submission[]>([])
     const [groups, setGroups] = useState<Group[]>([])
+    const [singleStudents, setSingleStudents] = useState<User[]>([])
     const [submissionFile, setSubmissionFile] = useState<File>()
     const [submit, setSubmit] = useState(false)
     const [students, setStudents] = useState<User[]>([])
@@ -131,6 +132,18 @@ export function AssignmentPage() {
                             `/groepen/?project=${assignmentId}`
                         )
                         setGroups(groupsResponse.data)
+                        if(newAssignment.max_groep_grootte == 1) {
+                            const temp_students = []
+                            for (const g of groupsResponse.data) {
+                                try {
+                                    const userResponse = await instance.get(`/gebruikers/${g.studenten[0]}/`)
+                                    temp_students.push(userResponse.data)
+                                } catch (error) {
+                                    console.error('Error fetching student data:', error)
+                                }
+                            }
+                            setSingleStudents(temp_students)
+                        }
                     } else {
                         const groupResponse = await instance.get<[Group]>(
                             `/groepen/?student=${user.user}&project=${assignmentId}`
@@ -495,7 +508,7 @@ export function AssignmentPage() {
                                         pr={3}
                                     >
                                         <Typography sx={{ fontWeight: 'bold' }}>
-                                            {t('group')}
+                                            Student
                                         </Typography>
                                         <Typography sx={{ fontWeight: 'bold' }}>
                                             {t('time')}
@@ -550,7 +563,9 @@ export function AssignmentPage() {
                                                                     assignment
                                                                         ? assignment.max_groep_grootte > 1
                                                                             ? t('group') + ' ' + (index + 1).toString()
-                                                                            : t('group') + ' ' + (index + 1).toString() //TODO Dit vervangen door de naam van de student
+                                                                            : singleStudents[index]
+                                                                                ? singleStudents[index].first_name + ' ' + singleStudents[index].last_name
+                                                                                : ''
                                                                         : ''
                                                                 }
                                                                 group_id={group.groep_id.toString()}

From ac4d381feb0b72321029ac2d7ce5f35c78151292 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 16:48:47 +0200
Subject: [PATCH 087/145] started removing anies

---
 .../src/components/CustomComponents.tsx       |  9 ++++++--
 .../pages/assignmentPage/AssignmentPage.tsx   | 22 +++++--------------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 61dbd4cb..36225589 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -3,9 +3,10 @@ import {
     Button as BaseButton,
     Card as BaseCard,
     Divider as BaseDivider,
-    Box
+    Box, ButtonProps
 } from '@mui/material'
 import theme from '../Theme.ts'
+import {ReactNode} from "react";
 
 export const Button = ({ children, ...props }: any) => {
     return (
@@ -29,7 +30,11 @@ export const Button = ({ children, ...props }: any) => {
     )
 }
 
-export const SecondaryButton = ({ children, ...props }: any) => {
+interface SecondaryButtonProps extends ButtonProps {
+    children: ReactNode;
+}
+
+export const SecondaryButton = ({ children, ...props }: SecondaryButtonProps) => {
     return (
         <BaseButton
             variant="contained"
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 5405f44c..7487488f 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -490,20 +490,16 @@ export function AssignmentPage() {
                                 >
                                     <Stack direction={'row'}>
                                         {submissions.length > 0 && (
-                                            <Button
-                                                sx={{
-                                                    bgcolor: 'secondary.main',
-                                                    textTransform: 'none',
-                                                }}
+                                            <SecondaryButton
                                                 onClick={downloadAllSubmissions}
                                             >
                                                 <Typography color="secondary.contrastText">
                                                     {t('export')}{' '}
                                                     {t('submissions')}
                                                 </Typography>
-                                            </Button>
+                                            </SecondaryButton>
                                         )}
-                                        <Box style={{ flexGrow: 1 }} />
+                                        <Box paddingLeft={'20px'} />
                                         {loading ? (
                                             <Skeleton
                                                 variant={'rectangular'}
@@ -517,17 +513,11 @@ export function AssignmentPage() {
                                                 }}
                                             />
                                         ) : (
-                                            <Button
-                                                sx={{
-                                                    bgcolor: 'secondary.main',
-                                                    textTransform: 'none',
-                                                }}
+                                            <SecondaryButton
                                                 onClick={adjustScores}
                                             >
-                                                <Typography color="secondary.contrastText">
-                                                    {t('adjust_scores')}
-                                                </Typography>
-                                            </Button>
+                                                {t('adjust_scores')}
+                                            </SecondaryButton>
                                         )}
                                     </Stack>
                                 </Box>

From 773c33493a39c88a5541082151765825a766e071 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 16:54:29 +0200
Subject: [PATCH 088/145] any gone now

---
 .../src/components/CustomComponents.tsx       | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 36225589..8a8724c3 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -3,12 +3,16 @@ import {
     Button as BaseButton,
     Card as BaseCard,
     Divider as BaseDivider,
-    Box, ButtonProps
+    Box, ButtonProps, CardProps, DividerProps
 } from '@mui/material'
 import theme from '../Theme.ts'
 import {ReactNode} from "react";
 
-export const Button = ({ children, ...props }: any) => {
+interface PrimaryButtonProps extends ButtonProps {
+    children: ReactNode;
+}
+
+export const Button = ({ children, ...props }: PrimaryButtonProps) => {
     return (
         <BaseButton
             variant="contained"
@@ -56,7 +60,11 @@ export const SecondaryButton = ({ children, ...props }: SecondaryButtonProps) =>
     )
 }
 
-export const Card = ({ children, ...props }: any) => {
+interface CustomCardProps extends CardProps {
+    children: ReactNode;
+}
+
+export const Card = ({ children, ...props }: CustomCardProps) => {
     return (
         <BaseCard
             elevation={0}
@@ -72,7 +80,11 @@ export const Card = ({ children, ...props }: any) => {
     )
 }
 
-export const Divider = ({ children, ...props }: any) => {
+interface CustomDividerProps extends DividerProps {
+    children?: ReactNode;
+}
+
+export const Divider = ({ children, ...props }: CustomCardProps) => {
     return (
         <BaseDivider
             sx={{
@@ -86,7 +98,11 @@ export const Divider = ({ children, ...props }: any) => {
     )
 }
 
-export const EvenlySpacedRow = ({items}) => {
+interface EvenlySpacedRowProps {
+    items: ReactNode[];
+}
+
+export const EvenlySpacedRow = ({items} : EvenlySpacedRowProps) => {
     return (
         <Box
             width={'100%'}

From 3f6ea634864ddea3245f5263bc65d08419bc5bdc Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 16:56:03 +0200
Subject: [PATCH 089/145] inladen studenten bij groepen is niet meer
 onacceptabel traag

---
 .../src/pages/groupsPage/GroupsPage.tsx       | 53 +++++++------------
 1 file changed, 19 insertions(+), 34 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 38707a4d..003057c6 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -30,6 +30,8 @@ import { Add } from '@mui/icons-material'
 import ClearIcon from '@mui/icons-material/Clear'
 import SaveIcon from '@mui/icons-material/Save'
 import WarningPopup from '../../components/WarningPopup.tsx'
+import axios, { AxiosResponse } from 'axios'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 // group interface
 export interface Group {
@@ -182,39 +184,21 @@ export function GroupsPage() {
             await instance
                 .get('/vakken/' + courseId)
                 .then(async (response) => {
+                    // This function fetches the names of the students in parallel
                     const newStudentNames = new Map<number, string>()
-
-                    for (const student of response.data.studenten) {
-                        await instance
-                            .get('/gebruikers/' + student)
-                            .then((response) => {
-                                newStudentNames.set(
-                                    student,
-                                    response.data.first_name +
-                                        ' ' +
-                                        response.data.last_name
-                                )
-                            })
-                            .catch((error) => {
-                                console.log(error)
-                            })
-                    }
-                    for (const student of response.data.studenten) {
-                        await instance
-                            .get('/gebruikers/' + student)
-                            .then((response) => {
-                                newStudentNames.set(
-                                    student,
-                                    response.data.first_name +
-                                        ' ' +
-                                        response.data.last_name
-                                )
-                                console.log(
-                                    'available names:' +
-                                        Array.from(newStudentNames.entries())
-                                )
-                            })
-                    }
+                    const studentPromises: Promise<AxiosResponse<User>>[] =
+                        response.data.studenten.map((id: number) =>
+                            instance.get('/gebruikers/' + id)
+                        )
+                    const studentResponses = await axios.all(studentPromises)
+
+                    studentResponses.forEach((response) => {
+                        const student: User = response.data
+                        newStudentNames.set(
+                            student.user,
+                            student.first_name + ' ' + student.last_name
+                        )
+                    })
 
                     setStudentNames(() => newStudentNames)
                 })
@@ -275,7 +259,7 @@ export function GroupsPage() {
             .catch((error) => {
                 console.log(error)
             })
-    }, [assignmentId, courseId, newGroupSize, studentNames.size])
+    }, [assignmentId, courseId])
 
     useEffect(() => {
         setAvailableStudents(() =>
@@ -287,7 +271,7 @@ export function GroupsPage() {
             )
         )
         setFilteredStudents(availableStudents)
-    }, [newGroups, studentNames])
+    }, [availableStudents, newGroups, studentNames])
 
     // Create new groups when the group size changes
     useEffect(() => {
@@ -312,6 +296,7 @@ export function GroupsPage() {
         }
     }, [
         assignmentId,
+        availableStudents,
         availableStudents.length,
         newGroupSize,
         newGroups.length,

From 98ab6377b0a268bd6b9fc0da6af8e288c137ec67 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 16:58:16 +0200
Subject: [PATCH 090/145] ran formatting and removed unused imports

---
 .../src/components/CustomComponents.tsx       |   65 +-
 .../src/components/DeadlineCalendar.tsx       |   62 +-
 .../SubmissionListItemStudentPage.tsx         |   61 +-
 .../SubmissionListItemTeacherPage.tsx         |  149 ++-
 .../AddChangeAssignmentPage.tsx               | 1139 +++++++++--------
 .../pages/assignmentPage/AssignmentPage.tsx   |  339 +++--
 .../src/pages/groupsPage/ChooseGroup.tsx      |  784 ++++++++----
 .../src/pages/groupsPage/GroupsPage.tsx       |  177 +--
 .../pages/scoresPage/ProjectScoresPage.tsx    |  331 ++---
 .../pages/scoresPage/StudentScoreListItem.tsx |   48 +-
 .../subjectsPage/AddChangeSubjectPage.tsx     |  323 ++---
 .../AssignmentListItemSubjectsPage.tsx        |  129 +-
 .../src/pages/subjectsPage/ProjectsView.tsx   |  133 +-
 .../src/pages/subjectsPage/StudentPopUp.tsx   |   32 +-
 .../src/pages/subjectsPage/SubjectsPage.tsx   |   57 +-
 .../pages/submissionPage/SubmissionPage.tsx   |   13 +-
 frontend/frontend/src/routes.tsx              |    2 +-
 17 files changed, 2221 insertions(+), 1623 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 8a8724c3..01599c77 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -1,15 +1,18 @@
-import { darken } from '@mui/system';
+import { darken } from '@mui/system'
 import {
     Button as BaseButton,
     Card as BaseCard,
     Divider as BaseDivider,
-    Box, ButtonProps, CardProps, DividerProps
+    Box,
+    ButtonProps,
+    CardProps,
+    DividerProps,
 } from '@mui/material'
 import theme from '../Theme.ts'
-import {ReactNode} from "react";
+import { ReactNode } from 'react'
 
 interface PrimaryButtonProps extends ButtonProps {
-    children: ReactNode;
+    children: ReactNode
 }
 
 export const Button = ({ children, ...props }: PrimaryButtonProps) => {
@@ -24,7 +27,7 @@ export const Button = ({ children, ...props }: PrimaryButtonProps) => {
                 textTransform: 'none',
                 color: 'primary.contrastText',
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.primary.main,0.5),
+                    backgroundColor: darken(theme.palette.primary.main, 0.5),
                 },
             }}
             {...props}
@@ -35,10 +38,13 @@ export const Button = ({ children, ...props }: PrimaryButtonProps) => {
 }
 
 interface SecondaryButtonProps extends ButtonProps {
-    children: ReactNode;
+    children: ReactNode
 }
 
-export const SecondaryButton = ({ children, ...props }: SecondaryButtonProps) => {
+export const SecondaryButton = ({
+    children,
+    ...props
+}: SecondaryButtonProps) => {
     return (
         <BaseButton
             variant="contained"
@@ -50,7 +56,7 @@ export const SecondaryButton = ({ children, ...props }: SecondaryButtonProps) =>
                 textTransform: 'none',
                 color: 'secondary.contrastText',
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.secondary.main,0.2),
+                    backgroundColor: darken(theme.palette.secondary.main, 0.2),
                 },
             }}
             {...props}
@@ -61,7 +67,7 @@ export const SecondaryButton = ({ children, ...props }: SecondaryButtonProps) =>
 }
 
 interface CustomCardProps extends CardProps {
-    children: ReactNode;
+    children: ReactNode
 }
 
 export const Card = ({ children, ...props }: CustomCardProps) => {
@@ -81,7 +87,7 @@ export const Card = ({ children, ...props }: CustomCardProps) => {
 }
 
 interface CustomDividerProps extends DividerProps {
-    children?: ReactNode;
+    children?: ReactNode
 }
 
 export const Divider = ({ children, ...props }: CustomCardProps) => {
@@ -99,36 +105,33 @@ export const Divider = ({ children, ...props }: CustomCardProps) => {
 }
 
 interface EvenlySpacedRowProps {
-    items: ReactNode[];
+    items: ReactNode[]
 }
 
-export const EvenlySpacedRow = ({items} : EvenlySpacedRowProps) => {
+export const EvenlySpacedRow = ({ items }: EvenlySpacedRowProps) => {
     return (
-        <Box
-            width={'100%'}
-            display="flex"
-            justifyContent={'space-between'}
-        >
+        <Box width={'100%'} display="flex" justifyContent={'space-between'}>
             {items.map((item, index) => (
-
                 <Box
                     key={index}
-                     width={(index == 0 || index == items.length-1) ? ((50/items.length)+'%') : ((100 - (100/items.length))/(items.length-2) +'%')}
-                     sx={{
-                         //border: '1px solid red',
-                         display: 'flex',
-                         alignItems: 'center',
-                         justifyContent: 'center'
-                     }}>
-                    <Box>
-                        {item}
-                    </Box>
+                    width={
+                        index == 0 || index == items.length - 1
+                            ? 50 / items.length + '%'
+                            : (100 - 100 / items.length) / (items.length - 2) +
+                              '%'
+                    }
+                    sx={{
+                        //border: '1px solid red',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Box>{item}</Box>
                 </Box>
             ))}
-    </Box>
+        </Box>
     )
 }
 
-
-
 export default { Button, Card, Divider, EvenlySpacedRow }
diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index 8772029d..bc87c398 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -5,7 +5,17 @@ import {
     PickersDayProps,
 } from '@mui/x-date-pickers'
 import dayjs, { Dayjs } from 'dayjs'
-import { Badge, SxProps, Stack, Typography, Box, List, ListItem, ListItemButton, ListItemText } from '@mui/material'
+import {
+    Badge,
+    SxProps,
+    Stack,
+    Typography,
+    Box,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+} from '@mui/material'
 import { useEffect, useRef, useState } from 'react'
 import AssignmentIcon from '@mui/icons-material/Assignment'
 import { useNavigate } from 'react-router-dom'
@@ -95,22 +105,26 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
             </Typography>
             <List>
                 {assignments
-                .filter((assignment: project) =>
-                    dayjs(assignment.deadline).isSame(selectedDay, 'day')
-                ).map((assignment: project) => 
-                    <ListItem>
-                        <ListItemButton
-                            sx={{
-                                border: 1
-                            }}
-                            onClick={() => handleProjectClick(assignment.vak, assignment.project_id)}
-                        >
-                            <ListItemText
-                                primary={assignment.titel}
-                            />
-                        </ListItemButton>
-                    </ListItem>
-                )}
+                    .filter((assignment: project) =>
+                        dayjs(assignment.deadline).isSame(selectedDay, 'day')
+                    )
+                    .map((assignment: project) => (
+                        <ListItem>
+                            <ListItemButton
+                                sx={{
+                                    border: 1,
+                                }}
+                                onClick={() =>
+                                    handleProjectClick(
+                                        assignment.vak,
+                                        assignment.project_id
+                                    )
+                                }
+                            >
+                                <ListItemText primary={assignment.titel} />
+                            </ListItemButton>
+                        </ListItem>
+                    ))}
             </List>
         </Stack>
     )
@@ -121,7 +135,10 @@ interface DeadlineCalendarProps {
     assignments: project[]
 }
 
-export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarProps) {
+export function DeadlineCalendar({
+    deadlines,
+    assignments,
+}: DeadlineCalendarProps) {
     const requestAbortController = useRef<AbortController | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [highlightedDays, setHighlightedDays] = useState<number[]>([])
@@ -173,9 +190,7 @@ export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarPro
 
     return (
         <>
-            <Stack
-                direction={"column"}
-            >
+            <Stack direction={'column'}>
                 {/*Calendar*/}
                 <DateCalendar
                     readOnly={false}
@@ -194,10 +209,7 @@ export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarPro
                         } as never,
                     }}
                 />
-                <DeadlineMenu
-                    assignments={assignments}
-                    selectedDay={value}
-                />
+                <DeadlineMenu assignments={assignments} selectedDay={value} />
             </Stack>
         </>
     )
diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
index f1d8ff2e..4e0f80cf 100644
--- a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -1,4 +1,4 @@
-import { EvenlySpacedRow} from "./CustomComponents.tsx";
+import { EvenlySpacedRow } from './CustomComponents.tsx'
 import {
     ListItem,
     ListItemButton,
@@ -53,33 +53,38 @@ export function SubmissionListItemStudentPage({
         <>
             <ListItem key={realId} sx={{ maxHeight: '30px' }} disablePadding>
                 <ListItemButton
-                    sx={{maxHeight: '30px'}}
-                    onClick={handleSubmissionClick}>
-                    <EvenlySpacedRow items={[
-                        <ListItemText
-                            sx={{
-                                color: 'primary.main',
-                                '&:hover': {
-                                    color: 'primary.light',
-                                },
-                            }}
-                            primary={visualId}
-                        />,
-                        <ListItemText
-                            primary={timestamp ? timestamp : t('time')}
-                        />,
-                        <Box sx={{ maxWidth: '24px', }}>
-                            <ListItemIcon sx={{ minWidth: 35 }}>
-                                {status ? (
-                                    <CheckCircleOutlineIcon
-                                        sx={{ color: 'success.main' }}
-                                    />
-                                ) : (
-                                    <HighlightOffIcon sx={{ color: 'error.main' }} />
-                                )}
-                            </ListItemIcon>
-                        </Box>
-                    ]}/>
+                    sx={{ maxHeight: '30px' }}
+                    onClick={handleSubmissionClick}
+                >
+                    <EvenlySpacedRow
+                        items={[
+                            <ListItemText
+                                sx={{
+                                    color: 'primary.main',
+                                    '&:hover': {
+                                        color: 'primary.light',
+                                    },
+                                }}
+                                primary={visualId}
+                            />,
+                            <ListItemText
+                                primary={timestamp ? timestamp : t('time')}
+                            />,
+                            <Box sx={{ maxWidth: '24px' }}>
+                                <ListItemIcon sx={{ minWidth: 35 }}>
+                                    {status ? (
+                                        <CheckCircleOutlineIcon
+                                            sx={{ color: 'success.main' }}
+                                        />
+                                    ) : (
+                                        <HighlightOffIcon
+                                            sx={{ color: 'error.main' }}
+                                        />
+                                    )}
+                                </ListItemIcon>
+                            </Box>,
+                        ]}
+                    />
                 </ListItemButton>
             </ListItem>
         </>
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 692d56e0..4ba9654f 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -3,7 +3,7 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
-    Box
+    Box,
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import DownloadIcon from '@mui/icons-material/Download'
@@ -14,7 +14,7 @@ import instance from '../axiosConfig'
 import { Submission } from '../pages/submissionPage/SubmissionPage.tsx'
 import { t } from 'i18next'
 import dayjs from 'dayjs'
-import {EvenlySpacedRow} from "./CustomComponents.tsx";
+import { EvenlySpacedRow } from './CustomComponents.tsx'
 
 interface SubmissionListItemTeacherPageProps {
     relative_group_id: string
@@ -63,17 +63,21 @@ export function SubmissionListItemTeacherPage({
                     submissionsResponse.data[
                         submissionsResponse.data.length - 1
                     ]
-                const lastSubmissionResponse = await instance.get(`indieningen/${lastSubmission.indiening_id}/`)
+                const lastSubmissionResponse = await instance.get(
+                    `indieningen/${lastSubmission.indiening_id}/`
+                )
                 //Get the submission file
                 const newSubmission: Submission = lastSubmissionResponse.data
-                newSubmission.filename = lastSubmissionResponse.data.bestand.replace(
-                    /^.*[\\/]/,
-                    ''
-                )
+                newSubmission.filename =
+                    lastSubmissionResponse.data.bestand.replace(/^.*[\\/]/, '')
                 newSubmission.bestand = await instance
-                    .get(`/indieningen/${lastSubmission.indiening_id}/indiening_bestand`, {
-                        responseType: 'blob',
-                    }).then((res) => {
+                    .get(
+                        `/indieningen/${lastSubmission.indiening_id}/indiening_bestand`,
+                        {
+                            responseType: 'blob',
+                        }
+                    )
+                    .then((res) => {
                         let filename = 'indiening.zip'
                         if (newSubmission.filename) {
                             filename = newSubmission.filename
@@ -107,9 +111,7 @@ export function SubmissionListItemTeacherPage({
             const url = window.URL.createObjectURL(submitted?.bestand)
             const a = document.createElement('a')
             a.href = url
-            a.download = submitted.filename
-                ? submitted.filename
-                : 'opgave.zip'
+            a.download = submitted.filename ? submitted.filename : 'opgave.zip'
             document.body.appendChild(a)
             a.click()
             a.remove()
@@ -128,70 +130,75 @@ export function SubmissionListItemTeacherPage({
 
     return (
         <>
-            <ListItem id={group_id} sx={{maxHeight: '30px'}} disablePadding>
-                <ListItemButton sx={{maxHeight: '30px'}}
+            <ListItem id={group_id} sx={{ maxHeight: '30px' }} disablePadding>
+                <ListItemButton
+                    sx={{ maxHeight: '30px' }}
                     onClick={handleSubmissionClick}
                 >
                     <EvenlySpacedRow
-
-                        items={[<ListItemText
-                        sx={{
-                            color: 'primary.main',
-                            '&:hover': {
-                                color: 'primary.light',
-                            },
-                        }}
-                        primary={relative_group_id}
-                    />,
-                        <ListItemText
-                            primary={
-                                submitted
-                                    ? dayjs(submitted.tijdstip).format(
-                                        'DD/MM/YYYY HH:mm'
-                                    )
-                                    : '-'
-                            }
-                        />,
-                        <ListItemText
-                            primary={
-                                score
-                                    ? `${Number(score.score)}` + '/20'
-                                    : t('no_score_yet')
-                            }
-                        />,
-                        <Box sx={{ maxWidth: '24px'}}>
-                            <ListItemIcon>
-                                {!submitted?.status ? (
-                                    <HighlightOffIcon sx={{ color: 'error.main' }} />
-                                ) : (
-                                    submitted !== undefined && (
-                                        <CheckCircleOutlineIcon
-                                            sx={{ color: 'success.main' }}
-                                        />
-                                    )
-                                )}
-                            </ListItemIcon>
-                        </Box>,
-                        <Box sx={{ maxWidth: '24px'}}>
-                            <ListItemIcon>
-                                <div onClick={handleDownloadClick}>
-                                    {submitted ? (
-                                        <DownloadIcon
-                                            sx={{
-                                                color: 'primary.main',
-                                                '&:hover': {
-                                                    color: 'primary.light',
-                                                },
-                                            }}
+                        items={[
+                            <ListItemText
+                                sx={{
+                                    color: 'primary.main',
+                                    '&:hover': {
+                                        color: 'primary.light',
+                                    },
+                                }}
+                                primary={relative_group_id}
+                            />,
+                            <ListItemText
+                                primary={
+                                    submitted
+                                        ? dayjs(submitted.tijdstip).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          )
+                                        : '-'
+                                }
+                            />,
+                            <ListItemText
+                                primary={
+                                    score
+                                        ? `${Number(score.score)}` + '/20'
+                                        : t('no_score_yet')
+                                }
+                            />,
+                            <Box sx={{ maxWidth: '24px' }}>
+                                <ListItemIcon>
+                                    {!submitted?.status ? (
+                                        <HighlightOffIcon
+                                            sx={{ color: 'error.main' }}
                                         />
                                     ) : (
-                                        <DownloadIcon sx={{ color: 'gray' }} />
+                                        submitted !== undefined && (
+                                            <CheckCircleOutlineIcon
+                                                sx={{ color: 'success.main' }}
+                                            />
+                                        )
                                     )}
-                                </div>
-                            </ListItemIcon>
-                        </Box>
-                    ]}>
-                    </EvenlySpacedRow>
+                                </ListItemIcon>
+                            </Box>,
+                            <Box sx={{ maxWidth: '24px' }}>
+                                <ListItemIcon>
+                                    <div onClick={handleDownloadClick}>
+                                        {submitted ? (
+                                            <DownloadIcon
+                                                sx={{
+                                                    color: 'primary.main',
+                                                    '&:hover': {
+                                                        color: 'primary.light',
+                                                    },
+                                                }}
+                                            />
+                                        ) : (
+                                            <DownloadIcon
+                                                sx={{ color: 'gray' }}
+                                            />
+                                        )}
+                                    </div>
+                                </ListItemIcon>
+                            </Box>,
+                        ]}
+                    ></EvenlySpacedRow>
                 </ListItemButton>
             </ListItem>
         </>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 33d50574..5ed43e36 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -191,15 +191,11 @@ export function AddChangeAssignmentPage() {
 
                     setVisible(assignment.zichtbaar)
                     if (assignment.deadline !== null) {
-                        setDueDate(
-                            dayjs(assignment.deadline)
-                        )
+                        setDueDate(dayjs(assignment.deadline))
                         console.log('deadline' + assignment.deadline)
                     }
                     if (assignment.extra_deadline !== null) {
-                        setExtraDueDate(
-                            dayjs(assignment.extra_deadline)
-                        )
+                        setExtraDueDate(dayjs(assignment.extra_deadline))
                         console.log(
                             'extra deadline' + assignment.extra_deadline
                         )
@@ -472,529 +468,622 @@ export function AddChangeAssignmentPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            {/* Stack container for layout */}
-            <Stack direction={'column'} paddingX={2}>
-                {/*very ugly but it works functionally*/}
-                {loading ? (
-                    <Header variant={'default'} title={''} />
-                ) : (
-                    <Header variant={'default'} title={title} />
-                )}
-                {/* Form for submitting assignment */}
-                <Stack
-                    direction={'column'}
-                    marginTop={11}
-                    component={'form'}
-                    onSubmit={handleSubmit}
-                >
-                    <Box
-                        aria-label={'title_and_upload'}
-                        padding={2}
-                        paddingRight={0}
-                        gap={1}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        width={'98%'}
-                        justifyContent={'space-between'}
-                    >
-                        <Box
-                            aria-label={'title'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* Here the user gets to specify the assignment name */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('assignmentName')}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={'Title'}
-                                    error={assignmentErrors.title}
-                                    value={title}
-                                    helperText={
-                                        assignmentErrors.title
-                                            ? t('name') + ' ' + t('is_required')
-                                            : ''
-                                    }
-                                    onChange={(event) =>
-                                        setTitle(event.target.value)
-                                    }
-                                />
-                            )}
-                        </Box>
-                        {/* File Upload button */}
-                        <Box
-                            padding={0}
-                            marginRight={3}
-                            display={'flex'}
-                            flexDirection={'column'}
-                            alignItems={'flex-start'}
-                        >
-                            {loading ? (
-                                <FileUploadButton
-                                    name={t('upload_assignment')}
-                                    tooltip={t('uploadToolTip')}
-                                    onFileChange={() => {
-                                        console.log('loading')
-                                    }}
-                                    fileTypes={['.pdf', '.zip']}
-                                    path={new File([], 'loading...')}
-                                />
-                            ) : (
-                                <FileUploadButton
-                                    name={t('upload_assignment')}
-                                    path={assignmentFile}
-                                    onFileChange={handleFileChange}
-                                    fileTypes={['.pdf', '.zip']}
-                                    tooltip={t('uploadToolTip')}
-                                />
-                            )}
-                        </Box>
-                    </Box>
-                    {/* Deadline section.
+                        <>
+                            {/* Stack container for layout */}
+                            <Stack direction={'column'} paddingX={2}>
+                                {/*very ugly but it works functionally*/}
+                                {loading ? (
+                                    <Header variant={'default'} title={''} />
+                                ) : (
+                                    <Header variant={'default'} title={title} />
+                                )}
+                                {/* Form for submitting assignment */}
+                                <Stack
+                                    direction={'column'}
+                                    marginTop={11}
+                                    component={'form'}
+                                    onSubmit={handleSubmit}
+                                >
+                                    <Box
+                                        aria-label={'title_and_upload'}
+                                        padding={2}
+                                        paddingRight={0}
+                                        gap={1}
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        width={'98%'}
+                                        justifyContent={'space-between'}
+                                    >
+                                        <Box
+                                            aria-label={'title'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* Here the user gets to specify the assignment name */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('assignmentName')}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={'Title'}
+                                                    error={
+                                                        assignmentErrors.title
+                                                    }
+                                                    value={title}
+                                                    helperText={
+                                                        assignmentErrors.title
+                                                            ? t('name') +
+                                                              ' ' +
+                                                              t('is_required')
+                                                            : ''
+                                                    }
+                                                    onChange={(event) =>
+                                                        setTitle(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                />
+                                            )}
+                                        </Box>
+                                        {/* File Upload button */}
+                                        <Box
+                                            padding={0}
+                                            marginRight={3}
+                                            display={'flex'}
+                                            flexDirection={'column'}
+                                            alignItems={'flex-start'}
+                                        >
+                                            {loading ? (
+                                                <FileUploadButton
+                                                    name={t(
+                                                        'upload_assignment'
+                                                    )}
+                                                    tooltip={t('uploadToolTip')}
+                                                    onFileChange={() => {
+                                                        console.log('loading')
+                                                    }}
+                                                    fileTypes={['.pdf', '.zip']}
+                                                    path={
+                                                        new File(
+                                                            [],
+                                                            'loading...'
+                                                        )
+                                                    }
+                                                />
+                                            ) : (
+                                                <FileUploadButton
+                                                    name={t(
+                                                        'upload_assignment'
+                                                    )}
+                                                    path={assignmentFile}
+                                                    onFileChange={
+                                                        handleFileChange
+                                                    }
+                                                    fileTypes={['.pdf', '.zip']}
+                                                    tooltip={t('uploadToolTip')}
+                                                />
+                                            )}
+                                        </Box>
+                                    </Box>
+                                    {/* Deadline section.
                     There is both the normal deadline, 
                     and an extra deadline in case people need more time. */}
-                    <Box
-                        aria-label={'deadline'}
-                        padding={2}
-                        display={'flex'}
-                        flexDirection={{
-                            xs: 'column',
-                            sm: 'column',
-                            md: 'row',
-                        }}
-                        gap={5}
-                    >
-                        <Box
-                            aria-label={'initial_deadline'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* This section renders the normal deadline. */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                Deadline:
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <LocalizationProvider
-                                    dateAdapter={AdapterDayjs}
-                                    adapterLocale="nl"
-                                >
-                                    <DateTimePicker
-                                        format="DD/MM/YYYY HH:mm"
-                                        value={dueDate}
-                                        disablePast
-                                        label={t('optional')}
-                                        sx={{ width: 250 }}
-                                        viewRenderers={{
-                                            hours: renderTimeViewClock,
-                                            minutes: renderTimeViewClock,
-                                            seconds: renderTimeViewClock,
-                                        }}
-                                        onError={(newError) =>
-                                            SetDeadlineError(newError)
-                                        }
-                                        slotProps={{
-                                            field: {
-                                                clearable: true,
-                                                onClear: () => setCleared(true),
-                                            },
-                                            textField: {
-                                                helperText: errorMessage,
-                                            },
-                                        }}
-                                        onChange={(newValue) =>
-                                            setDueDate(newValue)
-                                        }
-                                    />
-                                </LocalizationProvider>
-                            )}
-                        </Box>
-                        <Box
-                            aria-label={'secondary_deadline'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* This section renders the extra deadline. */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                Extra Deadline:
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <LocalizationProvider
-                                    dateAdapter={AdapterDayjs}
-                                    adapterLocale="nl"
-                                >
-                                    <DateTimePicker
-                                        format="DD/MM/YYYY HH:mm"
-                                        value={extraDueDate}
-                                        disablePast
-                                        label={t('optional')}
-                                        sx={{ width: 250 }}
-                                        viewRenderers={{
-                                            hours: renderTimeViewClock,
-                                            minutes: renderTimeViewClock,
-                                            seconds: renderTimeViewClock,
-                                        }}
-                                        slotProps={{
-                                            field: {
-                                                clearable: true,
-                                                onClear: () => setCleared(true),
-                                            },
-                                            textField: {
-                                                error: deadlineCheckError,
-                                                helperText: deadlineCheckError
-                                                    ? t('deadlineCheck')
-                                                    : '',
-                                            },
+                                    <Box
+                                        aria-label={'deadline'}
+                                        padding={2}
+                                        display={'flex'}
+                                        flexDirection={{
+                                            xs: 'column',
+                                            sm: 'column',
+                                            md: 'row',
                                         }}
-                                        onChange={(newValue) =>
-                                            setExtraDueDate(newValue)
-                                        }
-                                    />
-                                </LocalizationProvider>
-                            )}
-                        </Box>
-                    </Box>
-                    {/* Description section */}
-                    <Card aria-label={'description'}>
-                        <Box
-                            padding={2}
-                            maxHeight={'20svh'}
-                            minHeight={'20svh'}
-                        >
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('description')}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={'100%'}
-                                    height={60}
-                                />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={'Description'}
-                                    variant={'standard'}
-                                    multiline
-                                    value={description}
-                                    onChange={(event) =>
-                                        setDescription(event.target.value)
-                                    }
-                                    fullWidth
-                                    error={assignmentErrors.description}
-                                    // Show an error message if the description is not filled in.
-                                    helperText={
-                                        assignmentErrors.description
-                                            ? t('descriptionName') +
-                                              ' ' +
-                                              t('is_required')
-                                            : ''
-                                    }
-                                    sx={{
-                                        overflowY: 'auto',
-                                        maxHeight: '25svh',
-                                    }}
-                                />
-                            )}
-                        </Box>
-                    </Card>
-                    {/* Restrictions section */}
-                    <Box
-                        aria-label={'restrictions'}
-                        marginTop={3}
-                        display={'flex'}
-                        flexDirection={'row'}
-                    >
-                        <Card
-                            sx={{
-                                padding: 1,
-                                backgroundColor: 'background.default',
-                                width: '70%',
-                                height: '28svh',
-                            }}
-                        >
-                            <Typography variant={'h5'} fontWeight={'bold'}>
-                                {t('restrictions')}
-                            </Typography>
-                            <Box sx={{ padding: 1 }}>
-                                {/*This list will render the restrictions that are added to the assignment.*/}
-                                <List
-                                    sx={{
-                                        maxHeight: '18vh',
-                                        overflowY: 'auto',
-                                    }}
-                                >
-                                    {loading ? (
-                                        <CircularProgress color={'primary'} />
-                                    ) : (
-                                        <>
-                                            {restrictions.map(
-                                                (restriction, index) => {
-                                                    return (
-                                                        <ListItem key={index}>
-                                                            <RestrictionCard
-                                                                restriction={
-                                                                    restriction
-                                                                }
-                                                                restrictions={
-                                                                    restrictions
-                                                                }
-                                                                setRestrictions={
-                                                                    setRestrictions
-                                                                }
-                                                            />
-                                                        </ListItem>
-                                                    )
-                                                }
-                                            )}
-                                        </>
-                                    )}
-                                </List>
-                            </Box>
-                            <Box
-                                width={'100%'}
-                                display={'flex'}
-                                justifyContent={'flex-end'}
-                            >
-                                <Tooltip title={t('add_restriction')}>
-                                    <AddRestrictionButton
-                                        // When this button is clicked, a pop up will show.
-                                        // This popup will allow you to choose to make a restriction yourself,
-                                        // create one starting from a template,
-                                        // or choose a file from the system.
-                                        restrictions={restrictions}
-                                        setRestrictions={(newRestrictions) =>
-                                            setRestrictions(newRestrictions)
-                                        }
-                                    ></AddRestrictionButton>
-                                </Tooltip>
-                            </Box>
-                        </Card>
-                    </Box>
-                    {/* Main actions section */}
-                    <Box
-                        aria-label={'main actions'}
-                        marginTop={3}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        width={'100%'}
-                        justifyContent={'space-between'}
-                    >
-                        <Box
-                            aria-label={'visibility_and_groups'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={10}
-                            alignItems={'center'}
-                            padding={2}
-                        >
-                            <Box
-                                aria-label={'main actions'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                alignItems={'center'}
-                            >
-                                {visible ? (
-                                    <IconButton
-                                        // Allows the teacher to select whether
-                                        // the assignment is visible to students or not.
-                                        color={'info'}
-                                        onClick={() => setVisible(!visible)}
+                                        gap={5}
                                     >
-                                        <VisibilityIcon fontSize={'medium'} />
-                                    </IconButton>
-                                ) : (
-                                    <IconButton
-                                        color={'info'}
-                                        onClick={() => setVisible(!visible)}
+                                        <Box
+                                            aria-label={'initial_deadline'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* This section renders the normal deadline. */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                Deadline:
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <LocalizationProvider
+                                                    dateAdapter={AdapterDayjs}
+                                                    adapterLocale="nl"
+                                                >
+                                                    <DateTimePicker
+                                                        format="DD/MM/YYYY HH:mm"
+                                                        value={dueDate}
+                                                        disablePast
+                                                        label={t('optional')}
+                                                        sx={{ width: 250 }}
+                                                        viewRenderers={{
+                                                            hours: renderTimeViewClock,
+                                                            minutes:
+                                                                renderTimeViewClock,
+                                                            seconds:
+                                                                renderTimeViewClock,
+                                                        }}
+                                                        onError={(newError) =>
+                                                            SetDeadlineError(
+                                                                newError
+                                                            )
+                                                        }
+                                                        slotProps={{
+                                                            field: {
+                                                                clearable: true,
+                                                                onClear: () =>
+                                                                    setCleared(
+                                                                        true
+                                                                    ),
+                                                            },
+                                                            textField: {
+                                                                helperText:
+                                                                    errorMessage,
+                                                            },
+                                                        }}
+                                                        onChange={(newValue) =>
+                                                            setDueDate(newValue)
+                                                        }
+                                                    />
+                                                </LocalizationProvider>
+                                            )}
+                                        </Box>
+                                        <Box
+                                            aria-label={'secondary_deadline'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* This section renders the extra deadline. */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                Extra Deadline:
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <LocalizationProvider
+                                                    dateAdapter={AdapterDayjs}
+                                                    adapterLocale="nl"
+                                                >
+                                                    <DateTimePicker
+                                                        format="DD/MM/YYYY HH:mm"
+                                                        value={extraDueDate}
+                                                        disablePast
+                                                        label={t('optional')}
+                                                        sx={{ width: 250 }}
+                                                        viewRenderers={{
+                                                            hours: renderTimeViewClock,
+                                                            minutes:
+                                                                renderTimeViewClock,
+                                                            seconds:
+                                                                renderTimeViewClock,
+                                                        }}
+                                                        slotProps={{
+                                                            field: {
+                                                                clearable: true,
+                                                                onClear: () =>
+                                                                    setCleared(
+                                                                        true
+                                                                    ),
+                                                            },
+                                                            textField: {
+                                                                error: deadlineCheckError,
+                                                                helperText:
+                                                                    deadlineCheckError
+                                                                        ? t(
+                                                                              'deadlineCheck'
+                                                                          )
+                                                                        : '',
+                                                            },
+                                                        }}
+                                                        onChange={(newValue) =>
+                                                            setExtraDueDate(
+                                                                newValue
+                                                            )
+                                                        }
+                                                    />
+                                                </LocalizationProvider>
+                                            )}
+                                        </Box>
+                                    </Box>
+                                    {/* Description section */}
+                                    <Card aria-label={'description'}>
+                                        <Box
+                                            padding={2}
+                                            maxHeight={'20svh'}
+                                            minHeight={'20svh'}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('description')}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={'100%'}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={'Description'}
+                                                    variant={'standard'}
+                                                    multiline
+                                                    value={description}
+                                                    onChange={(event) =>
+                                                        setDescription(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                    fullWidth
+                                                    error={
+                                                        assignmentErrors.description
+                                                    }
+                                                    // Show an error message if the description is not filled in.
+                                                    helperText={
+                                                        assignmentErrors.description
+                                                            ? t(
+                                                                  'descriptionName'
+                                                              ) +
+                                                              ' ' +
+                                                              t('is_required')
+                                                            : ''
+                                                    }
+                                                    sx={{
+                                                        overflowY: 'auto',
+                                                        maxHeight: '25svh',
+                                                    }}
+                                                />
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    {/* Restrictions section */}
+                                    <Box
+                                        aria-label={'restrictions'}
+                                        marginTop={3}
+                                        display={'flex'}
+                                        flexDirection={'row'}
                                     >
-                                        <VisibilityOffIcon
-                                            fontSize={'medium'}
-                                        />
-                                    </IconButton>
-                                )}
-                                <Tooltip title={t('remove')}>
-                                    <IconButton
-                                        color={'warning'}
-                                        onClick={openDeleteConfirmation}
+                                        <Card
+                                            sx={{
+                                                padding: 1,
+                                                backgroundColor:
+                                                    'background.default',
+                                                width: '70%',
+                                                height: '28svh',
+                                            }}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('restrictions')}
+                                            </Typography>
+                                            <Box sx={{ padding: 1 }}>
+                                                {/*This list will render the restrictions that are added to the assignment.*/}
+                                                <List
+                                                    sx={{
+                                                        maxHeight: '18vh',
+                                                        overflowY: 'auto',
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <CircularProgress
+                                                            color={'primary'}
+                                                        />
+                                                    ) : (
+                                                        <>
+                                                            {restrictions.map(
+                                                                (
+                                                                    restriction,
+                                                                    index
+                                                                ) => {
+                                                                    return (
+                                                                        <ListItem
+                                                                            key={
+                                                                                index
+                                                                            }
+                                                                        >
+                                                                            <RestrictionCard
+                                                                                restriction={
+                                                                                    restriction
+                                                                                }
+                                                                                restrictions={
+                                                                                    restrictions
+                                                                                }
+                                                                                setRestrictions={
+                                                                                    setRestrictions
+                                                                                }
+                                                                            />
+                                                                        </ListItem>
+                                                                    )
+                                                                }
+                                                            )}
+                                                        </>
+                                                    )}
+                                                </List>
+                                            </Box>
+                                            <Box
+                                                width={'100%'}
+                                                display={'flex'}
+                                                justifyContent={'flex-end'}
+                                            >
+                                                <Tooltip
+                                                    title={t('add_restriction')}
+                                                >
+                                                    <AddRestrictionButton
+                                                        // When this button is clicked, a pop up will show.
+                                                        // This popup will allow you to choose to make a restriction yourself,
+                                                        // create one starting from a template,
+                                                        // or choose a file from the system.
+                                                        restrictions={
+                                                            restrictions
+                                                        }
+                                                        setRestrictions={(
+                                                            newRestrictions
+                                                        ) =>
+                                                            setRestrictions(
+                                                                newRestrictions
+                                                            )
+                                                        }
+                                                    ></AddRestrictionButton>
+                                                </Tooltip>
+                                            </Box>
+                                        </Card>
+                                    </Box>
+                                    {/* Main actions section */}
+                                    <Box
+                                        aria-label={'main actions'}
+                                        marginTop={3}
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        width={'100%'}
+                                        justifyContent={'space-between'}
                                     >
-                                        <DeleteForeverIcon
-                                            fontSize={'medium'}
-                                        />
-                                    </IconButton>
-                                </Tooltip>
-                            </Box>
-                            {/* This section allows the teacher to set the maximum score for the assignment.*/}
-                            <Box
-                                aria-label={'maxScore'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                gap={1}
-                                height={40}
-                                alignItems={'center'}
-                            >
-                                <Typography
-                                    fontWeight={'bold'}
-                                    color={'text.primary'}
-                                >
-                                    Max Score
-                                </Typography>
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'text'}
-                                        width={60}
-                                        height={60}
-                                    />
-                                ) : (
-                                    <TextField
-                                        sx={{ width: 80 }}
-                                        required
-                                        label={'Max Score'}
-                                        type={'number'}
-                                        value={maxScore}
-                                        onChange={(event) => {
-                                            if (event.target.value !== '') {
-                                                const newScore = Math.max(
-                                                    parseInt(
-                                                        event.target.value
-                                                    ),
-                                                    0
-                                                )
-                                                SetMaxScore
-                                                    ? SetMaxScore(newScore)
-                                                    : undefined
-                                            } else {
-                                                SetMaxScore
-                                                    ? SetMaxScore(
-                                                          parseInt(
-                                                              event.target.value
-                                                          )
-                                                      )
-                                                    : undefined
-                                            }
-                                        }}
-                                    />
-                                )}
-                            </Box>
-                        </Box>
-                        {/* Submit and Cancel buttons */}
-                        <Box
-                            aria-label={'submit_and_cancel'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={1}
-                            alignItems={'center'}
-                        >
-                            <Tooltip title={t('cancel')}>
-                                <IconButton
-                                    onClick={() => setCancelConfirmation(true)}
-                                    sx={{
-                                        backgroundColor: 'secondary.main',
-                                        borderRadius: 2,
-                                    }}
-                                >
-                                    <ClearIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                            <Tooltip title={t('submit')}>
-                                <IconButton
-                                    type="submit"
-                                    aria-label={'submit'}
-                                    sx={{
-                                        backgroundColor: 'primary.main',
-                                        borderRadius: 2,
-                                        color: 'background.default',
-                                        '&:hover': {
-                                            backgroundColor: 'secondary.main',
-                                            color: 'text.primary',
-                                        },
-                                    }}
-                                >
-                                    <SaveIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                        </Box>
-                    </Box>
-                </Stack>
-
-                {/* Popup for adding restrictions */}
-
-                {/* Confirmation popup for deleting project */}
-
-                <WarningPopup
-                    title={t('remove') + ' Project?'}
-                    content={t('cant_be_undone')}
-                    buttonName={t('remove')}
-                    open={deleteConfirmation}
-                    handleClose={closeDeletion}
-                    doAction={handleRemove}
-                />
-                {/* Confirmation popup for saving project */}
-                <WarningPopup
-                    title={t('save_project_warning')}
-                    content={t('visible_for_everyone')}
-                    buttonName={t('confirm')}
-                    open={saveConfirmation}
-                    handleClose={closeSaveConfirmation}
-                    doAction={uploadAssignment}
-                />
-                {/* Confirmation popup for canceling changes*/}
-                <WarningPopup
-                    title={t('undo_changes_warning')}
-                    content={t('cant_be_undone')}
-                    buttonName={t('confirm')}
-                    open={cancelConfirmation}
-                    handleClose={closeCancel}
-                    doAction={handleCancel}
-                />
-            </Stack>
+                                        <Box
+                                            aria-label={'visibility_and_groups'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={10}
+                                            alignItems={'center'}
+                                            padding={2}
+                                        >
+                                            <Box
+                                                aria-label={'main actions'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                alignItems={'center'}
+                                            >
+                                                {visible ? (
+                                                    <IconButton
+                                                        // Allows the teacher to select whether
+                                                        // the assignment is visible to students or not.
+                                                        color={'info'}
+                                                        onClick={() =>
+                                                            setVisible(!visible)
+                                                        }
+                                                    >
+                                                        <VisibilityIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                ) : (
+                                                    <IconButton
+                                                        color={'info'}
+                                                        onClick={() =>
+                                                            setVisible(!visible)
+                                                        }
+                                                    >
+                                                        <VisibilityOffIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                )}
+                                                <Tooltip title={t('remove')}>
+                                                    <IconButton
+                                                        color={'warning'}
+                                                        onClick={
+                                                            openDeleteConfirmation
+                                                        }
+                                                    >
+                                                        <DeleteForeverIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Box>
+                                            {/* This section allows the teacher to set the maximum score for the assignment.*/}
+                                            <Box
+                                                aria-label={'maxScore'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                gap={1}
+                                                height={40}
+                                                alignItems={'center'}
+                                            >
+                                                <Typography
+                                                    fontWeight={'bold'}
+                                                    color={'text.primary'}
+                                                >
+                                                    Max Score
+                                                </Typography>
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'text'}
+                                                        width={60}
+                                                        height={60}
+                                                    />
+                                                ) : (
+                                                    <TextField
+                                                        sx={{ width: 80 }}
+                                                        required
+                                                        label={'Max Score'}
+                                                        type={'number'}
+                                                        value={maxScore}
+                                                        onChange={(event) => {
+                                                            if (
+                                                                event.target
+                                                                    .value !==
+                                                                ''
+                                                            ) {
+                                                                const newScore =
+                                                                    Math.max(
+                                                                        parseInt(
+                                                                            event
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                        0
+                                                                    )
+                                                                SetMaxScore
+                                                                    ? SetMaxScore(
+                                                                          newScore
+                                                                      )
+                                                                    : undefined
+                                                            } else {
+                                                                SetMaxScore
+                                                                    ? SetMaxScore(
+                                                                          parseInt(
+                                                                              event
+                                                                                  .target
+                                                                                  .value
+                                                                          )
+                                                                      )
+                                                                    : undefined
+                                                            }
+                                                        }}
+                                                    />
+                                                )}
+                                            </Box>
+                                        </Box>
+                                        {/* Submit and Cancel buttons */}
+                                        <Box
+                                            aria-label={'submit_and_cancel'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={1}
+                                            alignItems={'center'}
+                                        >
+                                            <Tooltip title={t('cancel')}>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        setCancelConfirmation(
+                                                            true
+                                                        )
+                                                    }
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'secondary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                >
+                                                    <ClearIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title={t('submit')}>
+                                                <IconButton
+                                                    type="submit"
+                                                    aria-label={'submit'}
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'primary.main',
+                                                        borderRadius: 2,
+                                                        color: 'background.default',
+                                                        '&:hover': {
+                                                            backgroundColor:
+                                                                'secondary.main',
+                                                            color: 'text.primary',
+                                                        },
+                                                    }}
+                                                >
+                                                    <SaveIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </Box>
+                                    </Box>
+                                </Stack>
+
+                                {/* Popup for adding restrictions */}
+
+                                {/* Confirmation popup for deleting project */}
+
+                                <WarningPopup
+                                    title={t('remove') + ' Project?'}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('remove')}
+                                    open={deleteConfirmation}
+                                    handleClose={closeDeletion}
+                                    doAction={handleRemove}
+                                />
+                                {/* Confirmation popup for saving project */}
+                                <WarningPopup
+                                    title={t('save_project_warning')}
+                                    content={t('visible_for_everyone')}
+                                    buttonName={t('confirm')}
+                                    open={saveConfirmation}
+                                    handleClose={closeSaveConfirmation}
+                                    doAction={uploadAssignment}
+                                />
+                                {/* Confirmation popup for canceling changes*/}
+                                <WarningPopup
+                                    title={t('undo_changes_warning')}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('confirm')}
+                                    open={cancelConfirmation}
+                                    handleClose={closeCancel}
+                                    doAction={handleCancel}
+                                />
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 7487488f..ebc1759f 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -2,10 +2,17 @@ import { Header } from '../../components/Header.tsx'
 import FileUploadButton from '../../components/FileUploadButton.tsx'
 import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx'
 import { SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx'
-import {Card, Button, Divider, EvenlySpacedRow, SecondaryButton} from '../../components/CustomComponents.tsx'
+import {
+    Card,
+    Button,
+    Divider,
+    EvenlySpacedRow,
+    SecondaryButton,
+} from '../../components/CustomComponents.tsx'
 import {
     Box,
-    CircularProgress, Grid,
+    CircularProgress,
+    Grid,
     List,
     Skeleton,
     Stack,
@@ -141,41 +148,44 @@ export function AssignmentPage() {
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
         const downloadPromises: Promise<void>[] = []
-        submissions.forEach(submission => {
+        submissions.forEach((submission) => {
             downloadPromises.push(
                 new Promise(async (resolve, reject) => {
                     try {
                         // Get the submission details
                         const submissionResponse = await instance.get(
                             `/indieningen/${submission.indiening_id}/`
-                        );
-                        const newSubmission = submissionResponse.data;
+                        )
+                        const newSubmission = submissionResponse.data
                         // Get the submission file
                         const fileResponse = await instance.get(
                             `/indieningen/${submission.indiening_id}/indiening_bestand/`,
                             { responseType: 'blob' }
-                        );
-                        let filename = 'indiening.zip';
+                        )
+                        let filename = 'indiening.zip'
                         if (newSubmission.bestand) {
-                            filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                            filename = newSubmission.bestand.replace(
+                                /^.*[\\/]/,
+                                ''
+                            )
                         }
                         const blob = new Blob([fileResponse.data], {
                             type: fileResponse.headers['content-type'],
-                        });
+                        })
                         const file = new File([blob], filename, {
                             type: fileResponse.headers['content-type'],
-                        });
-                        newSubmission.bestand = file;
-                        newSubmission.filename = filename;
+                        })
+                        newSubmission.bestand = file
+                        newSubmission.filename = filename
                         // Add the file to the zip
-                        zip.file(filename, fileResponse.data);
-                        resolve(newSubmission);
+                        zip.file(filename, fileResponse.data)
+                        resolve(newSubmission)
                     } catch (err) {
-                        console.error(`Error downloading submission:`, err);
-                        reject(err);
+                        console.error(`Error downloading submission:`, err)
+                        reject(err)
                     }
                 })
-            );
+            )
         })
         Promise.all(downloadPromises)
             .then(() => {
@@ -184,7 +194,8 @@ export function AssignmentPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions_' + assignment?.titel + '_.zip'
+                        a.download =
+                            'all_submissions_' + assignment?.titel + '_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
@@ -365,7 +376,7 @@ export function AssignmentPage() {
                                 </Box>
 
                                 {/* Assignment description */}
-                                <Card sx={{padding: '20px'}}>
+                                <Card sx={{ padding: '20px' }}>
                                     <Stack direction={'column'}>
                                         <Typography
                                             sx={{
@@ -404,79 +415,113 @@ export function AssignmentPage() {
                                             padding: 3,
                                         }}
                                     >
-                                    <EvenlySpacedRow items={[
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('group')}
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('time')}
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            Score
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            Status
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('download')}
-                                        </Typography>
-                                    ]}
-                                    />
-                                </Box>
-                                <Divider/>
-                                <Box
+                                        <EvenlySpacedRow
+                                            items={[
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('group')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('time')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    Score
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    Status
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('download')}
+                                                </Typography>,
+                                            ]}
+                                        />
+                                    </Box>
+                                    <Divider />
+                                    <Box
                                         sx={{
-                                            position: 'relative', top: '-6px',
+                                            position: 'relative',
+                                            top: '-6px',
                                             height: 340,
                                         }}
-                                >
-                                    <Box sx={{ width: '100%', height: 320, overflow: 'auto' }}>
-                                    <List DisablePadding>
-                                        {loading ? (
-                                            [...Array(3)].map((_, index) => (
-                                                <Skeleton
-                                                    key={index}
-                                                    variant="text"
-                                                    width={'100%'}
-                                                    height={50}
-                                                    sx={{ margin: 0 }}
-                                                />
-                                            ))
-                                        ) : (
-                                                <>
-                                                {groups.map((group,index) => (
+                                    >
+                                        <Box
+                                            sx={{
+                                                width: '100%',
+                                                height: 320,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            <List DisablePadding>
+                                                {loading ? (
+                                                    [...Array(3)].map(
+                                                        (_, index) => (
+                                                            <Skeleton
+                                                                key={index}
+                                                                variant="text"
+                                                                width={'100%'}
+                                                                height={50}
+                                                                sx={{
+                                                                    margin: 0,
+                                                                }}
+                                                            />
+                                                        )
+                                                    )
+                                                ) : (
                                                     <>
-                                                        {index != 0 ?  <Divider/> : <></>}
-                                                        <SubmissionListItemTeacherPage
-                                                            relative_group_id={(
-                                                                group.groep_id -
-                                                                Math.min(
-                                                                    ...groups.map(
-                                                                        (
-                                                                            group
-                                                                        ) =>
-                                                                            group.groep_id
-                                                                    )
-                                                                ) +
-                                                                1
-                                                            ).toString()}
-                                                            group_id={group.groep_id.toString()}
-                                                            assignment_id={
-                                                                assignmentId
-                                                                    ? assignmentId
-                                                                    : ''
-                                                            }
-                                                            course_id={
-                                                                courseId
-                                                                    ? courseId
-                                                                    : ''
-                                                            }
-                                                        />
+                                                        {groups.map(
+                                                            (group, index) => (
+                                                                <>
+                                                                    {index !=
+                                                                    0 ? (
+                                                                        <Divider />
+                                                                    ) : (
+                                                                        <></>
+                                                                    )}
+                                                                    <SubmissionListItemTeacherPage
+                                                                        relative_group_id={(
+                                                                            group.groep_id -
+                                                                            Math.min(
+                                                                                ...groups.map(
+                                                                                    (
+                                                                                        group
+                                                                                    ) =>
+                                                                                        group.groep_id
+                                                                                )
+                                                                            ) +
+                                                                            1
+                                                                        ).toString()}
+                                                                        group_id={group.groep_id.toString()}
+                                                                        assignment_id={
+                                                                            assignmentId
+                                                                                ? assignmentId
+                                                                                : ''
+                                                                        }
+                                                                        course_id={
+                                                                            courseId
+                                                                                ? courseId
+                                                                                : ''
+                                                                        }
+                                                                    />
+                                                                </>
+                                                            )
+                                                        )}
                                                     </>
-                                                ))}
-                                                </>
-                                        )}
-                                        </List>
+                                                )}
+                                            </List>
                                         </Box>
                                     </Box>
                                 </Card>
@@ -707,22 +752,34 @@ export function AssignmentPage() {
                                             padding: 3,
                                         }}
                                     >
-                                   <EvenlySpacedRow items={[
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('submission')}
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('time')}
-                                        </Typography>,
-                                        <Typography variant={'h5'}  sx={{ fontWeight: 'bold' }}>
-                                            Status
-                                        </Typography>
-                                        ]}/>
+                                        <EvenlySpacedRow
+                                            items={[
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('submission')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('time')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    Status
+                                                </Typography>,
+                                            ]}
+                                        />
                                     </Box>
-                                    <Divider/>
+                                    <Divider />
                                     <Box
                                         style={{
-                                            position: 'relative', top: '-6px',
+                                            position: 'relative',
+                                            top: '-6px',
                                             maxHeight: 340,
                                         }}
                                     >
@@ -756,13 +813,24 @@ export function AssignmentPage() {
                                                                     ? 1
                                                                     : -1
                                                             )
-                                                            .map((submission,index) => (
+                                                            .map(
+                                                                (
+                                                                    submission,
+                                                                    index
+                                                                ) => (
                                                                     <Box
                                                                         key={
                                                                             submission.indiening_id
                                                                         }
                                                                     >
-                                                                        {index != 0 ?  <Divider/> : <></>}
+                                                                        {index !=
+                                                                        0 ? (
+                                                                            <Divider />
+                                                                        ) : (
+                                                                            <>
+
+                                                                            </>
+                                                                        )}
                                                                         <SubmissionListItemStudentPage
                                                                             realId={submission.indiening_id.toString()}
                                                                             visualId={(
@@ -831,40 +899,41 @@ export function AssignmentPage() {
 
                                 {/*Upload button, this is what the student will see. */}
                                 <Grid container spacing={2}>
-                                <Grid>
-                                <FileUploadButton
-                                    name={t('upload')}
-                                    path={
-                                        loading
-                                            ? new File(
-                                                  [],
-                                                  t('loading') +
-                                                      '...'
-                                              )
-                                            : submissionFile
-                                    }
-                                    onFileChange={handleFileChange}
-                                    fileTypes={[
-                                        '.zip',
-                                        '.pdf',
-                                        '.txt',
-                                    ]}
-                                    tooltip={t('uploadToolTip')}
-                                />
-                                </Grid>
-                                <Grid>
-                                <Box  sx={{ position: 'relative', top: '8px', ml: 2}}>
-                                    <Tooltip title={t('upload')}>
-                                        <SecondaryButton
-                                            onClick={uploadIndiening}
+                                    <Grid>
+                                        <FileUploadButton
+                                            name={t('upload')}
+                                            path={
+                                                loading
+                                                    ? new File(
+                                                          [],
+                                                          t('loading') + '...'
+                                                      )
+                                                    : submissionFile
+                                            }
+                                            onFileChange={handleFileChange}
+                                            fileTypes={['.zip', '.pdf', '.txt']}
+                                            tooltip={t('uploadToolTip')}
+                                        />
+                                    </Grid>
+                                    <Grid>
+                                        <Box
+                                            sx={{
+                                                position: 'relative',
+                                                top: '8px',
+                                                ml: 2,
+                                            }}
                                         >
-                                            <Typography>
-                                                {t('submit')}
-                                            </Typography>
-                                        </SecondaryButton>
-                                    </Tooltip>
-                                </Box>
-                                </Grid>
+                                            <Tooltip title={t('upload')}>
+                                                <SecondaryButton
+                                                    onClick={uploadIndiening}
+                                                >
+                                                    <Typography>
+                                                        {t('submit')}
+                                                    </Typography>
+                                                </SecondaryButton>
+                                            </Tooltip>
+                                        </Box>
+                                    </Grid>
                                 </Grid>
                             </Stack>
                             <WarningPopup
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index fa379442..2065347b 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -11,12 +11,12 @@ import {
 } from '@mui/material'
 import List from '@mui/material/List'
 import { useEffect, useState } from 'react'
-import {Header} from "../../components/Header.tsx";
+import { Header } from '../../components/Header.tsx'
 import { t } from 'i18next'
-import { Button } from '../../components/CustomComponents.tsx';
+import { Button } from '../../components/CustomComponents.tsx'
 import { useNavigate, useParams } from 'react-router-dom'
-import instance from "../../axiosConfig.ts";
-import { User } from '../subjectsPage/AddChangeSubjectPage.tsx';
+import instance from '../../axiosConfig.ts'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 export interface Group {
     groep_id: number
@@ -39,8 +39,12 @@ export interface Assignment {
     file?: File
 }
 
-function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> void){
-    if(isin){
+function joinLeaveButton(
+    isin: boolean,
+    handleJoin: () => void,
+    handleLeave: () => void
+) {
+    if (isin) {
         return (
             <>
                 <Button
@@ -67,15 +71,14 @@ function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> vo
 }
 
 export function ChooseGroup() {
-
     const params = useParams()
     const navigate = useNavigate()
 
-    const [studenten,setStudenten]=useState<Record<number, User>>({});
-    const [groups,setGroups]=useState<Group[]>([]);
-    const [open,setOpen] = useState<boolean>(false);
+    const [studenten, setStudenten] = useState<Record<number, User>>({})
+    const [groups, setGroups] = useState<Group[]>([])
+    const [open, setOpen] = useState<boolean>(false)
     const [user, setUser] = useState<User>()
-    const [assignment,setAssignment]= useState<Assignment>()
+    const [assignment, setAssignment] = useState<Assignment>()
 
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
@@ -83,12 +86,12 @@ export function ChooseGroup() {
     const assignmentId = params.assignmentId
 
     const handleClose = () => {
-        setOpen(false);
+        setOpen(false)
     }
 
-    useEffect(()=>{
+    useEffect(() => {
         setUserLoading(true)
-        setLoading(true);
+        setLoading(true)
         instance
             .get('/gebruikers/me/')
             .then((res) => {
@@ -99,24 +102,30 @@ export function ChooseGroup() {
             })
         setUserLoading(false)
         instance
-            .get('/projecten/'+assignmentId+'/')
+            .get('/projecten/' + assignmentId + '/')
             .then((res) => {
                 setAssignment(res.data)
             })
             .catch((err) => {
                 console.log(err)
             })
-        instance.get('projecten/'+assignmentId)
-            .then((res) =>{
-                instance.get('vakken/'+res.data.vak)
+        instance
+            .get('projecten/' + assignmentId)
+            .then((res) => {
+                instance
+                    .get('vakken/' + res.data.vak)
                     .then((res) => {
                         //setStudenten(res.data.studenten)
-                        for (let i=0;i<res.data.studenten.length;i++){
-                            const studentid=res.data.studenten[i]
-                            instance.get('gebruikers/'+studentid)
+                        for (let i = 0; i < res.data.studenten.length; i++) {
+                            const studentid = res.data.studenten[i]
+                            instance
+                                .get('gebruikers/' + studentid)
                                 .then((res) => {
                                     setStudenten((oldstudenten) => {
-                                        return {...oldstudenten,[res.data.user]: res.data}
+                                        return {
+                                            ...oldstudenten,
+                                            [res.data.user]: res.data,
+                                        }
                                     })
                                 })
                                 .catch((err) => {
@@ -132,12 +141,11 @@ export function ChooseGroup() {
                 console.log(err)
             })
 
-
-        instance.get('groepen/?project='+assignmentId)
+        instance
+            .get('groepen/?project=' + assignmentId)
             .then((res) => {
-                for (let i=0;i<res.data.length;i++){
-                    setGroups((oldGroups)=> {
-
+                for (let i = 0; i < res.data.length; i++) {
+                    setGroups((oldGroups) => {
                         let found = false
                         const id = res.data[i].groep_id
                         for (const group of oldGroups) {
@@ -148,19 +156,18 @@ export function ChooseGroup() {
                         if (found) {
                             return oldGroups
                         } else {
-                            return [...oldGroups,res.data[i]].sort((a,b) =>{
-                                return a.groep_id-b.groep_id
+                            return [...oldGroups, res.data[i]].sort((a, b) => {
+                                return a.groep_id - b.groep_id
                             })
                         }
                     })
-                }   
+                }
             })
             .catch((err) => {
                 console.log(err)
             })
-            setLoading(false)
-    },[])
-
+        setLoading(false)
+    }, [])
 
     return (
         <>
@@ -181,217 +188,520 @@ export function ChooseGroup() {
                 <>
                     {!user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-                <Stack direction={'column'}>
-                <Header variant={'not_main'} title={loading ? '' : `${assignment?.titel}: ${t('groups')}`} />
-                <Stack
-                    direction={'column'}
-                    spacing={1}
-                    marginTop={11}
-                    sx={{
-                        width: '100%',
-                        height: '70 %',
-                        backgroundColor: 'background.default',
-                    }}
-                >
-                    <Card
-                        elevation={1}
-                        sx={{
-                            color: 'text.primary',
-                            backgroundColor: 'background.default',
-                            borderRadius: 5,
-                            padding: '20px',
-                        }}
-                    >
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            justifyContent={'space-between'}
-                            pl={3}
-                            pr={3}
-                        >
-                            <Typography sx={{ fontWeight: 'bold' }}>
-                                {t('group_number')}
-                            </Typography>
-                            <Typography sx={{ fontWeight: 'bold' }}>
-                                {t('members')}
-                            </Typography>
-                            <Typography sx={{ fontWeight: 'bold' }}>
-
-                            </Typography>
-                        </Box>
-                    <List
-                        disablePadding={true}
-                        sx={{
-                            '& > :not(style)': {
-                                marginBottom: '8px',
-                            },
-                        }}
-                    >
-                        {groups.map((group: Group) => {
-                            //const group=getGroup(id)
-
-                            const handleJoin = () =>{
-                                setGroups((oldGroups) :Group[] =>{
-                                    if (user==undefined){
-                                        return oldGroups
-                                    }
-                                    if (assignment==undefined){
-                                        return oldGroups
-                                    }
-
-                                    let j=0
-
-                                    let edittedgroup=undefined
-
-                                    for (let i = 0; i < oldGroups.length; i++) {
-                                        if(oldGroups[i].studenten.includes(user.user)){
-                                            const newgroup1={
-                                                groep_id: oldGroups[i].groep_id,
-                                                project: oldGroups[i].project,
-                                                studenten: oldGroups[i].studenten.filter(student => student != user.user),
-                                            }
-
-                                            instance.patch("groepen/"+oldGroups[i].groep_id+"/",{studenten: oldGroups[i].studenten.filter(student => student != user.user)})
-                                                .catch((err) =>{
-                                                    console.log(err)
-                                                })
-                                            j=i
-                                            edittedgroup=newgroup1
-                                        }
-                                    }
-
-                                    for (let i = 0; i < oldGroups.length; i++) {
-                                        if(oldGroups[i].groep_id==group.groep_id){
-                                            if (group.studenten.length >= assignment.max_groep_grootte){
-                                                return oldGroups
-                                            }
-                                            const newgroup={
-                                                groep_id: group.groep_id,
-                                                project: group.project,
-                                                studenten: [...group.studenten,user.user],
-                                            }
-                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: [...group.studenten,user.user]})
-                                                .catch((err) =>{
-                                                    console.log(err)
-                                                })
-
-                                            if (edittedgroup!=undefined){
-                                                if(i<j){
-                                                    return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1,j),edittedgroup,...oldGroups.slice(j+1)].sort((a,b) =>{
-                                                        return a.groep_id-b.groep_id
-                                                    })
-                                                }
-                                                return [...oldGroups.slice(0,j),edittedgroup,...oldGroups.slice(j+1,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
-                                                    return a.groep_id-b.groep_id
-                                                })
-                                            }
-
-                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
-                                                return a.groep_id-b.groep_id
-                                            })
-                                        }
+                        <>
+                            <Stack direction={'column'}>
+                                <Header
+                                    variant={'not_main'}
+                                    title={
+                                        loading
+                                            ? ''
+                                            : `${assignment?.titel}: ${t('groups')}`
                                     }
-                                    return oldGroups
-                                })
-                            }
-
-                            const handleLeave = () =>{
-                                setGroups((oldGroups)=>{
-                                    if (user==undefined){
-                                        return oldGroups
-                                    }
-                                    for (let i = 0; i < oldGroups.length; i++) {
-                                        if(oldGroups[i].groep_id==group.groep_id){
-                                            const newgroup={
-                                                groep_id: group.groep_id,
-                                                project: group.project,
-                                                studenten: group.studenten.filter(student => student != user.user),
-                                            }
-                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: group.studenten.filter(student => student != user.user)})
-                                                .catch((err) =>{
-                                                    console.log(err)
-                                                })
-
-                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
-                                                return a.groep_id-b.groep_id
-                                            })
-                                        }
-                                    }
-                                    return oldGroups
-                                })
-                            }
-
-                            return (
-                                <>
-                                    <ListItem
+                                />
+                                <Stack
+                                    direction={'column'}
+                                    spacing={1}
+                                    marginTop={11}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70 %',
+                                        backgroundColor: 'background.default',
+                                    }}
+                                >
+                                    <Card
+                                        elevation={1}
                                         sx={{
-                                            width: '100%',
-                                            //minheight: 30,
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            justifyContent: 'space-between',
-                                            paddingX: 1,
-                                            paddingY: 3,
-                                            borderRadius: 2,
+                                            color: 'text.primary',
+                                            backgroundColor:
+                                                'background.default',
+                                            borderRadius: 5,
+                                            padding: '20px',
                                         }}
                                     >
-
-                                        <ListItemText
-                                            sx={{ maxWidth: 100 }}
-                                            primary={groups.indexOf(group)+1}
-                                        />
-
-                                        <Box display={'flex'} flexDirection={'column'}>
-                                            {loading ? (
-                                                <Typography>{t('members_loading')}</Typography>
-                                            ) : (
-                                                <>
-                                                    {group.studenten.length > 0 ? (
-                                                        group.studenten.map((studentid) => {
-                                                            const student = studenten[studentid];
-                                                            if (student) {
-                                                                console.log('Student:', student);
-                                                                return (
-                                                                    <Typography key={studentid}>
-                                                                        {student.first_name + " " + student.last_name}
-                                                                    </Typography>
-                                                                );
-                                                            }
-                                                            return null;
-                                                        })
-                                                    ) : (
-                                                        <Typography>{t('no_members_yet')}</Typography>
-                                                    )}
-                                                </>
-                                            )}
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            justifyContent={'space-between'}
+                                            pl={3}
+                                            pr={3}
+                                        >
+                                            <Typography
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('group_number')}
+                                            </Typography>
+                                            <Typography
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('members')}
+                                            </Typography>
+                                            <Typography
+                                                sx={{ fontWeight: 'bold' }}
+                                            ></Typography>
                                         </Box>
+                                        <List
+                                            disablePadding={true}
+                                            sx={{
+                                                '& > :not(style)': {
+                                                    marginBottom: '8px',
+                                                },
+                                            }}
+                                        >
+                                            {groups.map((group: Group) => {
+                                                //const group=getGroup(id)
+
+                                                const handleJoin = () => {
+                                                    setGroups(
+                                                        (
+                                                            oldGroups
+                                                        ): Group[] => {
+                                                            if (
+                                                                user ==
+                                                                undefined
+                                                            ) {
+                                                                return oldGroups
+                                                            }
+                                                            if (
+                                                                assignment ==
+                                                                undefined
+                                                            ) {
+                                                                return oldGroups
+                                                            }
 
-                                        {joinLeaveButton(user!=undefined ? group.studenten.includes(user.user):false,handleJoin,handleLeave)}
-
-                                    </ListItem>
-                                    <Divider color={'text.main'}></Divider>
-                                </>
-                            )
-                        })
-                        }
-                    </List>
+                                                            let j = 0
+
+                                                            let edittedgroup =
+                                                                undefined
+
+                                                            for (
+                                                                let i = 0;
+                                                                i <
+                                                                oldGroups.length;
+                                                                i++
+                                                            ) {
+                                                                if (
+                                                                    oldGroups[
+                                                                        i
+                                                                    ].studenten.includes(
+                                                                        user.user
+                                                                    )
+                                                                ) {
+                                                                    const newgroup1 =
+                                                                        {
+                                                                            groep_id:
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ]
+                                                                                    .groep_id,
+                                                                            project:
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ]
+                                                                                    .project,
+                                                                            studenten:
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ].studenten.filter(
+                                                                                    (
+                                                                                        student
+                                                                                    ) =>
+                                                                                        student !=
+                                                                                        user.user
+                                                                                ),
+                                                                        }
+
+                                                                    instance
+                                                                        .patch(
+                                                                            'groepen/' +
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ]
+                                                                                    .groep_id +
+                                                                                '/',
+                                                                            {
+                                                                                studenten:
+                                                                                    oldGroups[
+                                                                                        i
+                                                                                    ].studenten.filter(
+                                                                                        (
+                                                                                            student
+                                                                                        ) =>
+                                                                                            student !=
+                                                                                            user.user
+                                                                                    ),
+                                                                            }
+                                                                        )
+                                                                        .catch(
+                                                                            (
+                                                                                err
+                                                                            ) => {
+                                                                                console.log(
+                                                                                    err
+                                                                                )
+                                                                            }
+                                                                        )
+                                                                    j = i
+                                                                    edittedgroup =
+                                                                        newgroup1
+                                                                }
+                                                            }
 
-                        <Dialog onClose={handleClose} open={open}>
-                            <Box padding={2} alignItems={'center'} gap={1}>
-                                <Typography> {"placeholder"} </Typography>
-                            </Box>
-                        </Dialog>
+                                                            for (
+                                                                let i = 0;
+                                                                i <
+                                                                oldGroups.length;
+                                                                i++
+                                                            ) {
+                                                                if (
+                                                                    oldGroups[i]
+                                                                        .groep_id ==
+                                                                    group.groep_id
+                                                                ) {
+                                                                    if (
+                                                                        group
+                                                                            .studenten
+                                                                            .length >=
+                                                                        assignment.max_groep_grootte
+                                                                    ) {
+                                                                        return oldGroups
+                                                                    }
+                                                                    const newgroup =
+                                                                        {
+                                                                            groep_id:
+                                                                                group.groep_id,
+                                                                            project:
+                                                                                group.project,
+                                                                            studenten:
+                                                                                [
+                                                                                    ...group.studenten,
+                                                                                    user.user,
+                                                                                ],
+                                                                        }
+                                                                    instance
+                                                                        .patch(
+                                                                            'groepen/' +
+                                                                                group.groep_id +
+                                                                                '/',
+                                                                            {
+                                                                                studenten:
+                                                                                    [
+                                                                                        ...group.studenten,
+                                                                                        user.user,
+                                                                                    ],
+                                                                            }
+                                                                        )
+                                                                        .catch(
+                                                                            (
+                                                                                err
+                                                                            ) => {
+                                                                                console.log(
+                                                                                    err
+                                                                                )
+                                                                            }
+                                                                        )
+
+                                                                    if (
+                                                                        edittedgroup !=
+                                                                        undefined
+                                                                    ) {
+                                                                        if (
+                                                                            i <
+                                                                            j
+                                                                        ) {
+                                                                            return [
+                                                                                ...oldGroups.slice(
+                                                                                    0,
+                                                                                    i
+                                                                                ),
+                                                                                newgroup,
+                                                                                ...oldGroups.slice(
+                                                                                    i +
+                                                                                        1,
+                                                                                    j
+                                                                                ),
+                                                                                edittedgroup,
+                                                                                ...oldGroups.slice(
+                                                                                    j +
+                                                                                        1
+                                                                                ),
+                                                                            ].sort(
+                                                                                (
+                                                                                    a,
+                                                                                    b
+                                                                                ) => {
+                                                                                    return (
+                                                                                        a.groep_id -
+                                                                                        b.groep_id
+                                                                                    )
+                                                                                }
+                                                                            )
+                                                                        }
+                                                                        return [
+                                                                            ...oldGroups.slice(
+                                                                                0,
+                                                                                j
+                                                                            ),
+                                                                            edittedgroup,
+                                                                            ...oldGroups.slice(
+                                                                                j +
+                                                                                    1,
+                                                                                i
+                                                                            ),
+                                                                            newgroup,
+                                                                            ...oldGroups.slice(
+                                                                                i +
+                                                                                    1
+                                                                            ),
+                                                                        ].sort(
+                                                                            (
+                                                                                a,
+                                                                                b
+                                                                            ) => {
+                                                                                return (
+                                                                                    a.groep_id -
+                                                                                    b.groep_id
+                                                                                )
+                                                                            }
+                                                                        )
+                                                                    }
+
+                                                                    return [
+                                                                        ...oldGroups.slice(
+                                                                            0,
+                                                                            i
+                                                                        ),
+                                                                        newgroup,
+                                                                        ...oldGroups.slice(
+                                                                            i +
+                                                                                1
+                                                                        ),
+                                                                    ].sort(
+                                                                        (
+                                                                            a,
+                                                                            b
+                                                                        ) => {
+                                                                            return (
+                                                                                a.groep_id -
+                                                                                b.groep_id
+                                                                            )
+                                                                        }
+                                                                    )
+                                                                }
+                                                            }
+                                                            return oldGroups
+                                                        }
+                                                    )
+                                                }
 
+                                                const handleLeave = () => {
+                                                    setGroups((oldGroups) => {
+                                                        if (user == undefined) {
+                                                            return oldGroups
+                                                        }
+                                                        for (
+                                                            let i = 0;
+                                                            i <
+                                                            oldGroups.length;
+                                                            i++
+                                                        ) {
+                                                            if (
+                                                                oldGroups[i]
+                                                                    .groep_id ==
+                                                                group.groep_id
+                                                            ) {
+                                                                const newgroup =
+                                                                    {
+                                                                        groep_id:
+                                                                            group.groep_id,
+                                                                        project:
+                                                                            group.project,
+                                                                        studenten:
+                                                                            group.studenten.filter(
+                                                                                (
+                                                                                    student
+                                                                                ) =>
+                                                                                    student !=
+                                                                                    user.user
+                                                                            ),
+                                                                    }
+                                                                instance
+                                                                    .patch(
+                                                                        'groepen/' +
+                                                                            group.groep_id +
+                                                                            '/',
+                                                                        {
+                                                                            studenten:
+                                                                                group.studenten.filter(
+                                                                                    (
+                                                                                        student
+                                                                                    ) =>
+                                                                                        student !=
+                                                                                        user.user
+                                                                                ),
+                                                                        }
+                                                                    )
+                                                                    .catch(
+                                                                        (
+                                                                            err
+                                                                        ) => {
+                                                                            console.log(
+                                                                                err
+                                                                            )
+                                                                        }
+                                                                    )
+
+                                                                return [
+                                                                    ...oldGroups.slice(
+                                                                        0,
+                                                                        i
+                                                                    ),
+                                                                    newgroup,
+                                                                    ...oldGroups.slice(
+                                                                        i + 1
+                                                                    ),
+                                                                ].sort(
+                                                                    (a, b) => {
+                                                                        return (
+                                                                            a.groep_id -
+                                                                            b.groep_id
+                                                                        )
+                                                                    }
+                                                                )
+                                                            }
+                                                        }
+                                                        return oldGroups
+                                                    })
+                                                }
 
-                    </Card>
-                </Stack>
-            </Stack>
+                                                return (
+                                                    <>
+                                                        <ListItem
+                                                            sx={{
+                                                                width: '100%',
+                                                                //minheight: 30,
+                                                                display: 'flex',
+                                                                flexDirection:
+                                                                    'row',
+                                                                justifyContent:
+                                                                    'space-between',
+                                                                paddingX: 1,
+                                                                paddingY: 3,
+                                                                borderRadius: 2,
+                                                            }}
+                                                        >
+                                                            <ListItemText
+                                                                sx={{
+                                                                    maxWidth: 100,
+                                                                }}
+                                                                primary={
+                                                                    groups.indexOf(
+                                                                        group
+                                                                    ) + 1
+                                                                }
+                                                            />
+
+                                                            <Box
+                                                                display={'flex'}
+                                                                flexDirection={
+                                                                    'column'
+                                                                }
+                                                            >
+                                                                {loading ? (
+                                                                    <Typography>
+                                                                        {t(
+                                                                            'members_loading'
+                                                                        )}
+                                                                    </Typography>
+                                                                ) : (
+                                                                    <>
+                                                                        {group
+                                                                            .studenten
+                                                                            .length >
+                                                                        0 ? (
+                                                                            group.studenten.map(
+                                                                                (
+                                                                                    studentid
+                                                                                ) => {
+                                                                                    const student =
+                                                                                        studenten[
+                                                                                            studentid
+                                                                                        ]
+                                                                                    if (
+                                                                                        student
+                                                                                    ) {
+                                                                                        console.log(
+                                                                                            'Student:',
+                                                                                            student
+                                                                                        )
+                                                                                        return (
+                                                                                            <Typography
+                                                                                                key={
+                                                                                                    studentid
+                                                                                                }
+                                                                                            >
+                                                                                                {student.first_name +
+                                                                                                    ' ' +
+                                                                                                    student.last_name}
+                                                                                            </Typography>
+                                                                                        )
+                                                                                    }
+                                                                                    return null
+                                                                                }
+                                                                            )
+                                                                        ) : (
+                                                                            <Typography>
+                                                                                {t(
+                                                                                    'no_members_yet'
+                                                                                )}
+                                                                            </Typography>
+                                                                        )}
+                                                                    </>
+                                                                )}
+                                                            </Box>
+
+                                                            {joinLeaveButton(
+                                                                user !=
+                                                                    undefined
+                                                                    ? group.studenten.includes(
+                                                                          user.user
+                                                                      )
+                                                                    : false,
+                                                                handleJoin,
+                                                                handleLeave
+                                                            )}
+                                                        </ListItem>
+                                                        <Divider
+                                                            color={'text.main'}
+                                                        ></Divider>
+                                                    </>
+                                                )
+                                            })}
+                                        </List>
+
+                                        <Dialog
+                                            onClose={handleClose}
+                                            open={open}
+                                        >
+                                            <Box
+                                                padding={2}
+                                                alignItems={'center'}
+                                                gap={1}
+                                            >
+                                                <Typography>
+                                                    {' '}
+                                                    {'placeholder'}{' '}
+                                                </Typography>
+                                            </Box>
+                                        </Dialog>
+                                    </Card>
+                                </Stack>
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
\ No newline at end of file
+    )
+}
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index deee1d56..e265a651 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -136,7 +136,7 @@ export function GroupsPage() {
     const handleGroupSizeChange = (newValue: number) => {
         setNewGroupSize(newValue)
         setAvailableStudents(() => Array.from(studentNames.keys()))
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
         setCurrentGroup('0')
         setNewGroups(() => {
             const newGroups = []
@@ -191,8 +191,8 @@ export function GroupsPage() {
                                 newStudentNames.set(
                                     student,
                                     response.data.first_name +
-                                    ' ' +
-                                    response.data.last_name
+                                        ' ' +
+                                        response.data.last_name
                                 )
                             })
                             .catch((error) => {
@@ -206,12 +206,12 @@ export function GroupsPage() {
                                 newStudentNames.set(
                                     student,
                                     response.data.first_name +
-                                    ' ' +
-                                    response.data.last_name
+                                        ' ' +
+                                        response.data.last_name
                                 )
                                 console.log(
                                     'available names:' +
-                                    Array.from(newStudentNames.entries())
+                                        Array.from(newStudentNames.entries())
                                 )
                             })
                     }
@@ -286,14 +286,14 @@ export function GroupsPage() {
                     )
             )
         )
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
     }, [newGroups, studentNames])
 
     // Create new groups when the group size changes
     useEffect(() => {
         if (newGroups.length === 0) {
             setAvailableStudents(() => Array.from(studentNames.keys()))
-            setFilteredStudents(availableStudents);
+            setFilteredStudents(availableStudents)
             setCurrentGroup('0')
             setNewGroups(() => {
                 const newGroups = []
@@ -351,7 +351,7 @@ export function GroupsPage() {
             (student) => student !== studentId
         )
         setAvailableStudents(updatedAvailableStudents)
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
         // Then, create a new copy of the newGroups array with the updated group
         const updatedNewGroups = newGroups.map((group, index) => {
             if (index === groupId) {
@@ -392,26 +392,26 @@ export function GroupsPage() {
         setNewGroups(updatedNewGroups)
     }
 
-    const [filteredStudents, setFilteredStudents] = useState(availableStudents);
+    const [filteredStudents, setFilteredStudents] = useState(availableStudents)
 
     // for filtering students
     const handleAutocompleteChange = (_, value) => {
-        if(value){
+        if (value) {
             setFilteredStudents([value])
         }
-    };
+    }
 
     const resetAutocompleteChange = () => {
-        setFilteredStudents(availableStudents);
+        setFilteredStudents(availableStudents)
     }
 
-    const filterOptions = (_,{ inputValue }) => {
+    const filterOptions = (_, { inputValue }) => {
         const filtered = availableStudents.filter((option) => {
-            const label = studentNames.get(option);
-            return label?.toLowerCase().startsWith(inputValue.toLowerCase());
-        });
-        return filtered;
-    };
+            const label = studentNames.get(option)
+            return label?.toLowerCase().startsWith(inputValue.toLowerCase())
+        })
+        return filtered
+    }
     return (
         <>
             <Box
@@ -605,33 +605,34 @@ export function GroupsPage() {
                                                             width={80}
                                                             height={80}
                                                         />
-                                                    ) : (<Select
-                                                        aria-label={
-                                                            'groupSelect'
-                                                        }
-                                                        value={currentGroup}
-                                                        sx={{ width: 120 }}
-                                                        onChange={
-                                                            handleCurrentGroupChange
-                                                        }
-                                                        label={t('group')}
-                                                    >
-                                                        {newGroups.map(
-                                                            (_, index) => (
-                                                                <MenuItem
-                                                                    key={index.toString()}
-                                                                    value={index.toString()}
-                                                                >
-                                                                    {t(
+                                                    ) : (
+                                                        <Select
+                                                            aria-label={
+                                                                'groupSelect'
+                                                            }
+                                                            value={currentGroup}
+                                                            sx={{ width: 120 }}
+                                                            onChange={
+                                                                handleCurrentGroupChange
+                                                            }
+                                                            label={t('group')}
+                                                        >
+                                                            {newGroups.map(
+                                                                (_, index) => (
+                                                                    <MenuItem
+                                                                        key={index.toString()}
+                                                                        value={index.toString()}
+                                                                    >
+                                                                        {t(
                                                                             'group'
                                                                         ) +
-                                                                        (index +
-                                                                            1)}
-                                                                </MenuItem>
-                                                            )
-                                                        )}
-                                                    </Select>)
-                                                    }
+                                                                            (index +
+                                                                                1)}
+                                                                    </MenuItem>
+                                                                )
+                                                            )}
+                                                        </Select>
+                                                    )}
                                                 </Grid>
                                             </Grid>
                                         </Stack>
@@ -662,15 +663,15 @@ export function GroupsPage() {
                                                 ) : (
                                                     <>
                                                         {newGroups[
-                                                                parseInt(
-                                                                    currentGroup
-                                                                )
-                                                                ] &&
+                                                            parseInt(
+                                                                currentGroup
+                                                            )
+                                                        ] &&
                                                             newGroups[
                                                                 parseInt(
                                                                     currentGroup
                                                                 )
-                                                                ].studenten.map(
+                                                            ].studenten.map(
                                                                 (student) => (
                                                                     <TableRow
                                                                         key={
@@ -721,21 +722,22 @@ export function GroupsPage() {
                                         padding={'17px'}
                                     >
                                         <Stack direction={'row'}>
-                                            <Grid
-                                                container
-                                                alignItems="center"
-                                            >
+                                            <Grid container alignItems="center">
                                                 <Grid>
                                                     <Typography
                                                         variant="h5"
-                                                        sx={{ fontWeight: 'bold' }}
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                        }}
                                                     >
                                                         {t('studenten')}
                                                     </Typography>
                                                 </Grid>
                                                 <Box paddingLeft={1}></Box>
                                                 <Grid>
-                                                    <Box sx={{ width: '200px' }}>
+                                                    <Box
+                                                        sx={{ width: '200px' }}
+                                                    >
                                                         {loading ? (
                                                             <Skeleton
                                                                 variant={'text'}
@@ -744,12 +746,31 @@ export function GroupsPage() {
                                                             />
                                                         ) : (
                                                             <Autocomplete
-                                                                options={availableStudents}
-                                                                getOptionLabel={(student) => studentNames.get(student)}
-                                                                onChange={handleAutocompleteChange}
-                                                                filterOptions={filterOptions}
-                                                                renderInput={(student) => <TextField {...student} />}
-                                                            />)}
+                                                                options={
+                                                                    availableStudents
+                                                                }
+                                                                getOptionLabel={(
+                                                                    student
+                                                                ) =>
+                                                                    studentNames.get(
+                                                                        student
+                                                                    )
+                                                                }
+                                                                onChange={
+                                                                    handleAutocompleteChange
+                                                                }
+                                                                filterOptions={
+                                                                    filterOptions
+                                                                }
+                                                                renderInput={(
+                                                                    student
+                                                                ) => (
+                                                                    <TextField
+                                                                        {...student}
+                                                                    />
+                                                                )}
+                                                            />
+                                                        )}
                                                     </Box>
                                                 </Grid>
                                             </Grid>
@@ -757,9 +778,9 @@ export function GroupsPage() {
                                     </Box>
                                     <TableContainer sx={{ maxHeight: '55vh' }}>
                                         <Table
-                                            // The teacher can see the available students
-                                            // on the left side of the screen.
-                                            // They are displayed in a table with a sticky header.aria-label={'studentTable'}
+                                        // The teacher can see the available students
+                                        // on the left side of the screen.
+                                        // They are displayed in a table with a sticky header.aria-label={'studentTable'}
                                         >
                                             <TableBody>
                                                 {loading ? (
@@ -784,7 +805,9 @@ export function GroupsPage() {
                                                             {chunkArray(
                                                                 filteredStudents,
                                                                 Math.ceil(
-                                                                        Math.sqrt(filteredStudents.length)
+                                                                    Math.sqrt(
+                                                                        filteredStudents.length
+                                                                    )
                                                                 )
                                                             ).map(
                                                                 (students) => (
@@ -817,23 +840,23 @@ export function GroupsPage() {
                                                                                         ''
                                                                                             ? student
                                                                                             : studentNames.get(
-                                                                                                student
-                                                                                            )}
+                                                                                                  student
+                                                                                              )}
                                                                                         <IconButton // people can be added to groups by clicking on the plus icon
                                                                                             disabled={
                                                                                                 newGroups[
                                                                                                     parseInt(
                                                                                                         currentGroup
                                                                                                     )
-                                                                                                    ]
+                                                                                                ]
                                                                                                     ? newGroups[
-                                                                                                        parseInt(
-                                                                                                            currentGroup
-                                                                                                        )
-                                                                                                        ]
-                                                                                                        .studenten
-                                                                                                        .length >=
-                                                                                                    newGroupSize
+                                                                                                          parseInt(
+                                                                                                              currentGroup
+                                                                                                          )
+                                                                                                      ]
+                                                                                                          .studenten
+                                                                                                          .length >=
+                                                                                                      newGroupSize
                                                                                                     : true
                                                                                             }
                                                                                             onClick={() => {
@@ -941,9 +964,9 @@ export function GroupsPage() {
 }
 
 function chunkArray<T>(arr: T[], chunkSize: number): T[][] {
-    let result: T[][] = []
+    const result: T[][] = []
     for (let i = 0; i < arr.length; i += chunkSize) {
-        let chunk: T[] = arr.slice(i, i + chunkSize)
+        const chunk: T[] = arr.slice(i, i + chunkSize)
         result.push(chunk)
     }
     return result
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index 09ae0368..c82b8b9d 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -167,38 +167,41 @@ export function ProjectScoresPage() {
         groepen
             .filter((groep) => groep.lastSubmission !== undefined)
             .map((groep) => groep.lastSubmission)
-            .forEach(submission => {
+            .forEach((submission) => {
                 downloadPromises.push(
                     new Promise(async (resolve, reject) => {
                         try {
                             // Get the submission details
                             const submissionResponse = await instance.get(
                                 `/indieningen/${submission?.indiening_id}/`
-                            );
-                            const newSubmission = submissionResponse.data;
+                            )
+                            const newSubmission = submissionResponse.data
                             // Get the submission file
                             const fileResponse = await instance.get(
                                 `/indieningen/${submission?.indiening_id}/indiening_bestand/`,
                                 { responseType: 'blob' }
-                            );
-                            let filename = 'indiening.zip';
+                            )
+                            let filename = 'indiening.zip'
                             if (newSubmission.bestand) {
-                                filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                                filename = newSubmission.bestand.replace(
+                                    /^.*[\\/]/,
+                                    ''
+                                )
                             }
                             const blob = new Blob([fileResponse.data], {
                                 type: fileResponse.headers['content-type'],
-                            });
+                            })
                             const file = new File([blob], filename, {
                                 type: fileResponse.headers['content-type'],
-                            });
-                            newSubmission.bestand = file;
-                            newSubmission.filename = filename;
+                            })
+                            newSubmission.bestand = file
+                            newSubmission.filename = filename
                             // Add the file to the zip
-                            zip.file(filename, fileResponse.data);
-                            resolve(newSubmission);
+                            zip.file(filename, fileResponse.data)
+                            resolve(newSubmission)
                         } catch (err) {
-                            console.error(`Error downloading submission:`, err);
-                            reject(err);
+                            console.error(`Error downloading submission:`, err)
+                            reject(err)
                         }
                     })
                 )
@@ -210,7 +213,8 @@ export function ProjectScoresPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions_' + project?.titel +'_.zip'
+                        a.download =
+                            'all_submissions_' + project?.titel + '_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
@@ -299,149 +303,168 @@ export function ProjectScoresPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            <Stack
-                direction={'column'}
-                spacing={0}
-                sx={{
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: 'background.default',
-                }}
-            >
-                <Header
-                    variant={'default'}
-                    title={loading ? '' : project?.titel + ': Scores'}
-                />
-                {/* Main content box */}
-
-                <Card
-                    sx={{
-                        marginTop: 12,
-                    }}
-                >
-                    {/* Render StudentsView component if project is defined */}
-                    {loading ? (
-                        <Box
-                            display={'flex'}
-                            justifyContent={'center'}
-                            flexGrow={1}
-                        >
-                            <CircularProgress color={'primary'} />
-                        </Box>
-                    ) : (
                         <>
-                            {project && (
-                                <StudentsView
-                                    project={project}
-                                    groepen={groepen}
-                                    setGroepen={setGroepen}
-                                    changeScore={changeScore}
+                            <Stack
+                                direction={'column'}
+                                spacing={0}
+                                sx={{
+                                    width: '100%',
+                                    height: '100%',
+                                    backgroundColor: 'background.default',
+                                }}
+                            >
+                                <Header
+                                    variant={'default'}
+                                    title={
+                                        loading
+                                            ? ''
+                                            : project?.titel + ': Scores'
+                                    }
                                 />
-                            )}
-                        </>
-                    )}
-                </Card>
-                {/* Footer section with action buttons */}
-                <Box
-                    display="flex"
-                    flexDirection="row"
-                    sx={{
-                        marginTop: -4,
-                    }}
-                >
-                    <Box
-                        display="flex"
-                        flexDirection="row"
-                        padding={'3px'}
-                        sx={{ width: '50%', height: 'auto' }}
-                    >
-                        <Stack
-                            direction="row"
-                            alignItems="center"
-                            spacing={2}
-                            marginY={6}
-                        >
-                            <Button onClick={exportSubmissions}>
-                                {t('export_submissions')}
-                            </Button>
+                                {/* Main content box */}
 
-                            <Button variant={'contained'}>
-                                {t('upload_scores')}
-                                <VisuallyHiddenInput
-                                    type="file"
-                                    value={undefined}
-                                    accept={['.csv'].join(',')}
-                                    multiple={false}
-                                    onChange={uploadScores}
-                                />
-                            </Button>
-                        </Stack>
-                    </Box>
-                    <Box
-                        display="flex"
-                        flexDirection="row-reverse"
-                        padding={'3px'}
-                        sx={{ width: '50%', height: 'auto' }}
-                    >
-                        {loading ? (
-                            <Skeleton
-                                variant="rectangular"
-                                width={40}
-                                height={40}
-                            />
-                        ) : (
-                            <>
-                                <IconButton
-                                    onClick={() => setOpenSaveScoresPopup(true)}
+                                <Card
                                     sx={{
-                                        color: 'background.default',
-                                        '&:hover': {
-                                            color: 'text.primary',
-                                        },
-                                        backgroundColor: 'primary.main',
-                                        borderRadius: 2,
+                                        marginTop: 12,
                                     }}
                                 >
-                                    <SaveIcon />
-                                </IconButton>
-                            </>
-                        )}
-                        <IconButton
-                            onClick={() => setOpenDeleteScoresPopup(true)}
-                            sx={{
-                                backgroundColor: 'secondary.main',
-                                borderRadius: 2,
-                            }}
-                        >
-                            <CloseIcon />
-                        </IconButton>
-                    </Box>
-                </Box>
-                {/* Popup for confirming saving scores */}
-                <WarningPopup
-                    title={t('edit_scores_warning')}
-                    content={t('visible_for_everyone')}
-                    buttonName={t('confirm')}
-                    open={openSaveScoresPopup}
-                    handleClose={() => setOpenSaveScoresPopup(false)}
-                    doAction={saveScores}
-                />
-                {/* Popup for confirming deletion of scores */}
-                <WarningPopup
-                    title={t('undo_changes_warning')}
-                    content={t('cant_be_undone')}
-                    buttonName={t('confirm')}
-                    open={openDeleteScoresPopup}
-                    handleClose={() => setOpenDeleteScoresPopup(false)}
-                    doAction={deleteScores}
-                />
-            </Stack>
+                                    {/* Render StudentsView component if project is defined */}
+                                    {loading ? (
+                                        <Box
+                                            display={'flex'}
+                                            justifyContent={'center'}
+                                            flexGrow={1}
+                                        >
+                                            <CircularProgress
+                                                color={'primary'}
+                                            />
+                                        </Box>
+                                    ) : (
+                                        <>
+                                            {project && (
+                                                <StudentsView
+                                                    project={project}
+                                                    groepen={groepen}
+                                                    setGroepen={setGroepen}
+                                                    changeScore={changeScore}
+                                                />
+                                            )}
+                                        </>
+                                    )}
+                                </Card>
+                                {/* Footer section with action buttons */}
+                                <Box
+                                    display="flex"
+                                    flexDirection="row"
+                                    sx={{
+                                        marginTop: -4,
+                                    }}
+                                >
+                                    <Box
+                                        display="flex"
+                                        flexDirection="row"
+                                        padding={'3px'}
+                                        sx={{ width: '50%', height: 'auto' }}
+                                    >
+                                        <Stack
+                                            direction="row"
+                                            alignItems="center"
+                                            spacing={2}
+                                            marginY={6}
+                                        >
+                                            <Button onClick={exportSubmissions}>
+                                                {t('export_submissions')}
+                                            </Button>
+
+                                            <Button variant={'contained'}>
+                                                {t('upload_scores')}
+                                                <VisuallyHiddenInput
+                                                    type="file"
+                                                    value={undefined}
+                                                    accept={['.csv'].join(',')}
+                                                    multiple={false}
+                                                    onChange={uploadScores}
+                                                />
+                                            </Button>
+                                        </Stack>
+                                    </Box>
+                                    <Box
+                                        display="flex"
+                                        flexDirection="row-reverse"
+                                        padding={'3px'}
+                                        sx={{ width: '50%', height: 'auto' }}
+                                    >
+                                        {loading ? (
+                                            <Skeleton
+                                                variant="rectangular"
+                                                width={40}
+                                                height={40}
+                                            />
+                                        ) : (
+                                            <>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        setOpenSaveScoresPopup(
+                                                            true
+                                                        )
+                                                    }
+                                                    sx={{
+                                                        color: 'background.default',
+                                                        '&:hover': {
+                                                            color: 'text.primary',
+                                                        },
+                                                        backgroundColor:
+                                                            'primary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                >
+                                                    <SaveIcon />
+                                                </IconButton>
+                                            </>
+                                        )}
+                                        <IconButton
+                                            onClick={() =>
+                                                setOpenDeleteScoresPopup(true)
+                                            }
+                                            sx={{
+                                                backgroundColor:
+                                                    'secondary.main',
+                                                borderRadius: 2,
+                                            }}
+                                        >
+                                            <CloseIcon />
+                                        </IconButton>
+                                    </Box>
+                                </Box>
+                                {/* Popup for confirming saving scores */}
+                                <WarningPopup
+                                    title={t('edit_scores_warning')}
+                                    content={t('visible_for_everyone')}
+                                    buttonName={t('confirm')}
+                                    open={openSaveScoresPopup}
+                                    handleClose={() =>
+                                        setOpenSaveScoresPopup(false)
+                                    }
+                                    doAction={saveScores}
+                                />
+                                {/* Popup for confirming deletion of scores */}
+                                <WarningPopup
+                                    title={t('undo_changes_warning')}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('confirm')}
+                                    open={openDeleteScoresPopup}
+                                    handleClose={() =>
+                                        setOpenDeleteScoresPopup(false)
+                                    }
+                                    doAction={deleteScores}
+                                />
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
index 7805f909..0a6ac60a 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
@@ -65,22 +65,22 @@ export function StudentScoreListItem({
             // Get the submission details
             const submissionResponse = await instance.get(
                 `/indieningen/${lastSubmission?.indiening_id}/`
-            );
-            const newSubmission = submissionResponse.data;
+            )
+            const newSubmission = submissionResponse.data
             // Get the submission file
             const fileResponse = await instance.get(
                 `/indieningen/${lastSubmission?.indiening_id}/indiening_bestand/`,
                 { responseType: 'blob' }
-            );
+            )
             if (newSubmission.bestand) {
-                filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                filename = newSubmission.bestand.replace(/^.*[\\/]/, '')
             }
             const blob = new Blob([fileResponse.data], {
                 type: fileResponse.headers['content-type'],
-            });
+            })
             const file = new File([blob], filename, {
                 type: fileResponse.headers['content-type'],
-            });
+            })
             const url = window.URL.createObjectURL(file)
             const a = document.createElement('a')
             a.href = url
@@ -155,24 +155,24 @@ export function StudentScoreListItem({
                             )}
                         </ListItem>
                         {/* Display download icon */}
-                    <ListItemText sx={{ maxWidth: 35 }}>
-                        <ListItemIcon>
-                            <div onClick={downloadSubmission}>
-                                {lastSubmission ? (
-                                    <DownloadIcon
-                                        sx={{
-                                            color: 'primary.main',
-                                            '&:hover': {
-                                                color: 'primary.light',
-                                            },
-                                        }}
-                                    />
-                                ) : (
-                                    <DownloadIcon sx={{ color: 'gray' }} />
-                                )}
-                            </div>
-                        </ListItemIcon>
-                    </ListItemText>
+                        <ListItemText sx={{ maxWidth: 35 }}>
+                            <ListItemIcon>
+                                <div onClick={downloadSubmission}>
+                                    {lastSubmission ? (
+                                        <DownloadIcon
+                                            sx={{
+                                                color: 'primary.main',
+                                                '&:hover': {
+                                                    color: 'primary.light',
+                                                },
+                                            }}
+                                        />
+                                    ) : (
+                                        <DownloadIcon sx={{ color: 'gray' }} />
+                                    )}
+                                </div>
+                            </ListItemIcon>
+                        </ListItemText>
                     </>
                 </ListItem>
             </ListItem>
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 7868a6fc..946cccde 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -9,7 +9,7 @@ import {
     Stack,
     TextField,
     Typography,
-    CircularProgress
+    CircularProgress,
 } from '@mui/material'
 import { Header } from '../../components/Header'
 import { Button } from '../../components/CustomComponents.tsx'
@@ -572,157 +572,176 @@ export function AddChangeSubjectPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            <Stack direction={'column'}>
-                <Header variant={loading ? 'default' : 'not_main'} title={loading ? '' : title} />
-                <Stack
-                    direction={'column'}
-                    spacing={5}
-                    marginTop={11}
-                    sx={{
-                        width: '100%',
-                        height: '70%',
-                        backgroundColor: 'background.default',
-                    }}
-                >
-                    <Box
-                        sx={{
-                            backgroundColor: 'background.default',
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }}
-                    >
-                        <Box
-                            // This box contains the title of the subject.
-                            // This title can be changed if necessary.
-                            aria-label={'title'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('subject_name') + ':'}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
+                        <>
+                            <Stack direction={'column'}>
+                                <Header
+                                    variant={loading ? 'default' : 'not_main'}
+                                    title={loading ? '' : title}
                                 />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={t('title')}
-                                    onChange={(event) =>
-                                        setTitle(event.target.value)
-                                    }
-                                    sx={{ height: 60 }}
-                                />
-                            )}
-                        </Box>
-                        <Box padding={'20px'}>
-                            <Button
-                                /* This is the large save button on the top of the page */
-                                onClick={handleSave}
-                            >
-                                {t('save')}
-                            </Button>
-                        </Box>
-                    </Box>
-                    <Card>
-                        <Box bgcolor={'primary.light'} padding={'20px'}>
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                            >
-                                {t('students')}
-                            </Typography>
-                        </Box>
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            alignItems={'center'}
-                            gap={1}
-                            style={{ maxHeight: 300, overflow: 'auto' }}
-                        >
-                            {UserList(
-                                loading,
-                                students,
-                                setSelectedStudent,
-                                setOpenStudent
-                            )}
-                        </Box>
-                    </Card>
-                    <Box marginTop={-30}>
-                        {UploadPart(
-                            studentFile,
-                            handleStudentFileChange,
-                            setEmailStudent,
-                            handleAddStudent,
-                            t('upload_students')
-                        )}
-                    </Box>
-
-                    {DialogWindow(
-                        handleCloseStudent,
-                        openStudent,
-                        handleRemoveStudent,
-                        t('delete_student')
-                    )}
-
-                    <Card>
-                        <Box bgcolor={'primary.light'} padding={'20px'}>
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                            >
-                                {t('teachers')}
-                            </Typography>
-                        </Box>
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            alignItems={'center'}
-                            style={{ maxHeight: 300, overflow: 'auto' }}
-                        >
-                            {UserList(
-                                loading,
-                                teachers,
-                                setSelectedTeacher,
-                                setOpenTeacher
-                            )}
-                        </Box>
-                    </Card>
-                    <Box marginTop={1}>
-                        {UploadPart(
-                            teacherFile,
-                            handleTeacherFileChange,
-                            setEmailTeacher,
-                            handleAddTeacher,
-                            t('upload_teachers')
-                        )}
-                    </Box>
-
-                    {DialogWindow(
-                        handleCloseTeacher,
-                        openTeacher,
-                        handleRemoveTeacher,
-                        t('delete_teacher')
+                                <Stack
+                                    direction={'column'}
+                                    spacing={5}
+                                    marginTop={11}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70%',
+                                        backgroundColor: 'background.default',
+                                    }}
+                                >
+                                    <Box
+                                        sx={{
+                                            backgroundColor:
+                                                'background.default',
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        <Box
+                                            // This box contains the title of the subject.
+                                            // This title can be changed if necessary.
+                                            aria-label={'title'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('subject_name') + ':'}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={t('title')}
+                                                    onChange={(event) =>
+                                                        setTitle(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                    sx={{ height: 60 }}
+                                                />
+                                            )}
+                                        </Box>
+                                        <Box padding={'20px'}>
+                                            <Button
+                                                /* This is the large save button on the top of the page */
+                                                onClick={handleSave}
+                                            >
+                                                {t('save')}
+                                            </Button>
+                                        </Box>
+                                    </Box>
+                                    <Card>
+                                        <Box
+                                            bgcolor={'primary.light'}
+                                            padding={'20px'}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('students')}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            alignItems={'center'}
+                                            gap={1}
+                                            style={{
+                                                maxHeight: 300,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            {UserList(
+                                                loading,
+                                                students,
+                                                setSelectedStudent,
+                                                setOpenStudent
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    <Box marginTop={-30}>
+                                        {UploadPart(
+                                            studentFile,
+                                            handleStudentFileChange,
+                                            setEmailStudent,
+                                            handleAddStudent,
+                                            t('upload_students')
+                                        )}
+                                    </Box>
+
+                                    {DialogWindow(
+                                        handleCloseStudent,
+                                        openStudent,
+                                        handleRemoveStudent,
+                                        t('delete_student')
+                                    )}
+
+                                    <Card>
+                                        <Box
+                                            bgcolor={'primary.light'}
+                                            padding={'20px'}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('teachers')}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            alignItems={'center'}
+                                            style={{
+                                                maxHeight: 300,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            {UserList(
+                                                loading,
+                                                teachers,
+                                                setSelectedTeacher,
+                                                setOpenTeacher
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    <Box marginTop={1}>
+                                        {UploadPart(
+                                            teacherFile,
+                                            handleTeacherFileChange,
+                                            setEmailTeacher,
+                                            handleAddTeacher,
+                                            t('upload_teachers')
+                                        )}
+                                    </Box>
+
+                                    {DialogWindow(
+                                        handleCloseTeacher,
+                                        openTeacher,
+                                        handleRemoveTeacher,
+                                        t('delete_teacher')
+                                    )}
+                                </Stack>
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
                     )}
-                </Stack>
-            </Stack>
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 59e3112d..516eda48 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -13,7 +13,7 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import React, { useState } from 'react'
 import dayjs, { Dayjs } from 'dayjs'
 import { Score } from '../../components/SubmissionListItemTeacherPage.tsx'
-import {EvenlySpacedRow} from "../../components/CustomComponents.tsx";
+import { EvenlySpacedRow } from '../../components/CustomComponents.tsx'
 
 /**
  * This component is used to display a single assignment in the list of assignments.
@@ -72,77 +72,82 @@ export function AssignmentListItemSubjectsPage({
 
     return (
         <>
-            <ListItem key={projectName}  disablePadding sx={{ maxHeight: '30px'}}
+            <ListItem
+                key={projectName}
+                disablePadding
+                sx={{ maxHeight: '30px' }}
             >
                 <ListItemButton
-                    sx={{maxHeight: '30px'}}
-                    onClick={handleProjectClick}>
+                    sx={{ maxHeight: '30px' }}
+                    onClick={handleProjectClick}
+                >
                     {isStudent ? (
-                        <EvenlySpacedRow items={[
-                            <ListItemText
-                                primary={projectName}
-                            />,
-                            <ListItemText
-                                primary={
-                                    dueDate
-                                        ? dayjs(dueDate).format(
-                                              'DD/MM/YYYY HH:mm'
-                                          )
-                                        : t('no_deadline')
-                                }
-                            />,
-                            <ListItemText
-                                primary={
-                                    submissions > 0
-                                        ? submissions > 1
-                                            ? submissions +
-                                              ' ' +
-                                              t('submissions')
-                                            : submissions +
-                                              ' ' +
-                                              t('submission')
-                                        : t('no_submissions')
-                                }
-                            />,
-                            <>
-                            {submissions > 0 ? (
+                        <EvenlySpacedRow
+                            items={[
+                                <ListItemText primary={projectName} />,
                                 <ListItemText
                                     primary={
-                                        score
-                                            ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)`
-                                            : t('no_score_yet')
+                                        dueDate
+                                            ? dayjs(dueDate).format(
+                                                  'DD/MM/YYYY HH:mm'
+                                              )
+                                            : t('no_deadline')
                                     }
-                                />
-                            ) : (
+                                />,
                                 <ListItemText
-                                    primary={`0/${maxScore} (0%)`}
-                                />
-                            )}
-                            </>
-                            ]}/>
+                                    primary={
+                                        submissions > 0
+                                            ? submissions > 1
+                                                ? submissions +
+                                                  ' ' +
+                                                  t('submissions')
+                                                : submissions +
+                                                  ' ' +
+                                                  t('submission')
+                                            : t('no_submissions')
+                                    }
+                                />,
+                                <>
+                                    {submissions > 0 ? (
+                                        <ListItemText
+                                            primary={
+                                                score
+                                                    ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)`
+                                                    : t('no_score_yet')
+                                            }
+                                        />
+                                    ) : (
+                                        <ListItemText
+                                            primary={`0/${maxScore} (0%)`}
+                                        />
+                                    )}
+                                </>,
+                            ]}
+                        />
                     ) : (
                         <>
                             {/* In case of the user being the teacher: */}
-                            <EvenlySpacedRow items={[
-                            <ListItemText
-                                primary={projectName}
-                            />,
-                            <ListItemText
-                                primary={
-                                    dueDate
-                                        ? dayjs(dueDate).format(
-                                              'DD/MM/YYYY HH:mm'
-                                          )
-                                        : t('no_deadline')
-                                }
-                            />,
-                            <ButtonActions
-                                archived={archived}
-                                startVisible={visible}
-                                deleteEvent={deleteEvent}
-                                archiveEvent={archiveEvent}
-                                visibilityEvent={visibilityEvent}
-                            />]}/>
+                            <EvenlySpacedRow
+                                items={[
+                                    <ListItemText primary={projectName} />,
+                                    <ListItemText
+                                        primary={
+                                            dueDate
+                                                ? dayjs(dueDate).format(
+                                                      'DD/MM/YYYY HH:mm'
+                                                  )
+                                                : t('no_deadline')
+                                        }
+                                    />,
+                                    <ButtonActions
+                                        archived={archived}
+                                        startVisible={visible}
+                                        deleteEvent={deleteEvent}
+                                        archiveEvent={archiveEvent}
+                                        visibilityEvent={visibilityEvent}
+                                    />,
+                                ]}
+                            />
                         </>
                     )}
                 </ListItemButton>
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index 09f1e01c..0e7a64e4 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -1,4 +1,8 @@
-import {Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import {
+    Card,
+    Divider,
+    EvenlySpacedRow,
+} from '../../components/CustomComponents.tsx'
 import { Box, Skeleton, Typography } from '@mui/material'
 import List from '@mui/material/List'
 import { t } from 'i18next'
@@ -151,56 +155,81 @@ export function ProjectsView({
     return (
         <>
             <Card>
-            <Box
-                aria-label={'courseHeader'}
-                sx={{
-                    backgroundColor: 'secondary.main',
-                    height: 20,
-                    padding: 3,
-                }}
-            >
-                {!gebruiker.is_lesgever ? (
-                    <>
-                        {/* Show the UI from the perspective of a student. */}
-                        <EvenlySpacedRow items={[
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Project
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Deadline
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            {t('submissions')}
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Score
-                        </Typography>
-                            ]}/>
-                    </>
-                ) : (
-                    <>
-                        {/* Show the UI from the perspective of a teacher. */}
-                        <EvenlySpacedRow items={[
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Project
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Deadline
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            {t('edit')}
-                        </Typography>]}
-                        />
-                    </>
-                )}
-            </Box>
-            <Box
-                aria-label={'assignmentList'}
-                sx={{
-                    backgroundColor: 'background.default',
-                    height: 340,
-                }}
-            >
+                <Box
+                    aria-label={'courseHeader'}
+                    sx={{
+                        backgroundColor: 'secondary.main',
+                        height: 20,
+                        padding: 3,
+                    }}
+                >
+                    {!gebruiker.is_lesgever ? (
+                        <>
+                            {/* Show the UI from the perspective of a student. */}
+                            <EvenlySpacedRow
+                                items={[
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Project
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Deadline
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        {t('submissions')}
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Score
+                                    </Typography>,
+                                ]}
+                            />
+                        </>
+                    ) : (
+                        <>
+                            {/* Show the UI from the perspective of a teacher. */}
+                            <EvenlySpacedRow
+                                items={[
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Project
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Deadline
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        {t('edit')}
+                                    </Typography>,
+                                ]}
+                            />
+                        </>
+                    )}
+                </Box>
+                <Box
+                    aria-label={'assignmentList'}
+                    sx={{
+                        backgroundColor: 'background.default',
+                        height: 340,
+                    }}
+                >
                     <Box sx={{ width: '100%', height: 320, overflow: 'auto' }}>
                         {/* The list below will display the projects with their information */}
                         <List disablePadding>
@@ -233,7 +262,7 @@ export function ProjectsView({
                                         )
                                         .map((project) => (
                                             <>
-                                                <Divider/>
+                                                <Divider />
                                                 <AssignmentListItemSubjectsPage
                                                     key={
                                                         project.assignment
diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
index 6f7d73ee..cc728f50 100644
--- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
@@ -1,7 +1,13 @@
 import { User } from './AddChangeSubjectPage'
 import * as React from 'react'
-import { IconButton, List, ListItem, ListItemText, Typography } from '@mui/material'
-import {Button, SecondaryButton} from '../../components/CustomComponents'
+import {
+    IconButton,
+    List,
+    ListItem,
+    ListItemText,
+    Typography,
+} from '@mui/material'
+import { SecondaryButton } from '../../components/CustomComponents'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import CloseIcon from '@mui/icons-material/Close'
@@ -55,17 +61,19 @@ export default function StudentPopUp({ students, text }: StudentPopUpProps) {
                 <DialogContent dividers>
                     {/* List of Students */}
                     {students.length > 0 ? (
-                    <List>
-                        {students.map((student) => (
-                            <ListItem key={student.user}>
-                                <ListItemText
-                                    primary={`${student.first_name} ${student.last_name}`}
-                                />
-                            </ListItem>
-                        ))}
-                    </List>
+                        <List>
+                            {students.map((student) => (
+                                <ListItem key={student.user}>
+                                    <ListItemText
+                                        primary={`${student.first_name} ${student.last_name}`}
+                                    />
+                                </ListItem>
+                            ))}
+                        </List>
                     ) : (
-                        <Typography variant="body1">{t('loading') + ' ' + t('students') + '...'}</Typography>
+                        <Typography variant="body1">
+                            {t('loading') + ' ' + t('students') + '...'}
+                        </Typography>
                     )}
                 </DialogContent>
             </Dialog>
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 3770ae4b..16b3a0d3 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -1,7 +1,6 @@
 import { Header } from '../../components/Header'
 import {
     Box,
-    Card,
     CircularProgress,
     Grid,
     IconButton,
@@ -71,7 +70,7 @@ export function SubjectsPage() {
     // State for loading the page
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
-    const [studentsLoading, setStudentsLoading] = useState(true);
+    const [studentsLoading, setStudentsLoading] = useState(true)
 
     useEffect(() => {
         // Get the data for this course.
@@ -136,27 +135,27 @@ export function SubjectsPage() {
 
     useEffect(() => {
         async function fetchStudents() {
-            setStudentsLoading(true);
-            const temp_students = [];
+            setStudentsLoading(true)
+            const temp_students = []
             for (const s of course?.studenten || []) {
                 try {
-                    const userResponse = await instance.get(`/gebruikers/${s}/`);
-                    temp_students.push(userResponse.data);
+                    const userResponse = await instance.get(`/gebruikers/${s}/`)
+                    temp_students.push(userResponse.data)
                 } catch (error) {
-                    console.error('Error fetching student data:', error);
-                    setFetchError(true);
+                    console.error('Error fetching student data:', error)
+                    setFetchError(true)
                 }
             }
             // Update the state with the fetched data
-            setStudents(temp_students);
-            setStudentsLoading(false);
+            setStudents(temp_students)
+            setStudentsLoading(false)
         }
-    
+
         // Fetch students
         fetchStudents().catch((error) =>
             console.error('Error fetching students data:', error)
-        );
-    }, [course]);
+        )
+    }, [course])
 
     const addProject = () => {
         console.log('add project')
@@ -261,15 +260,13 @@ export function SubjectsPage() {
                                     }}
                                 >
                                     {/* Give the student the option to select current or archived projects. */}
-                                    {course.gearchiveerd?
+                                    {course.gearchiveerd ? (
                                         <ProjectsView
                                             gebruiker={user}
                                             showAllAssignments={true}
                                             archived={true}
                                             assignments={assignments}
-                                            deleteAssignment={
-                                                deleteAssignment
-                                            }
+                                            deleteAssignment={deleteAssignment}
                                             archiveAssignment={
                                                 archiveAssignment
                                             }
@@ -278,7 +275,7 @@ export function SubjectsPage() {
                                             }
                                             courseId={courseID}
                                         />
-                                    :
+                                    ) : (
                                         <TabSwitcher
                                             titles={[
                                                 'current_projects',
@@ -319,7 +316,7 @@ export function SubjectsPage() {
                                                 />,
                                             ]}
                                         />
-                                    }
+                                    )}
                                 </Box>
                                 <Box
                                     display="flex"
@@ -393,24 +390,20 @@ export function SubjectsPage() {
                                         marginTop: 10,
                                     }}
                                 >
-                                    {course.gearchiveerd?
+                                    {course.gearchiveerd ? (
                                         <ProjectsView
                                             gebruiker={user}
                                             showAllAssignments={true}
                                             archived={true}
                                             assignments={assignments}
-                                            deleteAssignment={() =>
-                                                undefined
-                                            }
-                                            archiveAssignment={() =>
-                                                undefined
-                                            }
+                                            deleteAssignment={() => undefined}
+                                            archiveAssignment={() => undefined}
                                             changeVisibilityAssignment={() =>
                                                 undefined
                                             }
                                             courseId={courseID}
                                         />
-                                    :
+                                    ) : (
                                         <TabSwitcher
                                             titles={[
                                                 'current_projects',
@@ -451,7 +444,7 @@ export function SubjectsPage() {
                                                 />,
                                             ]}
                                         />
-                                    }
+                                    )}
                                     <WarningPopup
                                         title={t('join_course')}
                                         content={t('acces')}
@@ -461,10 +454,12 @@ export function SubjectsPage() {
                                         doAction={confirmJoinCourse}
                                     />
                                 </Box>
-                                <Box sx={{paddingLeft: '20px'}}>
+                                <Box sx={{ paddingLeft: '20px' }}>
                                     <StudentPopUp
-                                        students={studentsLoading ? []: students}
-                                        text='students'
+                                        students={
+                                            studentsLoading ? [] : students
+                                        }
+                                        text="students"
                                     ></StudentPopUp>
                                 </Box>
                             </Stack>
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 3f5af53d..988d2b4e 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -129,17 +129,18 @@ export function SubmissionPage() {
                 )
                 setRestrictions(restrictions.data)
 
-                const submissionResponse = await instance.get(`indieningen/${submissionId}/`)
+                const submissionResponse = await instance.get(
+                    `indieningen/${submissionId}/`
+                )
                 //Get the submission file
                 const newSubmission: Submission = submissionResponse.data
-                newSubmission.filename = submissionResponse.data.bestand.replace(
-                    /^.*[\\/]/,
-                    ''
-                )
+                newSubmission.filename =
+                    submissionResponse.data.bestand.replace(/^.*[\\/]/, '')
                 newSubmission.bestand = await instance
                     .get(`/indieningen/${submissionId}/indiening_bestand`, {
                         responseType: 'blob',
-                    }).then((res) => {
+                    })
+                    .then((res) => {
                         let filename = 'indiening.zip'
                         if (newSubmission.filename) {
                             filename = newSubmission.filename
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index d6bca41d..7762149f 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -8,7 +8,7 @@ import ErrorPage from './pages/ErrorPage.tsx'
 import MainPage from './pages/mainPage/MainPage.tsx'
 import { GroupsPage } from './pages/groupsPage/GroupsPage.tsx'
 import { AssignmentPage } from './pages/assignmentPage/AssignmentPage.tsx'
-import {ChooseGroup} from "./pages/groupsPage/ChooseGroup.tsx";
+import { ChooseGroup } from './pages/groupsPage/ChooseGroup.tsx'
 
 //TODO: add change/add course page when implemented
 const router = createBrowserRouter([

From fc3a4880b00d6b76235ec3ee75b357ee9deb309b Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 17:00:44 +0200
Subject: [PATCH 091/145] dubbele opgave is weg

---
 .../pages/assignmentPage/AssignmentPage.tsx   | 205 ++++++++++--------
 1 file changed, 115 insertions(+), 90 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index e537b83f..61e257c1 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -132,14 +132,19 @@ export function AssignmentPage() {
                             `/groepen/?project=${assignmentId}`
                         )
                         setGroups(groupsResponse.data)
-                        if(newAssignment.max_groep_grootte == 1) {
+                        if (newAssignment.max_groep_grootte == 1) {
                             const temp_students = []
                             for (const g of groupsResponse.data) {
                                 try {
-                                    const userResponse = await instance.get(`/gebruikers/${g.studenten[0]}/`)
+                                    const userResponse = await instance.get(
+                                        `/gebruikers/${g.studenten[0]}/`
+                                    )
                                     temp_students.push(userResponse.data)
                                 } catch (error) {
-                                    console.error('Error fetching student data:', error)
+                                    console.error(
+                                        'Error fetching student data:',
+                                        error
+                                    )
                                 }
                             }
                             setSingleStudents(temp_students)
@@ -148,7 +153,7 @@ export function AssignmentPage() {
                         const groupResponse = await instance.get<[Group]>(
                             `/groepen/?student=${user.user}&project=${assignmentId}`
                         )
-                        if (groupResponse.data.length > 0){
+                        if (groupResponse.data.length > 0) {
                             const submissionsResponse = await instance.get(
                                 `/indieningen/?project=${assignmentId}&groep=${groupResponse.data[0].groep_id}`
                             )
@@ -176,7 +181,9 @@ export function AssignmentPage() {
     useEffect(() => {
         async function fetchStudents() {
             setStudentsLoading(true)
-            const groupResponse = await instance.get(`groepen/?student=${user.user}&project=${assignmentId}`)
+            const groupResponse = await instance.get(
+                `groepen/?student=${user.user}&project=${assignmentId}`
+            )
             const group: Group = groupResponse.data[0]
             const temp_students = []
             for (const s of group.studenten || []) {
@@ -201,41 +208,44 @@ export function AssignmentPage() {
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
         const downloadPromises: Promise<void>[] = []
-        submissions.forEach(submission => {
+        submissions.forEach((submission) => {
             downloadPromises.push(
                 new Promise(async (resolve, reject) => {
                     try {
                         // Get the submission details
                         const submissionResponse = await instance.get(
                             `/indieningen/${submission.indiening_id}/`
-                        );
-                        const newSubmission = submissionResponse.data;
+                        )
+                        const newSubmission = submissionResponse.data
                         // Get the submission file
                         const fileResponse = await instance.get(
                             `/indieningen/${submission.indiening_id}/indiening_bestand/`,
                             { responseType: 'blob' }
-                        );
-                        let filename = 'indiening.zip';
+                        )
+                        let filename = 'indiening.zip'
                         if (newSubmission.bestand) {
-                            filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                            filename = newSubmission.bestand.replace(
+                                /^.*[\\/]/,
+                                ''
+                            )
                         }
                         const blob = new Blob([fileResponse.data], {
                             type: fileResponse.headers['content-type'],
-                        });
+                        })
                         const file = new File([blob], filename, {
                             type: fileResponse.headers['content-type'],
-                        });
-                        newSubmission.bestand = file;
-                        newSubmission.filename = filename;
+                        })
+                        newSubmission.bestand = file
+                        newSubmission.filename = filename
                         // Add the file to the zip
-                        zip.file(filename, fileResponse.data);
-                        resolve(newSubmission);
+                        zip.file(filename, fileResponse.data)
+                        resolve(newSubmission)
                     } catch (err) {
-                        console.error(`Error downloading submission:`, err);
-                        reject(err);
+                        console.error(`Error downloading submission:`, err)
+                        reject(err)
                     }
                 })
-            );
+            )
         })
         Promise.all(downloadPromises)
             .then(() => {
@@ -244,7 +254,8 @@ export function AssignmentPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions_' + assignment?.titel + '_.zip'
+                        a.download =
+                            'all_submissions_' + assignment?.titel + '_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
@@ -357,28 +368,6 @@ export function AssignmentPage() {
                                     backgroundColor: 'background.default',
                                 }}
                             >
-                                <Box
-                                    aria-label={'assignment-box'}
-                                    sx={{
-                                        padding: '20px',
-                                    }}
-                                >
-                                    <Stack direction={'column'}>
-                                        <Typography
-                                            variant={'h5'}
-                                            color={'text.primary'}
-                                            aria-label={'title'}
-                                            sx={{
-                                                fontWeight: 'bold',
-                                            }}
-                                        >
-                                            {t('assignment')}
-                                        </Typography>
-                                        <Typography color={'text.primary'}>
-                                            {assignment?.beschrijving}
-                                        </Typography>
-                                    </Stack>
-                                </Box>
                                 {/*deadline and group button */}
                                 <Box
                                     sx={{
@@ -561,11 +550,29 @@ export function AssignmentPage() {
                                                             <SubmissionListItemTeacherPage
                                                                 group_name={
                                                                     assignment
-                                                                        ? assignment.max_groep_grootte > 1
-                                                                            ? t('group') + ' ' + (index + 1).toString()
-                                                                            : singleStudents[index]
-                                                                                ? singleStudents[index].first_name + ' ' + singleStudents[index].last_name
-                                                                                : ''
+                                                                        ? assignment.max_groep_grootte >
+                                                                          1
+                                                                            ? t(
+                                                                                  'group'
+                                                                              ) +
+                                                                              ' ' +
+                                                                              (
+                                                                                  index +
+                                                                                  1
+                                                                              ).toString()
+                                                                            : singleStudents[
+                                                                                    index
+                                                                                ]
+                                                                              ? singleStudents[
+                                                                                    index
+                                                                                ]
+                                                                                    .first_name +
+                                                                                ' ' +
+                                                                                singleStudents[
+                                                                                    index
+                                                                                ]
+                                                                                    .last_name
+                                                                              : ''
                                                                         : ''
                                                                 }
                                                                 group_id={group.groep_id.toString()}
@@ -706,8 +713,10 @@ export function AssignmentPage() {
                                         backgroundColor: 'background.default',
                                     }}
                                 >
-                                    <Stack direction={'row'}
-                                            position='relative'>
+                                    <Stack
+                                        direction={'row'}
+                                        position="relative"
+                                    >
                                         <Box
                                             display={'flex'}
                                             flexDirection={'row'}
@@ -763,46 +772,59 @@ export function AssignmentPage() {
                                             />
                                         ) : (
                                             <>
-                                            {assignment?.student_groep ? (
-                                                <Button
-                                                    sx={{
-                                                        bgcolor: 'secondary.main',
-                                                        textTransform: 'none',
-                                                    }}
-                                                    onClick={goToGroups}
-                                                >
-                                                    <Typography color="secondary.contrastText">
-                                                        {t('group')}
-                                                    </Typography>
-                                                </Button>
-                                            ) : (
-                                                <Box
-                                                    sx={{
-                                                        position: 'absolute',
-                                                        top: 90,
-                                                        right: 50,
-                                                        display: 'flex',
-                                                        justifyContent: 'flex-end',
-                                                        zIndex: 1,
-                                                        marginTop: '-40px',
-                                                    }}
-                                                >
-                                                    {assignment?.max_groep_grootte === 1 ? (
-                                                        <Typography variant="body1">
-                                                            {user.first_name + ' ' + user.last_name}
+                                                {assignment?.student_groep ? (
+                                                    <Button
+                                                        sx={{
+                                                            bgcolor:
+                                                                'secondary.main',
+                                                            textTransform:
+                                                                'none',
+                                                        }}
+                                                        onClick={goToGroups}
+                                                    >
+                                                        <Typography color="secondary.contrastText">
+                                                            {t('group')}
                                                         </Typography>
-                                                    ) : (
-                                                        <>
-                                                        {console.log(students)}
-                                                        <StudentPopUp
-                                                            students={studentsLoading ? [] : students}
-                                                            text="group_members"
-                                                        />
-                                                        </>
-                                                    )}
-                                                </Box>
-                                            )}
-                                        </>
+                                                    </Button>
+                                                ) : (
+                                                    <Box
+                                                        sx={{
+                                                            position:
+                                                                'absolute',
+                                                            top: 90,
+                                                            right: 50,
+                                                            display: 'flex',
+                                                            justifyContent:
+                                                                'flex-end',
+                                                            zIndex: 1,
+                                                            marginTop: '-40px',
+                                                        }}
+                                                    >
+                                                        {assignment?.max_groep_grootte ===
+                                                        1 ? (
+                                                            <Typography variant="body1">
+                                                                {user.first_name +
+                                                                    ' ' +
+                                                                    user.last_name}
+                                                            </Typography>
+                                                        ) : (
+                                                            <>
+                                                                {console.log(
+                                                                    students
+                                                                )}
+                                                                <StudentPopUp
+                                                                    students={
+                                                                        studentsLoading
+                                                                            ? []
+                                                                            : students
+                                                                    }
+                                                                    text="group_members"
+                                                                />
+                                                            </>
+                                                        )}
+                                                    </Box>
+                                                )}
+                                            </>
                                         )}
                                     </Stack>
                                 </Box>
@@ -871,7 +893,10 @@ export function AssignmentPage() {
                                     <Button
                                         startIcon={<DownloadIcon />}
                                         onClick={downloadAssignment}
-                                        disabled={assignment === undefined || assignment.filename === undefined}
+                                        disabled={
+                                            assignment === undefined ||
+                                            assignment.filename === undefined
+                                        }
                                     >
                                         {loading ? (
                                             <Skeleton

From 3130bd3d5020e984b8fc4cfebd54a1fd01a831bd Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 17:08:25 +0200
Subject: [PATCH 092/145] run npm format

---
 .../src/components/CustomComponents.tsx       |   45 +-
 .../src/components/DeadlineCalendar.tsx       |   62 +-
 .../SubmissionListItemStudentPage.tsx         |   56 +-
 .../SubmissionListItemTeacherPage.tsx         |  150 +--
 .../AddChangeAssignmentPage.tsx               | 1139 +++++++++--------
 .../pages/assignmentPage/AssignmentPage.tsx   |  339 +++--
 .../src/pages/groupsPage/ChooseGroup.tsx      |  784 ++++++++----
 .../pages/scoresPage/ProjectScoresPage.tsx    |  331 ++---
 .../pages/scoresPage/StudentScoreListItem.tsx |   48 +-
 .../subjectsPage/AddChangeSubjectPage.tsx     |  323 ++---
 .../AssignmentListItemSubjectsPage.tsx        |  124 +-
 .../src/pages/subjectsPage/ProjectsView.tsx   |  133 +-
 .../src/pages/subjectsPage/StudentPopUp.tsx   |   32 +-
 .../src/pages/subjectsPage/SubjectsPage.tsx   |   56 +-
 .../pages/submissionPage/SubmissionPage.tsx   |   13 +-
 frontend/frontend/src/routes.tsx              |    2 +-
 16 files changed, 2101 insertions(+), 1536 deletions(-)

diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 848b299a..f6edd286 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -1,9 +1,9 @@
-import { darken,lighten } from '@mui/system';
+import { darken, lighten } from '@mui/system'
 import {
     Button as BaseButton,
     Card as BaseCard,
     Divider as BaseDivider,
-    Box
+    Box,
 } from '@mui/material'
 import theme from '../Theme.ts'
 
@@ -19,7 +19,7 @@ export const Button = ({ children, ...props }: any) => {
                 textTransform: 'none',
                 color: 'primary.contrastText',
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.primary.main,0.5),
+                    backgroundColor: darken(theme.palette.primary.main, 0.5),
                 },
             }}
             {...props}
@@ -41,7 +41,7 @@ export const SecundaryButton = ({ children, ...props }: any) => {
                 textTransform: 'none',
                 color: 'secondary.contrastText',
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.secondary.main,0.2),
+                    backgroundColor: darken(theme.palette.secondary.main, 0.2),
                 },
             }}
             {...props}
@@ -81,33 +81,30 @@ export const Divider = ({ children, ...props }: any) => {
     )
 }
 
-export const EvenlySpacedRow = ({items}) => {
+export const EvenlySpacedRow = ({ items }) => {
     return (
-        <Box
-            width={'100%'}
-            display="flex"
-            justifyContent={'space-between'}
-        >
+        <Box width={'100%'} display="flex" justifyContent={'space-between'}>
             {items.map((item, index) => (
-
                 <Box
                     key={index}
-                     width={(index == 0 || index == items.length-1) ? ((50/items.length)+'%') : ((100 - (100/items.length))/(items.length-2) +'%')}
-                     sx={{
-                         //border: '1px solid red',
-                         display: 'flex',
-                         alignItems: 'center',
-                         justifyContent: 'center'
-                     }}>
-                    <Box>
-                        {item}
-                    </Box>
+                    width={
+                        index == 0 || index == items.length - 1
+                            ? 50 / items.length + '%'
+                            : (100 - 100 / items.length) / (items.length - 2) +
+                              '%'
+                    }
+                    sx={{
+                        //border: '1px solid red',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Box>{item}</Box>
                 </Box>
             ))}
-    </Box>
+        </Box>
     )
 }
 
-
-
 export default { Button, Card, Divider, EvenlySpacedRow }
diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index 8772029d..bc87c398 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -5,7 +5,17 @@ import {
     PickersDayProps,
 } from '@mui/x-date-pickers'
 import dayjs, { Dayjs } from 'dayjs'
-import { Badge, SxProps, Stack, Typography, Box, List, ListItem, ListItemButton, ListItemText } from '@mui/material'
+import {
+    Badge,
+    SxProps,
+    Stack,
+    Typography,
+    Box,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+} from '@mui/material'
 import { useEffect, useRef, useState } from 'react'
 import AssignmentIcon from '@mui/icons-material/Assignment'
 import { useNavigate } from 'react-router-dom'
@@ -95,22 +105,26 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
             </Typography>
             <List>
                 {assignments
-                .filter((assignment: project) =>
-                    dayjs(assignment.deadline).isSame(selectedDay, 'day')
-                ).map((assignment: project) => 
-                    <ListItem>
-                        <ListItemButton
-                            sx={{
-                                border: 1
-                            }}
-                            onClick={() => handleProjectClick(assignment.vak, assignment.project_id)}
-                        >
-                            <ListItemText
-                                primary={assignment.titel}
-                            />
-                        </ListItemButton>
-                    </ListItem>
-                )}
+                    .filter((assignment: project) =>
+                        dayjs(assignment.deadline).isSame(selectedDay, 'day')
+                    )
+                    .map((assignment: project) => (
+                        <ListItem>
+                            <ListItemButton
+                                sx={{
+                                    border: 1,
+                                }}
+                                onClick={() =>
+                                    handleProjectClick(
+                                        assignment.vak,
+                                        assignment.project_id
+                                    )
+                                }
+                            >
+                                <ListItemText primary={assignment.titel} />
+                            </ListItemButton>
+                        </ListItem>
+                    ))}
             </List>
         </Stack>
     )
@@ -121,7 +135,10 @@ interface DeadlineCalendarProps {
     assignments: project[]
 }
 
-export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarProps) {
+export function DeadlineCalendar({
+    deadlines,
+    assignments,
+}: DeadlineCalendarProps) {
     const requestAbortController = useRef<AbortController | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [highlightedDays, setHighlightedDays] = useState<number[]>([])
@@ -173,9 +190,7 @@ export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarPro
 
     return (
         <>
-            <Stack
-                direction={"column"}
-            >
+            <Stack direction={'column'}>
                 {/*Calendar*/}
                 <DateCalendar
                     readOnly={false}
@@ -194,10 +209,7 @@ export function DeadlineCalendar({ deadlines, assignments }: DeadlineCalendarPro
                         } as never,
                     }}
                 />
-                <DeadlineMenu
-                    assignments={assignments}
-                    selectedDay={value}
-                />
+                <DeadlineMenu assignments={assignments} selectedDay={value} />
             </Stack>
         </>
     )
diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
index 68840f6f..aafada4e 100644
--- a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -1,4 +1,4 @@
-import { EvenlySpacedRow} from "./CustomComponents.tsx";
+import { EvenlySpacedRow } from './CustomComponents.tsx'
 import {
     ListItem,
     ListItemButton,
@@ -53,31 +53,35 @@ export function SubmissionListItemStudentPage({
         <>
             <ListItem key={realId} sx={{ maxHeight: '30px' }} disablePadding>
                 <ListItemButton onClick={handleSubmissionClick}>
-                    <EvenlySpacedRow items={[
-                        <ListItemText
-                            sx={{
-                                color: 'primary.main',
-                                '&:hover': {
-                                    color: 'primary.light',
-                                },
-                            }}
-                            primary={visualId}
-                        />,
-                        <ListItemText
-                            primary={timestamp ? timestamp : t('time')}
-                        />,
-                        <Box sx={{ maxWidth: '24px', }}>
-                            <ListItemIcon sx={{ minWidth: 35 }}>
-                                {status ? (
-                                    <CheckCircleOutlineIcon
-                                        sx={{ color: 'success.main' }}
-                                    />
-                                ) : (
-                                    <HighlightOffIcon sx={{ color: 'error.main' }} />
-                                )}
-                            </ListItemIcon>
-                        </Box>
-                    ]}/>
+                    <EvenlySpacedRow
+                        items={[
+                            <ListItemText
+                                sx={{
+                                    color: 'primary.main',
+                                    '&:hover': {
+                                        color: 'primary.light',
+                                    },
+                                }}
+                                primary={visualId}
+                            />,
+                            <ListItemText
+                                primary={timestamp ? timestamp : t('time')}
+                            />,
+                            <Box sx={{ maxWidth: '24px' }}>
+                                <ListItemIcon sx={{ minWidth: 35 }}>
+                                    {status ? (
+                                        <CheckCircleOutlineIcon
+                                            sx={{ color: 'success.main' }}
+                                        />
+                                    ) : (
+                                        <HighlightOffIcon
+                                            sx={{ color: 'error.main' }}
+                                        />
+                                    )}
+                                </ListItemIcon>
+                            </Box>,
+                        ]}
+                    />
                 </ListItemButton>
             </ListItem>
         </>
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index cfaa2dc4..f1d82bcc 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -3,7 +3,7 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
-    Box
+    Box,
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import DownloadIcon from '@mui/icons-material/Download'
@@ -14,7 +14,7 @@ import instance from '../axiosConfig'
 import { Submission } from '../pages/submissionPage/SubmissionPage.tsx'
 import { t } from 'i18next'
 import dayjs from 'dayjs'
-import {EvenlySpacedRow} from "./CustomComponents.tsx";
+import { EvenlySpacedRow } from './CustomComponents.tsx'
 
 interface SubmissionListItemTeacherPageProps {
     relative_group_id: string
@@ -63,17 +63,21 @@ export function SubmissionListItemTeacherPage({
                     submissionsResponse.data[
                         submissionsResponse.data.length - 1
                     ]
-                const lastSubmissionResponse = await instance.get(`indieningen/${lastSubmission.indiening_id}/`)
+                const lastSubmissionResponse = await instance.get(
+                    `indieningen/${lastSubmission.indiening_id}/`
+                )
                 //Get the submission file
                 const newSubmission: Submission = lastSubmissionResponse.data
-                newSubmission.filename = lastSubmissionResponse.data.bestand.replace(
-                    /^.*[\\/]/,
-                    ''
-                )
+                newSubmission.filename =
+                    lastSubmissionResponse.data.bestand.replace(/^.*[\\/]/, '')
                 newSubmission.bestand = await instance
-                    .get(`/indieningen/${lastSubmission.indiening_id}/indiening_bestand`, {
-                        responseType: 'blob',
-                    }).then((res) => {
+                    .get(
+                        `/indieningen/${lastSubmission.indiening_id}/indiening_bestand`,
+                        {
+                            responseType: 'blob',
+                        }
+                    )
+                    .then((res) => {
                         let filename = 'indiening.zip'
                         if (newSubmission.filename) {
                             filename = newSubmission.filename
@@ -107,9 +111,7 @@ export function SubmissionListItemTeacherPage({
             const url = window.URL.createObjectURL(submitted?.bestand)
             const a = document.createElement('a')
             a.href = url
-            a.download = submitted.filename
-                ? submitted.filename
-                : 'opgave.zip'
+            a.download = submitted.filename ? submitted.filename : 'opgave.zip'
             document.body.appendChild(a)
             a.click()
             a.remove()
@@ -128,70 +130,72 @@ export function SubmissionListItemTeacherPage({
 
     return (
         <>
-            <ListItem id={group_id} sx={{maxHeight: '30px'}} disablePadding>
-                <ListItemButton
-                    onClick={handleSubmissionClick}
-                >
+            <ListItem id={group_id} sx={{ maxHeight: '30px' }} disablePadding>
+                <ListItemButton onClick={handleSubmissionClick}>
                     <EvenlySpacedRow
-
-                        items={[<ListItemText
-                        sx={{
-                            color: 'primary.main',
-                            '&:hover': {
-                                color: 'primary.light',
-                            },
-                        }}
-                        primary={relative_group_id}
-                    />,
-                        <ListItemText
-                            primary={
-                                submitted
-                                    ? dayjs(submitted.tijdstip).format(
-                                        'DD/MM/YYYY HH:mm'
-                                    )
-                                    : '-'
-                            }
-                        />,
-                        <ListItemText
-                            primary={
-                                score
-                                    ? `${Number(score.score)}` + '/20'
-                                    : t('no_score_yet')
-                            }
-                        />,
-                        <Box sx={{ maxWidth: '24px'}}>
-                            <ListItemIcon>
-                                {!submitted?.status ? (
-                                    <HighlightOffIcon sx={{ color: 'error.main' }} />
-                                ) : (
-                                    submitted !== undefined && (
-                                        <CheckCircleOutlineIcon
-                                            sx={{ color: 'success.main' }}
-                                        />
-                                    )
-                                )}
-                            </ListItemIcon>
-                        </Box>,
-                        <Box sx={{ maxWidth: '24px'}}>
-                            <ListItemIcon>
-                                <div onClick={handleDownloadClick}>
-                                    {submitted ? (
-                                        <DownloadIcon
-                                            sx={{
-                                                color: 'primary.main',
-                                                '&:hover': {
-                                                    color: 'primary.light',
-                                                },
-                                            }}
+                        items={[
+                            <ListItemText
+                                sx={{
+                                    color: 'primary.main',
+                                    '&:hover': {
+                                        color: 'primary.light',
+                                    },
+                                }}
+                                primary={relative_group_id}
+                            />,
+                            <ListItemText
+                                primary={
+                                    submitted
+                                        ? dayjs(submitted.tijdstip).format(
+                                              'DD/MM/YYYY HH:mm'
+                                          )
+                                        : '-'
+                                }
+                            />,
+                            <ListItemText
+                                primary={
+                                    score
+                                        ? `${Number(score.score)}` + '/20'
+                                        : t('no_score_yet')
+                                }
+                            />,
+                            <Box sx={{ maxWidth: '24px' }}>
+                                <ListItemIcon>
+                                    {!submitted?.status ? (
+                                        <HighlightOffIcon
+                                            sx={{ color: 'error.main' }}
                                         />
                                     ) : (
-                                        <DownloadIcon sx={{ color: 'gray' }} />
+                                        submitted !== undefined && (
+                                            <CheckCircleOutlineIcon
+                                                sx={{ color: 'success.main' }}
+                                            />
+                                        )
                                     )}
-                                </div>
-                            </ListItemIcon>
-                        </Box>
-                    ]}>
-                    </EvenlySpacedRow>
+                                </ListItemIcon>
+                            </Box>,
+                            <Box sx={{ maxWidth: '24px' }}>
+                                <ListItemIcon>
+                                    <div onClick={handleDownloadClick}>
+                                        {submitted ? (
+                                            <DownloadIcon
+                                                sx={{
+                                                    color: 'primary.main',
+                                                    '&:hover': {
+                                                        color: 'primary.light',
+                                                    },
+                                                }}
+                                            />
+                                        ) : (
+                                            <DownloadIcon
+                                                sx={{ color: 'gray' }}
+                                            />
+                                        )}
+                                    </div>
+                                </ListItemIcon>
+                            </Box>,
+                        ]}
+                    ></EvenlySpacedRow>
                 </ListItemButton>
             </ListItem>
         </>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 33d50574..5ed43e36 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -191,15 +191,11 @@ export function AddChangeAssignmentPage() {
 
                     setVisible(assignment.zichtbaar)
                     if (assignment.deadline !== null) {
-                        setDueDate(
-                            dayjs(assignment.deadline)
-                        )
+                        setDueDate(dayjs(assignment.deadline))
                         console.log('deadline' + assignment.deadline)
                     }
                     if (assignment.extra_deadline !== null) {
-                        setExtraDueDate(
-                            dayjs(assignment.extra_deadline)
-                        )
+                        setExtraDueDate(dayjs(assignment.extra_deadline))
                         console.log(
                             'extra deadline' + assignment.extra_deadline
                         )
@@ -472,529 +468,622 @@ export function AddChangeAssignmentPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            {/* Stack container for layout */}
-            <Stack direction={'column'} paddingX={2}>
-                {/*very ugly but it works functionally*/}
-                {loading ? (
-                    <Header variant={'default'} title={''} />
-                ) : (
-                    <Header variant={'default'} title={title} />
-                )}
-                {/* Form for submitting assignment */}
-                <Stack
-                    direction={'column'}
-                    marginTop={11}
-                    component={'form'}
-                    onSubmit={handleSubmit}
-                >
-                    <Box
-                        aria-label={'title_and_upload'}
-                        padding={2}
-                        paddingRight={0}
-                        gap={1}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        width={'98%'}
-                        justifyContent={'space-between'}
-                    >
-                        <Box
-                            aria-label={'title'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* Here the user gets to specify the assignment name */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('assignmentName')}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={'Title'}
-                                    error={assignmentErrors.title}
-                                    value={title}
-                                    helperText={
-                                        assignmentErrors.title
-                                            ? t('name') + ' ' + t('is_required')
-                                            : ''
-                                    }
-                                    onChange={(event) =>
-                                        setTitle(event.target.value)
-                                    }
-                                />
-                            )}
-                        </Box>
-                        {/* File Upload button */}
-                        <Box
-                            padding={0}
-                            marginRight={3}
-                            display={'flex'}
-                            flexDirection={'column'}
-                            alignItems={'flex-start'}
-                        >
-                            {loading ? (
-                                <FileUploadButton
-                                    name={t('upload_assignment')}
-                                    tooltip={t('uploadToolTip')}
-                                    onFileChange={() => {
-                                        console.log('loading')
-                                    }}
-                                    fileTypes={['.pdf', '.zip']}
-                                    path={new File([], 'loading...')}
-                                />
-                            ) : (
-                                <FileUploadButton
-                                    name={t('upload_assignment')}
-                                    path={assignmentFile}
-                                    onFileChange={handleFileChange}
-                                    fileTypes={['.pdf', '.zip']}
-                                    tooltip={t('uploadToolTip')}
-                                />
-                            )}
-                        </Box>
-                    </Box>
-                    {/* Deadline section.
+                        <>
+                            {/* Stack container for layout */}
+                            <Stack direction={'column'} paddingX={2}>
+                                {/*very ugly but it works functionally*/}
+                                {loading ? (
+                                    <Header variant={'default'} title={''} />
+                                ) : (
+                                    <Header variant={'default'} title={title} />
+                                )}
+                                {/* Form for submitting assignment */}
+                                <Stack
+                                    direction={'column'}
+                                    marginTop={11}
+                                    component={'form'}
+                                    onSubmit={handleSubmit}
+                                >
+                                    <Box
+                                        aria-label={'title_and_upload'}
+                                        padding={2}
+                                        paddingRight={0}
+                                        gap={1}
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        width={'98%'}
+                                        justifyContent={'space-between'}
+                                    >
+                                        <Box
+                                            aria-label={'title'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* Here the user gets to specify the assignment name */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('assignmentName')}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={'Title'}
+                                                    error={
+                                                        assignmentErrors.title
+                                                    }
+                                                    value={title}
+                                                    helperText={
+                                                        assignmentErrors.title
+                                                            ? t('name') +
+                                                              ' ' +
+                                                              t('is_required')
+                                                            : ''
+                                                    }
+                                                    onChange={(event) =>
+                                                        setTitle(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                />
+                                            )}
+                                        </Box>
+                                        {/* File Upload button */}
+                                        <Box
+                                            padding={0}
+                                            marginRight={3}
+                                            display={'flex'}
+                                            flexDirection={'column'}
+                                            alignItems={'flex-start'}
+                                        >
+                                            {loading ? (
+                                                <FileUploadButton
+                                                    name={t(
+                                                        'upload_assignment'
+                                                    )}
+                                                    tooltip={t('uploadToolTip')}
+                                                    onFileChange={() => {
+                                                        console.log('loading')
+                                                    }}
+                                                    fileTypes={['.pdf', '.zip']}
+                                                    path={
+                                                        new File(
+                                                            [],
+                                                            'loading...'
+                                                        )
+                                                    }
+                                                />
+                                            ) : (
+                                                <FileUploadButton
+                                                    name={t(
+                                                        'upload_assignment'
+                                                    )}
+                                                    path={assignmentFile}
+                                                    onFileChange={
+                                                        handleFileChange
+                                                    }
+                                                    fileTypes={['.pdf', '.zip']}
+                                                    tooltip={t('uploadToolTip')}
+                                                />
+                                            )}
+                                        </Box>
+                                    </Box>
+                                    {/* Deadline section.
                     There is both the normal deadline, 
                     and an extra deadline in case people need more time. */}
-                    <Box
-                        aria-label={'deadline'}
-                        padding={2}
-                        display={'flex'}
-                        flexDirection={{
-                            xs: 'column',
-                            sm: 'column',
-                            md: 'row',
-                        }}
-                        gap={5}
-                    >
-                        <Box
-                            aria-label={'initial_deadline'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* This section renders the normal deadline. */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                Deadline:
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <LocalizationProvider
-                                    dateAdapter={AdapterDayjs}
-                                    adapterLocale="nl"
-                                >
-                                    <DateTimePicker
-                                        format="DD/MM/YYYY HH:mm"
-                                        value={dueDate}
-                                        disablePast
-                                        label={t('optional')}
-                                        sx={{ width: 250 }}
-                                        viewRenderers={{
-                                            hours: renderTimeViewClock,
-                                            minutes: renderTimeViewClock,
-                                            seconds: renderTimeViewClock,
-                                        }}
-                                        onError={(newError) =>
-                                            SetDeadlineError(newError)
-                                        }
-                                        slotProps={{
-                                            field: {
-                                                clearable: true,
-                                                onClear: () => setCleared(true),
-                                            },
-                                            textField: {
-                                                helperText: errorMessage,
-                                            },
-                                        }}
-                                        onChange={(newValue) =>
-                                            setDueDate(newValue)
-                                        }
-                                    />
-                                </LocalizationProvider>
-                            )}
-                        </Box>
-                        <Box
-                            aria-label={'secondary_deadline'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            {/* This section renders the extra deadline. */}
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                Extra Deadline:
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
-                                />
-                            ) : (
-                                <LocalizationProvider
-                                    dateAdapter={AdapterDayjs}
-                                    adapterLocale="nl"
-                                >
-                                    <DateTimePicker
-                                        format="DD/MM/YYYY HH:mm"
-                                        value={extraDueDate}
-                                        disablePast
-                                        label={t('optional')}
-                                        sx={{ width: 250 }}
-                                        viewRenderers={{
-                                            hours: renderTimeViewClock,
-                                            minutes: renderTimeViewClock,
-                                            seconds: renderTimeViewClock,
-                                        }}
-                                        slotProps={{
-                                            field: {
-                                                clearable: true,
-                                                onClear: () => setCleared(true),
-                                            },
-                                            textField: {
-                                                error: deadlineCheckError,
-                                                helperText: deadlineCheckError
-                                                    ? t('deadlineCheck')
-                                                    : '',
-                                            },
+                                    <Box
+                                        aria-label={'deadline'}
+                                        padding={2}
+                                        display={'flex'}
+                                        flexDirection={{
+                                            xs: 'column',
+                                            sm: 'column',
+                                            md: 'row',
                                         }}
-                                        onChange={(newValue) =>
-                                            setExtraDueDate(newValue)
-                                        }
-                                    />
-                                </LocalizationProvider>
-                            )}
-                        </Box>
-                    </Box>
-                    {/* Description section */}
-                    <Card aria-label={'description'}>
-                        <Box
-                            padding={2}
-                            maxHeight={'20svh'}
-                            minHeight={'20svh'}
-                        >
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('description')}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={'100%'}
-                                    height={60}
-                                />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={'Description'}
-                                    variant={'standard'}
-                                    multiline
-                                    value={description}
-                                    onChange={(event) =>
-                                        setDescription(event.target.value)
-                                    }
-                                    fullWidth
-                                    error={assignmentErrors.description}
-                                    // Show an error message if the description is not filled in.
-                                    helperText={
-                                        assignmentErrors.description
-                                            ? t('descriptionName') +
-                                              ' ' +
-                                              t('is_required')
-                                            : ''
-                                    }
-                                    sx={{
-                                        overflowY: 'auto',
-                                        maxHeight: '25svh',
-                                    }}
-                                />
-                            )}
-                        </Box>
-                    </Card>
-                    {/* Restrictions section */}
-                    <Box
-                        aria-label={'restrictions'}
-                        marginTop={3}
-                        display={'flex'}
-                        flexDirection={'row'}
-                    >
-                        <Card
-                            sx={{
-                                padding: 1,
-                                backgroundColor: 'background.default',
-                                width: '70%',
-                                height: '28svh',
-                            }}
-                        >
-                            <Typography variant={'h5'} fontWeight={'bold'}>
-                                {t('restrictions')}
-                            </Typography>
-                            <Box sx={{ padding: 1 }}>
-                                {/*This list will render the restrictions that are added to the assignment.*/}
-                                <List
-                                    sx={{
-                                        maxHeight: '18vh',
-                                        overflowY: 'auto',
-                                    }}
-                                >
-                                    {loading ? (
-                                        <CircularProgress color={'primary'} />
-                                    ) : (
-                                        <>
-                                            {restrictions.map(
-                                                (restriction, index) => {
-                                                    return (
-                                                        <ListItem key={index}>
-                                                            <RestrictionCard
-                                                                restriction={
-                                                                    restriction
-                                                                }
-                                                                restrictions={
-                                                                    restrictions
-                                                                }
-                                                                setRestrictions={
-                                                                    setRestrictions
-                                                                }
-                                                            />
-                                                        </ListItem>
-                                                    )
-                                                }
-                                            )}
-                                        </>
-                                    )}
-                                </List>
-                            </Box>
-                            <Box
-                                width={'100%'}
-                                display={'flex'}
-                                justifyContent={'flex-end'}
-                            >
-                                <Tooltip title={t('add_restriction')}>
-                                    <AddRestrictionButton
-                                        // When this button is clicked, a pop up will show.
-                                        // This popup will allow you to choose to make a restriction yourself,
-                                        // create one starting from a template,
-                                        // or choose a file from the system.
-                                        restrictions={restrictions}
-                                        setRestrictions={(newRestrictions) =>
-                                            setRestrictions(newRestrictions)
-                                        }
-                                    ></AddRestrictionButton>
-                                </Tooltip>
-                            </Box>
-                        </Card>
-                    </Box>
-                    {/* Main actions section */}
-                    <Box
-                        aria-label={'main actions'}
-                        marginTop={3}
-                        display={'flex'}
-                        flexDirection={'row'}
-                        width={'100%'}
-                        justifyContent={'space-between'}
-                    >
-                        <Box
-                            aria-label={'visibility_and_groups'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={10}
-                            alignItems={'center'}
-                            padding={2}
-                        >
-                            <Box
-                                aria-label={'main actions'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                alignItems={'center'}
-                            >
-                                {visible ? (
-                                    <IconButton
-                                        // Allows the teacher to select whether
-                                        // the assignment is visible to students or not.
-                                        color={'info'}
-                                        onClick={() => setVisible(!visible)}
+                                        gap={5}
                                     >
-                                        <VisibilityIcon fontSize={'medium'} />
-                                    </IconButton>
-                                ) : (
-                                    <IconButton
-                                        color={'info'}
-                                        onClick={() => setVisible(!visible)}
+                                        <Box
+                                            aria-label={'initial_deadline'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* This section renders the normal deadline. */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                Deadline:
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <LocalizationProvider
+                                                    dateAdapter={AdapterDayjs}
+                                                    adapterLocale="nl"
+                                                >
+                                                    <DateTimePicker
+                                                        format="DD/MM/YYYY HH:mm"
+                                                        value={dueDate}
+                                                        disablePast
+                                                        label={t('optional')}
+                                                        sx={{ width: 250 }}
+                                                        viewRenderers={{
+                                                            hours: renderTimeViewClock,
+                                                            minutes:
+                                                                renderTimeViewClock,
+                                                            seconds:
+                                                                renderTimeViewClock,
+                                                        }}
+                                                        onError={(newError) =>
+                                                            SetDeadlineError(
+                                                                newError
+                                                            )
+                                                        }
+                                                        slotProps={{
+                                                            field: {
+                                                                clearable: true,
+                                                                onClear: () =>
+                                                                    setCleared(
+                                                                        true
+                                                                    ),
+                                                            },
+                                                            textField: {
+                                                                helperText:
+                                                                    errorMessage,
+                                                            },
+                                                        }}
+                                                        onChange={(newValue) =>
+                                                            setDueDate(newValue)
+                                                        }
+                                                    />
+                                                </LocalizationProvider>
+                                            )}
+                                        </Box>
+                                        <Box
+                                            aria-label={'secondary_deadline'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            {/* This section renders the extra deadline. */}
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                Extra Deadline:
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <LocalizationProvider
+                                                    dateAdapter={AdapterDayjs}
+                                                    adapterLocale="nl"
+                                                >
+                                                    <DateTimePicker
+                                                        format="DD/MM/YYYY HH:mm"
+                                                        value={extraDueDate}
+                                                        disablePast
+                                                        label={t('optional')}
+                                                        sx={{ width: 250 }}
+                                                        viewRenderers={{
+                                                            hours: renderTimeViewClock,
+                                                            minutes:
+                                                                renderTimeViewClock,
+                                                            seconds:
+                                                                renderTimeViewClock,
+                                                        }}
+                                                        slotProps={{
+                                                            field: {
+                                                                clearable: true,
+                                                                onClear: () =>
+                                                                    setCleared(
+                                                                        true
+                                                                    ),
+                                                            },
+                                                            textField: {
+                                                                error: deadlineCheckError,
+                                                                helperText:
+                                                                    deadlineCheckError
+                                                                        ? t(
+                                                                              'deadlineCheck'
+                                                                          )
+                                                                        : '',
+                                                            },
+                                                        }}
+                                                        onChange={(newValue) =>
+                                                            setExtraDueDate(
+                                                                newValue
+                                                            )
+                                                        }
+                                                    />
+                                                </LocalizationProvider>
+                                            )}
+                                        </Box>
+                                    </Box>
+                                    {/* Description section */}
+                                    <Card aria-label={'description'}>
+                                        <Box
+                                            padding={2}
+                                            maxHeight={'20svh'}
+                                            minHeight={'20svh'}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('description')}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={'100%'}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={'Description'}
+                                                    variant={'standard'}
+                                                    multiline
+                                                    value={description}
+                                                    onChange={(event) =>
+                                                        setDescription(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                    fullWidth
+                                                    error={
+                                                        assignmentErrors.description
+                                                    }
+                                                    // Show an error message if the description is not filled in.
+                                                    helperText={
+                                                        assignmentErrors.description
+                                                            ? t(
+                                                                  'descriptionName'
+                                                              ) +
+                                                              ' ' +
+                                                              t('is_required')
+                                                            : ''
+                                                    }
+                                                    sx={{
+                                                        overflowY: 'auto',
+                                                        maxHeight: '25svh',
+                                                    }}
+                                                />
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    {/* Restrictions section */}
+                                    <Box
+                                        aria-label={'restrictions'}
+                                        marginTop={3}
+                                        display={'flex'}
+                                        flexDirection={'row'}
                                     >
-                                        <VisibilityOffIcon
-                                            fontSize={'medium'}
-                                        />
-                                    </IconButton>
-                                )}
-                                <Tooltip title={t('remove')}>
-                                    <IconButton
-                                        color={'warning'}
-                                        onClick={openDeleteConfirmation}
+                                        <Card
+                                            sx={{
+                                                padding: 1,
+                                                backgroundColor:
+                                                    'background.default',
+                                                width: '70%',
+                                                height: '28svh',
+                                            }}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('restrictions')}
+                                            </Typography>
+                                            <Box sx={{ padding: 1 }}>
+                                                {/*This list will render the restrictions that are added to the assignment.*/}
+                                                <List
+                                                    sx={{
+                                                        maxHeight: '18vh',
+                                                        overflowY: 'auto',
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <CircularProgress
+                                                            color={'primary'}
+                                                        />
+                                                    ) : (
+                                                        <>
+                                                            {restrictions.map(
+                                                                (
+                                                                    restriction,
+                                                                    index
+                                                                ) => {
+                                                                    return (
+                                                                        <ListItem
+                                                                            key={
+                                                                                index
+                                                                            }
+                                                                        >
+                                                                            <RestrictionCard
+                                                                                restriction={
+                                                                                    restriction
+                                                                                }
+                                                                                restrictions={
+                                                                                    restrictions
+                                                                                }
+                                                                                setRestrictions={
+                                                                                    setRestrictions
+                                                                                }
+                                                                            />
+                                                                        </ListItem>
+                                                                    )
+                                                                }
+                                                            )}
+                                                        </>
+                                                    )}
+                                                </List>
+                                            </Box>
+                                            <Box
+                                                width={'100%'}
+                                                display={'flex'}
+                                                justifyContent={'flex-end'}
+                                            >
+                                                <Tooltip
+                                                    title={t('add_restriction')}
+                                                >
+                                                    <AddRestrictionButton
+                                                        // When this button is clicked, a pop up will show.
+                                                        // This popup will allow you to choose to make a restriction yourself,
+                                                        // create one starting from a template,
+                                                        // or choose a file from the system.
+                                                        restrictions={
+                                                            restrictions
+                                                        }
+                                                        setRestrictions={(
+                                                            newRestrictions
+                                                        ) =>
+                                                            setRestrictions(
+                                                                newRestrictions
+                                                            )
+                                                        }
+                                                    ></AddRestrictionButton>
+                                                </Tooltip>
+                                            </Box>
+                                        </Card>
+                                    </Box>
+                                    {/* Main actions section */}
+                                    <Box
+                                        aria-label={'main actions'}
+                                        marginTop={3}
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        width={'100%'}
+                                        justifyContent={'space-between'}
                                     >
-                                        <DeleteForeverIcon
-                                            fontSize={'medium'}
-                                        />
-                                    </IconButton>
-                                </Tooltip>
-                            </Box>
-                            {/* This section allows the teacher to set the maximum score for the assignment.*/}
-                            <Box
-                                aria-label={'maxScore'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                gap={1}
-                                height={40}
-                                alignItems={'center'}
-                            >
-                                <Typography
-                                    fontWeight={'bold'}
-                                    color={'text.primary'}
-                                >
-                                    Max Score
-                                </Typography>
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'text'}
-                                        width={60}
-                                        height={60}
-                                    />
-                                ) : (
-                                    <TextField
-                                        sx={{ width: 80 }}
-                                        required
-                                        label={'Max Score'}
-                                        type={'number'}
-                                        value={maxScore}
-                                        onChange={(event) => {
-                                            if (event.target.value !== '') {
-                                                const newScore = Math.max(
-                                                    parseInt(
-                                                        event.target.value
-                                                    ),
-                                                    0
-                                                )
-                                                SetMaxScore
-                                                    ? SetMaxScore(newScore)
-                                                    : undefined
-                                            } else {
-                                                SetMaxScore
-                                                    ? SetMaxScore(
-                                                          parseInt(
-                                                              event.target.value
-                                                          )
-                                                      )
-                                                    : undefined
-                                            }
-                                        }}
-                                    />
-                                )}
-                            </Box>
-                        </Box>
-                        {/* Submit and Cancel buttons */}
-                        <Box
-                            aria-label={'submit_and_cancel'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={1}
-                            alignItems={'center'}
-                        >
-                            <Tooltip title={t('cancel')}>
-                                <IconButton
-                                    onClick={() => setCancelConfirmation(true)}
-                                    sx={{
-                                        backgroundColor: 'secondary.main',
-                                        borderRadius: 2,
-                                    }}
-                                >
-                                    <ClearIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                            <Tooltip title={t('submit')}>
-                                <IconButton
-                                    type="submit"
-                                    aria-label={'submit'}
-                                    sx={{
-                                        backgroundColor: 'primary.main',
-                                        borderRadius: 2,
-                                        color: 'background.default',
-                                        '&:hover': {
-                                            backgroundColor: 'secondary.main',
-                                            color: 'text.primary',
-                                        },
-                                    }}
-                                >
-                                    <SaveIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                        </Box>
-                    </Box>
-                </Stack>
-
-                {/* Popup for adding restrictions */}
-
-                {/* Confirmation popup for deleting project */}
-
-                <WarningPopup
-                    title={t('remove') + ' Project?'}
-                    content={t('cant_be_undone')}
-                    buttonName={t('remove')}
-                    open={deleteConfirmation}
-                    handleClose={closeDeletion}
-                    doAction={handleRemove}
-                />
-                {/* Confirmation popup for saving project */}
-                <WarningPopup
-                    title={t('save_project_warning')}
-                    content={t('visible_for_everyone')}
-                    buttonName={t('confirm')}
-                    open={saveConfirmation}
-                    handleClose={closeSaveConfirmation}
-                    doAction={uploadAssignment}
-                />
-                {/* Confirmation popup for canceling changes*/}
-                <WarningPopup
-                    title={t('undo_changes_warning')}
-                    content={t('cant_be_undone')}
-                    buttonName={t('confirm')}
-                    open={cancelConfirmation}
-                    handleClose={closeCancel}
-                    doAction={handleCancel}
-                />
-            </Stack>
+                                        <Box
+                                            aria-label={'visibility_and_groups'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={10}
+                                            alignItems={'center'}
+                                            padding={2}
+                                        >
+                                            <Box
+                                                aria-label={'main actions'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                alignItems={'center'}
+                                            >
+                                                {visible ? (
+                                                    <IconButton
+                                                        // Allows the teacher to select whether
+                                                        // the assignment is visible to students or not.
+                                                        color={'info'}
+                                                        onClick={() =>
+                                                            setVisible(!visible)
+                                                        }
+                                                    >
+                                                        <VisibilityIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                ) : (
+                                                    <IconButton
+                                                        color={'info'}
+                                                        onClick={() =>
+                                                            setVisible(!visible)
+                                                        }
+                                                    >
+                                                        <VisibilityOffIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                )}
+                                                <Tooltip title={t('remove')}>
+                                                    <IconButton
+                                                        color={'warning'}
+                                                        onClick={
+                                                            openDeleteConfirmation
+                                                        }
+                                                    >
+                                                        <DeleteForeverIcon
+                                                            fontSize={'medium'}
+                                                        />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </Box>
+                                            {/* This section allows the teacher to set the maximum score for the assignment.*/}
+                                            <Box
+                                                aria-label={'maxScore'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                gap={1}
+                                                height={40}
+                                                alignItems={'center'}
+                                            >
+                                                <Typography
+                                                    fontWeight={'bold'}
+                                                    color={'text.primary'}
+                                                >
+                                                    Max Score
+                                                </Typography>
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'text'}
+                                                        width={60}
+                                                        height={60}
+                                                    />
+                                                ) : (
+                                                    <TextField
+                                                        sx={{ width: 80 }}
+                                                        required
+                                                        label={'Max Score'}
+                                                        type={'number'}
+                                                        value={maxScore}
+                                                        onChange={(event) => {
+                                                            if (
+                                                                event.target
+                                                                    .value !==
+                                                                ''
+                                                            ) {
+                                                                const newScore =
+                                                                    Math.max(
+                                                                        parseInt(
+                                                                            event
+                                                                                .target
+                                                                                .value
+                                                                        ),
+                                                                        0
+                                                                    )
+                                                                SetMaxScore
+                                                                    ? SetMaxScore(
+                                                                          newScore
+                                                                      )
+                                                                    : undefined
+                                                            } else {
+                                                                SetMaxScore
+                                                                    ? SetMaxScore(
+                                                                          parseInt(
+                                                                              event
+                                                                                  .target
+                                                                                  .value
+                                                                          )
+                                                                      )
+                                                                    : undefined
+                                                            }
+                                                        }}
+                                                    />
+                                                )}
+                                            </Box>
+                                        </Box>
+                                        {/* Submit and Cancel buttons */}
+                                        <Box
+                                            aria-label={'submit_and_cancel'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={1}
+                                            alignItems={'center'}
+                                        >
+                                            <Tooltip title={t('cancel')}>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        setCancelConfirmation(
+                                                            true
+                                                        )
+                                                    }
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'secondary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                >
+                                                    <ClearIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title={t('submit')}>
+                                                <IconButton
+                                                    type="submit"
+                                                    aria-label={'submit'}
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'primary.main',
+                                                        borderRadius: 2,
+                                                        color: 'background.default',
+                                                        '&:hover': {
+                                                            backgroundColor:
+                                                                'secondary.main',
+                                                            color: 'text.primary',
+                                                        },
+                                                    }}
+                                                >
+                                                    <SaveIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </Box>
+                                    </Box>
+                                </Stack>
+
+                                {/* Popup for adding restrictions */}
+
+                                {/* Confirmation popup for deleting project */}
+
+                                <WarningPopup
+                                    title={t('remove') + ' Project?'}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('remove')}
+                                    open={deleteConfirmation}
+                                    handleClose={closeDeletion}
+                                    doAction={handleRemove}
+                                />
+                                {/* Confirmation popup for saving project */}
+                                <WarningPopup
+                                    title={t('save_project_warning')}
+                                    content={t('visible_for_everyone')}
+                                    buttonName={t('confirm')}
+                                    open={saveConfirmation}
+                                    handleClose={closeSaveConfirmation}
+                                    doAction={uploadAssignment}
+                                />
+                                {/* Confirmation popup for canceling changes*/}
+                                <WarningPopup
+                                    title={t('undo_changes_warning')}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('confirm')}
+                                    open={cancelConfirmation}
+                                    handleClose={closeCancel}
+                                    doAction={handleCancel}
+                                />
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 9e8000f8..48950032 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -2,10 +2,17 @@ import { Header } from '../../components/Header.tsx'
 import FileUploadButton from '../../components/FileUploadButton.tsx'
 import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx'
 import { SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx'
-import {Card, Button, Divider, EvenlySpacedRow, SecundaryButton} from '../../components/CustomComponents.tsx'
+import {
+    Button,
+    Card,
+    Divider,
+    EvenlySpacedRow,
+    SecundaryButton,
+} from '../../components/CustomComponents.tsx'
 import {
     Box,
-    CircularProgress, Grid,
+    CircularProgress,
+    Grid,
     List,
     Skeleton,
     Stack,
@@ -141,41 +148,44 @@ export function AssignmentPage() {
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
         const downloadPromises: Promise<void>[] = []
-        submissions.forEach(submission => {
+        submissions.forEach((submission) => {
             downloadPromises.push(
                 new Promise(async (resolve, reject) => {
                     try {
                         // Get the submission details
                         const submissionResponse = await instance.get(
                             `/indieningen/${submission.indiening_id}/`
-                        );
-                        const newSubmission = submissionResponse.data;
+                        )
+                        const newSubmission = submissionResponse.data
                         // Get the submission file
                         const fileResponse = await instance.get(
                             `/indieningen/${submission.indiening_id}/indiening_bestand/`,
                             { responseType: 'blob' }
-                        );
-                        let filename = 'indiening.zip';
+                        )
+                        let filename = 'indiening.zip'
                         if (newSubmission.bestand) {
-                            filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                            filename = newSubmission.bestand.replace(
+                                /^.*[\\/]/,
+                                ''
+                            )
                         }
                         const blob = new Blob([fileResponse.data], {
                             type: fileResponse.headers['content-type'],
-                        });
+                        })
                         const file = new File([blob], filename, {
                             type: fileResponse.headers['content-type'],
-                        });
-                        newSubmission.bestand = file;
-                        newSubmission.filename = filename;
+                        })
+                        newSubmission.bestand = file
+                        newSubmission.filename = filename
                         // Add the file to the zip
-                        zip.file(filename, fileResponse.data);
-                        resolve(newSubmission);
+                        zip.file(filename, fileResponse.data)
+                        resolve(newSubmission)
                     } catch (err) {
-                        console.error(`Error downloading submission:`, err);
-                        reject(err);
+                        console.error(`Error downloading submission:`, err)
+                        reject(err)
                     }
                 })
-            );
+            )
         })
         Promise.all(downloadPromises)
             .then(() => {
@@ -184,7 +194,8 @@ export function AssignmentPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions_' + assignment?.titel + '_.zip'
+                        a.download =
+                            'all_submissions_' + assignment?.titel + '_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
@@ -365,7 +376,7 @@ export function AssignmentPage() {
                                 </Box>
 
                                 {/* Assignment description */}
-                                <Card sx={{padding: '20px'}}>
+                                <Card sx={{ padding: '20px' }}>
                                     <Stack direction={'column'}>
                                         <Typography
                                             sx={{
@@ -404,79 +415,113 @@ export function AssignmentPage() {
                                             padding: 3,
                                         }}
                                     >
-                                    <EvenlySpacedRow items={[
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('group')}
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('time')}
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            Score
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            Status
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('download')}
-                                        </Typography>
-                                    ]}
-                                    />
-                                </Box>
-                                <Divider/>
-                                <Box
+                                        <EvenlySpacedRow
+                                            items={[
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('group')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('time')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    Score
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    Status
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('download')}
+                                                </Typography>,
+                                            ]}
+                                        />
+                                    </Box>
+                                    <Divider />
+                                    <Box
                                         sx={{
-                                            position: 'relative', top: '-6px',
+                                            position: 'relative',
+                                            top: '-6px',
                                             height: 340,
                                         }}
-                                >
-                                    <Box sx={{ width: '100%', height: 320, overflow: 'auto' }}>
-                                    <List DisablePadding>
-                                        {loading ? (
-                                            [...Array(3)].map((_, index) => (
-                                                <Skeleton
-                                                    key={index}
-                                                    variant="text"
-                                                    width={'100%'}
-                                                    height={50}
-                                                    sx={{ margin: 0 }}
-                                                />
-                                            ))
-                                        ) : (
-                                                <>
-                                                {groups.map((group,index) => (
+                                    >
+                                        <Box
+                                            sx={{
+                                                width: '100%',
+                                                height: 320,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            <List disablePadding>
+                                                {loading ? (
+                                                    [...Array(3)].map(
+                                                        (_, index) => (
+                                                            <Skeleton
+                                                                key={index}
+                                                                variant="text"
+                                                                width={'100%'}
+                                                                height={50}
+                                                                sx={{
+                                                                    margin: 0,
+                                                                }}
+                                                            />
+                                                        )
+                                                    )
+                                                ) : (
                                                     <>
-                                                        {index != 0 ?  <Divider/> : <></>}
-                                                        <SubmissionListItemTeacherPage
-                                                            relative_group_id={(
-                                                                group.groep_id -
-                                                                Math.min(
-                                                                    ...groups.map(
-                                                                        (
-                                                                            group
-                                                                        ) =>
-                                                                            group.groep_id
-                                                                    )
-                                                                ) +
-                                                                1
-                                                            ).toString()}
-                                                            group_id={group.groep_id.toString()}
-                                                            assignment_id={
-                                                                assignmentId
-                                                                    ? assignmentId
-                                                                    : ''
-                                                            }
-                                                            course_id={
-                                                                courseId
-                                                                    ? courseId
-                                                                    : ''
-                                                            }
-                                                        />
+                                                        {groups.map(
+                                                            (group, index) => (
+                                                                <>
+                                                                    {index !=
+                                                                    0 ? (
+                                                                        <Divider />
+                                                                    ) : (
+                                                                        <></>
+                                                                    )}
+                                                                    <SubmissionListItemTeacherPage
+                                                                        relative_group_id={(
+                                                                            group.groep_id -
+                                                                            Math.min(
+                                                                                ...groups.map(
+                                                                                    (
+                                                                                        group
+                                                                                    ) =>
+                                                                                        group.groep_id
+                                                                                )
+                                                                            ) +
+                                                                            1
+                                                                        ).toString()}
+                                                                        group_id={group.groep_id.toString()}
+                                                                        assignment_id={
+                                                                            assignmentId
+                                                                                ? assignmentId
+                                                                                : ''
+                                                                        }
+                                                                        course_id={
+                                                                            courseId
+                                                                                ? courseId
+                                                                                : ''
+                                                                        }
+                                                                    />
+                                                                </>
+                                                            )
+                                                        )}
                                                     </>
-                                                ))}
-                                                </>
-                                        )}
-                                        </List>
+                                                )}
+                                            </List>
                                         </Box>
                                     </Box>
                                 </Card>
@@ -717,22 +762,34 @@ export function AssignmentPage() {
                                             padding: 3,
                                         }}
                                     >
-                                   <EvenlySpacedRow items={[
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('submission')}
-                                        </Typography>,
-                                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                                            {t('time')}
-                                        </Typography>,
-                                        <Typography variant={'h5'}  sx={{ fontWeight: 'bold' }}>
-                                            Status
-                                        </Typography>
-                                        ]}/>
+                                        <EvenlySpacedRow
+                                            items={[
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('submission')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    {t('time')}
+                                                </Typography>,
+                                                <Typography
+                                                    variant={'h5'}
+                                                    sx={{ fontWeight: 'bold' }}
+                                                >
+                                                    Status
+                                                </Typography>,
+                                            ]}
+                                        />
                                     </Box>
-                                    <Divider/>
+                                    <Divider />
                                     <Box
                                         style={{
-                                            position: 'relative', top: '-6px',
+                                            position: 'relative',
+                                            top: '-6px',
                                             maxHeight: 340,
                                         }}
                                     >
@@ -766,13 +823,24 @@ export function AssignmentPage() {
                                                                     ? 1
                                                                     : -1
                                                             )
-                                                            .map((submission,index) => (
+                                                            .map(
+                                                                (
+                                                                    submission,
+                                                                    index
+                                                                ) => (
                                                                     <Box
                                                                         key={
                                                                             submission.indiening_id
                                                                         }
                                                                     >
-                                                                        {index != 0 ?  <Divider/> : <></>}
+                                                                        {index !=
+                                                                        0 ? (
+                                                                            <Divider />
+                                                                        ) : (
+                                                                            <>
+
+                                                                            </>
+                                                                        )}
                                                                         <SubmissionListItemStudentPage
                                                                             realId={submission.indiening_id.toString()}
                                                                             visualId={(
@@ -841,40 +909,41 @@ export function AssignmentPage() {
 
                                 {/*Upload button, this is what the student will see. */}
                                 <Grid container spacing={2}>
-                                <Grid>
-                                <FileUploadButton
-                                    name={t('upload')}
-                                    path={
-                                        loading
-                                            ? new File(
-                                                  [],
-                                                  t('loading') +
-                                                      '...'
-                                              )
-                                            : submissionFile
-                                    }
-                                    onFileChange={handleFileChange}
-                                    fileTypes={[
-                                        '.zip',
-                                        '.pdf',
-                                        '.txt',
-                                    ]}
-                                    tooltip={t('uploadToolTip')}
-                                />
-                                </Grid>
-                                <Grid>
-                                <Box  sx={{ position: 'relative', top: '8px', ml: 2}}>
-                                    <Tooltip title={t('upload')}>
-                                        <SecundaryButton
-                                            onClick={uploadIndiening}
+                                    <Grid>
+                                        <FileUploadButton
+                                            name={t('upload')}
+                                            path={
+                                                loading
+                                                    ? new File(
+                                                          [],
+                                                          t('loading') + '...'
+                                                      )
+                                                    : submissionFile
+                                            }
+                                            onFileChange={handleFileChange}
+                                            fileTypes={['.zip', '.pdf', '.txt']}
+                                            tooltip={t('uploadToolTip')}
+                                        />
+                                    </Grid>
+                                    <Grid>
+                                        <Box
+                                            sx={{
+                                                position: 'relative',
+                                                top: '8px',
+                                                ml: 2,
+                                            }}
                                         >
-                                            <Typography>
-                                                {t('submit')}
-                                            </Typography>
-                                        </SecundaryButton>
-                                    </Tooltip>
-                                </Box>
-                                </Grid>
+                                            <Tooltip title={t('upload')}>
+                                                <SecundaryButton
+                                                    onClick={uploadIndiening}
+                                                >
+                                                    <Typography>
+                                                        {t('submit')}
+                                                    </Typography>
+                                                </SecundaryButton>
+                                            </Tooltip>
+                                        </Box>
+                                    </Grid>
                                 </Grid>
                             </Stack>
                             <WarningPopup
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index fa379442..2065347b 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -11,12 +11,12 @@ import {
 } from '@mui/material'
 import List from '@mui/material/List'
 import { useEffect, useState } from 'react'
-import {Header} from "../../components/Header.tsx";
+import { Header } from '../../components/Header.tsx'
 import { t } from 'i18next'
-import { Button } from '../../components/CustomComponents.tsx';
+import { Button } from '../../components/CustomComponents.tsx'
 import { useNavigate, useParams } from 'react-router-dom'
-import instance from "../../axiosConfig.ts";
-import { User } from '../subjectsPage/AddChangeSubjectPage.tsx';
+import instance from '../../axiosConfig.ts'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 export interface Group {
     groep_id: number
@@ -39,8 +39,12 @@ export interface Assignment {
     file?: File
 }
 
-function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> void){
-    if(isin){
+function joinLeaveButton(
+    isin: boolean,
+    handleJoin: () => void,
+    handleLeave: () => void
+) {
+    if (isin) {
         return (
             <>
                 <Button
@@ -67,15 +71,14 @@ function joinLeaveButton(isin:boolean,handleJoin: ()=> void,handleLeave: ()=> vo
 }
 
 export function ChooseGroup() {
-
     const params = useParams()
     const navigate = useNavigate()
 
-    const [studenten,setStudenten]=useState<Record<number, User>>({});
-    const [groups,setGroups]=useState<Group[]>([]);
-    const [open,setOpen] = useState<boolean>(false);
+    const [studenten, setStudenten] = useState<Record<number, User>>({})
+    const [groups, setGroups] = useState<Group[]>([])
+    const [open, setOpen] = useState<boolean>(false)
     const [user, setUser] = useState<User>()
-    const [assignment,setAssignment]= useState<Assignment>()
+    const [assignment, setAssignment] = useState<Assignment>()
 
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
@@ -83,12 +86,12 @@ export function ChooseGroup() {
     const assignmentId = params.assignmentId
 
     const handleClose = () => {
-        setOpen(false);
+        setOpen(false)
     }
 
-    useEffect(()=>{
+    useEffect(() => {
         setUserLoading(true)
-        setLoading(true);
+        setLoading(true)
         instance
             .get('/gebruikers/me/')
             .then((res) => {
@@ -99,24 +102,30 @@ export function ChooseGroup() {
             })
         setUserLoading(false)
         instance
-            .get('/projecten/'+assignmentId+'/')
+            .get('/projecten/' + assignmentId + '/')
             .then((res) => {
                 setAssignment(res.data)
             })
             .catch((err) => {
                 console.log(err)
             })
-        instance.get('projecten/'+assignmentId)
-            .then((res) =>{
-                instance.get('vakken/'+res.data.vak)
+        instance
+            .get('projecten/' + assignmentId)
+            .then((res) => {
+                instance
+                    .get('vakken/' + res.data.vak)
                     .then((res) => {
                         //setStudenten(res.data.studenten)
-                        for (let i=0;i<res.data.studenten.length;i++){
-                            const studentid=res.data.studenten[i]
-                            instance.get('gebruikers/'+studentid)
+                        for (let i = 0; i < res.data.studenten.length; i++) {
+                            const studentid = res.data.studenten[i]
+                            instance
+                                .get('gebruikers/' + studentid)
                                 .then((res) => {
                                     setStudenten((oldstudenten) => {
-                                        return {...oldstudenten,[res.data.user]: res.data}
+                                        return {
+                                            ...oldstudenten,
+                                            [res.data.user]: res.data,
+                                        }
                                     })
                                 })
                                 .catch((err) => {
@@ -132,12 +141,11 @@ export function ChooseGroup() {
                 console.log(err)
             })
 
-
-        instance.get('groepen/?project='+assignmentId)
+        instance
+            .get('groepen/?project=' + assignmentId)
             .then((res) => {
-                for (let i=0;i<res.data.length;i++){
-                    setGroups((oldGroups)=> {
-
+                for (let i = 0; i < res.data.length; i++) {
+                    setGroups((oldGroups) => {
                         let found = false
                         const id = res.data[i].groep_id
                         for (const group of oldGroups) {
@@ -148,19 +156,18 @@ export function ChooseGroup() {
                         if (found) {
                             return oldGroups
                         } else {
-                            return [...oldGroups,res.data[i]].sort((a,b) =>{
-                                return a.groep_id-b.groep_id
+                            return [...oldGroups, res.data[i]].sort((a, b) => {
+                                return a.groep_id - b.groep_id
                             })
                         }
                     })
-                }   
+                }
             })
             .catch((err) => {
                 console.log(err)
             })
-            setLoading(false)
-    },[])
-
+        setLoading(false)
+    }, [])
 
     return (
         <>
@@ -181,217 +188,520 @@ export function ChooseGroup() {
                 <>
                     {!user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-                <Stack direction={'column'}>
-                <Header variant={'not_main'} title={loading ? '' : `${assignment?.titel}: ${t('groups')}`} />
-                <Stack
-                    direction={'column'}
-                    spacing={1}
-                    marginTop={11}
-                    sx={{
-                        width: '100%',
-                        height: '70 %',
-                        backgroundColor: 'background.default',
-                    }}
-                >
-                    <Card
-                        elevation={1}
-                        sx={{
-                            color: 'text.primary',
-                            backgroundColor: 'background.default',
-                            borderRadius: 5,
-                            padding: '20px',
-                        }}
-                    >
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            justifyContent={'space-between'}
-                            pl={3}
-                            pr={3}
-                        >
-                            <Typography sx={{ fontWeight: 'bold' }}>
-                                {t('group_number')}
-                            </Typography>
-                            <Typography sx={{ fontWeight: 'bold' }}>
-                                {t('members')}
-                            </Typography>
-                            <Typography sx={{ fontWeight: 'bold' }}>
-
-                            </Typography>
-                        </Box>
-                    <List
-                        disablePadding={true}
-                        sx={{
-                            '& > :not(style)': {
-                                marginBottom: '8px',
-                            },
-                        }}
-                    >
-                        {groups.map((group: Group) => {
-                            //const group=getGroup(id)
-
-                            const handleJoin = () =>{
-                                setGroups((oldGroups) :Group[] =>{
-                                    if (user==undefined){
-                                        return oldGroups
-                                    }
-                                    if (assignment==undefined){
-                                        return oldGroups
-                                    }
-
-                                    let j=0
-
-                                    let edittedgroup=undefined
-
-                                    for (let i = 0; i < oldGroups.length; i++) {
-                                        if(oldGroups[i].studenten.includes(user.user)){
-                                            const newgroup1={
-                                                groep_id: oldGroups[i].groep_id,
-                                                project: oldGroups[i].project,
-                                                studenten: oldGroups[i].studenten.filter(student => student != user.user),
-                                            }
-
-                                            instance.patch("groepen/"+oldGroups[i].groep_id+"/",{studenten: oldGroups[i].studenten.filter(student => student != user.user)})
-                                                .catch((err) =>{
-                                                    console.log(err)
-                                                })
-                                            j=i
-                                            edittedgroup=newgroup1
-                                        }
-                                    }
-
-                                    for (let i = 0; i < oldGroups.length; i++) {
-                                        if(oldGroups[i].groep_id==group.groep_id){
-                                            if (group.studenten.length >= assignment.max_groep_grootte){
-                                                return oldGroups
-                                            }
-                                            const newgroup={
-                                                groep_id: group.groep_id,
-                                                project: group.project,
-                                                studenten: [...group.studenten,user.user],
-                                            }
-                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: [...group.studenten,user.user]})
-                                                .catch((err) =>{
-                                                    console.log(err)
-                                                })
-
-                                            if (edittedgroup!=undefined){
-                                                if(i<j){
-                                                    return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1,j),edittedgroup,...oldGroups.slice(j+1)].sort((a,b) =>{
-                                                        return a.groep_id-b.groep_id
-                                                    })
-                                                }
-                                                return [...oldGroups.slice(0,j),edittedgroup,...oldGroups.slice(j+1,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
-                                                    return a.groep_id-b.groep_id
-                                                })
-                                            }
-
-                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
-                                                return a.groep_id-b.groep_id
-                                            })
-                                        }
+                        <>
+                            <Stack direction={'column'}>
+                                <Header
+                                    variant={'not_main'}
+                                    title={
+                                        loading
+                                            ? ''
+                                            : `${assignment?.titel}: ${t('groups')}`
                                     }
-                                    return oldGroups
-                                })
-                            }
-
-                            const handleLeave = () =>{
-                                setGroups((oldGroups)=>{
-                                    if (user==undefined){
-                                        return oldGroups
-                                    }
-                                    for (let i = 0; i < oldGroups.length; i++) {
-                                        if(oldGroups[i].groep_id==group.groep_id){
-                                            const newgroup={
-                                                groep_id: group.groep_id,
-                                                project: group.project,
-                                                studenten: group.studenten.filter(student => student != user.user),
-                                            }
-                                            instance.patch("groepen/"+group.groep_id+"/",{studenten: group.studenten.filter(student => student != user.user)})
-                                                .catch((err) =>{
-                                                    console.log(err)
-                                                })
-
-                                            return [...oldGroups.slice(0,i),newgroup,...oldGroups.slice(i+1)].sort((a,b) =>{
-                                                return a.groep_id-b.groep_id
-                                            })
-                                        }
-                                    }
-                                    return oldGroups
-                                })
-                            }
-
-                            return (
-                                <>
-                                    <ListItem
+                                />
+                                <Stack
+                                    direction={'column'}
+                                    spacing={1}
+                                    marginTop={11}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70 %',
+                                        backgroundColor: 'background.default',
+                                    }}
+                                >
+                                    <Card
+                                        elevation={1}
                                         sx={{
-                                            width: '100%',
-                                            //minheight: 30,
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            justifyContent: 'space-between',
-                                            paddingX: 1,
-                                            paddingY: 3,
-                                            borderRadius: 2,
+                                            color: 'text.primary',
+                                            backgroundColor:
+                                                'background.default',
+                                            borderRadius: 5,
+                                            padding: '20px',
                                         }}
                                     >
-
-                                        <ListItemText
-                                            sx={{ maxWidth: 100 }}
-                                            primary={groups.indexOf(group)+1}
-                                        />
-
-                                        <Box display={'flex'} flexDirection={'column'}>
-                                            {loading ? (
-                                                <Typography>{t('members_loading')}</Typography>
-                                            ) : (
-                                                <>
-                                                    {group.studenten.length > 0 ? (
-                                                        group.studenten.map((studentid) => {
-                                                            const student = studenten[studentid];
-                                                            if (student) {
-                                                                console.log('Student:', student);
-                                                                return (
-                                                                    <Typography key={studentid}>
-                                                                        {student.first_name + " " + student.last_name}
-                                                                    </Typography>
-                                                                );
-                                                            }
-                                                            return null;
-                                                        })
-                                                    ) : (
-                                                        <Typography>{t('no_members_yet')}</Typography>
-                                                    )}
-                                                </>
-                                            )}
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            justifyContent={'space-between'}
+                                            pl={3}
+                                            pr={3}
+                                        >
+                                            <Typography
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('group_number')}
+                                            </Typography>
+                                            <Typography
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('members')}
+                                            </Typography>
+                                            <Typography
+                                                sx={{ fontWeight: 'bold' }}
+                                            ></Typography>
                                         </Box>
+                                        <List
+                                            disablePadding={true}
+                                            sx={{
+                                                '& > :not(style)': {
+                                                    marginBottom: '8px',
+                                                },
+                                            }}
+                                        >
+                                            {groups.map((group: Group) => {
+                                                //const group=getGroup(id)
+
+                                                const handleJoin = () => {
+                                                    setGroups(
+                                                        (
+                                                            oldGroups
+                                                        ): Group[] => {
+                                                            if (
+                                                                user ==
+                                                                undefined
+                                                            ) {
+                                                                return oldGroups
+                                                            }
+                                                            if (
+                                                                assignment ==
+                                                                undefined
+                                                            ) {
+                                                                return oldGroups
+                                                            }
 
-                                        {joinLeaveButton(user!=undefined ? group.studenten.includes(user.user):false,handleJoin,handleLeave)}
-
-                                    </ListItem>
-                                    <Divider color={'text.main'}></Divider>
-                                </>
-                            )
-                        })
-                        }
-                    </List>
+                                                            let j = 0
+
+                                                            let edittedgroup =
+                                                                undefined
+
+                                                            for (
+                                                                let i = 0;
+                                                                i <
+                                                                oldGroups.length;
+                                                                i++
+                                                            ) {
+                                                                if (
+                                                                    oldGroups[
+                                                                        i
+                                                                    ].studenten.includes(
+                                                                        user.user
+                                                                    )
+                                                                ) {
+                                                                    const newgroup1 =
+                                                                        {
+                                                                            groep_id:
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ]
+                                                                                    .groep_id,
+                                                                            project:
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ]
+                                                                                    .project,
+                                                                            studenten:
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ].studenten.filter(
+                                                                                    (
+                                                                                        student
+                                                                                    ) =>
+                                                                                        student !=
+                                                                                        user.user
+                                                                                ),
+                                                                        }
+
+                                                                    instance
+                                                                        .patch(
+                                                                            'groepen/' +
+                                                                                oldGroups[
+                                                                                    i
+                                                                                ]
+                                                                                    .groep_id +
+                                                                                '/',
+                                                                            {
+                                                                                studenten:
+                                                                                    oldGroups[
+                                                                                        i
+                                                                                    ].studenten.filter(
+                                                                                        (
+                                                                                            student
+                                                                                        ) =>
+                                                                                            student !=
+                                                                                            user.user
+                                                                                    ),
+                                                                            }
+                                                                        )
+                                                                        .catch(
+                                                                            (
+                                                                                err
+                                                                            ) => {
+                                                                                console.log(
+                                                                                    err
+                                                                                )
+                                                                            }
+                                                                        )
+                                                                    j = i
+                                                                    edittedgroup =
+                                                                        newgroup1
+                                                                }
+                                                            }
 
-                        <Dialog onClose={handleClose} open={open}>
-                            <Box padding={2} alignItems={'center'} gap={1}>
-                                <Typography> {"placeholder"} </Typography>
-                            </Box>
-                        </Dialog>
+                                                            for (
+                                                                let i = 0;
+                                                                i <
+                                                                oldGroups.length;
+                                                                i++
+                                                            ) {
+                                                                if (
+                                                                    oldGroups[i]
+                                                                        .groep_id ==
+                                                                    group.groep_id
+                                                                ) {
+                                                                    if (
+                                                                        group
+                                                                            .studenten
+                                                                            .length >=
+                                                                        assignment.max_groep_grootte
+                                                                    ) {
+                                                                        return oldGroups
+                                                                    }
+                                                                    const newgroup =
+                                                                        {
+                                                                            groep_id:
+                                                                                group.groep_id,
+                                                                            project:
+                                                                                group.project,
+                                                                            studenten:
+                                                                                [
+                                                                                    ...group.studenten,
+                                                                                    user.user,
+                                                                                ],
+                                                                        }
+                                                                    instance
+                                                                        .patch(
+                                                                            'groepen/' +
+                                                                                group.groep_id +
+                                                                                '/',
+                                                                            {
+                                                                                studenten:
+                                                                                    [
+                                                                                        ...group.studenten,
+                                                                                        user.user,
+                                                                                    ],
+                                                                            }
+                                                                        )
+                                                                        .catch(
+                                                                            (
+                                                                                err
+                                                                            ) => {
+                                                                                console.log(
+                                                                                    err
+                                                                                )
+                                                                            }
+                                                                        )
+
+                                                                    if (
+                                                                        edittedgroup !=
+                                                                        undefined
+                                                                    ) {
+                                                                        if (
+                                                                            i <
+                                                                            j
+                                                                        ) {
+                                                                            return [
+                                                                                ...oldGroups.slice(
+                                                                                    0,
+                                                                                    i
+                                                                                ),
+                                                                                newgroup,
+                                                                                ...oldGroups.slice(
+                                                                                    i +
+                                                                                        1,
+                                                                                    j
+                                                                                ),
+                                                                                edittedgroup,
+                                                                                ...oldGroups.slice(
+                                                                                    j +
+                                                                                        1
+                                                                                ),
+                                                                            ].sort(
+                                                                                (
+                                                                                    a,
+                                                                                    b
+                                                                                ) => {
+                                                                                    return (
+                                                                                        a.groep_id -
+                                                                                        b.groep_id
+                                                                                    )
+                                                                                }
+                                                                            )
+                                                                        }
+                                                                        return [
+                                                                            ...oldGroups.slice(
+                                                                                0,
+                                                                                j
+                                                                            ),
+                                                                            edittedgroup,
+                                                                            ...oldGroups.slice(
+                                                                                j +
+                                                                                    1,
+                                                                                i
+                                                                            ),
+                                                                            newgroup,
+                                                                            ...oldGroups.slice(
+                                                                                i +
+                                                                                    1
+                                                                            ),
+                                                                        ].sort(
+                                                                            (
+                                                                                a,
+                                                                                b
+                                                                            ) => {
+                                                                                return (
+                                                                                    a.groep_id -
+                                                                                    b.groep_id
+                                                                                )
+                                                                            }
+                                                                        )
+                                                                    }
+
+                                                                    return [
+                                                                        ...oldGroups.slice(
+                                                                            0,
+                                                                            i
+                                                                        ),
+                                                                        newgroup,
+                                                                        ...oldGroups.slice(
+                                                                            i +
+                                                                                1
+                                                                        ),
+                                                                    ].sort(
+                                                                        (
+                                                                            a,
+                                                                            b
+                                                                        ) => {
+                                                                            return (
+                                                                                a.groep_id -
+                                                                                b.groep_id
+                                                                            )
+                                                                        }
+                                                                    )
+                                                                }
+                                                            }
+                                                            return oldGroups
+                                                        }
+                                                    )
+                                                }
 
+                                                const handleLeave = () => {
+                                                    setGroups((oldGroups) => {
+                                                        if (user == undefined) {
+                                                            return oldGroups
+                                                        }
+                                                        for (
+                                                            let i = 0;
+                                                            i <
+                                                            oldGroups.length;
+                                                            i++
+                                                        ) {
+                                                            if (
+                                                                oldGroups[i]
+                                                                    .groep_id ==
+                                                                group.groep_id
+                                                            ) {
+                                                                const newgroup =
+                                                                    {
+                                                                        groep_id:
+                                                                            group.groep_id,
+                                                                        project:
+                                                                            group.project,
+                                                                        studenten:
+                                                                            group.studenten.filter(
+                                                                                (
+                                                                                    student
+                                                                                ) =>
+                                                                                    student !=
+                                                                                    user.user
+                                                                            ),
+                                                                    }
+                                                                instance
+                                                                    .patch(
+                                                                        'groepen/' +
+                                                                            group.groep_id +
+                                                                            '/',
+                                                                        {
+                                                                            studenten:
+                                                                                group.studenten.filter(
+                                                                                    (
+                                                                                        student
+                                                                                    ) =>
+                                                                                        student !=
+                                                                                        user.user
+                                                                                ),
+                                                                        }
+                                                                    )
+                                                                    .catch(
+                                                                        (
+                                                                            err
+                                                                        ) => {
+                                                                            console.log(
+                                                                                err
+                                                                            )
+                                                                        }
+                                                                    )
+
+                                                                return [
+                                                                    ...oldGroups.slice(
+                                                                        0,
+                                                                        i
+                                                                    ),
+                                                                    newgroup,
+                                                                    ...oldGroups.slice(
+                                                                        i + 1
+                                                                    ),
+                                                                ].sort(
+                                                                    (a, b) => {
+                                                                        return (
+                                                                            a.groep_id -
+                                                                            b.groep_id
+                                                                        )
+                                                                    }
+                                                                )
+                                                            }
+                                                        }
+                                                        return oldGroups
+                                                    })
+                                                }
 
-                    </Card>
-                </Stack>
-            </Stack>
+                                                return (
+                                                    <>
+                                                        <ListItem
+                                                            sx={{
+                                                                width: '100%',
+                                                                //minheight: 30,
+                                                                display: 'flex',
+                                                                flexDirection:
+                                                                    'row',
+                                                                justifyContent:
+                                                                    'space-between',
+                                                                paddingX: 1,
+                                                                paddingY: 3,
+                                                                borderRadius: 2,
+                                                            }}
+                                                        >
+                                                            <ListItemText
+                                                                sx={{
+                                                                    maxWidth: 100,
+                                                                }}
+                                                                primary={
+                                                                    groups.indexOf(
+                                                                        group
+                                                                    ) + 1
+                                                                }
+                                                            />
+
+                                                            <Box
+                                                                display={'flex'}
+                                                                flexDirection={
+                                                                    'column'
+                                                                }
+                                                            >
+                                                                {loading ? (
+                                                                    <Typography>
+                                                                        {t(
+                                                                            'members_loading'
+                                                                        )}
+                                                                    </Typography>
+                                                                ) : (
+                                                                    <>
+                                                                        {group
+                                                                            .studenten
+                                                                            .length >
+                                                                        0 ? (
+                                                                            group.studenten.map(
+                                                                                (
+                                                                                    studentid
+                                                                                ) => {
+                                                                                    const student =
+                                                                                        studenten[
+                                                                                            studentid
+                                                                                        ]
+                                                                                    if (
+                                                                                        student
+                                                                                    ) {
+                                                                                        console.log(
+                                                                                            'Student:',
+                                                                                            student
+                                                                                        )
+                                                                                        return (
+                                                                                            <Typography
+                                                                                                key={
+                                                                                                    studentid
+                                                                                                }
+                                                                                            >
+                                                                                                {student.first_name +
+                                                                                                    ' ' +
+                                                                                                    student.last_name}
+                                                                                            </Typography>
+                                                                                        )
+                                                                                    }
+                                                                                    return null
+                                                                                }
+                                                                            )
+                                                                        ) : (
+                                                                            <Typography>
+                                                                                {t(
+                                                                                    'no_members_yet'
+                                                                                )}
+                                                                            </Typography>
+                                                                        )}
+                                                                    </>
+                                                                )}
+                                                            </Box>
+
+                                                            {joinLeaveButton(
+                                                                user !=
+                                                                    undefined
+                                                                    ? group.studenten.includes(
+                                                                          user.user
+                                                                      )
+                                                                    : false,
+                                                                handleJoin,
+                                                                handleLeave
+                                                            )}
+                                                        </ListItem>
+                                                        <Divider
+                                                            color={'text.main'}
+                                                        ></Divider>
+                                                    </>
+                                                )
+                                            })}
+                                        </List>
+
+                                        <Dialog
+                                            onClose={handleClose}
+                                            open={open}
+                                        >
+                                            <Box
+                                                padding={2}
+                                                alignItems={'center'}
+                                                gap={1}
+                                            >
+                                                <Typography>
+                                                    {' '}
+                                                    {'placeholder'}{' '}
+                                                </Typography>
+                                            </Box>
+                                        </Dialog>
+                                    </Card>
+                                </Stack>
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
\ No newline at end of file
+    )
+}
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index 09ae0368..c82b8b9d 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -167,38 +167,41 @@ export function ProjectScoresPage() {
         groepen
             .filter((groep) => groep.lastSubmission !== undefined)
             .map((groep) => groep.lastSubmission)
-            .forEach(submission => {
+            .forEach((submission) => {
                 downloadPromises.push(
                     new Promise(async (resolve, reject) => {
                         try {
                             // Get the submission details
                             const submissionResponse = await instance.get(
                                 `/indieningen/${submission?.indiening_id}/`
-                            );
-                            const newSubmission = submissionResponse.data;
+                            )
+                            const newSubmission = submissionResponse.data
                             // Get the submission file
                             const fileResponse = await instance.get(
                                 `/indieningen/${submission?.indiening_id}/indiening_bestand/`,
                                 { responseType: 'blob' }
-                            );
-                            let filename = 'indiening.zip';
+                            )
+                            let filename = 'indiening.zip'
                             if (newSubmission.bestand) {
-                                filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                                filename = newSubmission.bestand.replace(
+                                    /^.*[\\/]/,
+                                    ''
+                                )
                             }
                             const blob = new Blob([fileResponse.data], {
                                 type: fileResponse.headers['content-type'],
-                            });
+                            })
                             const file = new File([blob], filename, {
                                 type: fileResponse.headers['content-type'],
-                            });
-                            newSubmission.bestand = file;
-                            newSubmission.filename = filename;
+                            })
+                            newSubmission.bestand = file
+                            newSubmission.filename = filename
                             // Add the file to the zip
-                            zip.file(filename, fileResponse.data);
-                            resolve(newSubmission);
+                            zip.file(filename, fileResponse.data)
+                            resolve(newSubmission)
                         } catch (err) {
-                            console.error(`Error downloading submission:`, err);
-                            reject(err);
+                            console.error(`Error downloading submission:`, err)
+                            reject(err)
                         }
                     })
                 )
@@ -210,7 +213,8 @@ export function ProjectScoresPage() {
                         const url = window.URL.createObjectURL(blob)
                         const a = document.createElement('a')
                         a.href = url
-                        a.download = 'all_submissions_' + project?.titel +'_.zip'
+                        a.download =
+                            'all_submissions_' + project?.titel + '_.zip'
                         document.body.appendChild(a)
                         a.click()
                         a.remove()
@@ -299,149 +303,168 @@ export function ProjectScoresPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            <Stack
-                direction={'column'}
-                spacing={0}
-                sx={{
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: 'background.default',
-                }}
-            >
-                <Header
-                    variant={'default'}
-                    title={loading ? '' : project?.titel + ': Scores'}
-                />
-                {/* Main content box */}
-
-                <Card
-                    sx={{
-                        marginTop: 12,
-                    }}
-                >
-                    {/* Render StudentsView component if project is defined */}
-                    {loading ? (
-                        <Box
-                            display={'flex'}
-                            justifyContent={'center'}
-                            flexGrow={1}
-                        >
-                            <CircularProgress color={'primary'} />
-                        </Box>
-                    ) : (
                         <>
-                            {project && (
-                                <StudentsView
-                                    project={project}
-                                    groepen={groepen}
-                                    setGroepen={setGroepen}
-                                    changeScore={changeScore}
+                            <Stack
+                                direction={'column'}
+                                spacing={0}
+                                sx={{
+                                    width: '100%',
+                                    height: '100%',
+                                    backgroundColor: 'background.default',
+                                }}
+                            >
+                                <Header
+                                    variant={'default'}
+                                    title={
+                                        loading
+                                            ? ''
+                                            : project?.titel + ': Scores'
+                                    }
                                 />
-                            )}
-                        </>
-                    )}
-                </Card>
-                {/* Footer section with action buttons */}
-                <Box
-                    display="flex"
-                    flexDirection="row"
-                    sx={{
-                        marginTop: -4,
-                    }}
-                >
-                    <Box
-                        display="flex"
-                        flexDirection="row"
-                        padding={'3px'}
-                        sx={{ width: '50%', height: 'auto' }}
-                    >
-                        <Stack
-                            direction="row"
-                            alignItems="center"
-                            spacing={2}
-                            marginY={6}
-                        >
-                            <Button onClick={exportSubmissions}>
-                                {t('export_submissions')}
-                            </Button>
+                                {/* Main content box */}
 
-                            <Button variant={'contained'}>
-                                {t('upload_scores')}
-                                <VisuallyHiddenInput
-                                    type="file"
-                                    value={undefined}
-                                    accept={['.csv'].join(',')}
-                                    multiple={false}
-                                    onChange={uploadScores}
-                                />
-                            </Button>
-                        </Stack>
-                    </Box>
-                    <Box
-                        display="flex"
-                        flexDirection="row-reverse"
-                        padding={'3px'}
-                        sx={{ width: '50%', height: 'auto' }}
-                    >
-                        {loading ? (
-                            <Skeleton
-                                variant="rectangular"
-                                width={40}
-                                height={40}
-                            />
-                        ) : (
-                            <>
-                                <IconButton
-                                    onClick={() => setOpenSaveScoresPopup(true)}
+                                <Card
                                     sx={{
-                                        color: 'background.default',
-                                        '&:hover': {
-                                            color: 'text.primary',
-                                        },
-                                        backgroundColor: 'primary.main',
-                                        borderRadius: 2,
+                                        marginTop: 12,
                                     }}
                                 >
-                                    <SaveIcon />
-                                </IconButton>
-                            </>
-                        )}
-                        <IconButton
-                            onClick={() => setOpenDeleteScoresPopup(true)}
-                            sx={{
-                                backgroundColor: 'secondary.main',
-                                borderRadius: 2,
-                            }}
-                        >
-                            <CloseIcon />
-                        </IconButton>
-                    </Box>
-                </Box>
-                {/* Popup for confirming saving scores */}
-                <WarningPopup
-                    title={t('edit_scores_warning')}
-                    content={t('visible_for_everyone')}
-                    buttonName={t('confirm')}
-                    open={openSaveScoresPopup}
-                    handleClose={() => setOpenSaveScoresPopup(false)}
-                    doAction={saveScores}
-                />
-                {/* Popup for confirming deletion of scores */}
-                <WarningPopup
-                    title={t('undo_changes_warning')}
-                    content={t('cant_be_undone')}
-                    buttonName={t('confirm')}
-                    open={openDeleteScoresPopup}
-                    handleClose={() => setOpenDeleteScoresPopup(false)}
-                    doAction={deleteScores}
-                />
-            </Stack>
+                                    {/* Render StudentsView component if project is defined */}
+                                    {loading ? (
+                                        <Box
+                                            display={'flex'}
+                                            justifyContent={'center'}
+                                            flexGrow={1}
+                                        >
+                                            <CircularProgress
+                                                color={'primary'}
+                                            />
+                                        </Box>
+                                    ) : (
+                                        <>
+                                            {project && (
+                                                <StudentsView
+                                                    project={project}
+                                                    groepen={groepen}
+                                                    setGroepen={setGroepen}
+                                                    changeScore={changeScore}
+                                                />
+                                            )}
+                                        </>
+                                    )}
+                                </Card>
+                                {/* Footer section with action buttons */}
+                                <Box
+                                    display="flex"
+                                    flexDirection="row"
+                                    sx={{
+                                        marginTop: -4,
+                                    }}
+                                >
+                                    <Box
+                                        display="flex"
+                                        flexDirection="row"
+                                        padding={'3px'}
+                                        sx={{ width: '50%', height: 'auto' }}
+                                    >
+                                        <Stack
+                                            direction="row"
+                                            alignItems="center"
+                                            spacing={2}
+                                            marginY={6}
+                                        >
+                                            <Button onClick={exportSubmissions}>
+                                                {t('export_submissions')}
+                                            </Button>
+
+                                            <Button variant={'contained'}>
+                                                {t('upload_scores')}
+                                                <VisuallyHiddenInput
+                                                    type="file"
+                                                    value={undefined}
+                                                    accept={['.csv'].join(',')}
+                                                    multiple={false}
+                                                    onChange={uploadScores}
+                                                />
+                                            </Button>
+                                        </Stack>
+                                    </Box>
+                                    <Box
+                                        display="flex"
+                                        flexDirection="row-reverse"
+                                        padding={'3px'}
+                                        sx={{ width: '50%', height: 'auto' }}
+                                    >
+                                        {loading ? (
+                                            <Skeleton
+                                                variant="rectangular"
+                                                width={40}
+                                                height={40}
+                                            />
+                                        ) : (
+                                            <>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        setOpenSaveScoresPopup(
+                                                            true
+                                                        )
+                                                    }
+                                                    sx={{
+                                                        color: 'background.default',
+                                                        '&:hover': {
+                                                            color: 'text.primary',
+                                                        },
+                                                        backgroundColor:
+                                                            'primary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                >
+                                                    <SaveIcon />
+                                                </IconButton>
+                                            </>
+                                        )}
+                                        <IconButton
+                                            onClick={() =>
+                                                setOpenDeleteScoresPopup(true)
+                                            }
+                                            sx={{
+                                                backgroundColor:
+                                                    'secondary.main',
+                                                borderRadius: 2,
+                                            }}
+                                        >
+                                            <CloseIcon />
+                                        </IconButton>
+                                    </Box>
+                                </Box>
+                                {/* Popup for confirming saving scores */}
+                                <WarningPopup
+                                    title={t('edit_scores_warning')}
+                                    content={t('visible_for_everyone')}
+                                    buttonName={t('confirm')}
+                                    open={openSaveScoresPopup}
+                                    handleClose={() =>
+                                        setOpenSaveScoresPopup(false)
+                                    }
+                                    doAction={saveScores}
+                                />
+                                {/* Popup for confirming deletion of scores */}
+                                <WarningPopup
+                                    title={t('undo_changes_warning')}
+                                    content={t('cant_be_undone')}
+                                    buttonName={t('confirm')}
+                                    open={openDeleteScoresPopup}
+                                    handleClose={() =>
+                                        setOpenDeleteScoresPopup(false)
+                                    }
+                                    doAction={deleteScores}
+                                />
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
+                    )}
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
index 7805f909..0a6ac60a 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
@@ -65,22 +65,22 @@ export function StudentScoreListItem({
             // Get the submission details
             const submissionResponse = await instance.get(
                 `/indieningen/${lastSubmission?.indiening_id}/`
-            );
-            const newSubmission = submissionResponse.data;
+            )
+            const newSubmission = submissionResponse.data
             // Get the submission file
             const fileResponse = await instance.get(
                 `/indieningen/${lastSubmission?.indiening_id}/indiening_bestand/`,
                 { responseType: 'blob' }
-            );
+            )
             if (newSubmission.bestand) {
-                filename = newSubmission.bestand.replace(/^.*[\\/]/, '');
+                filename = newSubmission.bestand.replace(/^.*[\\/]/, '')
             }
             const blob = new Blob([fileResponse.data], {
                 type: fileResponse.headers['content-type'],
-            });
+            })
             const file = new File([blob], filename, {
                 type: fileResponse.headers['content-type'],
-            });
+            })
             const url = window.URL.createObjectURL(file)
             const a = document.createElement('a')
             a.href = url
@@ -155,24 +155,24 @@ export function StudentScoreListItem({
                             )}
                         </ListItem>
                         {/* Display download icon */}
-                    <ListItemText sx={{ maxWidth: 35 }}>
-                        <ListItemIcon>
-                            <div onClick={downloadSubmission}>
-                                {lastSubmission ? (
-                                    <DownloadIcon
-                                        sx={{
-                                            color: 'primary.main',
-                                            '&:hover': {
-                                                color: 'primary.light',
-                                            },
-                                        }}
-                                    />
-                                ) : (
-                                    <DownloadIcon sx={{ color: 'gray' }} />
-                                )}
-                            </div>
-                        </ListItemIcon>
-                    </ListItemText>
+                        <ListItemText sx={{ maxWidth: 35 }}>
+                            <ListItemIcon>
+                                <div onClick={downloadSubmission}>
+                                    {lastSubmission ? (
+                                        <DownloadIcon
+                                            sx={{
+                                                color: 'primary.main',
+                                                '&:hover': {
+                                                    color: 'primary.light',
+                                                },
+                                            }}
+                                        />
+                                    ) : (
+                                        <DownloadIcon sx={{ color: 'gray' }} />
+                                    )}
+                                </div>
+                            </ListItemIcon>
+                        </ListItemText>
                     </>
                 </ListItem>
             </ListItem>
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 7868a6fc..946cccde 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -9,7 +9,7 @@ import {
     Stack,
     TextField,
     Typography,
-    CircularProgress
+    CircularProgress,
 } from '@mui/material'
 import { Header } from '../../components/Header'
 import { Button } from '../../components/CustomComponents.tsx'
@@ -572,157 +572,176 @@ export function AddChangeSubjectPage() {
                 <>
                     {user?.is_lesgever ? (
                         // Rendering UI for teacher
-                    <>
-            <Stack direction={'column'}>
-                <Header variant={loading ? 'default' : 'not_main'} title={loading ? '' : title} />
-                <Stack
-                    direction={'column'}
-                    spacing={5}
-                    marginTop={11}
-                    sx={{
-                        width: '100%',
-                        height: '70%',
-                        backgroundColor: 'background.default',
-                    }}
-                >
-                    <Box
-                        sx={{
-                            backgroundColor: 'background.default',
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                        }}
-                    >
-                        <Box
-                            // This box contains the title of the subject.
-                            // This title can be changed if necessary.
-                            aria-label={'title'}
-                            display={'flex'}
-                            flexDirection={'row'}
-                            gap={2}
-                            alignItems={'center'}
-                        >
-                            <Typography
-                                variant={'h5'}
-                                color={'text.primary'}
-                                fontWeight={'bold'}
-                            >
-                                {t('subject_name') + ':'}
-                            </Typography>
-                            {loading ? (
-                                <Skeleton
-                                    variant={'text'}
-                                    width={200}
-                                    height={60}
+                        <>
+                            <Stack direction={'column'}>
+                                <Header
+                                    variant={loading ? 'default' : 'not_main'}
+                                    title={loading ? '' : title}
                                 />
-                            ) : (
-                                <TextField
-                                    type="text"
-                                    placeholder={t('title')}
-                                    onChange={(event) =>
-                                        setTitle(event.target.value)
-                                    }
-                                    sx={{ height: 60 }}
-                                />
-                            )}
-                        </Box>
-                        <Box padding={'20px'}>
-                            <Button
-                                /* This is the large save button on the top of the page */
-                                onClick={handleSave}
-                            >
-                                {t('save')}
-                            </Button>
-                        </Box>
-                    </Box>
-                    <Card>
-                        <Box bgcolor={'primary.light'} padding={'20px'}>
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                            >
-                                {t('students')}
-                            </Typography>
-                        </Box>
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            alignItems={'center'}
-                            gap={1}
-                            style={{ maxHeight: 300, overflow: 'auto' }}
-                        >
-                            {UserList(
-                                loading,
-                                students,
-                                setSelectedStudent,
-                                setOpenStudent
-                            )}
-                        </Box>
-                    </Card>
-                    <Box marginTop={-30}>
-                        {UploadPart(
-                            studentFile,
-                            handleStudentFileChange,
-                            setEmailStudent,
-                            handleAddStudent,
-                            t('upload_students')
-                        )}
-                    </Box>
-
-                    {DialogWindow(
-                        handleCloseStudent,
-                        openStudent,
-                        handleRemoveStudent,
-                        t('delete_student')
-                    )}
-
-                    <Card>
-                        <Box bgcolor={'primary.light'} padding={'20px'}>
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                            >
-                                {t('teachers')}
-                            </Typography>
-                        </Box>
-                        <Box
-                            display={'flex'}
-                            flexDirection={'row'}
-                            alignItems={'center'}
-                            style={{ maxHeight: 300, overflow: 'auto' }}
-                        >
-                            {UserList(
-                                loading,
-                                teachers,
-                                setSelectedTeacher,
-                                setOpenTeacher
-                            )}
-                        </Box>
-                    </Card>
-                    <Box marginTop={1}>
-                        {UploadPart(
-                            teacherFile,
-                            handleTeacherFileChange,
-                            setEmailTeacher,
-                            handleAddTeacher,
-                            t('upload_teachers')
-                        )}
-                    </Box>
-
-                    {DialogWindow(
-                        handleCloseTeacher,
-                        openTeacher,
-                        handleRemoveTeacher,
-                        t('delete_teacher')
+                                <Stack
+                                    direction={'column'}
+                                    spacing={5}
+                                    marginTop={11}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70%',
+                                        backgroundColor: 'background.default',
+                                    }}
+                                >
+                                    <Box
+                                        sx={{
+                                            backgroundColor:
+                                                'background.default',
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            justifyContent: 'space-between',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        <Box
+                                            // This box contains the title of the subject.
+                                            // This title can be changed if necessary.
+                                            aria-label={'title'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                            alignItems={'center'}
+                                        >
+                                            <Typography
+                                                variant={'h5'}
+                                                color={'text.primary'}
+                                                fontWeight={'bold'}
+                                            >
+                                                {t('subject_name') + ':'}
+                                            </Typography>
+                                            {loading ? (
+                                                <Skeleton
+                                                    variant={'text'}
+                                                    width={200}
+                                                    height={60}
+                                                />
+                                            ) : (
+                                                <TextField
+                                                    type="text"
+                                                    placeholder={t('title')}
+                                                    onChange={(event) =>
+                                                        setTitle(
+                                                            event.target.value
+                                                        )
+                                                    }
+                                                    sx={{ height: 60 }}
+                                                />
+                                            )}
+                                        </Box>
+                                        <Box padding={'20px'}>
+                                            <Button
+                                                /* This is the large save button on the top of the page */
+                                                onClick={handleSave}
+                                            >
+                                                {t('save')}
+                                            </Button>
+                                        </Box>
+                                    </Box>
+                                    <Card>
+                                        <Box
+                                            bgcolor={'primary.light'}
+                                            padding={'20px'}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('students')}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            alignItems={'center'}
+                                            gap={1}
+                                            style={{
+                                                maxHeight: 300,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            {UserList(
+                                                loading,
+                                                students,
+                                                setSelectedStudent,
+                                                setOpenStudent
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    <Box marginTop={-30}>
+                                        {UploadPart(
+                                            studentFile,
+                                            handleStudentFileChange,
+                                            setEmailStudent,
+                                            handleAddStudent,
+                                            t('upload_students')
+                                        )}
+                                    </Box>
+
+                                    {DialogWindow(
+                                        handleCloseStudent,
+                                        openStudent,
+                                        handleRemoveStudent,
+                                        t('delete_student')
+                                    )}
+
+                                    <Card>
+                                        <Box
+                                            bgcolor={'primary.light'}
+                                            padding={'20px'}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                {t('teachers')}
+                                            </Typography>
+                                        </Box>
+                                        <Box
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            alignItems={'center'}
+                                            style={{
+                                                maxHeight: 300,
+                                                overflow: 'auto',
+                                            }}
+                                        >
+                                            {UserList(
+                                                loading,
+                                                teachers,
+                                                setSelectedTeacher,
+                                                setOpenTeacher
+                                            )}
+                                        </Box>
+                                    </Card>
+                                    <Box marginTop={1}>
+                                        {UploadPart(
+                                            teacherFile,
+                                            handleTeacherFileChange,
+                                            setEmailTeacher,
+                                            handleAddTeacher,
+                                            t('upload_teachers')
+                                        )}
+                                    </Box>
+
+                                    {DialogWindow(
+                                        handleCloseTeacher,
+                                        openTeacher,
+                                        handleRemoveTeacher,
+                                        t('delete_teacher')
+                                    )}
+                                </Stack>
+                            </Stack>
+                        </>
+                    ) : (
+                        navigate('*')
                     )}
-                </Stack>
-            </Stack>
+                </>
+            )}
         </>
-    ):(
-        navigate('*')
-    )}
-</>
-)} 
-</>
-)}
+    )
+}
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 7c3f81ec..4872d9a6 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -13,7 +13,7 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import React, { useState } from 'react'
 import dayjs, { Dayjs } from 'dayjs'
 import { Score } from '../../components/SubmissionListItemTeacherPage.tsx'
-import {EvenlySpacedRow} from "../../components/CustomComponents.tsx";
+import { EvenlySpacedRow } from '../../components/CustomComponents.tsx'
 
 /**
  * This component is used to display a single assignment in the list of assignments.
@@ -72,75 +72,79 @@ export function AssignmentListItemSubjectsPage({
 
     return (
         <>
-            <ListItem key={projectName}  disablePadding sx={{ maxHeight: '30px'}}
+            <ListItem
+                key={projectName}
+                disablePadding
+                sx={{ maxHeight: '30px' }}
             >
                 <ListItemButton onClick={handleProjectClick}>
                     {isStudent ? (
-                        <EvenlySpacedRow items={[
-                            <ListItemText
-                                primary={projectName}
-                            />,
-                            <ListItemText
-                                primary={
-                                    dueDate
-                                        ? dayjs(dueDate).format(
-                                              'DD/MM/YYYY HH:mm'
-                                          )
-                                        : t('no_deadline')
-                                }
-                            />,
-                            <ListItemText
-                                primary={
-                                    submissions > 0
-                                        ? submissions > 1
-                                            ? submissions +
-                                              ' ' +
-                                              t('submissions')
-                                            : submissions +
-                                              ' ' +
-                                              t('submission')
-                                        : t('no_submissions')
-                                }
-                            />,
-                            <>
-                            {submissions > 0 ? (
+                        <EvenlySpacedRow
+                            items={[
+                                <ListItemText primary={projectName} />,
                                 <ListItemText
                                     primary={
-                                        score
-                                            ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)`
-                                            : t('no_score_yet')
+                                        dueDate
+                                            ? dayjs(dueDate).format(
+                                                  'DD/MM/YYYY HH:mm'
+                                              )
+                                            : t('no_deadline')
                                     }
-                                />
-                            ) : (
+                                />,
                                 <ListItemText
-                                    primary={`0/${maxScore} (0%)`}
-                                />
-                            )}
-                            </>
-                            ]}/>
+                                    primary={
+                                        submissions > 0
+                                            ? submissions > 1
+                                                ? submissions +
+                                                  ' ' +
+                                                  t('submissions')
+                                                : submissions +
+                                                  ' ' +
+                                                  t('submission')
+                                            : t('no_submissions')
+                                    }
+                                />,
+                                <>
+                                    {submissions > 0 ? (
+                                        <ListItemText
+                                            primary={
+                                                score
+                                                    ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)`
+                                                    : t('no_score_yet')
+                                            }
+                                        />
+                                    ) : (
+                                        <ListItemText
+                                            primary={`0/${maxScore} (0%)`}
+                                        />
+                                    )}
+                                </>,
+                            ]}
+                        />
                     ) : (
                         <>
                             {/* In case of the user being the teacher: */}
-                            <EvenlySpacedRow items={[
-                            <ListItemText
-                                primary={projectName}
-                            />,
-                            <ListItemText
-                                primary={
-                                    dueDate
-                                        ? dayjs(dueDate).format(
-                                              'DD/MM/YYYY HH:mm'
-                                          )
-                                        : t('no_deadline')
-                                }
-                            />,
-                            <ButtonActions
-                                archived={archived}
-                                startVisible={visible}
-                                deleteEvent={deleteEvent}
-                                archiveEvent={archiveEvent}
-                                visibilityEvent={visibilityEvent}
-                            />]}/>
+                            <EvenlySpacedRow
+                                items={[
+                                    <ListItemText primary={projectName} />,
+                                    <ListItemText
+                                        primary={
+                                            dueDate
+                                                ? dayjs(dueDate).format(
+                                                      'DD/MM/YYYY HH:mm'
+                                                  )
+                                                : t('no_deadline')
+                                        }
+                                    />,
+                                    <ButtonActions
+                                        archived={archived}
+                                        startVisible={visible}
+                                        deleteEvent={deleteEvent}
+                                        archiveEvent={archiveEvent}
+                                        visibilityEvent={visibilityEvent}
+                                    />,
+                                ]}
+                            />
                         </>
                     )}
                 </ListItemButton>
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index 09f1e01c..0e7a64e4 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -1,4 +1,8 @@
-import {Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import {
+    Card,
+    Divider,
+    EvenlySpacedRow,
+} from '../../components/CustomComponents.tsx'
 import { Box, Skeleton, Typography } from '@mui/material'
 import List from '@mui/material/List'
 import { t } from 'i18next'
@@ -151,56 +155,81 @@ export function ProjectsView({
     return (
         <>
             <Card>
-            <Box
-                aria-label={'courseHeader'}
-                sx={{
-                    backgroundColor: 'secondary.main',
-                    height: 20,
-                    padding: 3,
-                }}
-            >
-                {!gebruiker.is_lesgever ? (
-                    <>
-                        {/* Show the UI from the perspective of a student. */}
-                        <EvenlySpacedRow items={[
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Project
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Deadline
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            {t('submissions')}
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Score
-                        </Typography>
-                            ]}/>
-                    </>
-                ) : (
-                    <>
-                        {/* Show the UI from the perspective of a teacher. */}
-                        <EvenlySpacedRow items={[
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Project
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            Deadline
-                        </Typography>,
-                        <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
-                            {t('edit')}
-                        </Typography>]}
-                        />
-                    </>
-                )}
-            </Box>
-            <Box
-                aria-label={'assignmentList'}
-                sx={{
-                    backgroundColor: 'background.default',
-                    height: 340,
-                }}
-            >
+                <Box
+                    aria-label={'courseHeader'}
+                    sx={{
+                        backgroundColor: 'secondary.main',
+                        height: 20,
+                        padding: 3,
+                    }}
+                >
+                    {!gebruiker.is_lesgever ? (
+                        <>
+                            {/* Show the UI from the perspective of a student. */}
+                            <EvenlySpacedRow
+                                items={[
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Project
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Deadline
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        {t('submissions')}
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Score
+                                    </Typography>,
+                                ]}
+                            />
+                        </>
+                    ) : (
+                        <>
+                            {/* Show the UI from the perspective of a teacher. */}
+                            <EvenlySpacedRow
+                                items={[
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Project
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        Deadline
+                                    </Typography>,
+                                    <Typography
+                                        variant={'h5'}
+                                        sx={{ fontWeight: 'bold' }}
+                                    >
+                                        {t('edit')}
+                                    </Typography>,
+                                ]}
+                            />
+                        </>
+                    )}
+                </Box>
+                <Box
+                    aria-label={'assignmentList'}
+                    sx={{
+                        backgroundColor: 'background.default',
+                        height: 340,
+                    }}
+                >
                     <Box sx={{ width: '100%', height: 320, overflow: 'auto' }}>
                         {/* The list below will display the projects with their information */}
                         <List disablePadding>
@@ -233,7 +262,7 @@ export function ProjectsView({
                                         )
                                         .map((project) => (
                                             <>
-                                                <Divider/>
+                                                <Divider />
                                                 <AssignmentListItemSubjectsPage
                                                     key={
                                                         project.assignment
diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
index 7628bb67..96fa9353 100644
--- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
@@ -1,7 +1,13 @@
 import { User } from './AddChangeSubjectPage'
 import * as React from 'react'
-import { IconButton, List, ListItem, ListItemText, Typography } from '@mui/material'
-import {Button, SecundaryButton} from '../../components/CustomComponents'
+import {
+    IconButton,
+    List,
+    ListItem,
+    ListItemText,
+    Typography,
+} from '@mui/material'
+import { Button, SecundaryButton } from '../../components/CustomComponents'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import CloseIcon from '@mui/icons-material/Close'
@@ -55,17 +61,19 @@ export default function StudentPopUp({ students, text }: StudentPopUpProps) {
                 <DialogContent dividers>
                     {/* List of Students */}
                     {students.length > 0 ? (
-                    <List>
-                        {students.map((student) => (
-                            <ListItem key={student.user}>
-                                <ListItemText
-                                    primary={`${student.first_name} ${student.last_name}`}
-                                />
-                            </ListItem>
-                        ))}
-                    </List>
+                        <List>
+                            {students.map((student) => (
+                                <ListItem key={student.user}>
+                                    <ListItemText
+                                        primary={`${student.first_name} ${student.last_name}`}
+                                    />
+                                </ListItem>
+                            ))}
+                        </List>
                     ) : (
-                        <Typography variant="body1">{t('loading') + ' ' + t('students') + '...'}</Typography>
+                        <Typography variant="body1">
+                            {t('loading') + ' ' + t('students') + '...'}
+                        </Typography>
                     )}
                 </DialogContent>
             </Dialog>
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 3770ae4b..1be3d95a 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -71,7 +71,7 @@ export function SubjectsPage() {
     // State for loading the page
     const [loading, setLoading] = useState(true)
     const [userLoading, setUserLoading] = useState(true)
-    const [studentsLoading, setStudentsLoading] = useState(true);
+    const [studentsLoading, setStudentsLoading] = useState(true)
 
     useEffect(() => {
         // Get the data for this course.
@@ -136,27 +136,27 @@ export function SubjectsPage() {
 
     useEffect(() => {
         async function fetchStudents() {
-            setStudentsLoading(true);
-            const temp_students = [];
+            setStudentsLoading(true)
+            const temp_students = []
             for (const s of course?.studenten || []) {
                 try {
-                    const userResponse = await instance.get(`/gebruikers/${s}/`);
-                    temp_students.push(userResponse.data);
+                    const userResponse = await instance.get(`/gebruikers/${s}/`)
+                    temp_students.push(userResponse.data)
                 } catch (error) {
-                    console.error('Error fetching student data:', error);
-                    setFetchError(true);
+                    console.error('Error fetching student data:', error)
+                    setFetchError(true)
                 }
             }
             // Update the state with the fetched data
-            setStudents(temp_students);
-            setStudentsLoading(false);
+            setStudents(temp_students)
+            setStudentsLoading(false)
         }
-    
+
         // Fetch students
         fetchStudents().catch((error) =>
             console.error('Error fetching students data:', error)
-        );
-    }, [course]);
+        )
+    }, [course])
 
     const addProject = () => {
         console.log('add project')
@@ -261,15 +261,13 @@ export function SubjectsPage() {
                                     }}
                                 >
                                     {/* Give the student the option to select current or archived projects. */}
-                                    {course.gearchiveerd?
+                                    {course.gearchiveerd ? (
                                         <ProjectsView
                                             gebruiker={user}
                                             showAllAssignments={true}
                                             archived={true}
                                             assignments={assignments}
-                                            deleteAssignment={
-                                                deleteAssignment
-                                            }
+                                            deleteAssignment={deleteAssignment}
                                             archiveAssignment={
                                                 archiveAssignment
                                             }
@@ -278,7 +276,7 @@ export function SubjectsPage() {
                                             }
                                             courseId={courseID}
                                         />
-                                    :
+                                    ) : (
                                         <TabSwitcher
                                             titles={[
                                                 'current_projects',
@@ -319,7 +317,7 @@ export function SubjectsPage() {
                                                 />,
                                             ]}
                                         />
-                                    }
+                                    )}
                                 </Box>
                                 <Box
                                     display="flex"
@@ -393,24 +391,20 @@ export function SubjectsPage() {
                                         marginTop: 10,
                                     }}
                                 >
-                                    {course.gearchiveerd?
+                                    {course.gearchiveerd ? (
                                         <ProjectsView
                                             gebruiker={user}
                                             showAllAssignments={true}
                                             archived={true}
                                             assignments={assignments}
-                                            deleteAssignment={() =>
-                                                undefined
-                                            }
-                                            archiveAssignment={() =>
-                                                undefined
-                                            }
+                                            deleteAssignment={() => undefined}
+                                            archiveAssignment={() => undefined}
                                             changeVisibilityAssignment={() =>
                                                 undefined
                                             }
                                             courseId={courseID}
                                         />
-                                    :
+                                    ) : (
                                         <TabSwitcher
                                             titles={[
                                                 'current_projects',
@@ -451,7 +445,7 @@ export function SubjectsPage() {
                                                 />,
                                             ]}
                                         />
-                                    }
+                                    )}
                                     <WarningPopup
                                         title={t('join_course')}
                                         content={t('acces')}
@@ -461,10 +455,12 @@ export function SubjectsPage() {
                                         doAction={confirmJoinCourse}
                                     />
                                 </Box>
-                                <Box sx={{paddingLeft: '20px'}}>
+                                <Box sx={{ paddingLeft: '20px' }}>
                                     <StudentPopUp
-                                        students={studentsLoading ? []: students}
-                                        text='students'
+                                        students={
+                                            studentsLoading ? [] : students
+                                        }
+                                        text="students"
                                     ></StudentPopUp>
                                 </Box>
                             </Stack>
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 3f5af53d..988d2b4e 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -129,17 +129,18 @@ export function SubmissionPage() {
                 )
                 setRestrictions(restrictions.data)
 
-                const submissionResponse = await instance.get(`indieningen/${submissionId}/`)
+                const submissionResponse = await instance.get(
+                    `indieningen/${submissionId}/`
+                )
                 //Get the submission file
                 const newSubmission: Submission = submissionResponse.data
-                newSubmission.filename = submissionResponse.data.bestand.replace(
-                    /^.*[\\/]/,
-                    ''
-                )
+                newSubmission.filename =
+                    submissionResponse.data.bestand.replace(/^.*[\\/]/, '')
                 newSubmission.bestand = await instance
                     .get(`/indieningen/${submissionId}/indiening_bestand`, {
                         responseType: 'blob',
-                    }).then((res) => {
+                    })
+                    .then((res) => {
                         let filename = 'indiening.zip'
                         if (newSubmission.filename) {
                             filename = newSubmission.filename
diff --git a/frontend/frontend/src/routes.tsx b/frontend/frontend/src/routes.tsx
index d6bca41d..7762149f 100644
--- a/frontend/frontend/src/routes.tsx
+++ b/frontend/frontend/src/routes.tsx
@@ -8,7 +8,7 @@ import ErrorPage from './pages/ErrorPage.tsx'
 import MainPage from './pages/mainPage/MainPage.tsx'
 import { GroupsPage } from './pages/groupsPage/GroupsPage.tsx'
 import { AssignmentPage } from './pages/assignmentPage/AssignmentPage.tsx'
-import {ChooseGroup} from "./pages/groupsPage/ChooseGroup.tsx";
+import { ChooseGroup } from './pages/groupsPage/ChooseGroup.tsx'
 
 //TODO: add change/add course page when implemented
 const router = createBrowserRouter([

From 9dedf3b21c234fd51286b7b5ececab2791f68602 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 17:11:36 +0200
Subject: [PATCH 093/145] Revert "inladen studenten bij groepen is niet meer
 onacceptabel traag"

This reverts commit 3f6ea634864ddea3245f5263bc65d08419bc5bdc.
---
 .../src/pages/groupsPage/GroupsPage.tsx       | 53 ++++++++++++-------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 003057c6..38707a4d 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -30,8 +30,6 @@ import { Add } from '@mui/icons-material'
 import ClearIcon from '@mui/icons-material/Clear'
 import SaveIcon from '@mui/icons-material/Save'
 import WarningPopup from '../../components/WarningPopup.tsx'
-import axios, { AxiosResponse } from 'axios'
-import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 // group interface
 export interface Group {
@@ -184,21 +182,39 @@ export function GroupsPage() {
             await instance
                 .get('/vakken/' + courseId)
                 .then(async (response) => {
-                    // This function fetches the names of the students in parallel
                     const newStudentNames = new Map<number, string>()
-                    const studentPromises: Promise<AxiosResponse<User>>[] =
-                        response.data.studenten.map((id: number) =>
-                            instance.get('/gebruikers/' + id)
-                        )
-                    const studentResponses = await axios.all(studentPromises)
-
-                    studentResponses.forEach((response) => {
-                        const student: User = response.data
-                        newStudentNames.set(
-                            student.user,
-                            student.first_name + ' ' + student.last_name
-                        )
-                    })
+
+                    for (const student of response.data.studenten) {
+                        await instance
+                            .get('/gebruikers/' + student)
+                            .then((response) => {
+                                newStudentNames.set(
+                                    student,
+                                    response.data.first_name +
+                                        ' ' +
+                                        response.data.last_name
+                                )
+                            })
+                            .catch((error) => {
+                                console.log(error)
+                            })
+                    }
+                    for (const student of response.data.studenten) {
+                        await instance
+                            .get('/gebruikers/' + student)
+                            .then((response) => {
+                                newStudentNames.set(
+                                    student,
+                                    response.data.first_name +
+                                        ' ' +
+                                        response.data.last_name
+                                )
+                                console.log(
+                                    'available names:' +
+                                        Array.from(newStudentNames.entries())
+                                )
+                            })
+                    }
 
                     setStudentNames(() => newStudentNames)
                 })
@@ -259,7 +275,7 @@ export function GroupsPage() {
             .catch((error) => {
                 console.log(error)
             })
-    }, [assignmentId, courseId])
+    }, [assignmentId, courseId, newGroupSize, studentNames.size])
 
     useEffect(() => {
         setAvailableStudents(() =>
@@ -271,7 +287,7 @@ export function GroupsPage() {
             )
         )
         setFilteredStudents(availableStudents)
-    }, [availableStudents, newGroups, studentNames])
+    }, [newGroups, studentNames])
 
     // Create new groups when the group size changes
     useEffect(() => {
@@ -296,7 +312,6 @@ export function GroupsPage() {
         }
     }, [
         assignmentId,
-        availableStudents,
         availableStudents.length,
         newGroupSize,
         newGroups.length,

From c8380b999f08dbf80a298b14d8d720f716c6a372 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 17:14:46 +0200
Subject: [PATCH 094/145] stond er nog een keer dubbel in

---
 .../pages/assignmentPage/AssignmentPage.tsx   | 35 -------------------
 1 file changed, 35 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 61e257c1..7cc243be 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -671,41 +671,6 @@ export function AssignmentPage() {
                                     backgroundColor: 'background.default',
                                 }}
                             >
-                                {/*assignment description*/}
-                                <Box
-                                    aria-label={'assignment-box'}
-                                    sx={{
-                                        padding: '5px',
-                                    }}
-                                >
-                                    <Stack direction={'column'}>
-                                        {loading ? (
-                                            <Skeleton
-                                                variant="text"
-                                                width={200}
-                                                height={50}
-                                            />
-                                        ) : (
-                                            <>
-                                                <Typography
-                                                    variant={'h5'}
-                                                    color={'text.primary'}
-                                                    aria-label={'title'}
-                                                    sx={{
-                                                        fontWeight: 'bold',
-                                                    }}
-                                                >
-                                                    {t('assignment')}
-                                                </Typography>
-                                                <Typography
-                                                    color={'text.primary'}
-                                                >
-                                                    {assignment?.beschrijving}
-                                                </Typography>
-                                            </>
-                                        )}
-                                    </Stack>
-                                </Box>
                                 {/*deadline and groep button */}
                                 <Box
                                     sx={{

From 6544af1d0c498979c88b492c9dcef67d97820c88 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 17:55:48 +0200
Subject: [PATCH 095/145] kalender is beetje beter van uitzicht

---
 .../src/components/DeadlineCalendar.tsx       | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index d0773591..5ce3c688 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -99,10 +99,24 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
             width={'100%'}
             alignItems={'center'}
         >
-            <Typography>
+            <Typography color={'text.primary'}>
                 {t('deadlines_on')}: {selectedDay?.format('DD/MM/YYYY')}
             </Typography>
-            <List>
+            <List sx={{ width: '100%' }}>
+                {assignments.filter((assignment: project) => {
+                    return dayjs(assignment.deadline).isSame(selectedDay, 'day')
+                }).length === 0 && (
+                    <ListItem>
+                        <ListItemText>
+                            <Typography
+                                textAlign={'center'}
+                                color={'text.primary'}
+                            >
+                                {t('no_deadline') + 's'}
+                            </Typography>
+                        </ListItemText>
+                    </ListItem>
+                )}
                 {assignments
                     .filter((assignment: project) =>
                         dayjs(assignment.deadline).isSame(selectedDay, 'day')
@@ -111,7 +125,14 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
                         <ListItem>
                             <ListItemButton
                                 sx={{
-                                    border: 1,
+                                    border: 0.5,
+                                    borderColor: 'primary.main',
+                                    textAlign: 'center',
+                                    width: '100%',
+                                    borderRadius: 2,
+                                    '&:hover': {
+                                        backgroundColor: 'primary.light',
+                                    },
                                 }}
                                 onClick={() =>
                                     handleProjectClick(
@@ -120,7 +141,11 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
                                     )
                                 }
                             >
-                                <ListItemText primary={assignment.titel} />
+                                <ListItemText>
+                                    <Typography color={'text.primary'}>
+                                        {assignment.titel}
+                                    </Typography>
+                                </ListItemText>
                             </ListItemButton>
                         </ListItem>
                     ))}

From b65475e3581c86655688f59d021d481d93281ea9 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 18:07:17 +0200
Subject: [PATCH 096/145] opnieuw performance omhoog gedaan

---
 .../src/pages/groupsPage/GroupsPage.tsx       | 49 +++++++------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 38707a4d..ff0bdcb7 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -30,6 +30,8 @@ import { Add } from '@mui/icons-material'
 import ClearIcon from '@mui/icons-material/Clear'
 import SaveIcon from '@mui/icons-material/Save'
 import WarningPopup from '../../components/WarningPopup.tsx'
+import axios, { AxiosResponse } from 'axios'
+import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 
 // group interface
 export interface Group {
@@ -182,39 +184,22 @@ export function GroupsPage() {
             await instance
                 .get('/vakken/' + courseId)
                 .then(async (response) => {
+                    // This function fetches the names of the students in parallel
                     const newStudentNames = new Map<number, string>()
 
-                    for (const student of response.data.studenten) {
-                        await instance
-                            .get('/gebruikers/' + student)
-                            .then((response) => {
-                                newStudentNames.set(
-                                    student,
-                                    response.data.first_name +
-                                        ' ' +
-                                        response.data.last_name
-                                )
-                            })
-                            .catch((error) => {
-                                console.log(error)
-                            })
-                    }
-                    for (const student of response.data.studenten) {
-                        await instance
-                            .get('/gebruikers/' + student)
-                            .then((response) => {
-                                newStudentNames.set(
-                                    student,
-                                    response.data.first_name +
-                                        ' ' +
-                                        response.data.last_name
-                                )
-                                console.log(
-                                    'available names:' +
-                                        Array.from(newStudentNames.entries())
-                                )
-                            })
-                    }
+                    const studentPromises: Promise<AxiosResponse<User>>[] =
+                        response.data.studenten.map((id: number) =>
+                            instance.get('/gebruikers/' + id)
+                        )
+                    const studentResponses = await axios.all(studentPromises)
+
+                    studentResponses.forEach((response) => {
+                        const student: User = response.data
+                        newStudentNames.set(
+                            student.user,
+                            student.first_name + ' ' + student.last_name
+                        )
+                    })
 
                     setStudentNames(() => newStudentNames)
                 })
@@ -275,7 +260,7 @@ export function GroupsPage() {
             .catch((error) => {
                 console.log(error)
             })
-    }, [assignmentId, courseId, newGroupSize, studentNames.size])
+    }, [assignmentId, courseId])
 
     useEffect(() => {
         setAvailableStudents(() =>

From ddca5ccb20ff44a814909e39e96fb3d7ba77389e Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 18:14:21 +0200
Subject: [PATCH 097/145] some minor changes

---
 frontend/frontend/src/components/CopyToClipboard.tsx  | 11 ++++++-----
 frontend/frontend/src/components/Header.tsx           |  1 +
 .../frontend/src/pages/subjectsPage/SubjectsPage.tsx  |  1 +
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/components/CopyToClipboard.tsx b/frontend/frontend/src/components/CopyToClipboard.tsx
index fdaf5818..2e3a9a03 100644
--- a/frontend/frontend/src/components/CopyToClipboard.tsx
+++ b/frontend/frontend/src/components/CopyToClipboard.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react'
+import { darken } from '@mui/system'
 import { Box, Collapse, Tooltip, Typography } from '@mui/material'
-import Button from '@mui/material/Button'
+import { Button } from './CustomComponents.tsx'
 import { AssignmentTurnedIn, ContentPaste } from '@mui/icons-material'
 import { t } from 'i18next'
+import theme from "../Theme.ts";
 
 interface CopyToClipboardProps {
     invitationLink: string
@@ -42,13 +44,12 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
                     >
                         <Button
                             onClick={copyToClipboard}
-                            variant={'contained'}
                             sx={{
-                                height: 40,
                                 maxWidth: 500,
                                 minWidth: 200,
-                                backgroundColor: 'background.default',
+                                backgroundColor: 'secondary.main',
                                 color: 'text.primary',
+                                textTransform: 'none',
                                 borderRadius: 2,
                                 display: 'flex',
                                 flexDirection: 'row',
@@ -56,7 +57,7 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
                                 padding: 0,
                                 gap: 1,
                                 '&:hover': {
-                                    backgroundColor: 'secondary.main',
+                                    backgroundColor: darken(theme.palette.secondary.main,0.2)
                                 },
                             }}
                         >
diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
index 6ce687bb..ac4e4f11 100644
--- a/frontend/frontend/src/components/Header.tsx
+++ b/frontend/frontend/src/components/Header.tsx
@@ -193,6 +193,7 @@ export const Header = ({ variant, title }: Props) => {
                                 sx={{
                                     color: 'background.default',
                                     paddingTop: 1,
+                                    textTransform: 'none',
                                 }}
                             >
                                 Logout
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 16b3a0d3..eb84ac07 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -319,6 +319,7 @@ export function SubjectsPage() {
                                     )}
                                 </Box>
                                 <Box
+                                    padding={'10px'}
                                     display="flex"
                                     flexDirection="row"
                                     justifyContent="space-between"

From 7e82fa829f9078fdb4b83085a3e3943c7da0c0ac Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 18:43:58 +0200
Subject: [PATCH 098/145] done cleaning choose page

---
 frontend/frontend/src/i18n/en.ts              |  3 +
 frontend/frontend/src/i18n/nl.ts              |  1 +
 .../src/pages/groupsPage/ChooseGroup.tsx      | 69 +++++++------------
 .../src/pages/subjectsPage/SubjectsPage.tsx   | 28 ++++----
 4 files changed, 41 insertions(+), 60 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index dca3ed59..f9f8e888 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -1,3 +1,5 @@
+import {t} from "i18next";
+
 const english = {
     logo: '/assets/logo_UGent_EN_RGB_2400_white.png',
     logo_blue: '/assets/logo_UGent_EN_RGB_2400_color.png',
@@ -111,6 +113,7 @@ const english = {
     noGroup: "You don't seem to be in a group yet.",
     contactTeacher: 'Please contact your teacher.',
     chooseGroup: 'Join a group before submitting.',
+    group_number: 'Group Number',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index a94e024e..d615d021 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -111,6 +111,7 @@ const dutch = {
     noGroup: 'Je lijkt nog geen groep te hebben.',
     chooseGroup: 'Kies een groep voor je indient',
     contactTeacher: 'Gelieve contact op te nemen met je lesgever.',
+    group_number: 'GroepsNummer',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index 2065347b..deb784f0 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -1,7 +1,5 @@
 import {
     Box,
-    Card,
-    Divider,
     ListItem,
     ListItemText,
     Stack,
@@ -13,7 +11,7 @@ import List from '@mui/material/List'
 import { useEffect, useState } from 'react'
 import { Header } from '../../components/Header.tsx'
 import { t } from 'i18next'
-import { Button } from '../../components/CustomComponents.tsx'
+import {Button, Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
 import { useNavigate, useParams } from 'react-router-dom'
 import instance from '../../axiosConfig.ts'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
@@ -49,7 +47,6 @@ function joinLeaveButton(
             <>
                 <Button
                     size={'small'}
-                    sx={{ marginBottom: 1 }}
                     onClick={handleLeave}
                 >
                     <Typography>{t('leave')}</Typography>
@@ -61,7 +58,6 @@ function joinLeaveButton(
         <>
             <Button
                 size={'small'}
-                sx={{ marginBottom: 1 }}
                 onClick={handleJoin}
             >
                 <Typography>{t('join_group')}</Typography>
@@ -208,36 +204,30 @@ export function ChooseGroup() {
                                         backgroundColor: 'background.default',
                                     }}
                                 >
-                                    <Card
-                                        elevation={1}
-                                        sx={{
-                                            color: 'text.primary',
-                                            backgroundColor:
-                                                'background.default',
-                                            borderRadius: 5,
-                                            padding: '20px',
-                                        }}
-                                    >
+                                    <Card>
                                         <Box
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            justifyContent={'space-between'}
-                                            pl={3}
-                                            pr={3}
+                                            aria-label={'courseHeader'}
+                                            sx={{
+                                                backgroundColor: 'secondary.main',
+                                                height: 20,
+                                                padding: 3,
+                                            }}
                                         >
+                                            <EvenlySpacedRow items={[
                                             <Typography
                                                 sx={{ fontWeight: 'bold' }}
                                             >
                                                 {t('group_number')}
-                                            </Typography>
+                                            </Typography>,
                                             <Typography
                                                 sx={{ fontWeight: 'bold' }}
                                             >
                                                 {t('members')}
-                                            </Typography>
+                                            </Typography>,
                                             <Typography
                                                 sx={{ fontWeight: 'bold' }}
-                                            ></Typography>
+                                            ></Typography>]}
+                                            />
                                         </Box>
                                         <List
                                             disablePadding={true}
@@ -575,36 +565,24 @@ export function ChooseGroup() {
 
                                                 return (
                                                     <>
+                                                        <Divider/>
                                                         <ListItem
                                                             sx={{
                                                                 width: '100%',
-                                                                //minheight: 30,
-                                                                display: 'flex',
-                                                                flexDirection:
-                                                                    'row',
-                                                                justifyContent:
-                                                                    'space-between',
-                                                                paddingX: 1,
-                                                                paddingY: 3,
-                                                                borderRadius: 2,
+                                                                minheight: 30,
                                                             }}
                                                         >
+                                                            <EvenlySpacedRow items={[
                                                             <ListItemText
-                                                                sx={{
-                                                                    maxWidth: 100,
-                                                                }}
                                                                 primary={
                                                                     groups.indexOf(
                                                                         group
                                                                     ) + 1
                                                                 }
-                                                            />
-
+                                                            />,
                                                             <Box
                                                                 display={'flex'}
-                                                                flexDirection={
-                                                                    'column'
-                                                                }
+                                                                flexDirection={'column'}
                                                             >
                                                                 {loading ? (
                                                                     <Typography>
@@ -657,8 +635,8 @@ export function ChooseGroup() {
                                                                         )}
                                                                     </>
                                                                 )}
-                                                            </Box>
-
+                                                            </Box>,
+                                                            <>
                                                             {joinLeaveButton(
                                                                 user !=
                                                                     undefined
@@ -668,11 +646,10 @@ export function ChooseGroup() {
                                                                     : false,
                                                                 handleJoin,
                                                                 handleLeave
-                                                            )}
+                                                            )}</>
+                                                            ]}/>
                                                         </ListItem>
-                                                        <Divider
-                                                            color={'text.main'}
-                                                        ></Divider>
+
                                                     </>
                                                 )
                                             })}
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index eb84ac07..b0b97b3c 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -319,7 +319,7 @@ export function SubjectsPage() {
                                     )}
                                 </Box>
                                 <Box
-                                    padding={'10px'}
+                                    paddingLeft={'10px'}
                                     display="flex"
                                     flexDirection="row"
                                     justifyContent="space-between"
@@ -331,19 +331,19 @@ export function SubjectsPage() {
                                             '/accept_invitation'
                                         }
                                     />
-                                    <IconButton
-                                        onClick={addProject}
-                                        color="primary"
-                                        edge="end"
-                                        aria-label="add-project"
-                                    >
-                                        <AddCircleIcon
-                                            sx={{
-                                                fontSize: 60,
-                                                height: '100%',
-                                            }}
-                                        />
-                                    </IconButton>
+                                        <IconButton
+                                            onClick={addProject}
+                                            color="primary"
+                                            edge="end"
+                                            aria-label="add-project"
+                                        >
+                                            <AddCircleIcon
+                                                sx={{
+                                                    fontSize: 60,
+                                                    height: '100%',
+                                                }}
+                                            />
+                                        </IconButton>
                                 </Box>
                                 <WarningPopup
                                     title={t('delete_project_warning')}

From 6acdde479aac08fc0ef173d8cfe0140304cde327 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 18:48:17 +0200
Subject: [PATCH 099/145] bij submmissionpage green en red voor status geslaagd
 of niet

---
 frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 988d2b4e..00409b17 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -480,7 +480,9 @@ export function SubmissionPage() {
                                     height={40}
                                 />
                             ) : (
-                                <Typography variant={'body1'}>
+                                <Typography variant={'body1'}
+                                    color={(submission?.status === SubmissionStatus.PASSED ? 'green' : 'red')}
+                                >
                                     {submission?.status ===
                                     SubmissionStatus.PENDING
                                         ? t('pending')

From 40ee204e06b71da92c97c4913fb0d3e6447cea21 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 19:38:38 +0200
Subject: [PATCH 100/145] scoringpage done

---
 .../pages/scoresPage/ProjectScoresPage.tsx    | 16 ++++----
 .../pages/scoresPage/StudentScoreListItem.tsx | 40 +++++++------------
 .../src/pages/scoresPage/StudentsView.tsx     | 25 +++++-------
 3 files changed, 31 insertions(+), 50 deletions(-)

diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index c82b8b9d..0397eea4 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -1,5 +1,5 @@
 import { Header } from '../../components/Header'
-import { Button, Card } from '../../components/CustomComponents.tsx'
+import {Button, Card, SecondaryButton} from '../../components/CustomComponents.tsx'
 import {
     Box,
     CircularProgress,
@@ -372,11 +372,11 @@ export function ProjectScoresPage() {
                                             spacing={2}
                                             marginY={6}
                                         >
-                                            <Button onClick={exportSubmissions}>
+                                            <SecondaryButton onClick={exportSubmissions}>
                                                 {t('export_submissions')}
-                                            </Button>
+                                            </SecondaryButton>
 
-                                            <Button variant={'contained'}>
+                                            <SecondaryButton variant={'contained'}>
                                                 {t('upload_scores')}
                                                 <VisuallyHiddenInput
                                                     type="file"
@@ -385,14 +385,14 @@ export function ProjectScoresPage() {
                                                     multiple={false}
                                                     onChange={uploadScores}
                                                 />
-                                            </Button>
+                                            </SecondaryButton>
                                         </Stack>
                                     </Box>
                                     <Box
                                         display="flex"
                                         flexDirection="row-reverse"
                                         padding={'3px'}
-                                        sx={{ width: '50%', height: 'auto' }}
+                                        sx={{ width: '50%', height: '40px', marginTop: 6 }}
                                     >
                                         {loading ? (
                                             <Skeleton
@@ -413,8 +413,7 @@ export function ProjectScoresPage() {
                                                         '&:hover': {
                                                             color: 'text.primary',
                                                         },
-                                                        backgroundColor:
-                                                            'primary.main',
+                                                        backgroundColor: 'primary.main',
                                                         borderRadius: 2,
                                                     }}
                                                 >
@@ -422,6 +421,7 @@ export function ProjectScoresPage() {
                                                 </IconButton>
                                             </>
                                         )}
+                                        <Box paddingLeft={'10px'}/>
                                         <IconButton
                                             onClick={() =>
                                                 setOpenDeleteScoresPopup(true)
diff --git a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
index 0a6ac60a..d14c59cc 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
@@ -1,4 +1,4 @@
-import { Divider } from '../../components/CustomComponents.tsx'
+import {Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
 import {
     CircularProgress,
     ListItemIcon,
@@ -95,32 +95,20 @@ export function StudentScoreListItem({
 
     return (
         <>
-            <ListItem key={key} sx={{ margin: 0 }} disablePadding={true}>
+            <ListItem key={key} sx={{ maxHeight: '35px' }} disablePadding>
                 {/* Inner list item for displaying submission details */}
-                <ListItem
-                    sx={{
-                        width: '100%',
-                        height: 30,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        paddingX: 1,
-                        paddingY: 3,
-                        borderRadius: 2,
-                    }}
-                >
+                <ListItem>
                     {/* Content section */}
                     <>
                         {loading ? (
                             <CircularProgress size={20} color={'primary'} />
                         ) : (
+                            <EvenlySpacedRow items={[
                             <ListItemText
                                 sx={{ maxWidth: 200 }}
                                 primary={name}
-                            />
-                        )}
+                            />,
                         <ListItemText
-                            sx={{ maxWidth: '30%' }}
                             primary={
                                 lastSubmission
                                     ? t('last_submission') +
@@ -130,12 +118,11 @@ export function StudentScoreListItem({
                                       )
                                     : t('no_submissions')
                             }
-                        />
-                        {/* Score section */}
-                        <ListItem sx={{ maxWidth: '30%' }}>
+                        />,
+                        <ListItem>
                             {lastSubmission ? (
                                 <>
-                                    <Box width={'50px'}>
+                                    <Box width={'24px'} height={'25px'}>
                                         <TextField
                                             hiddenLabel
                                             defaultValue={score}
@@ -144,7 +131,7 @@ export function StudentScoreListItem({
                                                     parseInt(event.target.value)
                                                 )
                                             }
-                                            variant="outlined"
+                                            variant="standard"
                                             size="small"
                                         />
                                     </Box>
@@ -153,9 +140,8 @@ export function StudentScoreListItem({
                             ) : (
                                 <ListItemText primary={'0/' + maxScore} />
                             )}
-                        </ListItem>
-                        {/* Display download icon */}
-                        <ListItemText sx={{ maxWidth: 35 }}>
+                        </ListItem>,
+                        <ListItemText >
                             <ListItemIcon>
                                 <div onClick={downloadSubmission}>
                                     {lastSubmission ? (
@@ -172,7 +158,9 @@ export function StudentScoreListItem({
                                     )}
                                 </div>
                             </ListItemIcon>
-                        </ListItemText>
+                        </ListItemText>]}
+                        />
+                        )}
                     </>
                 </ListItem>
             </ListItem>
diff --git a/frontend/frontend/src/pages/scoresPage/StudentsView.tsx b/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
index 75457d0d..3058be90 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
@@ -1,4 +1,4 @@
-import { Divider } from '../../components/CustomComponents.tsx'
+import {Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
 import { Box, Skeleton, Typography } from '@mui/material'
 import List from '@mui/material/List'
 import { StudentScoreListItem } from './StudentScoreListItem.tsx'
@@ -116,29 +116,25 @@ export function StudentsView({
             <Box
                 aria-label={'scoresHeader'}
                 sx={{
-                    backgroundColor: 'primary.light',
-                    margin: 0,
+                    backgroundColor: 'secondary.main',
                     height: 20,
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    padding: '30px',
+                    padding: 3,
                 }}
             >
-                <>
+                <EvenlySpacedRow items={[
                     <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                         {t('group')}
-                    </Typography>
+                    </Typography>,
                     <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                         {t('time')}
-                    </Typography>
+                    </Typography>,
                     <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                         Score
-                    </Typography>
+                    </Typography>,
                     <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                         Download
-                    </Typography>
-                </>
+                    </Typography>]}
+                />
             </Box>
             <Divider color={'text.main'}></Divider>
             <Box
@@ -148,9 +144,6 @@ export function StudentsView({
                     height: 450,
                     display: 'flex',
                     flexDirection: 'column',
-                    padding: 1,
-                    borderRadius: 2,
-                    paddingBottom: 0,
                 }}
             >
                 {/* Scrollable list of students */}

From c209b7d12501839a839b73aaf00a58b8b66716c3 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 20:15:25 +0200
Subject: [PATCH 101/145] performance inladen studenten verbeterd

---
 .../SubmissionListItemTeacherPage.tsx         | 90 +++++++++++--------
 .../pages/assignmentPage/AssignmentPage.tsx   | 58 ++++++------
 2 files changed, 82 insertions(+), 66 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 3b5650c1..cd9b9c8a 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -3,6 +3,7 @@ import {
     ListItemButton,
     ListItemIcon,
     ListItemText,
+    Skeleton,
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import DownloadIcon from '@mui/icons-material/Download'
@@ -61,30 +62,40 @@ export function SubmissionListItemTeacherPage({
                     submissionsResponse.data[
                         submissionsResponse.data.length - 1
                     ]
-                const lastSubmissionResponse = await instance.get(`indieningen/${lastSubmission.indiening_id}/`)
-                //Get the submission file
-                const newSubmission: Submission = lastSubmissionResponse.data
-                newSubmission.filename = lastSubmissionResponse.data.bestand.replace(
-                    /^.*[\\/]/,
-                    ''
-                )
-                newSubmission.bestand = await instance
-                    .get(`/indieningen/${lastSubmission.indiening_id}/indiening_bestand`, {
-                        responseType: 'blob',
-                    }).then((res) => {
-                        let filename = 'indiening.zip'
-                        if (newSubmission.filename) {
-                            filename = newSubmission.filename
-                        }
-                        const blob = new Blob([res.data], {
-                            type: res.headers['content-type'],
-                        })
-                        const file: File = new File([blob], filename, {
-                            type: res.headers['content-type'],
+                if (lastSubmission) {
+                    const lastSubmissionResponse = await instance.get(
+                        `indieningen/${lastSubmission.indiening_id}/`
+                    )
+                    //Get the submission file
+                    const newSubmission: Submission =
+                        lastSubmissionResponse.data
+                    newSubmission.filename =
+                        lastSubmissionResponse.data.bestand.replace(
+                            /^.*[\\/]/,
+                            ''
+                        )
+                    newSubmission.bestand = await instance
+                        .get(
+                            `/indieningen/${lastSubmission.indiening_id}/indiening_bestand`,
+                            {
+                                responseType: 'blob',
+                            }
+                        )
+                        .then((res) => {
+                            let filename = 'indiening.zip'
+                            if (newSubmission.filename) {
+                                filename = newSubmission.filename
+                            }
+                            const blob = new Blob([res.data], {
+                                type: res.headers['content-type'],
+                            })
+                            const file: File = new File([blob], filename, {
+                                type: res.headers['content-type'],
+                            })
+                            return file
                         })
-                        return file
-                    })
-                setSubmitted(newSubmission)
+                    setSubmitted(newSubmission)
+                }
                 if (lastSubmission) {
                     const scoreResponse = await instance.get(
                         `/scores/?indiening=${lastSubmission.indiening_id}`
@@ -105,9 +116,7 @@ export function SubmissionListItemTeacherPage({
             const url = window.URL.createObjectURL(submitted?.bestand)
             const a = document.createElement('a')
             a.href = url
-            a.download = submitted.filename
-                ? submitted.filename
-                : 'opgave.zip'
+            a.download = submitted.filename ? submitted.filename : 'opgave.zip'
             document.body.appendChild(a)
             a.click()
             a.remove()
@@ -128,6 +137,7 @@ export function SubmissionListItemTeacherPage({
         <>
             <ListItem id={group_id} sx={{ margin: 0 }} disablePadding={true}>
                 <ListItemButton
+                    disabled={!submitted}
                     sx={{
                         width: '100%',
                         height: 40,
@@ -140,16 +150,24 @@ export function SubmissionListItemTeacherPage({
                     onClick={handleSubmissionClick}
                 >
                     {/* Display group id */}
-                    <ListItemText
-                        sx={{
-                            maxWidth: '24%',
-                            color: 'primary.main',
-                            '&:hover': {
-                                color: 'primary.light',
-                            },
-                        }}
-                        primary={group_name}
-                    />
+                    {!group_name ? (
+                        <Skeleton
+                            variant="text"
+                            sx={{ minWidth: '24%' }}
+                            height={30}
+                        />
+                    ) : (
+                        <ListItemText
+                            sx={{
+                                maxWidth: '24%',
+                                color: 'primary.main',
+                                '&:hover': {
+                                    color: 'primary.light',
+                                },
+                            }}
+                            primary={group_name}
+                        />
+                    )}
                     {/* Display submission timestamp */}
                     <ListItemText
                         sx={{ minWidth: '24%' }}
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 7cc243be..493a78da 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -27,6 +27,7 @@ import DownloadIcon from '@mui/icons-material/Download'
 import WarningPopup from '../../components/WarningPopup.tsx'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 import StudentPopUp from '../subjectsPage/StudentPopUp.tsx'
+import axios, { AxiosResponse } from 'axios'
 
 // group interface
 export interface Group {
@@ -89,7 +90,6 @@ export function AssignmentPage() {
     useEffect(() => {
         async function fetchUser() {
             setUserLoading(true)
-            setLoading(true)
             const userResponse = await instance.get('/gebruikers/me/')
             setUser(userResponse.data)
             setUserLoading(false)
@@ -97,6 +97,7 @@ export function AssignmentPage() {
 
         async function fetchData() {
             try {
+                setLoading(true)
                 const assignmentResponse = await instance.get(
                     `/projecten/${assignmentId}/`
                 )
@@ -133,21 +134,18 @@ export function AssignmentPage() {
                         )
                         setGroups(groupsResponse.data)
                         if (newAssignment.max_groep_grootte == 1) {
-                            const temp_students = []
-                            for (const g of groupsResponse.data) {
-                                try {
-                                    const userResponse = await instance.get(
-                                        `/gebruikers/${g.studenten[0]}/`
+                            const userPromises: Promise<AxiosResponse<User>>[] =
+                                groupsResponse.data.map((group: Group) =>
+                                    instance.get(
+                                        '/gebruikers/' + group.studenten[0]
                                     )
-                                    temp_students.push(userResponse.data)
-                                } catch (error) {
-                                    console.error(
-                                        'Error fetching student data:',
-                                        error
-                                    )
-                                }
-                            }
-                            setSingleStudents(temp_students)
+                                )
+
+                            const temp_students = await axios.all(userPromises)
+
+                            setSingleStudents(
+                                temp_students.map((res) => res.data)
+                            )
                         }
                     } else {
                         const groupResponse = await instance.get<[Group]>(
@@ -185,24 +183,24 @@ export function AssignmentPage() {
                 `groepen/?student=${user.user}&project=${assignmentId}`
             )
             const group: Group = groupResponse.data[0]
-            const temp_students = []
-            for (const s of group.studenten || []) {
-                try {
-                    const userResponse = await instance.get(`/gebruikers/${s}/`)
-                    temp_students.push(userResponse.data)
-                } catch (error) {
-                    console.error('Error fetching student data:', error)
-                }
-            }
-            // Update the state with the fetched data
-            setStudents(temp_students)
+
+            const studentPromises: Promise<AxiosResponse<User>>[] =
+                group.studenten.map((id: number) =>
+                    instance.get('/gebruikers/' + id)
+                )
+
+            const temp_students = await axios.all(studentPromises)
+            setStudents(temp_students.map((res) => res.data))
+
             setStudentsLoading(false)
         }
         // Fetch students
-        fetchStudents().catch((error) =>
-            console.error('Error fetching students data:', error)
-        )
-    }, [user, assignment, groups])
+        if (!user.is_lesgever && user.user !== 0) {
+            fetchStudents().catch((error) =>
+                console.error('Error fetching students data:', error)
+            )
+        }
+    }, [user, assignment, groups, assignmentId])
 
     // Function to download all submissions as a zip file
     const downloadAllSubmissions = () => {

From b887f315220b0f7cfce55931af35a719da0aaa57 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 20:31:38 +0200
Subject: [PATCH 102/145] regex op de output van een automatische test om enkel
 de geteste bestanden te zien

---
 .../pages/submissionPage/SubmissionPage.tsx   | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index dc506f24..fe1c0297 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -129,17 +129,28 @@ export function SubmissionPage() {
                 )
                 setRestrictions(restrictions.data)
 
-                const submissionResponse = await instance.get(`indieningen/${submissionId}/`)
+                const submissionResponse = await instance.get(
+                    `indieningen/${submissionId}/`
+                )
                 //Get the submission file
                 const newSubmission: Submission = submissionResponse.data
-                newSubmission.filename = submissionResponse.data.bestand.replace(
-                    /^.*[\\/]/,
-                    ''
-                )
+                if (newSubmission.result !== 'No tests: OK') {
+                    const regex = /Testing (.*):/g
+                    const matches = newSubmission.result.match(regex)
+                    if (matches !== null) {
+                        matches.map((match) => {
+                            match.replace(':', '\n')
+                            return match
+                        })
+                    }
+                }
+                newSubmission.filename =
+                    submissionResponse.data.bestand.replace(/^.*[\\/]/, '')
                 newSubmission.bestand = await instance
                     .get(`/indieningen/${submissionId}/indiening_bestand`, {
                         responseType: 'blob',
-                    }).then((res) => {
+                    })
+                    .then((res) => {
                         let filename = 'indiening.zip'
                         if (newSubmission.filename) {
                             filename = newSubmission.filename

From 4dc8e361261a610ec35e8b1f75ba79aae3e23c5c Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 20:43:47 +0200
Subject: [PATCH 103/145] done visuals

---
 .../src/components/CopyToClipboard.tsx        |   7 +-
 .../src/components/CustomComponents.tsx       |  14 +-
 .../src/components/DeadlineCalendar.tsx       |   1 -
 frontend/frontend/src/i18n/en.ts              |   2 -
 .../src/pages/groupsPage/ChooseGroup.tsx      | 209 +++++------
 .../pages/scoresPage/ProjectScoresPage.tsx    |  21 +-
 .../pages/scoresPage/StudentScoreListItem.tsx | 130 +++----
 .../src/pages/scoresPage/StudentsView.tsx     |  30 +-
 .../subjectsPage/AddChangeSubjectPage.tsx     | 326 +++++++++---------
 .../src/pages/subjectsPage/SubjectsPage.tsx   |  34 +-
 .../pages/submissionPage/SubmissionPage.tsx   |  10 +-
 11 files changed, 413 insertions(+), 371 deletions(-)

diff --git a/frontend/frontend/src/components/CopyToClipboard.tsx b/frontend/frontend/src/components/CopyToClipboard.tsx
index 2e3a9a03..80c021a1 100644
--- a/frontend/frontend/src/components/CopyToClipboard.tsx
+++ b/frontend/frontend/src/components/CopyToClipboard.tsx
@@ -4,7 +4,7 @@ import { Box, Collapse, Tooltip, Typography } from '@mui/material'
 import { Button } from './CustomComponents.tsx'
 import { AssignmentTurnedIn, ContentPaste } from '@mui/icons-material'
 import { t } from 'i18next'
-import theme from "../Theme.ts";
+import theme from '../Theme.ts'
 
 interface CopyToClipboardProps {
     invitationLink: string
@@ -57,7 +57,10 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
                                 padding: 0,
                                 gap: 1,
                                 '&:hover': {
-                                    backgroundColor: darken(theme.palette.secondary.main,0.2)
+                                    backgroundColor: darken(
+                                        theme.palette.secondary.main,
+                                        0.2
+                                    ),
                                 },
                             }}
                         >
diff --git a/frontend/frontend/src/components/CustomComponents.tsx b/frontend/frontend/src/components/CustomComponents.tsx
index 09571153..f5bf4610 100644
--- a/frontend/frontend/src/components/CustomComponents.tsx
+++ b/frontend/frontend/src/components/CustomComponents.tsx
@@ -90,7 +90,7 @@ interface CustomDividerProps extends DividerProps {
     children?: ReactNode
 }
 
-export const Divider = ({ children, ...props }: CustomCardProps) => {
+export const Divider = ({ children, ...props }: CustomDividerProps) => {
     return (
         <BaseDivider
             sx={{
@@ -104,7 +104,6 @@ export const Divider = ({ children, ...props }: CustomCardProps) => {
     )
 }
 
-
 interface EvenlySpacedRowProps {
     items: ReactNode[]
 }
@@ -116,10 +115,13 @@ export const EvenlySpacedRow = ({ items }: EvenlySpacedRowProps) => {
                 <Box
                     key={index}
                     width={
-                        index == 0 || index == items.length - 1
-                            ? 50 / items.length + '%'
-                            : (100 - 100 / items.length) / (items.length - 2) +
-                              '%'
+                        items.length == 2
+                            ? '50%'
+                            : index == 0 || index == items.length - 1
+                              ? 50 / items.length + '%'
+                              : (100 - 100 / items.length) /
+                                    (items.length - 2) +
+                                '%'
                     }
                     sx={{
                         //border: '1px solid red',
diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index bc87c398..df7c3c16 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -10,7 +10,6 @@ import {
     SxProps,
     Stack,
     Typography,
-    Box,
     List,
     ListItem,
     ListItemButton,
diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index f9f8e888..cff29fe0 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -1,5 +1,3 @@
-import {t} from "i18next";
-
 const english = {
     logo: '/assets/logo_UGent_EN_RGB_2400_white.png',
     logo_blue: '/assets/logo_UGent_EN_RGB_2400_color.png',
diff --git a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
index deb784f0..9281189b 100644
--- a/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
+++ b/frontend/frontend/src/pages/groupsPage/ChooseGroup.tsx
@@ -11,7 +11,12 @@ import List from '@mui/material/List'
 import { useEffect, useState } from 'react'
 import { Header } from '../../components/Header.tsx'
 import { t } from 'i18next'
-import {Button, Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import {
+    Button,
+    Card,
+    Divider,
+    EvenlySpacedRow,
+} from '../../components/CustomComponents.tsx'
 import { useNavigate, useParams } from 'react-router-dom'
 import instance from '../../axiosConfig.ts'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
@@ -45,10 +50,7 @@ function joinLeaveButton(
     if (isin) {
         return (
             <>
-                <Button
-                    size={'small'}
-                    onClick={handleLeave}
-                >
+                <Button size={'small'} onClick={handleLeave}>
                     <Typography>{t('leave')}</Typography>
                 </Button>
             </>
@@ -56,10 +58,7 @@ function joinLeaveButton(
     }
     return (
         <>
-            <Button
-                size={'small'}
-                onClick={handleJoin}
-            >
+            <Button size={'small'} onClick={handleJoin}>
                 <Typography>{t('join_group')}</Typography>
             </Button>
         </>
@@ -208,25 +207,34 @@ export function ChooseGroup() {
                                         <Box
                                             aria-label={'courseHeader'}
                                             sx={{
-                                                backgroundColor: 'secondary.main',
+                                                backgroundColor:
+                                                    'secondary.main',
                                                 height: 20,
                                                 padding: 3,
                                             }}
                                         >
-                                            <EvenlySpacedRow items={[
-                                            <Typography
-                                                sx={{ fontWeight: 'bold' }}
-                                            >
-                                                {t('group_number')}
-                                            </Typography>,
-                                            <Typography
-                                                sx={{ fontWeight: 'bold' }}
-                                            >
-                                                {t('members')}
-                                            </Typography>,
-                                            <Typography
-                                                sx={{ fontWeight: 'bold' }}
-                                            ></Typography>]}
+                                            <EvenlySpacedRow
+                                                items={[
+                                                    <Typography
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                        }}
+                                                    >
+                                                        {t('group_number')}
+                                                    </Typography>,
+                                                    <Typography
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                        }}
+                                                    >
+                                                        {t('members')}
+                                                    </Typography>,
+                                                    <Typography
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                        }}
+                                                    ></Typography>,
+                                                ]}
                                             />
                                         </Box>
                                         <List
@@ -565,91 +573,98 @@ export function ChooseGroup() {
 
                                                 return (
                                                     <>
-                                                        <Divider/>
+                                                        <Divider />
                                                         <ListItem
                                                             sx={{
                                                                 width: '100%',
                                                                 minheight: 30,
                                                             }}
                                                         >
-                                                            <EvenlySpacedRow items={[
-                                                            <ListItemText
-                                                                primary={
-                                                                    groups.indexOf(
-                                                                        group
-                                                                    ) + 1
-                                                                }
-                                                            />,
-                                                            <Box
-                                                                display={'flex'}
-                                                                flexDirection={'column'}
-                                                            >
-                                                                {loading ? (
-                                                                    <Typography>
-                                                                        {t(
-                                                                            'members_loading'
-                                                                        )}
-                                                                    </Typography>
-                                                                ) : (
-                                                                    <>
-                                                                        {group
-                                                                            .studenten
-                                                                            .length >
-                                                                        0 ? (
-                                                                            group.studenten.map(
-                                                                                (
-                                                                                    studentid
-                                                                                ) => {
-                                                                                    const student =
-                                                                                        studenten[
-                                                                                            studentid
-                                                                                        ]
-                                                                                    if (
-                                                                                        student
-                                                                                    ) {
-                                                                                        console.log(
-                                                                                            'Student:',
-                                                                                            student
-                                                                                        )
-                                                                                        return (
-                                                                                            <Typography
-                                                                                                key={
-                                                                                                    studentid
-                                                                                                }
-                                                                                            >
-                                                                                                {student.first_name +
-                                                                                                    ' ' +
-                                                                                                    student.last_name}
-                                                                                            </Typography>
-                                                                                        )
-                                                                                    }
-                                                                                    return null
-                                                                                }
-                                                                            )
-                                                                        ) : (
+                                                            <EvenlySpacedRow
+                                                                items={[
+                                                                    <ListItemText
+                                                                        primary={
+                                                                            groups.indexOf(
+                                                                                group
+                                                                            ) +
+                                                                            1
+                                                                        }
+                                                                    />,
+                                                                    <Box
+                                                                        display={
+                                                                            'flex'
+                                                                        }
+                                                                        flexDirection={
+                                                                            'column'
+                                                                        }
+                                                                    >
+                                                                        {loading ? (
                                                                             <Typography>
                                                                                 {t(
-                                                                                    'no_members_yet'
+                                                                                    'members_loading'
                                                                                 )}
                                                                             </Typography>
+                                                                        ) : (
+                                                                            <>
+                                                                                {group
+                                                                                    .studenten
+                                                                                    .length >
+                                                                                0 ? (
+                                                                                    group.studenten.map(
+                                                                                        (
+                                                                                            studentid
+                                                                                        ) => {
+                                                                                            const student =
+                                                                                                studenten[
+                                                                                                    studentid
+                                                                                                ]
+                                                                                            if (
+                                                                                                student
+                                                                                            ) {
+                                                                                                console.log(
+                                                                                                    'Student:',
+                                                                                                    student
+                                                                                                )
+                                                                                                return (
+                                                                                                    <Typography
+                                                                                                        key={
+                                                                                                            studentid
+                                                                                                        }
+                                                                                                    >
+                                                                                                        {student.first_name +
+                                                                                                            ' ' +
+                                                                                                            student.last_name}
+                                                                                                    </Typography>
+                                                                                                )
+                                                                                            }
+                                                                                            return null
+                                                                                        }
+                                                                                    )
+                                                                                ) : (
+                                                                                    <Typography>
+                                                                                        {t(
+                                                                                            'no_members_yet'
+                                                                                        )}
+                                                                                    </Typography>
+                                                                                )}
+                                                                            </>
                                                                         )}
-                                                                    </>
-                                                                )}
-                                                            </Box>,
-                                                            <>
-                                                            {joinLeaveButton(
-                                                                user !=
-                                                                    undefined
-                                                                    ? group.studenten.includes(
-                                                                          user.user
-                                                                      )
-                                                                    : false,
-                                                                handleJoin,
-                                                                handleLeave
-                                                            )}</>
-                                                            ]}/>
+                                                                    </Box>,
+                                                                    <>
+                                                                        {joinLeaveButton(
+                                                                            user !=
+                                                                                undefined
+                                                                                ? group.studenten.includes(
+                                                                                      user.user
+                                                                                  )
+                                                                                : false,
+                                                                            handleJoin,
+                                                                            handleLeave
+                                                                        )}
+                                                                    </>,
+                                                                ]}
+                                                            />
                                                         </ListItem>
-
                                                     </>
                                                 )
                                             })}
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index 0397eea4..9f5d4723 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -1,5 +1,5 @@
 import { Header } from '../../components/Header'
-import {Button, Card, SecondaryButton} from '../../components/CustomComponents.tsx'
+import { Card, SecondaryButton } from '../../components/CustomComponents.tsx'
 import {
     Box,
     CircularProgress,
@@ -372,11 +372,15 @@ export function ProjectScoresPage() {
                                             spacing={2}
                                             marginY={6}
                                         >
-                                            <SecondaryButton onClick={exportSubmissions}>
+                                            <SecondaryButton
+                                                onClick={exportSubmissions}
+                                            >
                                                 {t('export_submissions')}
                                             </SecondaryButton>
 
-                                            <SecondaryButton variant={'contained'}>
+                                            <SecondaryButton
+                                                variant={'contained'}
+                                            >
                                                 {t('upload_scores')}
                                                 <VisuallyHiddenInput
                                                     type="file"
@@ -392,7 +396,11 @@ export function ProjectScoresPage() {
                                         display="flex"
                                         flexDirection="row-reverse"
                                         padding={'3px'}
-                                        sx={{ width: '50%', height: '40px', marginTop: 6 }}
+                                        sx={{
+                                            width: '50%',
+                                            height: '40px',
+                                            marginTop: 6,
+                                        }}
                                     >
                                         {loading ? (
                                             <Skeleton
@@ -413,7 +421,8 @@ export function ProjectScoresPage() {
                                                         '&:hover': {
                                                             color: 'text.primary',
                                                         },
-                                                        backgroundColor: 'primary.main',
+                                                        backgroundColor:
+                                                            'primary.main',
                                                         borderRadius: 2,
                                                     }}
                                                 >
@@ -421,7 +430,7 @@ export function ProjectScoresPage() {
                                                 </IconButton>
                                             </>
                                         )}
-                                        <Box paddingLeft={'10px'}/>
+                                        <Box paddingLeft={'10px'} />
                                         <IconButton
                                             onClick={() =>
                                                 setOpenDeleteScoresPopup(true)
diff --git a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
index d14c59cc..92dcc299 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentScoreListItem.tsx
@@ -1,4 +1,4 @@
-import {Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import { Divider, EvenlySpacedRow } from '../../components/CustomComponents.tsx'
 import {
     CircularProgress,
     ListItemIcon,
@@ -103,63 +103,77 @@ export function StudentScoreListItem({
                         {loading ? (
                             <CircularProgress size={20} color={'primary'} />
                         ) : (
-                            <EvenlySpacedRow items={[
-                            <ListItemText
-                                sx={{ maxWidth: 200 }}
-                                primary={name}
-                            />,
-                        <ListItemText
-                            primary={
-                                lastSubmission
-                                    ? t('last_submission') +
-                                      ' ' +
-                                      dayjs(lastSubmission.tijdstip).format(
-                                          'DD/MM/YYYY HH:mm'
-                                      )
-                                    : t('no_submissions')
-                            }
-                        />,
-                        <ListItem>
-                            {lastSubmission ? (
-                                <>
-                                    <Box width={'24px'} height={'25px'}>
-                                        <TextField
-                                            hiddenLabel
-                                            defaultValue={score}
-                                            onChange={(event) =>
-                                                changeScore(
-                                                    parseInt(event.target.value)
-                                                )
-                                            }
-                                            variant="standard"
-                                            size="small"
-                                        />
-                                    </Box>
-                                    <ListItemText primary={'/' + maxScore} />
-                                </>
-                            ) : (
-                                <ListItemText primary={'0/' + maxScore} />
-                            )}
-                        </ListItem>,
-                        <ListItemText >
-                            <ListItemIcon>
-                                <div onClick={downloadSubmission}>
-                                    {lastSubmission ? (
-                                        <DownloadIcon
-                                            sx={{
-                                                color: 'primary.main',
-                                                '&:hover': {
-                                                    color: 'primary.light',
-                                                },
-                                            }}
-                                        />
-                                    ) : (
-                                        <DownloadIcon sx={{ color: 'gray' }} />
-                                    )}
-                                </div>
-                            </ListItemIcon>
-                        </ListItemText>]}
-                        />
+                            <EvenlySpacedRow
+                                items={[
+                                    <ListItemText
+                                        sx={{ maxWidth: 200 }}
+                                        primary={name}
+                                    />,
+                                    <ListItemText
+                                        primary={
+                                            lastSubmission
+                                                ? t('last_submission') +
+                                                  ' ' +
+                                                  dayjs(
+                                                      lastSubmission.tijdstip
+                                                  ).format('DD/MM/YYYY HH:mm')
+                                                : t('no_submissions')
+                                        }
+                                    />,
+                                    <ListItem>
+                                        {lastSubmission ? (
+                                            <>
+                                                <Box
+                                                    width={'24px'}
+                                                    height={'25px'}
+                                                >
+                                                    <TextField
+                                                        hiddenLabel
+                                                        defaultValue={score}
+                                                        onChange={(event) =>
+                                                            changeScore(
+                                                                parseInt(
+                                                                    event.target
+                                                                        .value
+                                                                )
+                                                            )
+                                                        }
+                                                        variant="standard"
+                                                        size="small"
+                                                    />
+                                                </Box>
+                                                <ListItemText
+                                                    primary={'/' + maxScore}
+                                                />
+                                            </>
+                                        ) : (
+                                            <ListItemText
+                                                primary={'0/' + maxScore}
+                                            />
+                                        )}
+                                    </ListItem>,
+                                    <ListItemText>
+                                        <ListItemIcon>
+                                            <div onClick={downloadSubmission}>
+                                                {lastSubmission ? (
+                                                    <DownloadIcon
+                                                        sx={{
+                                                            color: 'primary.main',
+                                                            '&:hover': {
+                                                                color: 'primary.light',
+                                                            },
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <DownloadIcon
+                                                        sx={{ color: 'gray' }}
+                                                    />
+                                                )}
+                                            </div>
+                                        </ListItemIcon>
+                                    </ListItemText>,
+                                ]}
+                            />
                         )}
                     </>
                 </ListItem>
diff --git a/frontend/frontend/src/pages/scoresPage/StudentsView.tsx b/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
index 3058be90..c64c76fa 100644
--- a/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
+++ b/frontend/frontend/src/pages/scoresPage/StudentsView.tsx
@@ -1,4 +1,4 @@
-import {Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
+import { Divider, EvenlySpacedRow } from '../../components/CustomComponents.tsx'
 import { Box, Skeleton, Typography } from '@mui/material'
 import List from '@mui/material/List'
 import { StudentScoreListItem } from './StudentScoreListItem.tsx'
@@ -121,19 +121,21 @@ export function StudentsView({
                     padding: 3,
                 }}
             >
-                <EvenlySpacedRow items={[
-                    <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
-                        {t('group')}
-                    </Typography>,
-                    <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
-                        {t('time')}
-                    </Typography>,
-                    <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
-                        Score
-                    </Typography>,
-                    <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
-                        Download
-                    </Typography>]}
+                <EvenlySpacedRow
+                    items={[
+                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                            {t('group')}
+                        </Typography>,
+                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                            {t('time')}
+                        </Typography>,
+                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                            Score
+                        </Typography>,
+                        <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
+                            Download
+                        </Typography>,
+                    ]}
                 />
             </Box>
             <Divider color={'text.main'}></Divider>
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 946cccde..b86972a8 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -1,9 +1,13 @@
-import { Divider, Card } from '../../components/CustomComponents.tsx'
+import {
+    Divider,
+    Card,
+    SecondaryButton,
+    EvenlySpacedRow,
+} from '../../components/CustomComponents.tsx'
 import {
     Box,
     IconButton,
     ListItem,
-    ListItemButton,
     ListItemText,
     Skeleton,
     Stack,
@@ -48,11 +52,7 @@ function UserList(
             <List
                 disablePadding={true}
                 sx={{
-                    '& > :not(style)': {
-                        marginBottom: '8px',
-                        width: '99vw',
-                    },
-                    minHeight: '20vh',
+                    minHeight: '30vh',
                     maxHeight: '30vh',
                     overflowY: 'auto',
                 }}
@@ -80,66 +80,55 @@ function UserList(
                             }
                             return (
                                 <>
-                                    <ListItemButton
-                                        sx={{
-                                            width: '100%',
-                                            height: 30,
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            justifyContent: 'space-between',
-                                            paddingX: 1,
-                                            paddingY: 2,
-                                            borderRadius: 2,
-                                        }}
-                                    >
-                                        <Box
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            gap={1}
-                                            alignItems={'center'}
-                                        >
-                                            <ListItemText
-                                                sx={{ maxWidth: 100 }}
-                                                primary={
-                                                    user.first_name +
-                                                    ' ' +
-                                                    user.last_name
-                                                }
-                                            />
-                                        </Box>
-                                        <Box
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            gap={1}
-                                            alignItems={'center'}
-                                        >
-                                            <ListItemText
-                                                sx={{
-                                                    maxWidth: 300,
-                                                    textOverflow: 'ellipsis',
-                                                }}
-                                                primary={user.email}
-                                            />
-                                            <IconButton
-                                                disabled={
-                                                    users.length == 1 &&
-                                                    users[0].is_lesgever
-                                                }
-                                                aria-label={'delete_file'}
-                                                size={'small'}
-                                                onClick={handleClickOpen}
-                                                sx={{
-                                                    '&:disabled': {
-                                                        color: 'text.primary',
-                                                    },
-                                                    color: 'error.main',
-                                                }}
-                                            >
-                                                <ClearIcon />
-                                            </IconButton>
-                                        </Box>
-                                    </ListItemButton>
-                                    <Divider color={'text.main'}></Divider>
+                                    <ListItem>
+                                        <EvenlySpacedRow
+                                            items={[
+                                                <ListItemText
+                                                    primary={
+                                                        user.first_name +
+                                                        ' ' +
+                                                        user.last_name
+                                                    }
+                                                />,
+                                                <Box
+                                                    display={'flex'}
+                                                    flexDirection={'row'}
+                                                    gap={1}
+                                                    alignItems={'center'}
+                                                >
+                                                    <ListItemText
+                                                        sx={{
+                                                            textOverflow:
+                                                                'ellipsis',
+                                                        }}
+                                                        primary={user.email}
+                                                    />
+                                                    <IconButton
+                                                        disabled={
+                                                            users.length == 1 &&
+                                                            users[0].is_lesgever
+                                                        }
+                                                        aria-label={
+                                                            'delete_file'
+                                                        }
+                                                        size={'small'}
+                                                        onClick={
+                                                            handleClickOpen
+                                                        }
+                                                        sx={{
+                                                            '&:disabled': {
+                                                                color: 'text.primary',
+                                                            },
+                                                            color: 'error.main',
+                                                        }}
+                                                    >
+                                                        <ClearIcon />
+                                                    </IconButton>
+                                                </Box>,
+                                            ]}
+                                        />
+                                    </ListItem>
+                                    <Divider />
                                 </>
                             )
                         })}
@@ -175,9 +164,9 @@ function UploadPart(
                             />
                         </Box>
                         <Box>
-                            <Button size={'small'} onClick={handleAdd}>
+                            <SecondaryButton size={'small'} onClick={handleAdd}>
                                 {t('add')}
-                            </Button>
+                            </SecondaryButton>
                         </Box>
                     </Stack>
                     <FileUploadButton
@@ -584,7 +573,6 @@ export function AddChangeSubjectPage() {
                                     marginTop={11}
                                     sx={{
                                         width: '100%',
-                                        height: '70%',
                                         backgroundColor: 'background.default',
                                     }}
                                 >
@@ -623,7 +611,8 @@ export function AddChangeSubjectPage() {
                                             ) : (
                                                 <TextField
                                                     type="text"
-                                                    placeholder={t('title')}
+                                                    value={title}
+                                                    placeholder={t('name')}
                                                     onChange={(event) =>
                                                         setTitle(
                                                             event.target.value
@@ -634,106 +623,117 @@ export function AddChangeSubjectPage() {
                                             )}
                                         </Box>
                                         <Box padding={'20px'}>
-                                            <Button
+                                            <SecondaryButton
                                                 /* This is the large save button on the top of the page */
                                                 onClick={handleSave}
                                             >
                                                 {t('save')}
-                                            </Button>
+                                            </SecondaryButton>
                                         </Box>
                                     </Box>
-                                    <Card>
-                                        <Box
-                                            bgcolor={'primary.light'}
-                                            padding={'20px'}
-                                        >
-                                            <Typography
-                                                variant="h5"
-                                                sx={{ fontWeight: 'bold' }}
-                                            >
-                                                {t('students')}
-                                            </Typography>
+                                    <Stack direction={'row'} gap={10}>
+                                        <Box width={'50%'}>
+                                            <Stack direction={'column'}>
+                                                <Card>
+                                                    <Box
+                                                        bgcolor={
+                                                            'primary.light'
+                                                        }
+                                                        padding={'20px'}
+                                                    >
+                                                        <Typography
+                                                            variant="h5"
+                                                            sx={{
+                                                                fontWeight:
+                                                                    'bold',
+                                                            }}
+                                                        >
+                                                            {t('students')}
+                                                        </Typography>
+                                                    </Box>
+                                                    <Divider />
+                                                    <Box
+                                                        sx={{
+                                                            marginTop: -2.5,
+                                                        }}
+                                                    >
+                                                        {UserList(
+                                                            loading,
+                                                            students,
+                                                            setSelectedStudent,
+                                                            setOpenStudent
+                                                        )}
+                                                    </Box>
+                                                </Card>
+                                                <Box marginTop={2}>
+                                                    {UploadPart(
+                                                        studentFile,
+                                                        handleStudentFileChange,
+                                                        setEmailStudent,
+                                                        handleAddStudent,
+                                                        t('upload_students')
+                                                    )}
+                                                </Box>
+                                                {DialogWindow(
+                                                    handleCloseStudent,
+                                                    openStudent,
+                                                    handleRemoveStudent,
+                                                    t('delete_student')
+                                                )}
+                                            </Stack>
                                         </Box>
-                                        <Box
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            alignItems={'center'}
-                                            gap={1}
-                                            style={{
-                                                maxHeight: 300,
-                                                overflow: 'auto',
-                                            }}
-                                        >
-                                            {UserList(
-                                                loading,
-                                                students,
-                                                setSelectedStudent,
-                                                setOpenStudent
-                                            )}
+                                        <Box width={'50%'}>
+                                            <Stack direction={'column'}>
+                                                <Card>
+                                                    <Box
+                                                        bgcolor={
+                                                            'primary.light'
+                                                        }
+                                                        padding={'20px'}
+                                                    >
+                                                        <Typography
+                                                            variant="h5"
+                                                            sx={{
+                                                                fontWeight:
+                                                                    'bold',
+                                                            }}
+                                                        >
+                                                            {t('teachers')}
+                                                        </Typography>
+                                                    </Box>
+                                                    <Divider />
+                                                    <Box
+                                                        sx={{
+                                                            marginTop: -2.5,
+                                                        }}
+                                                    >
+                                                        {UserList(
+                                                            loading,
+                                                            teachers,
+                                                            setSelectedTeacher,
+                                                            setOpenTeacher
+                                                        )}
+                                                    </Box>
+                                                </Card>
+                                                <Box marginTop={1}>
+                                                    {UploadPart(
+                                                        teacherFile,
+                                                        handleTeacherFileChange,
+                                                        setEmailTeacher,
+                                                        handleAddTeacher,
+                                                        t('upload_teachers')
+                                                    )}
+                                                </Box>
+
+                                                {DialogWindow(
+                                                    handleCloseTeacher,
+                                                    openTeacher,
+                                                    handleRemoveTeacher,
+                                                    t('delete_teacher')
+                                                )}
+                                            </Stack>
                                         </Box>
-                                    </Card>
-                                    <Box marginTop={-30}>
-                                        {UploadPart(
-                                            studentFile,
-                                            handleStudentFileChange,
-                                            setEmailStudent,
-                                            handleAddStudent,
-                                            t('upload_students')
-                                        )}
-                                    </Box>
-
-                                    {DialogWindow(
-                                        handleCloseStudent,
-                                        openStudent,
-                                        handleRemoveStudent,
-                                        t('delete_student')
-                                    )}
-
-                                    <Card>
-                                        <Box
-                                            bgcolor={'primary.light'}
-                                            padding={'20px'}
-                                        >
-                                            <Typography
-                                                variant="h5"
-                                                sx={{ fontWeight: 'bold' }}
-                                            >
-                                                {t('teachers')}
-                                            </Typography>
-                                        </Box>
-                                        <Box
-                                            display={'flex'}
-                                            flexDirection={'row'}
-                                            alignItems={'center'}
-                                            style={{
-                                                maxHeight: 300,
-                                                overflow: 'auto',
-                                            }}
-                                        >
-                                            {UserList(
-                                                loading,
-                                                teachers,
-                                                setSelectedTeacher,
-                                                setOpenTeacher
-                                            )}
-                                        </Box>
-                                    </Card>
-                                    <Box marginTop={1}>
-                                        {UploadPart(
-                                            teacherFile,
-                                            handleTeacherFileChange,
-                                            setEmailTeacher,
-                                            handleAddTeacher,
-                                            t('upload_teachers')
-                                        )}
-                                    </Box>
-
-                                    {DialogWindow(
-                                        handleCloseTeacher,
-                                        openTeacher,
-                                        handleRemoveTeacher,
-                                        t('delete_teacher')
-                                    )}
+                                    </Stack>
                                 </Stack>
                             </Stack>
                         </>
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index b0b97b3c..1b1715c5 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -1,11 +1,5 @@
 import { Header } from '../../components/Header'
-import {
-    Box,
-    CircularProgress,
-    Grid,
-    IconButton,
-    Stack,
-} from '@mui/material'
+import { Box, CircularProgress, Grid, IconButton, Stack } from '@mui/material'
 import TabSwitcher from '../../components/TabSwitcher.tsx'
 import { ProjectsView } from './ProjectsView.tsx'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -331,19 +325,19 @@ export function SubjectsPage() {
                                             '/accept_invitation'
                                         }
                                     />
-                                        <IconButton
-                                            onClick={addProject}
-                                            color="primary"
-                                            edge="end"
-                                            aria-label="add-project"
-                                        >
-                                            <AddCircleIcon
-                                                sx={{
-                                                    fontSize: 60,
-                                                    height: '100%',
-                                                }}
-                                            />
-                                        </IconButton>
+                                    <IconButton
+                                        onClick={addProject}
+                                        color="primary"
+                                        edge="end"
+                                        aria-label="add-project"
+                                    >
+                                        <AddCircleIcon
+                                            sx={{
+                                                fontSize: 60,
+                                                height: '100%',
+                                            }}
+                                        />
+                                    </IconButton>
                                 </Box>
                                 <WarningPopup
                                     title={t('delete_project_warning')}
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 00409b17..fe4852dc 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -480,8 +480,14 @@ export function SubmissionPage() {
                                     height={40}
                                 />
                             ) : (
-                                <Typography variant={'body1'}
-                                    color={(submission?.status === SubmissionStatus.PASSED ? 'green' : 'red')}
+                                <Typography
+                                    variant={'body1'}
+                                    color={
+                                        submission?.status ===
+                                        SubmissionStatus.PASSED
+                                            ? 'green'
+                                            : 'red'
+                                    }
                                 >
                                     {submission?.status ===
                                     SubmissionStatus.PENDING

From f0f9c53cd0b53fc55c2c76de7a9dfa5749fedd60 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 20:51:22 +0200
Subject: [PATCH 104/145] small tweek

---
 .../frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index b86972a8..01c515b4 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -200,6 +200,7 @@ function DialogWindow(
                         <Button size={'small'} onClick={handleClose}>
                             {t('cancel')}
                         </Button>
+                        <Box padding={'7px'}/>
                         <Button size={'small'} onClick={handleRemove}>
                             {t('delete')}
                         </Button>
@@ -724,7 +725,6 @@ export function AddChangeSubjectPage() {
                                                         t('upload_teachers')
                                                     )}
                                                 </Box>
-
                                                 {DialogWindow(
                                                     handleCloseTeacher,
                                                     openTeacher,

From 07c9ce59adaea55bb91f1902c61cda790d1b8cad Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Sun, 19 May 2024 21:33:10 +0200
Subject: [PATCH 105/145] remove double import

---
 .../frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 7328adaf..b86c6118 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -7,7 +7,6 @@ import {
 
 import {
     Box,
-    CircularProgress,
     IconButton,
     ListItem,
     ListItemText,

From 5f8e5f6f0731428462e8afff1859c952a9c26fcf Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 21:51:34 +0200
Subject: [PATCH 106/145] button undefined

---
 .../frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index b86c6118..49d7cb0e 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -30,6 +30,7 @@ import Dialog from '@mui/material/Dialog'
 import instance from '../../axiosConfig.ts'
 
 import Papa, { ParseResult } from 'papaparse'
+import Button from "@mui/material/Button";
 
 export interface User {
     user: number

From 233f180ffe124e5cdcbae3b1f7a33ca0d2307cd3 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 22:04:59 +0200
Subject: [PATCH 107/145] relative group id bug fixed

---
 .../frontend/src/components/SubmissionListItemTeacherPage.tsx   | 2 +-
 frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index 8174774d..b9c5ec29 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -150,7 +150,7 @@ export function SubmissionListItemTeacherPage({
                                         color: 'primary.light',
                                     },
                                 }}
-                                primary={relative_group_id}
+                                primary={group_name}
                             />,
                             <ListItemText
                                 primary={
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index cb6ba9ba..204f39a3 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -561,7 +561,7 @@ export function AssignmentPage() {
                                                                         <></>
                                                                     )}
                                                                     <SubmissionListItemTeacherPage
-                                                                        relative_group_id={(
+                                                                        group_name={(
                                                                             group.groep_id -
                                                                             Math.min(
                                                                                 ...groups.map(

From a5ebf4c4424545eb909c2b2939ebd65a820805f9 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Sun, 19 May 2024 22:15:24 +0200
Subject: [PATCH 108/145] secun to secondary button

---
 .../addChangeAssignmentPage/AddRestrictionButton.tsx   |  6 +++---
 .../addChangeAssignmentPage/RestrictionTemplateUI.tsx  |  8 ++++----
 .../addChangeAssignmentPage/RestrictionsDialog.tsx     | 10 +++++-----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
index 173e5851..c9c76d0d 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddRestrictionButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SecundaryButton } from '../../components/CustomComponents.tsx'
+import { SecondaryButton } from '../../components/CustomComponents.tsx'
 import Dialog, { DialogProps } from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
@@ -70,9 +70,9 @@ export default function AddRestrictionButton({
                 </DialogContent>
                 <DialogActions>
                     {/* Cancel Button */}
-                    <SecundaryButton id="cancelButton" onClick={handleClose}>
+                    <SecondaryButton id="cancelButton" onClick={handleClose}>
                         {t('cancel')}
-                    </SecundaryButton>
+                    </SecondaryButton>
                 </DialogActions>
             </Dialog>
         </>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 2280f1e3..239c8a3d 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
-import {SecundaryButton} from "../../components/CustomComponents.tsx";
+import {SecondaryButton} from "../../components/CustomComponents.tsx";
 
 import { restriction } from './AddChangeAssignmentPage.tsx'
 
@@ -176,7 +176,7 @@ export default function RestrictionTemplateUI({
                     <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
                         {templateName}
                     </Typography>
-                    <SecundaryButton
+                    <SecondaryButton
                         autoFocus
                         color="inherit"
                         onClick={() => handleSubmit(
@@ -184,7 +184,7 @@ export default function RestrictionTemplateUI({
                         )}
                     >
                         save
-                    </SecundaryButton>
+                    </SecondaryButton>
                 </Toolbar>
             </AppBar>
             <Box aria-label={'Content'} padding={1}>
@@ -256,7 +256,7 @@ export default function RestrictionTemplateUI({
                                         </ListItem>
                                     ))}
                                 </List>
-                                <SecundaryButton onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</SecundaryButton>
+                                <SecondaryButton onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</SecondaryButton>
                             </div>
                         )}
                     </div>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 8b0c4a0c..22c60145 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -3,7 +3,7 @@ import { ChangeEvent, useState } from 'react'
 import {
     Button,
     Card,
-    SecundaryButton,
+    SecondaryButton,
 } from '../../components/CustomComponents.tsx'
 import Dialog from '@mui/material/Dialog'
 import AppBar from '@mui/material/AppBar'
@@ -450,7 +450,7 @@ export default function RestrictionsDialog({
                                     justifyContent="space-between"
                                     alignItems="center"
                                 >
-                                    <SecundaryButton
+                                    <SecondaryButton
                                         autoFocus
                                         color="inherit"
                                         onClick={() =>
@@ -462,15 +462,15 @@ export default function RestrictionsDialog({
                                         } // bestand if maakt niet uit, wordt toch niet gebruikt
                                     >
                                         save as template
-                                    </SecundaryButton>
+                                    </SecondaryButton>
                                     <Box paddingRight="10px" />
-                                    <SecundaryButton
+                                    <SecondaryButton
                                         autoFocus
                                         color="inherit"
                                         onClick={() => setPopupOpen(true)}
                                     >
                                         save
-                                    </SecundaryButton>
+                                    </SecondaryButton>
                                 </Box>
                             </Box>
                         </Toolbar>

From 965eb65e8311b1e5ec6224b36108819b7ed64c78 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 23:25:50 +0200
Subject: [PATCH 109/145] fix van mergeconflicts, meeste errors zouden weg
 moeten zijn

---
 .../src/components/AssignmentListItem.tsx     |    8 +-
 .../frontend/src/components/CourseCard.tsx    |   43 +-
 .../src/components/RestrictionCard.tsx        |   10 +-
 frontend/frontend/src/i18n/nl.ts              |    2 +-
 .../AddChangeAssignmentPage.tsx               |    1 +
 .../RestrictionTemplateUI.tsx                 |  316 +++--
 .../RestrictionsDialog.tsx                    |    9 -
 .../pages/assignmentPage/AssignmentPage.tsx   |  161 ++-
 .../src/pages/groupsPage/GroupsPage.tsx       | 1234 +++++++++--------
 .../pages/scoresPage/ProjectScoresPage.tsx    |   16 +-
 .../subjectsPage/AddChangeSubjectPage.tsx     |   19 +-
 11 files changed, 987 insertions(+), 832 deletions(-)

diff --git a/frontend/frontend/src/components/AssignmentListItem.tsx b/frontend/frontend/src/components/AssignmentListItem.tsx
index ae6724e4..3f75f03f 100644
--- a/frontend/frontend/src/components/AssignmentListItem.tsx
+++ b/frontend/frontend/src/components/AssignmentListItem.tsx
@@ -66,13 +66,13 @@ export function AssignmentListItem({
                 >
                     {/* Project Name */}
                     <ListItemText
-                        id='projectName'
+                        id="projectName"
                         sx={{ maxWidth: 100 }}
                         primary={projectName}
                     />
                     {/* Due Date */}
                     <ListItemText
-                        id='dueDate' 
+                        id="dueDate"
                         sx={{ maxWidth: 150 }}
                         primary={dueDate ? dueDate : t('no_deadline')}
                     />
@@ -81,12 +81,12 @@ export function AssignmentListItem({
                         <ListItemIcon sx={{ minWidth: 35 }}>
                             {status ? (
                                 <CheckCircleOutlineIcon
-                                    id='check'
+                                    id="check"
                                     sx={{ color: 'success.main' }}
                                 />
                             ) : (
                                 <HighlightOffIcon
-                                    id='cross'
+                                    id="cross"
                                     sx={{ color: 'error.main' }}
                                 />
                             )}
diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index 378920dc..1838fada 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -137,7 +137,7 @@ export function CourseCard({
                         {/* Clickable area for the card */}
                         <CardActionArea onClick={handleCardClick}>
                             <Box
-                                id='courseInfo'
+                                id="courseInfo"
                                 aria-label={'courseHeader'}
                                 sx={{
                                     backgroundColor: 'secondary.main',
@@ -151,7 +151,6 @@ export function CourseCard({
                             >
                                 {/* Course name and teachers */}
                                 <Box
-                                
                                     width={'70%'}
                                     height={'100%'}
                                     display={'flex'}
@@ -246,23 +245,29 @@ export function CourseCard({
                             {isStudent ? (
                                 // Display assignments for students
                                 <Box
-                                    id='student'
+                                    id="student"
                                     display={'flex'}
                                     flexDirection={'row'}
                                     justifyContent={'space-between'}
                                     pl={3}
                                     pr={3}
                                 >
-                                    <Typography id='project' width={30}>Project</Typography>
-                                    <Typography id='deadline' width={30}>Deadline</Typography>
-                                    <Typography id='status' width={30}>Status</Typography>
+                                    <Typography id="project" width={30}>
+                                        Project
+                                    </Typography>
+                                    <Typography id="deadline" width={30}>
+                                        Deadline
+                                    </Typography>
+                                    <Typography id="status" width={30}>
+                                        Status
+                                    </Typography>
                                 </Box>
                             ) : (
                                 // Display assignments for teachers
                                 <>
                                     {archived ? (
                                         <Box
-                                            id='teacherArchived'
+                                            id="teacherArchived"
                                             display={'flex'}
                                             flexDirection={'row'}
                                             justifyContent={'space-between'}
@@ -270,16 +275,22 @@ export function CourseCard({
                                             pr={3}
                                             width={{ xs: '81%', sm: '85%' }}
                                         >
-                                            <Typography id='project' maxWidth={100}>
+                                            <Typography
+                                                id="project"
+                                                maxWidth={100}
+                                            >
                                                 Project
                                             </Typography>
-                                            <Typography id='deadline' minWidth={50}>
+                                            <Typography
+                                                id="deadline"
+                                                minWidth={50}
+                                            >
                                                 Deadline
                                             </Typography>
                                         </Box>
                                     ) : (
                                         <Box
-                                            id='teacherNonArchived'
+                                            id="teacherNonArchived"
                                             display={'flex'}
                                             flexDirection={'row'}
                                             justifyContent={'space-between'}
@@ -287,10 +298,16 @@ export function CourseCard({
                                             pr={3}
                                             width={{ xs: '71%', sm: '75%' }}
                                         >
-                                            <Typography id='project' maxWidth={100}>
+                                            <Typography
+                                                id="project"
+                                                maxWidth={100}
+                                            >
                                                 Project
                                             </Typography>
-                                            <Typography id='deadline' minWidth={50}>
+                                            <Typography
+                                                id="deadline"
+                                                minWidth={50}
+                                            >
                                                 Deadline
                                             </Typography>
                                         </Box>
@@ -442,7 +459,7 @@ export function CourseCard({
                                                 }}
                                             >
                                                 <IconButton
-                                                    id='archiveButton'
+                                                    id="archiveButton"
                                                     onClick={archiveEvent}
                                                     sx={{
                                                         backgroundColor:
diff --git a/frontend/frontend/src/components/RestrictionCard.tsx b/frontend/frontend/src/components/RestrictionCard.tsx
index c4d957d3..cdfa256b 100644
--- a/frontend/frontend/src/components/RestrictionCard.tsx
+++ b/frontend/frontend/src/components/RestrictionCard.tsx
@@ -2,7 +2,6 @@ import { restriction } from '../pages/addChangeAssignmentPage/AddChangeAssignmen
 import { Box, IconButton, Switch, Typography } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import React from 'react'
-import { t } from 'i18next'
 
 interface RestrictionCardProps {
     restriction: restriction
@@ -15,7 +14,6 @@ export function RestrictionCard({
     restrictions,
     setRestrictions,
 }: RestrictionCardProps) {
-
     const [mustPass, setMustPass] = React.useState(restriction.moet_slagen)
 
     //handle the removal of the restriction from the list
@@ -24,8 +22,8 @@ export function RestrictionCard({
     }
 
     const handleMustPassChange = () => {
-        setMustPass(!mustPass);
-        restriction.moet_slagen = !restriction.moet_slagen;
+        setMustPass(!mustPass)
+        restriction.moet_slagen = !restriction.moet_slagen
     }
 
     return (
@@ -36,7 +34,7 @@ export function RestrictionCard({
                 width={'100%'}
                 justifyContent={'space-between'}
             >
-                <Typography id='script' variant={'body2'}>
+                <Typography id="script" variant={'body2'}>
                     {restriction.script.replace(/^.*[\\/]/, '')}
                 </Typography>
                 <Switch
@@ -46,7 +44,7 @@ export function RestrictionCard({
                     onChange={() => handleMustPassChange()}
                 />
 
-                <IconButton id='closeButton' onClick={handleRemove}>
+                <IconButton id="closeButton" onClick={handleRemove}>
                     <CloseIcon />
                 </IconButton>
             </Box>
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index d7d366d9..ea6fe94d 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -119,7 +119,7 @@ const dutch = {
     group_number: 'GroepsNummer',
     open_with_ui: 'Open met UI',
     choose_existing: 'Kies een bestaand script',
-    make_new_script: 'Maak nieuw script aan'
+    make_new_script: 'Maak nieuw script aan',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index ce6ed0c7..39f49c20 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -871,6 +871,7 @@ export function AddChangeAssignmentPage() {
                                                                 newRestrictions
                                                             )
                                                         }
+                                                        userid={user.user}
                                                     ></AddRestrictionButton>
                                                 </Tooltip>
                                             </Box>
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 239c8a3d..c1a1eed9 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,48 +1,57 @@
-import React, { useState } from 'react';
-import { Box, TextField, Checkbox, List, ListItem, ListItemText, IconButton, Button } from '@mui/material';
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import Typography from '@mui/material/Typography';
+import { useState } from 'react'
+import {
+    Box,
+    Button,
+    Checkbox,
+    IconButton,
+    List,
+    ListItem,
+    ListItemText,
+    TextField,
+} from '@mui/material'
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import Typography from '@mui/material/Typography'
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
-import {SecondaryButton} from "../../components/CustomComponents.tsx";
-
 import { restriction } from './AddChangeAssignmentPage.tsx'
 
-
-const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string]: any }, templateFileName: string) => {
+const saveRestrictionTemplate = (
+    restrictionCode: string,
+    params: { [key: string]: any },
+    templateFileName: string
+) => {
     // This function will save the restriction template with the given parameters.
     // It finds the #@param tags in the restriction code and replaces the values with the given parameters.
     // It does this with javascript regexp
-    
+
     // get the extension after the dot of the filename
-    const extension = templateFileName.split('.').pop();
-    
+    const extension = templateFileName.split('.').pop()
 
-    let newRestrictionCode = restrictionCode;
-    Object.keys(params).forEach(key => {
+    let newRestrictionCode = restrictionCode
+    Object.keys(params).forEach((key) => {
         // match on the #@param tag and the variable name
         // between the #@param tag there can be any number of newline comments and whitespace
         // between the value and the variable name is an equals sign
         // There may be any number of spaces around the equals sign
-        let valueString = params[key];
+        let valueString = params[key]
 
         // If the value is an array, we need to convert it to a string
 
         if (Array.isArray(valueString)) {
             if (extension === 'sh') {
-                valueString = '(' + valueString.join(' ') + ')';
+                valueString = '(' + valueString.join(' ') + ')'
             } else if (extension === 'py') {
-                valueString = '[' + valueString.join(', ') + ']';
+                valueString = '[' + valueString.join(', ') + ']'
             }
         } else if (typeof valueString === 'string') {
-            valueString = '"' + valueString + '"';
+            valueString = '"' + valueString + '"'
         } else if (typeof valueString === 'boolean') {
             if (extension === 'sh') {
-                valueString = valueString ? 'true' : 'false';
+                valueString = valueString ? 'true' : 'false'
             } else if (extension === 'py') {
-                valueString = valueString ? 'True' : 'False';
+                valueString = valueString ? 'True' : 'False'
             }
         } else if (typeof valueString === 'number') {
             // This case already works without intervention.
@@ -50,20 +59,22 @@ const saveRestrictionTemplate = (restrictionCode: string, params: { [key: string
 
         // write this value next to the equals sign in the variable line, keep all the lines surrounding it, such as the comments
         // It may be that comments come after the value, those should be kept as well
-        newRestrictionCode = newRestrictionCode.replace(new RegExp(`(#@param[\\s\\S]*?${key}[\\s\\S]*?=)[^\\n]*`), `$1${valueString}`);
-        
-    });
+        newRestrictionCode = newRestrictionCode.replace(
+            new RegExp(`(#@param[\\s\\S]*?${key}[\\s\\S]*?=)[^\\n]*`),
+            `$1${valueString}`
+        )
+    })
 
-    console.log(newRestrictionCode);
+    console.log(newRestrictionCode)
 
-    return newRestrictionCode;
+    return newRestrictionCode
 }
 
 interface RestrictionTemplateUIProps {
-    restrictionCode: string;
-    handleCloseTemplateInterface: () => void;
-    templateFileName: string;
-    restrictions: restriction[];
+    restrictionCode: string
+    handleCloseTemplateInterface: () => void
+    templateFileName: string
+    restrictions: restriction[]
     setRestrictions: (restriction: restriction[]) => void
 }
 
@@ -71,40 +82,37 @@ interface RestrictionTemplateUIProps {
  * This UI will show different fields for parameters regarding the restrictions template.
  * @returns {React.ReactElement} - The rendered component.
  */
-export default function RestrictionTemplateUI({ 
-    restrictionCode, 
-    handleCloseTemplateInterface, 
-    templateFileName ,
+export default function RestrictionTemplateUI({
+    restrictionCode,
+    handleCloseTemplateInterface,
+    templateFileName,
     restrictions,
-    setRestrictions
+    setRestrictions,
 }: RestrictionTemplateUIProps) {
-    
     // De onderste twee rijen code zouden bijvoorbeeld het volgende doen
     // voor de templateFileName 'template.sh':
     // templateExtension = 'sh'
     // templateName = 'template'
-    const templateExtension = templateFileName.split('.').pop();
-    const templateName =  templateFileName.split('.').shift();
-    
-    
+    const templateName = templateFileName.split('.').shift()
+
     // There are four types of variables that can be used in a restriction template:
     // 1. Integer
     // 2. String
     // 3. Boolean
     // 4. List
 
-    const params = parseParams(restrictionCode);
+    const params = parseParams(restrictionCode)
 
-    const [paramsState, setParamsState] = useState<{ [key: string]: any }>({});
+    const [paramsState, setParamsState] = useState<{ [key: string]: any }>({})
 
     // Initialize paramsState with default values
     useState(() => {
-        const initialState: { [key: string]: any } = {};
-        params.forEach(param => {
-            initialState[param.variable] = param.value;
-        });
-        setParamsState(initialState);
-    });
+        const initialState: { [key: string]: any } = {}
+        params.forEach((param) => {
+            initialState[param.variable] = param.value
+        })
+        setParamsState(initialState)
+    })
 
     //handle the submission of the form
     const handleSubmit = (code: string) => {
@@ -115,11 +123,7 @@ export default function RestrictionTemplateUI({
 
         const newRestriction: restriction = {
             script: templateFileName,
-            file: new File(
-                [code],
-                templateFileName,
-                { type: 'text/plain' }
-            ),
+            file: new File([code], templateFileName, { type: 'text/plain' }),
             moet_slagen: false,
         }
         setRestrictions([...restrictions, newRestriction])
@@ -127,39 +131,46 @@ export default function RestrictionTemplateUI({
     }
 
     // All functions beneath are for handling the array type of parameters.
-    const handleArrayChange = (variable: string, newValue: string) => {
-        setParamsState(prevState => ({
+    const handleArrayChange = (
+        variable: string,
+        newValue: number | string | boolean | string[]
+    ) => {
+        setParamsState((prevState) => ({
             ...prevState,
-            [variable]: newValue
-        }));
-    };
+            [variable]: newValue,
+        }))
+    }
 
     // This function is specifically for handling the array type of parameters.
     // It will change the row at the given index to the new value.
-    const handleChangeRow = (variable: string, newValue: any, index: number) => {
-        const newArrayValues = [...paramsState[variable]];
-        newArrayValues[index] = newValue;
-        setParamsState(prevState => ({
+    const handleChangeRow = (
+        variable: string,
+        newValue: any,
+        index: number
+    ) => {
+        const newArrayValues = [...paramsState[variable]]
+        newArrayValues[index] = newValue
+        setParamsState((prevState) => ({
             ...prevState,
-            [variable]: newArrayValues
-        }));
+            [variable]: newArrayValues,
+        }))
     }
 
     const handleDeleteRow = (variable: string, index: number) => {
-        const newArrayValues = [...paramsState[variable]];
-        newArrayValues.splice(index, 1);
-        setParamsState(prevState => ({
+        const newArrayValues = [...paramsState[variable]]
+        newArrayValues.splice(index, 1)
+        setParamsState((prevState) => ({
             ...prevState,
-            [variable]: newArrayValues
-        }));
-    };
+            [variable]: newArrayValues,
+        }))
+    }
 
     const handleAddRow = (variable: string) => {
-        setParamsState(prevState => ({
+        setParamsState((prevState) => ({
             ...prevState,
-            [variable]: [...(prevState[variable] || []), ''] // Initialize with an empty string
-        }));
-    };
+            [variable]: [...(prevState[variable] || []), ''], // Initialize with an empty string
+        }))
+    }
 
     return (
         <Box>
@@ -171,20 +182,26 @@ export default function RestrictionTemplateUI({
                         onClick={handleCloseTemplateInterface}
                         aria-label="close"
                     >
-                    <CloseIcon />
+                        <CloseIcon />
                     </IconButton>
                     <Typography variant="h6" sx={{ ml: 2, flex: 1 }}>
                         {templateName}
                     </Typography>
-                    <SecondaryButton
+                    <Button
                         autoFocus
                         color="inherit"
-                        onClick={() => handleSubmit(
-                            saveRestrictionTemplate(restrictionCode, paramsState, templateFileName)
-                        )}
+                        onClick={() =>
+                            handleSubmit(
+                                saveRestrictionTemplate(
+                                    restrictionCode,
+                                    paramsState,
+                                    templateFileName
+                                )
+                            )
+                        }
                     >
                         save
-                    </SecondaryButton>
+                    </Button>
                 </Toolbar>
             </AppBar>
             <Box aria-label={'Content'} padding={1}>
@@ -198,9 +215,15 @@ export default function RestrictionTemplateUI({
                                     {param.description}
                                 </Typography>
                                 <TextField
-                                    type='number'
+                                    type="number"
                                     value={paramsState[param.variable]}
-                                    onChange={(e) => handleArrayChange(param.variable, Number(e.target.value))}
+                                    fullWidth
+                                    onChange={(e) =>
+                                        handleArrayChange(
+                                            param.variable,
+                                            Number(e.target.value)
+                                        )
+                                    }
                                 />
                             </>
                         )}
@@ -212,9 +235,15 @@ export default function RestrictionTemplateUI({
                                     {param.description}
                                 </Typography>
                                 <TextField
-                                    type='text'
+                                    type="text"
                                     value={paramsState[param.variable]}
-                                    onChange={(e) => handleArrayChange(param.variable, e.target.value)}
+                                    fullWidth
+                                    onChange={(e) =>
+                                        handleArrayChange(
+                                            param.variable,
+                                            e.target.value
+                                        )
+                                    }
                                 />
                             </>
                         )}
@@ -228,7 +257,12 @@ export default function RestrictionTemplateUI({
                                 <Checkbox
                                     checked={paramsState[param.variable]}
                                     color="primary"
-                                    onChange={(e) => handleArrayChange(param.variable, e.target.checked)}
+                                    onChange={(e) =>
+                                        handleArrayChange(
+                                            param.variable,
+                                            e.target.checked
+                                        )
+                                    }
                                 />
                             </>
                         )}
@@ -241,72 +275,112 @@ export default function RestrictionTemplateUI({
                                     {param.description}
                                 </Typography>
                                 <List>
-                                    {(paramsState[param.variable] || []).map((item, idx) => (
-                                        <ListItem key={idx}>
-                                            <ListItemText>
-                                                <TextField
-                                                    type='text'
-                                                    value={item}
-                                                    onChange={(e) => handleChangeRow(param.variable, e.target.value, idx)}
-                                                />
-                                            </ListItemText>
-                                            <IconButton edge="end" aria-label="delete" onClick={() => handleDeleteRow(param.variable, idx)}>
-                                                <DeleteOutlineIcon />
-                                            </IconButton>
-                                        </ListItem>
-                                    ))}
+                                    {(paramsState[param.variable] || []).map(
+                                        (item: string, idx: number) => (
+                                            <ListItem key={idx}>
+                                                <ListItemText>
+                                                    <TextField
+                                                        type="text"
+                                                        value={item}
+                                                        onChange={(e) =>
+                                                            handleChangeRow(
+                                                                param.variable,
+                                                                e.target.value,
+                                                                idx
+                                                            )
+                                                        }
+                                                    />
+                                                </ListItemText>
+                                                <IconButton
+                                                    edge="end"
+                                                    aria-label="delete"
+                                                    onClick={() =>
+                                                        handleDeleteRow(
+                                                            param.variable,
+                                                            idx
+                                                        )
+                                                    }
+                                                >
+                                                    <DeleteOutlineIcon />
+                                                </IconButton>
+                                            </ListItem>
+                                        )
+                                    )}
                                 </List>
-                                <SecondaryButton onClick={() => handleAddRow(param.variable)} startIcon={<AddCircleOutlineIcon />}>Add Row</SecondaryButton>
+                                <Button
+                                    variant="outlined"
+                                    onClick={() => handleAddRow(param.variable)}
+                                    startIcon={<AddCircleOutlineIcon />}
+                                >
+                                    Add Row
+                                </Button>
                             </div>
                         )}
                     </div>
                 ))}
             </Box>
         </Box>
-    );
+    )
 }
 
 // Helper function for parsing a value in either python or bash code.
 function parseValue(value: string): string | number | boolean | any[] {
     if (value.startsWith('"') && value.endsWith('"')) {
-        return value.slice(1, -1);
-    } else if (value === 'True' || value === 'true') { // capital T for python or lowercase t for bash
-        return true;
-    } else if (value === 'False' || value === 'false') { // capital F for python or lowercase f for bash
-        return false;
+        return value.slice(1, -1)
+    } else if (value === 'True' || value === 'true') {
+        // capital T for python or lowercase t for bash
+        return true
+    } else if (value === 'False' || value === 'false') {
+        // capital F for python or lowercase f for bash
+        return false
     } else if (!isNaN(parseInt(value))) {
-        return parseInt(value);
-    } else if (value.startsWith('[') && value.endsWith(']')) { // square brackets for python lists
+        return parseInt(value)
+    } else if (value.startsWith('[') && value.endsWith(']')) {
+        // square brackets for python lists
         // Python-style list
-        return value.slice(1, -1).split(',').map(item => parseValue(item.trim())); // in python the values are separated by commas
-    } else if (value.startsWith('(') && value.endsWith(')')) { // round brackets for bash lists
+        return value
+            .slice(1, -1)
+            .split(',')
+            .map((item) => parseValue(item.trim())) // in python the values are separated by commas
+    } else if (value.startsWith('(') && value.endsWith(')')) {
+        // round brackets for bash lists
         // Bash-style list
-        return value.slice(1, -1).split(' ').map(item => parseValue(item.trim())); // in bash the values are separated by whitespace
+        return value
+            .slice(1, -1)
+            .split(' ')
+            .map((item) => parseValue(item.trim())) // in bash the values are separated by whitespace
     } else {
-        return value;
+        return value
     }
 }
 
 function parseParams(code: string) {
     // Parse the restriction code into different fields
-    const params = [];
-    const lines = code.split('\n');
-    let description = '';
+    const params = []
+    const lines = code.split('\n')
+    let description = ''
 
     for (let i = 0; i < lines.length; i++) {
-        const line = lines[i].trim();
+        const line = lines[i].trim()
 
         // Look for the #@param tag
         if (line.startsWith('#@param')) {
-            description = lines[i + 1].trim().replace(/^# ?/, '');
-            const variableLine = lines[i + 2].trim();
-            const [variable, value] = variableLine.split('=').map(str => str.trim());
+            description = lines[i + 1].trim().replace(/^# ?/, '')
+            const variableLine = lines[i + 2].trim()
+            const [variable, value] = variableLine
+                .split('=')
+                .map((str) => str.trim())
 
-            let parsedValue = parseValue(value);
+            const parsedValue = parseValue(value)
 
-            params.push({ type: Array.isArray(parsedValue) ? 'array' : typeof (parsedValue), description, variable, value: parsedValue });
+            params.push({
+                type: Array.isArray(parsedValue) ? 'array' : typeof parsedValue,
+                description,
+                variable,
+                value: parsedValue,
+            })
         }
     }
 
-    return params;
+    return params
 }
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 22c60145..942d6d54 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -205,7 +205,6 @@ export default function RestrictionsDialog({
         })
     }, [userid])
 
-
     const handleCloseTextEditor = () => {
         setOpenTextEditor(false)
         closeParentDialog()
@@ -272,14 +271,6 @@ export default function RestrictionsDialog({
                         overflowY: 'auto',
                     }}
                 >
-                    <ButtonGroup
-                        orientation="vertical"
-                        aria-label="Vertical button group"
-                        variant={'outlined'}
-                        color={'primary'}
-                    >
-                        {templateButtons}
-                    </ButtonGroup>
                     {/* This button groups shows the templates the teacher has made */}
                     <ButtonGroup
                         orientation="vertical"
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 204f39a3..e3125b39 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -3,8 +3,8 @@ import FileUploadButton from '../../components/FileUploadButton.tsx'
 import { SubmissionListItemStudentPage } from '../../components/SubmissionListItemStudentPage.tsx'
 import { SubmissionListItemTeacherPage } from '../../components/SubmissionListItemTeacherPage.tsx'
 import {
-    Card,
     Button,
+    Card,
     Divider,
     EvenlySpacedRow,
     SecondaryButton,
@@ -210,65 +210,70 @@ export function AssignmentPage() {
     // Function to download all submissions as a zip file
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
-        const downloadPromises: Promise<void>[] = []
-        submissions.forEach((submission) => {
-            downloadPromises.push(
-                new Promise(async (resolve, reject) => {
-                    try {
-                        // Get the submission details
-                        const submissionResponse = await instance.get(
-                            `/indieningen/${submission.indiening_id}/`
-                        )
-                        const newSubmission = submissionResponse.data
-                        // Get the submission file
-                        const fileResponse = await instance.get(
-                            `/indieningen/${submission.indiening_id}/indiening_bestand/`,
-                            { responseType: 'blob' }
-                        )
-                        let filename = 'indiening.zip'
-                        if (newSubmission.bestand) {
-                            filename = newSubmission.bestand.replace(
-                                /^.*[\\/]/,
-                                ''
-                            )
-                        }
-                        const blob = new Blob([fileResponse.data], {
-                            type: fileResponse.headers['content-type'],
-                        })
-                        const file = new File([blob], filename, {
-                            type: fileResponse.headers['content-type'],
-                        })
-                        newSubmission.bestand = file
-                        newSubmission.filename = filename
-                        // Add the file to the zip
-                        zip.file(filename, fileResponse.data)
-                        resolve(newSubmission)
-                    } catch (err) {
-                        console.error(`Error downloading submission:`, err)
-                        reject(err)
-                    }
+        const downloadPromises = submissions.map(async (submission) => {
+            try {
+                // Get the submission details
+                const submissionResponse = await instance.get(
+                    `/indieningen/${submission.indiening_id}/`
+                )
+                const newSubmission = submissionResponse.data
+
+                // Get the submission file
+                const fileResponse = await instance.get(
+                    `/indieningen/${submission.indiening_id}/indiening_bestand/`,
+                    { responseType: 'blob' }
+                )
+
+                let filename = 'indiening.zip'
+                if (newSubmission.bestand) {
+                    filename = newSubmission.bestand.replace(/^.*[\\/]/, '')
+                }
+
+                const blob = new Blob([fileResponse.data], {
+                    type: fileResponse.headers['content-type'],
                 })
-            )
+                newSubmission.bestand = new File([blob], filename, {
+                    type: fileResponse.headers['content-type'],
+                })
+                newSubmission.filename = filename
+
+                // Add the file to the zip
+                zip.file(filename, fileResponse.data)
+
+                return newSubmission
+            } catch (err) {
+                console.error(
+                    `Error downloading submission for id ${submission.indiening_id}:`,
+                    err
+                )
+                throw err
+            }
         })
-        Promise.all(downloadPromises)
-            .then(() => {
-                zip.generateAsync({ type: 'blob' })
-                    .then((blob) => {
-                        const url = window.URL.createObjectURL(blob)
-                        const a = document.createElement('a')
-                        a.href = url
-                        a.download =
-                            'all_submissions_' + assignment?.titel + '_.zip'
-                        document.body.appendChild(a)
-                        a.click()
-                        a.remove()
-                    })
-                    .catch((err) => {
-                        console.error('Error generating zip file:', err)
-                    })
+
+        Promise.allSettled(downloadPromises)
+            .then((results) => {
+                const errors = results.filter(
+                    (result) => result.status === 'rejected'
+                )
+                if (errors.length > 0) {
+                    console.error(
+                        'Some submissions failed to download:',
+                        errors
+                    )
+                }
+                return zip.generateAsync({ type: 'blob' })
+            })
+            .then((blob) => {
+                const url = window.URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = `all_submissions_${assignment?.titel || 'assignment'}.zip`
+                document.body.appendChild(a)
+                a.click()
+                a.remove()
             })
             .catch((err) => {
-                console.error('Error downloading submissions:', err)
+                console.error('Error generating zip file:', err)
             })
     }
 
@@ -534,7 +539,7 @@ export function AssignmentPage() {
                                                 overflow: 'auto',
                                             }}
                                         >
-                                            <List DisablePadding>
+                                            <List disablePadding>
                                                 {loading ? (
                                                     [...Array(3)].map(
                                                         (_, index) => (
@@ -561,18 +566,33 @@ export function AssignmentPage() {
                                                                         <></>
                                                                     )}
                                                                     <SubmissionListItemTeacherPage
-                                                                        group_name={(
-                                                                            group.groep_id -
-                                                                            Math.min(
-                                                                                ...groups.map(
-                                                                                    (
-                                                                                        group
-                                                                                    ) =>
-                                                                                        group.groep_id
-                                                                                )
-                                                                            ) +
-                                                                            1
-                                                                        ).toString()}
+                                                                        group_name={
+                                                                            assignment
+                                                                                ? assignment.max_groep_grootte >
+                                                                                  1
+                                                                                    ? t(
+                                                                                          'group'
+                                                                                      ) +
+                                                                                      ' ' +
+                                                                                      (
+                                                                                          index +
+                                                                                          1
+                                                                                      ).toString()
+                                                                                    : singleStudents[
+                                                                                            index
+                                                                                        ]
+                                                                                      ? singleStudents[
+                                                                                            index
+                                                                                        ]
+                                                                                            .first_name +
+                                                                                        ' ' +
+                                                                                        singleStudents[
+                                                                                            index
+                                                                                        ]
+                                                                                            .last_name
+                                                                                      : ''
+                                                                                : ''
+                                                                        }
                                                                         group_id={group.groep_id.toString()}
                                                                         assignment_id={
                                                                             assignmentId
@@ -764,9 +784,6 @@ export function AssignmentPage() {
                                                             </Typography>
                                                         ) : (
                                                             <>
-                                                                {console.log(
-                                                                    students
-                                                                )}
                                                                 <StudentPopUp
                                                                     students={
                                                                         studentsLoading
diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index a0d53b84..0351dd54 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -16,6 +16,7 @@ import {
     TableCell,
     TableContainer,
     TableRow,
+    TextField,
     Tooltip,
     Typography,
 } from '@mui/material'
@@ -62,6 +63,8 @@ export function GroupsPage() {
     const [currentGroup, setCurrentGroup] = useState('')
     const [availableStudents, setAvailableStudents] = useState<number[]>([])
     const [projectName, setProjectName] = useState('')
+    const [user, setUser] = useState<User>()
+    const [max_group_size, setMaxGroupSize] = useState(0)
 
     // confirmation dialog state
     const [confirmOpen, setConfirmOpen] = useState(false)
@@ -71,6 +74,7 @@ export function GroupsPage() {
 
     // state for correct loading of the page
     const [loading, setLoading] = useState(true)
+    const [userLoading, setUserLoading] = useState(true)
 
     // handle confirmation dialog
     const confirmSave = async () => {
@@ -136,52 +140,14 @@ export function GroupsPage() {
         navigate('/course/' + courseId + '/assignment/' + assignmentId)
     }
 
-    // Change max group size
-    const handleGroupSizeChange = (newValue: number) => {
-        setNewGroupSize(newValue)
-        setAvailableStudents(() => Array.from(studentNames.keys()))
-        setFilteredStudents(availableStudents)
-        setCurrentGroup('0')
-        setNewGroups(() => {
-            const newGroups = []
-            for (
-                let i = 0;
-                i < Math.ceil(availableStudents.length / newValue);
-                i++
-            ) {
-                newGroups.push({
-                    studenten: [],
-                    project: parseInt(assignmentId),
-                })
-            }
-            return newGroups
-        })
-        async function fetchCourse() {
-            setLoading(true)
-            instance
-                .get('/vakken/' + courseId)
-                .then((response) => {
-                    setAvailableStudents(response.data.studenten)
-                    setFilteredStudents(availableStudents)
-                })
-                .catch((error) => {
-                    console.error(error)
-                })
-            setLoading(false)
-        }
-        fetchCourse()
-            .catch((error) => {
-                console.error(error)
-            })
-            .catch((error) => {
-                console.log(error)
-            })
-    }
-
     //get the current groups and group size from the backend
     useEffect(() => {
         async function fetchData() {
+            setUserLoading(true)
             setLoading(true)
+            const userResponse = await instance.get('/gebruikers/me/')
+            setUser(userResponse.data)
+            setUserLoading(false)
             // Get the student names
             await instance
                 .get('/vakken/' + courseId)
@@ -241,13 +207,10 @@ export function GroupsPage() {
             setLoading(false)
         }
 
-        fetchData()
-            .catch((error) => {
-                console.error(error)
-            })
-            .catch((error) => {
-                console.log(error)
-            })
+        fetchData().catch((error) => {
+            console.error(error)
+        })
+        setCurrentGroup('0')
     }, [assignmentId, courseId])
 
     useEffect(() => {
@@ -262,35 +225,6 @@ export function GroupsPage() {
         setFilteredStudents(availableStudents)
     }, [newGroups, studentNames])
 
-    // Create new groups when the group size changes
-    useEffect(() => {
-        if (newGroups.length === 0) {
-            setAvailableStudents(() => Array.from(studentNames.keys()))
-            setFilteredStudents(availableStudents)
-            setCurrentGroup('0')
-            setNewGroups(() => {
-                const newGroups = []
-                for (
-                    let i = 0;
-                    i < Math.ceil(availableStudents.length / newGroupSize);
-                    i++
-                ) {
-                    newGroups.push({
-                        studenten: [],
-                        project: parseInt(assignmentId),
-                    })
-                }
-                return newGroups
-            })
-        }
-    }, [
-        assignmentId,
-        availableStudents.length,
-        newGroupSize,
-        newGroups.length,
-        studentNames,
-    ])
-
     //Handle current group change
     const handleCurrentGroupChange = (event: SelectChangeEvent) => {
         setCurrentGroup(event.target.value as string)
@@ -385,558 +319,682 @@ export function GroupsPage() {
     }
     return (
         <>
-            <Box
-                component={'form'}
-                onSubmit={handleSave}
-                sx={{
-                    backgroundColor: 'background.default',
-                    height: '100%',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'flex-start',
-                }}
-            >
-                <Header
-                    variant={'default'}
-                    title={loading ? '' : `${projectName}: ${t('groups')}`}
-                ></Header>
-                <Stack
-                    marginTop={12}
-                    direction={'column'}
-                    spacing={4}
+            {/* Rendering different UI based on user role */}
+            {userLoading ? (
+                <Box
                     sx={{
-                        width: '100%',
-                        height: '70 %',
-                        backgroundColor: 'background.default',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100vh',
                     }}
                 >
-                    <Box>
-                        <Box
-                            sx={{
-                                gap: 5,
-                                padding: '20px',
-                                backgroundColor: 'background.default',
-                            }}
-                        >
-                            <Typography
-                                variant="h5"
-                                sx={{ fontWeight: 'bold' }}
-                                color="text.primary"
-                            >
-                                {t('groups')}
-                            </Typography>
-                            <Stack direction={'row'}>
-                                <Grid container spacing={2} alignItems="center">
-                                    <Grid item>
-                                        <Typography
-                                            color="text.primary"
-                                            fontWeight={'bold'}
-                                        >
-                                            {t('amount')} {t('members')}/
-                                            {t('group')}
-                                        </Typography>
-                                    </Grid>
-                                    <Grid item minWidth={3}>
-                                        {loading ? (
-                                            <Skeleton
-                                                variant={'text'}
-                                                width={80}
-                                                height={80}
-                                            />
-                                        ) : (
-                                            <TextField
-                                                // The teacher can specify the maximum group size
-                                                // If a number smaller than 1 is entered, the input will be ignored
-                                                aria-label={'maxGroupSize'}
-                                                value={newGroupSize}
-                                                type={'number'}
-                                                onChange={(newValue) => {
-                                                    if (
-                                                        parseInt(
-                                                            newValue.target
-                                                                .value
-                                                        ) < 1
-                                                    )
-                                                        return
-                                                    handleGroupSizeChange(
-                                                        parseInt(
-                                                            newValue.target
-                                                                .value
-                                                        )
-                                                    )
-                                                }}
-                                                variant="outlined"
-                                                sx={{ width: 80 }}
-                                            />
-                                        )}
-                                    </Grid>
-                                </Grid>
-                            </Stack>
-                            <Stack
-                                direction="row"
-                                alignItems="center"
-                                spacing={10}
-                                marginY={6}
+                    <CircularProgress color={'primary'} />
+                    <Box></Box>
+                </Box>
+            ) : (
+                <>
+                    {user?.is_lesgever ? (
+                        // Rendering UI for teacher
+                        <>
+                            <Box
+                                component={'form'}
+                                onSubmit={handleSave}
+                                sx={{
+                                    backgroundColor: 'background.default',
+                                    height: '100%',
+                                    width: '100%',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'flex-start',
+                                }}
                             >
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'rectangular'}
-                                        width={220}
-                                        height={45}
-                                        sx={{
-                                            backgroundColor: 'secondary.main',
-                                            borderRadius: 1,
-                                        }}
-                                    />
-                                ) : (
-                                    <Button
-                                        // If a teacher doesn't want to create groups manually,
-                                        // they can randomize the groups with a single click.variant={'contained'}
-                                        onClick={randomGroups}
-                                    >
-                                        {t('random')} {t('groups')}
-                                    </Button>
-                                )}
-                                <Box
-                                    // If the students are allowed to choose their own groups,
-                                    // the teacher can enable this feature with a switch.
-                                    display={'flex'}
-                                    flexDirection={'row'}
-                                    alignItems={'center'}
-                                    gap={2}
+                                <Header
+                                    variant={'default'}
+                                    title={
+                                        loading
+                                            ? ''
+                                            : `${projectName}: ${t('groups')}`
+                                    }
+                                ></Header>
+                                <Stack
+                                    marginTop={12}
+                                    direction={'column'}
+                                    spacing={4}
+                                    sx={{
+                                        width: '100%',
+                                        height: '70 %',
+                                        backgroundColor: 'background.default',
+                                    }}
                                 >
-                                    <Typography
-                                        color="text.primary"
-                                        fontWeight={'bold'}
-                                    >
-                                        {t('students_choose')}
-                                    </Typography>
-                                    {loading ? (
-                                        <Skeleton
-                                            variant={'rectangular'}
-                                            width={40}
-                                            height={30}
+                                    <Box>
+                                        <Box
                                             sx={{
+                                                gap: 5,
+                                                padding: '20px',
                                                 backgroundColor:
-                                                    'secondary.main',
-                                                borderRadius: 1,
+                                                    'background.default',
                                             }}
-                                        />
-                                    ) : (
-                                        <Switch />
-                                    )}
-                                </Box>
-                            </Stack>
-                        </Box>
-                        <Box
-                            sx={{
-                                marginTop: -3,
-                                padding: '20px',
-                                backgroundColor: 'background.default',
-                            }}
-                        >
-                            <Box
-                                aria-label={'group_assigner'}
-                                display={'flex'}
-                                flexDirection={'row'}
-                                justifyContent={'flex-start'} // Change to flex-start
-                                alignItems={'flex-start'}
-                                sx={{
-                                    '& > *:not(:last-child)': {
-                                        marginRight: '40px', // Add right margin of 20 pixels
-                                    },
-                                }}
-                            >
-                                <Card>
-                                    <Box
-                                        bgcolor={'primary.light'}
-                                        padding={'17px'}
-                                    >
-                                        <Stack direction={'row'}>
-                                            <Grid
-                                                container
-                                                spacing={1}
+                                        >
+                                            <Typography
+                                                variant="h5"
+                                                sx={{ fontWeight: 'bold' }}
+                                                color="text.primary"
+                                            >
+                                                {t('groups')}
+                                            </Typography>
+                                            <Stack direction={'row'}>
+                                                <Grid
+                                                    container
+                                                    spacing={2}
+                                                    alignItems="center"
+                                                >
+                                                    <Grid item>
+                                                        <Typography
+                                                            color="text.primary"
+                                                            fontWeight={'bold'}
+                                                        >
+                                                            {t('amount')}{' '}
+                                                            {t('members')}/
+                                                            {t('group')}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
+                                            </Stack>
+                                            <Stack
+                                                direction="row"
                                                 alignItems="center"
+                                                spacing={10}
+                                                marginY={6}
                                             >
-                                                <Grid item>
-                                                    <Typography
-                                                        variant="h5"
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'rectangular'}
+                                                        width={220}
+                                                        height={45}
                                                         sx={{
-                                                            fontWeight: 'bold',
+                                                            backgroundColor:
+                                                                'secondary.main',
+                                                            borderRadius: 1,
                                                         }}
+                                                    />
+                                                ) : (
+                                                    <Button
+                                                        // If a teacher doesn't want to create groups manually,
+                                                        // they can randomize the groups with a single click.variant={'contained'}
+                                                        onClick={() =>
+                                                            setRandomOpen(true)
+                                                        }
+                                                    >
+                                                        {t('random')}{' '}
+                                                        {t('groups')}
+                                                    </Button>
+                                                )}
+                                                <Box
+                                                    // If the students are allowed to choose their own groups,
+                                                    // the teacher can enable this feature with a switch.
+                                                    display={'flex'}
+                                                    flexDirection={'row'}
+                                                    alignItems={'center'}
+                                                    gap={2}
+                                                >
+                                                    <Typography
+                                                        color="text.primary"
+                                                        fontWeight={'bold'}
                                                     >
-                                                        {t('group')}
+                                                        {t('students_choose')}
                                                     </Typography>
-                                                </Grid>
-                                                <Grid item>
                                                     {loading ? (
                                                         <Skeleton
-                                                            variant={'text'}
-                                                            width={80}
-                                                            height={80}
+                                                            variant={
+                                                                'rectangular'
+                                                            }
+                                                            width={40}
+                                                            height={30}
+                                                            sx={{
+                                                                backgroundColor:
+                                                                    'secondary.main',
+                                                                borderRadius: 1,
+                                                            }}
                                                         />
                                                     ) : (
-                                                        <Select
-                                                            aria-label={
-                                                                'groupSelect'
-                                                            }
-                                                            value={currentGroup}
-                                                            sx={{ width: 120 }}
-                                                            onChange={
-                                                                handleCurrentGroupChange
-                                                            }
-                                                            label={t('group')}
+                                                        <Switch />
+                                                    )}
+                                                </Box>
+                                            </Stack>
+                                        </Box>
+                                        <Box
+                                            sx={{
+                                                marginTop: -3,
+                                                padding: '20px',
+                                                backgroundColor:
+                                                    'background.default',
+                                            }}
+                                        >
+                                            <Box
+                                                aria-label={'group_assigner'}
+                                                display={'flex'}
+                                                flexDirection={'row'}
+                                                justifyContent={'flex-start'} // Change to flex-start
+                                                alignItems={'flex-start'}
+                                                sx={{
+                                                    '& > *:not(:last-child)': {
+                                                        marginRight: '40px', // Add right margin of 20 pixels
+                                                    },
+                                                }}
+                                            >
+                                                <Card>
+                                                    <Box
+                                                        bgcolor={
+                                                            'primary.light'
+                                                        }
+                                                        padding={'17px'}
+                                                    >
+                                                        <Stack
+                                                            direction={'row'}
                                                         >
-                                                            {newGroups.map(
-                                                                (_, index) => (
-                                                                    <MenuItem
-                                                                        key={index.toString()}
-                                                                        value={index.toString()}
+                                                            <Grid
+                                                                container
+                                                                spacing={1}
+                                                                alignItems="center"
+                                                            >
+                                                                <Grid item>
+                                                                    <Typography
+                                                                        variant="h5"
+                                                                        sx={{
+                                                                            fontWeight:
+                                                                                'bold',
+                                                                        }}
                                                                     >
                                                                         {t(
                                                                             'group'
-                                                                        ) +
-                                                                            (index +
-                                                                                1)}
-                                                                    </MenuItem>
-                                                                )
-                                                            )}
-                                                        </Select>
-                                                    )}
-                                                </Grid>
-                                            </Grid>
-                                        </Stack>
-                                    </Box>
-                                    <TableContainer sx={{ maxHeight: '55vh' }}>
-                                        <Table
-                                            // The teacher can see the students in the specified group
-                                            // on the right side of the screen.
-                                            aria-label={'groupTable'}
-                                            stickyHeader
-                                            sx={{ maxHeight: '5    0svh' }}
-                                        >
-                                            <TableBody>
-                                                {loading ? (
-                                                    [...Array(3)].map(
-                                                        (_, index) => (
-                                                            <Skeleton
-                                                                key={index}
-                                                                variant="text"
-                                                                width={'100%'}
-                                                                height={50}
-                                                                sx={{
-                                                                    margin: 0,
-                                                                }}
-                                                            />
-                                                        )
-                                                    )
-                                                ) : (
-                                                    <>
-                                                        {newGroups[
-                                                            parseInt(
-                                                                currentGroup
-                                                            )
-                                                        ] &&
-                                                            newGroups[
-                                                                parseInt(
-                                                                    currentGroup
-                                                                )
-                                                            ].studenten.map(
-                                                                (student) => (
-                                                                    <TableRow
-                                                                        key={
-                                                                            student
-                                                                        }
-                                                                    >
-                                                                        <TableCell
+                                                                        )}
+                                                                    </Typography>
+                                                                </Grid>
+                                                                <Grid item>
+                                                                    {loading ? (
+                                                                        <Skeleton
+                                                                            variant={
+                                                                                'text'
+                                                                            }
+                                                                            width={
+                                                                                80
+                                                                            }
+                                                                            height={
+                                                                                80
+                                                                            }
+                                                                        />
+                                                                    ) : (
+                                                                        <Select
+                                                                            aria-label={
+                                                                                'groupSelect'
+                                                                            }
+                                                                            value={
+                                                                                currentGroup
+                                                                            }
                                                                             sx={{
-                                                                                height: 20,
-                                                                                display:
-                                                                                    'flex',
-                                                                                flexDirection:
-                                                                                    'row',
-                                                                                justifyContent:
-                                                                                    'space-between',
-                                                                                alignItems:
-                                                                                    'center',
+                                                                                width: 120,
                                                                             }}
+                                                                            onChange={
+                                                                                handleCurrentGroupChange
+                                                                            }
+                                                                            label={t(
+                                                                                'group'
+                                                                            )}
                                                                         >
-                                                                            {studentNames.get(
-                                                                                student
+                                                                            {newGroups.map(
+                                                                                (
+                                                                                    _,
+                                                                                    index
+                                                                                ) => (
+                                                                                    <MenuItem
+                                                                                        key={index.toString()}
+                                                                                        value={index.toString()}
+                                                                                    >
+                                                                                        {t(
+                                                                                            'group'
+                                                                                        ) +
+                                                                                            (index +
+                                                                                                1)}
+                                                                                    </MenuItem>
+                                                                                )
                                                                             )}
-                                                                            <IconButton // The teacher can remove students from the group by clicking on the cross icon
-                                                                                onClick={() => {
-                                                                                    removeStudent(
-                                                                                        student,
-                                                                                        parseInt(
-                                                                                            currentGroup
-                                                                                        )
-                                                                                    )
-                                                                                }}
-                                                                            >
-                                                                                <CancelIcon />
-                                                                            </IconButton>
-                                                                        </TableCell>
-                                                                    </TableRow>
-                                                                )
-                                                            )}
-                                                    </>
-                                                )}
-                                            </TableBody>
-                                        </Table>
-                                    </TableContainer>
-                                </Card>
-                                <Card>
-                                    <Box
-                                        bgcolor={'primary.light'}
-                                        padding={'17px'}
-                                    >
-                                        <Stack direction={'row'}>
-                                            <Grid container alignItems="center">
-                                                <Grid>
-                                                    <Typography
-                                                        variant="h5"
+                                                                        </Select>
+                                                                    )}
+                                                                </Grid>
+                                                            </Grid>
+                                                        </Stack>
+                                                    </Box>
+                                                    <TableContainer
                                                         sx={{
-                                                            fontWeight: 'bold',
+                                                            maxHeight: '55vh',
                                                         }}
                                                     >
-                                                        {t('studenten')}
-                                                    </Typography>
-                                                </Grid>
-                                                <Box paddingLeft={1}></Box>
-                                                <Grid>
-                                                    <Box
-                                                        sx={{ width: '200px' }}
-                                                    >
-                                                        {loading ? (
-                                                            <Skeleton
-                                                                variant={'text'}
-                                                                width={160}
-                                                                height={80}
-                                                            />
-                                                        ) : (
-                                                            <Autocomplete
-                                                                options={
-                                                                    availableStudents
-                                                                }
-                                                                getOptionLabel={(
-                                                                    student
-                                                                ) => {
-                                                                    const name =
-                                                                        studentNames.get(
-                                                                            student
+                                                        <Table
+                                                            // The teacher can see the students in the specified group
+                                                            // on the right side of the screen.
+                                                            aria-label={
+                                                                'groupTable'
+                                                            }
+                                                            stickyHeader
+                                                            sx={{
+                                                                maxHeight:
+                                                                    '5    0svh',
+                                                            }}
+                                                        >
+                                                            <TableBody>
+                                                                {loading ? (
+                                                                    [
+                                                                        ...Array(
+                                                                            3
+                                                                        ),
+                                                                    ].map(
+                                                                        (
+                                                                            _,
+                                                                            index
+                                                                        ) => (
+                                                                            <Skeleton
+                                                                                key={
+                                                                                    index
+                                                                                }
+                                                                                variant="text"
+                                                                                width={
+                                                                                    '100%'
+                                                                                }
+                                                                                height={
+                                                                                    50
+                                                                                }
+                                                                                sx={{
+                                                                                    margin: 0,
+                                                                                }}
+                                                                            />
                                                                         )
-                                                                    return name !=
-                                                                        null
-                                                                        ? name
-                                                                        : '' // This checks for both null and undefined
-                                                                }}
-                                                                onChange={
-                                                                    handleAutocompleteChange
-                                                                }
-                                                                filterOptions={
-                                                                    filterOptions
-                                                                }
-                                                                renderInput={(
-                                                                    student
-                                                                ) => (
-                                                                    <TextField
-                                                                        {...student}
-                                                                    />
+                                                                    )
+                                                                ) : (
+                                                                    <>
+                                                                        {newGroups[
+                                                                            parseInt(
+                                                                                currentGroup
+                                                                            )
+                                                                        ] &&
+                                                                            newGroups[
+                                                                                parseInt(
+                                                                                    currentGroup
+                                                                                )
+                                                                            ].studenten.map(
+                                                                                (
+                                                                                    student
+                                                                                ) => (
+                                                                                    <TableRow
+                                                                                        key={
+                                                                                            student
+                                                                                        }
+                                                                                    >
+                                                                                        <TableCell
+                                                                                            sx={{
+                                                                                                height: 20,
+                                                                                                display:
+                                                                                                    'flex',
+                                                                                                flexDirection:
+                                                                                                    'row',
+                                                                                                justifyContent:
+                                                                                                    'space-between',
+                                                                                                alignItems:
+                                                                                                    'center',
+                                                                                            }}
+                                                                                        >
+                                                                                            {studentNames.get(
+                                                                                                student
+                                                                                            )}
+                                                                                            <IconButton // The teacher can remove students from the group by clicking on the cross icon
+                                                                                                onClick={() => {
+                                                                                                    removeStudent(
+                                                                                                        student,
+                                                                                                        parseInt(
+                                                                                                            currentGroup
+                                                                                                        )
+                                                                                                    )
+                                                                                                }}
+                                                                                            >
+                                                                                                <CancelIcon />
+                                                                                            </IconButton>
+                                                                                        </TableCell>
+                                                                                    </TableRow>
+                                                                                )
+                                                                            )}
+                                                                    </>
                                                                 )}
-                                                            />
-                                                        )}
-                                                    </Box>
-                                                </Grid>
-                                            </Grid>
-                                        </Stack>
-                                    </Box>
-                                    <TableContainer sx={{ maxHeight: '55vh' }}>
-                                        <Table
-                                        // The teacher can see the available students
-                                        // on the left side of the screen.
-                                        // They are displayed in a table with a sticky header.aria-label={'studentTable'}
-                                        >
-                                            <TableBody>
-                                                {loading ? (
-                                                    [...Array(3)].map(
-                                                        (_, index) => (
-                                                            <Skeleton
-                                                                key={index}
-                                                                variant="text"
-                                                                width={'100%'}
-                                                                height={50}
-                                                                sx={{
-                                                                    margin: 0,
-                                                                }}
-                                                            />
-                                                        )
-                                                    )
-                                                ) : (
-                                                    <>
+                                                            </TableBody>
+                                                        </Table>
+                                                    </TableContainer>
+                                                </Card>
+                                                <Card>
+                                                    <Box
+                                                        bgcolor={
+                                                            'primary.light'
+                                                        }
+                                                        padding={'17px'}
+                                                    >
                                                         <Stack
                                                             direction={'row'}
                                                         >
-                                                            {chunkArray(
-                                                                filteredStudents,
-                                                                Math.ceil(
-                                                                    Math.sqrt(
-                                                                        filteredStudents.length
-                                                                    )
-                                                                )
-                                                            ).map(
-                                                                (students) => (
-                                                                    <Box>
-                                                                        {students.map(
-                                                                            (
-                                                                                student
-                                                                            ) => (
-                                                                                <TableRow
-                                                                                    key={
-                                                                                        student
-                                                                                    }
-                                                                                >
-                                                                                    <TableCell
-                                                                                        sx={{
-                                                                                            height: 20,
-                                                                                            display:
-                                                                                                'flex',
-                                                                                            flexDirection:
-                                                                                                'row',
-                                                                                            justifyContent:
-                                                                                                'space-between',
-                                                                                            alignItems:
-                                                                                                'center',
-                                                                                        }}
-                                                                                    >
-                                                                                        {studentNames.get(
+                                                            <Grid
+                                                                container
+                                                                alignItems="center"
+                                                            >
+                                                                <Grid>
+                                                                    <Typography
+                                                                        variant="h5"
+                                                                        sx={{
+                                                                            fontWeight:
+                                                                                'bold',
+                                                                        }}
+                                                                    >
+                                                                        {t(
+                                                                            'studenten'
+                                                                        )}
+                                                                    </Typography>
+                                                                </Grid>
+                                                                <Box
+                                                                    paddingLeft={
+                                                                        1
+                                                                    }
+                                                                ></Box>
+                                                                <Grid>
+                                                                    <Box
+                                                                        sx={{
+                                                                            width: '200px',
+                                                                        }}
+                                                                    >
+                                                                        {loading ? (
+                                                                            <Skeleton
+                                                                                variant={
+                                                                                    'text'
+                                                                                }
+                                                                                width={
+                                                                                    160
+                                                                                }
+                                                                                height={
+                                                                                    80
+                                                                                }
+                                                                            />
+                                                                        ) : (
+                                                                            <Autocomplete
+                                                                                options={
+                                                                                    availableStudents
+                                                                                }
+                                                                                getOptionLabel={(
+                                                                                    student
+                                                                                ) => {
+                                                                                    const name =
+                                                                                        studentNames.get(
                                                                                             student
-                                                                                        ) ===
-                                                                                        ''
-                                                                                            ? student
-                                                                                            : studentNames.get(
-                                                                                                  student
-                                                                                              )}
-                                                                                        <IconButton // people can be added to groups by clicking on the plus icon
-                                                                                            disabled={
-                                                                                                newGroups[
-                                                                                                    parseInt(
-                                                                                                        currentGroup
-                                                                                                    )
-                                                                                                ]
-                                                                                                    ? newGroups[
-                                                                                                          parseInt(
-                                                                                                              currentGroup
-                                                                                                          )
-                                                                                                      ]
-                                                                                                          .studenten
-                                                                                                          .length >=
-                                                                                                      newGroupSize
-                                                                                                    : true
-                                                                                            }
-                                                                                            onClick={() => {
-                                                                                                assignStudent(
-
-                                                                                                    student,
-                                                                                                    parseInt(
-                                                                                                        currentGroup
-                                                                                                    )
-                                                                                                )
-                                                                                                resetAutocompleteChange()
-                                                                                            }}
-                                                                                        >
-                                                                                            <Add />
-
-                                                                                        </IconButton>
-                                                                                    </TableCell>
-                                                                                </TableRow>
-                                                                            )
+                                                                                        )
+                                                                                    return name !=
+                                                                                        null
+                                                                                        ? name
+                                                                                        : '' // This checks for both null and undefined
+                                                                                }}
+                                                                                onChange={
+                                                                                    handleAutocompleteChange
+                                                                                }
+                                                                                filterOptions={
+                                                                                    filterOptions
+                                                                                }
+                                                                                renderInput={(
+                                                                                    student
+                                                                                ) => (
+                                                                                    <TextField
+                                                                                        {...student}
+                                                                                    />
+                                                                                )}
+                                                                            />
                                                                         )}
                                                                     </Box>
-                                                                )
-                                                            )}
+                                                                </Grid>
+                                                            </Grid>
                                                         </Stack>
-                                                    </>
-                                                )}
-                                            </TableBody>
-                                        </Table>
-                                    </TableContainer>
-                                </Card>
-                            </Box>
-                        </Box>
-                    </Box>
-                </Stack>
-                <Box
-                    aria-label={'save/cancel'}
-                    sx={{
-                        position: 'fixed',
-                        bottom: 0,
-                        width: '100%',
-                        alignItems: 'flex-end',
-                        gap: 5,
-                        paddingRight: 10,
-                    }}
-                >
-                    <DialogActions>
-                        <Box pr={5} pb={5} display={'flex'} gap={1}>
-                            <Tooltip title={t('cancel')}>
-                                <IconButton
-                                    // The teacher can cancel the group changes by clicking on the cross icon.
-                                    onClick={handleCancel}
+                                                    </Box>
+                                                    <TableContainer
+                                                        sx={{
+                                                            maxHeight: '55vh',
+                                                        }}
+                                                    >
+                                                        <Table
+                                                        // The teacher can see the available students
+                                                        // on the left side of the screen.
+                                                        // They are displayed in a table with a sticky header.aria-label={'studentTable'}
+                                                        >
+                                                            <TableBody>
+                                                                {loading ? (
+                                                                    [
+                                                                        ...Array(
+                                                                            3
+                                                                        ),
+                                                                    ].map(
+                                                                        (
+                                                                            _,
+                                                                            index
+                                                                        ) => (
+                                                                            <Skeleton
+                                                                                key={
+                                                                                    index
+                                                                                }
+                                                                                variant="text"
+                                                                                width={
+                                                                                    '100%'
+                                                                                }
+                                                                                height={
+                                                                                    50
+                                                                                }
+                                                                                sx={{
+                                                                                    margin: 0,
+                                                                                }}
+                                                                            />
+                                                                        )
+                                                                    )
+                                                                ) : (
+                                                                    <>
+                                                                        <Stack
+                                                                            direction={
+                                                                                'row'
+                                                                            }
+                                                                        >
+                                                                            {chunkArray(
+                                                                                filteredStudents,
+                                                                                Math.ceil(
+                                                                                    Math.sqrt(
+                                                                                        filteredStudents.length
+                                                                                    )
+                                                                                )
+                                                                            ).map(
+                                                                                (
+                                                                                    students
+                                                                                ) => (
+                                                                                    <Box>
+                                                                                        {students.map(
+                                                                                            (
+                                                                                                student
+                                                                                            ) => (
+                                                                                                <TableRow
+                                                                                                    key={
+                                                                                                        student
+                                                                                                    }
+                                                                                                >
+                                                                                                    <TableCell
+                                                                                                        sx={{
+                                                                                                            height: 20,
+                                                                                                            display:
+                                                                                                                'flex',
+                                                                                                            flexDirection:
+                                                                                                                'row',
+                                                                                                            justifyContent:
+                                                                                                                'space-between',
+                                                                                                            alignItems:
+                                                                                                                'center',
+                                                                                                        }}
+                                                                                                    >
+                                                                                                        {studentNames.get(
+                                                                                                            student
+                                                                                                        ) ===
+                                                                                                        ''
+                                                                                                            ? student
+                                                                                                            : studentNames.get(
+                                                                                                                  student
+                                                                                                              )}
+                                                                                                        <IconButton // people can be added to groups by clicking on the plus icon
+                                                                                                            disabled={
+                                                                                                                newGroups[
+                                                                                                                    parseInt(
+                                                                                                                        currentGroup
+                                                                                                                    )
+                                                                                                                ]
+                                                                                                                    ? newGroups[
+                                                                                                                          parseInt(
+                                                                                                                              currentGroup
+                                                                                                                          )
+                                                                                                                      ]
+                                                                                                                          .studenten
+                                                                                                                          .length >=
+                                                                                                                      max_group_size
+                                                                                                                    : true
+                                                                                                            }
+                                                                                                            onClick={() => {
+                                                                                                                assignStudent(
+                                                                                                                    student,
+                                                                                                                    parseInt(
+                                                                                                                        currentGroup
+                                                                                                                    )
+                                                                                                                )
+                                                                                                                resetAutocompleteChange()
+                                                                                                            }}
+                                                                                                        >
+                                                                                                            <Add />
+                                                                                                        </IconButton>
+                                                                                                    </TableCell>
+                                                                                                </TableRow>
+                                                                                            )
+                                                                                        )}
+                                                                                    </Box>
+                                                                                )
+                                                                            )}
+                                                                        </Stack>
+                                                                    </>
+                                                                )}
+                                                            </TableBody>
+                                                        </Table>
+                                                    </TableContainer>
+                                                </Card>
+                                            </Box>
+                                        </Box>
+                                    </Box>
+                                </Stack>
+                                <Box
+                                    aria-label={'save/cancel'}
                                     sx={{
-                                        backgroundColor: 'secondary.main',
-                                        borderRadius: 2,
+                                        position: 'fixed',
+                                        bottom: 0,
+                                        width: '100%',
+                                        alignItems: 'flex-end',
+                                        gap: 5,
+                                        paddingRight: 10,
                                     }}
                                 >
-                                    <ClearIcon fontSize={'medium'} />
-                                </IconButton>
-                            </Tooltip>
-                            <Tooltip title={t('submit')}>
-                                {loading ? (
-                                    <Skeleton
-                                        variant={'rectangular'}
-                                        width={40}
-                                        height={40}
-                                        sx={{
-                                            backgroundColor: 'primary.main',
-                                            borderRadius: 2,
-                                        }}
-                                    />
-                                ) : (
-                                    <>
-                                        <IconButton
-                                            // The teacher can save the group changes by clicking on the save icon.type="submit"
-                                            aria-label={'submit'}
-                                            sx={{
-                                                backgroundColor: 'primary.main',
-                                                borderRadius: 2,
-                                                color: 'background.default',
-                                                '&:hover': {
-                                                    backgroundColor:
-                                                        'secondary.main',
-                                                    color: 'text.primary',
-                                                },
-                                            }}
+                                    <DialogActions>
+                                        <Box
+                                            pr={5}
+                                            pb={5}
+                                            display={'flex'}
+                                            gap={1}
                                         >
-                                            <SaveIcon fontSize={'medium'} />
-                                        </IconButton>
-                                    </>
-                                )}
-                            </Tooltip>
-                        </Box>
-                    </DialogActions>
-                </Box>
-            </Box>
-            {/* Warning popup for when the user wants to confirm the group changes */}
-            <WarningPopup
-                title={t('change_groups')}
-                content={t('cant_be_undone')}
-                buttonName={t('confirm')}
-                open={confirmOpen}
-                handleClose={handleCloseConfirm}
-                doAction={confirmSave}
-            />
+                                            <Tooltip title={t('cancel')}>
+                                                <IconButton
+                                                    // The teacher can cancel the group changes by clicking on the cross icon.
+                                                    onClick={handleCancel}
+                                                    sx={{
+                                                        backgroundColor:
+                                                            'secondary.main',
+                                                        borderRadius: 2,
+                                                    }}
+                                                >
+                                                    <ClearIcon
+                                                        fontSize={'medium'}
+                                                    />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title={t('submit')}>
+                                                {loading ? (
+                                                    <Skeleton
+                                                        variant={'rectangular'}
+                                                        width={40}
+                                                        height={40}
+                                                        sx={{
+                                                            backgroundColor:
+                                                                'primary.main',
+                                                            borderRadius: 2,
+                                                        }}
+                                                    />
+                                                ) : (
+                                                    <>
+                                                        <IconButton
+                                                            // The teacher can save the group changes by clicking on the save icon.type="submit"
+                                                            aria-label={
+                                                                'submit'
+                                                            }
+                                                            sx={{
+                                                                backgroundColor:
+                                                                    'primary.main',
+                                                                borderRadius: 2,
+                                                                color: 'background.default',
+                                                                '&:hover': {
+                                                                    backgroundColor:
+                                                                        'secondary.main',
+                                                                    color: 'text.primary',
+                                                                },
+                                                            }}
+                                                        >
+                                                            <SaveIcon
+                                                                fontSize={
+                                                                    'medium'
+                                                                }
+                                                            />
+                                                        </IconButton>
+                                                    </>
+                                                )}
+                                            </Tooltip>
+                                        </Box>
+                                    </DialogActions>
+                                </Box>
+                            </Box>
+                            {/* Warning popup for when the user wants to confirm the group changes */}
+                            <WarningPopup
+                                title={t('change_groups')}
+                                content={t('cant_be_undone')}
+                                buttonName={t('confirm')}
+                                open={confirmOpen}
+                                handleClose={handleCloseConfirm}
+                                doAction={confirmSave}
+                            />
+                            <WarningPopup
+                                title={t('random') + ' ' + t('groups') + '?'}
+                                content={t('existing_submissions')}
+                                buttonName={t('divide_groups')}
+                                open={randomOpen}
+                                handleClose={() => setRandomOpen(false)}
+                                doAction={randomGroups}
+                            />
+                        </>
+                    ) : (
+                        navigate(
+                            '/course/' +
+                                courseId +
+                                '/assignment/' +
+                                assignmentId +
+                                '/groups/choose'
+                        )
+                    )}
+                </>
+            )}
         </>
     )
 }
diff --git a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
index 9f5d4723..40266ac2 100644
--- a/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
+++ b/frontend/frontend/src/pages/scoresPage/ProjectScoresPage.tsx
@@ -20,6 +20,7 @@ import ErrorPage from '../ErrorPage.tsx'
 import JSZip from 'jszip'
 import Papa from 'papaparse'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
+import { Submission } from '../submissionPage/SubmissionPage.tsx'
 
 const VisuallyHiddenInput = styled('input')({
     clipPath: 'inset(50%)',
@@ -163,13 +164,14 @@ export function ProjectScoresPage() {
 
     const downloadAllSubmissions = () => {
         const zip = new JSZip()
-        const downloadPromises: Promise<void>[] = []
+        const downloadPromises: Promise<Submission>[] = []
+
         groepen
             .filter((groep) => groep.lastSubmission !== undefined)
             .map((groep) => groep.lastSubmission)
             .forEach((submission) => {
                 downloadPromises.push(
-                    new Promise(async (resolve, reject) => {
+                    (async () => {
                         try {
                             // Get the submission details
                             const submissionResponse = await instance.get(
@@ -191,21 +193,21 @@ export function ProjectScoresPage() {
                             const blob = new Blob([fileResponse.data], {
                                 type: fileResponse.headers['content-type'],
                             })
-                            const file = new File([blob], filename, {
+                            newSubmission.bestand = new File([blob], filename, {
                                 type: fileResponse.headers['content-type'],
                             })
-                            newSubmission.bestand = file
                             newSubmission.filename = filename
                             // Add the file to the zip
                             zip.file(filename, fileResponse.data)
-                            resolve(newSubmission)
+                            return newSubmission // Return the submission instead of resolving a promise
                         } catch (err) {
                             console.error(`Error downloading submission:`, err)
-                            reject(err)
+                            throw err // Throw error instead of rejecting a promise
                         }
-                    })
+                    })() // Immediately invoke the async function
                 )
             })
+
         Promise.all(downloadPromises)
             .then(() => {
                 zip.generateAsync({ type: 'blob' })
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 44b10cc1..6b92f9e3 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -1,12 +1,14 @@
 import {
-    Divider,
+    Button,
     Card,
-    SecondaryButton,
+    Divider,
     EvenlySpacedRow,
+    SecondaryButton,
 } from '../../components/CustomComponents.tsx'
 
 import {
     Box,
+    CircularProgress,
     IconButton,
     ListItem,
     ListItemText,
@@ -14,7 +16,6 @@ import {
     Stack,
     TextField,
     Typography,
-    CircularProgress,
 } from '@mui/material'
 import { Header } from '../../components/Header'
 import React, { ChangeEvent, useEffect, useState } from 'react'
@@ -24,13 +25,9 @@ import { t } from 'i18next'
 import 'dayjs/locale/nl'
 import FileUploadButton from '../../components/FileUploadButton'
 import ClearIcon from '@mui/icons-material/Clear'
-
 import Dialog from '@mui/material/Dialog'
-
 import instance from '../../axiosConfig.ts'
-
 import Papa, { ParseResult } from 'papaparse'
-import Button from "@mui/material/Button";
 
 export interface User {
     user: number
@@ -198,10 +195,10 @@ function DialogWindow(
                 <Box padding={2} alignItems={'center'} gap={1}>
                     <Typography> {str + '?'} </Typography>
                     <Box display={'flex'} flexDirection={'row'}>
-                        <Button size={'small'} onClick={handleClose}>
+                        <SecondaryButton size={'small'} onClick={handleClose}>
                             {t('cancel')}
-                        </Button>
-                        <Box padding={'7px'}/>
+                        </SecondaryButton>
+                        <Box padding={'7px'} />
                         <Button size={'small'} onClick={handleRemove}>
                             {t('delete')}
                         </Button>
@@ -745,4 +742,4 @@ export function AddChangeSubjectPage() {
             )}
         </>
     )
-}
\ No newline at end of file
+}

From 6c2829b12876d4114d1f5e20d3c7528fd1c9c177 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Sun, 19 May 2024 23:44:52 +0200
Subject: [PATCH 110/145] kleine visuele fix

---
 .../frontend/src/pages/groupsPage/GroupsPage.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
index 0351dd54..b3b64743 100644
--- a/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
+++ b/frontend/frontend/src/pages/groupsPage/GroupsPage.tsx
@@ -389,14 +389,26 @@ export function GroupsPage() {
                                                     spacing={2}
                                                     alignItems="center"
                                                 >
-                                                    <Grid item>
+                                                    <Grid
+                                                        item
+                                                        display={'flex'}
+                                                        flexDirection={'row'}
+                                                        gap={2}
+                                                    >
                                                         <Typography
                                                             color="text.primary"
                                                             fontWeight={'bold'}
                                                         >
                                                             {t('amount')}{' '}
                                                             {t('members')}/
-                                                            {t('group')}
+                                                            {t('group') + ':'}
+                                                        </Typography>
+                                                        <Typography
+                                                            color={
+                                                                'text.primary'
+                                                            }
+                                                        >
+                                                            {max_group_size}
                                                         </Typography>
                                                     </Grid>
                                                 </Grid>

From 6c4a6c2fc536b270945295139f1df753b78f287a Mon Sep 17 00:00:00 2001
From: arallaer <arnout.allaert@ugent.be>
Date: Mon, 20 May 2024 01:21:57 +0200
Subject: [PATCH 111/145] coverage

---
 .coverage | Bin 53248 -> 53248 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/.coverage b/.coverage
index f99c835eb0ba316e6568877ea0a5b642b5d43849..9be488fc3d0bf9a3d5ae8732647dc1e1cde00372 100644
GIT binary patch
delta 119
zcmV--0Eqv9paX!Q1F!~w0mPFBfGQWJ4wMdo4tEY?4owa=4jK*y4e|}!4aBn%5PS`j
z#f>ZhZj<tjqAN!b76btaA{Krb0CqqBpZdGp0~Qqo0SPV@J_Eo7tSi8}O5pGL-VgxK
Z1CzdvKMSDS=Qnmk0NxP*2eSx|_&`rpDuMt2

delta 118
zcmV-+0Ez#ApaX!Q1F!~w0mYLCfGQWK4wVjq4tNe^4o(g?4jT>!4f74$4aKt&5Pc1k
z#EmQg9+UBnqACOs76btaA{Krb0CqqBpZdGp0~Hkn0SPP>J_Eo7tSi8}O5pGL4FT{x
YlfI5W3m~`8Z@eJ@?+Abcvj~s)K>IZ*l>h($


From 3853c53789c9ae2e3143882f717ebdd90ec34c86 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Mon, 20 May 2024 11:02:55 +0200
Subject: [PATCH 112/145] quick fix assigmentpage listitems height

---
 .../frontend/src/components/SubmissionListItemStudentPage.tsx | 4 ++--
 .../frontend/src/components/SubmissionListItemTeacherPage.tsx | 4 ++--
 .../src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
index 4e0f80cf..0299c89b 100644
--- a/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemStudentPage.tsx
@@ -51,9 +51,9 @@ export function SubmissionListItemStudentPage({
 
     return (
         <>
-            <ListItem key={realId} sx={{ maxHeight: '30px' }} disablePadding>
+            <ListItem key={realId} sx={{ maxHeight: '40px' }} disablePadding>
                 <ListItemButton
-                    sx={{ maxHeight: '30px' }}
+                    sx={{ maxHeight: '40px' }}
                     onClick={handleSubmissionClick}
                 >
                     <EvenlySpacedRow
diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index b9c5ec29..dc15b90b 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -136,9 +136,9 @@ export function SubmissionListItemTeacherPage({
 
     return (
         <>
-            <ListItem id={group_id} sx={{ maxHeight: '30px' }} disablePadding>
+            <ListItem id={group_id} sx={{ maxHeight: '40px' }} disablePadding>
                 <ListItemButton
-                    sx={{ maxHeight: '30px' }}
+                    sx={{ maxHeight: '40px' }}
                     onClick={handleSubmissionClick}
                 >
                     <EvenlySpacedRow
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index af46b7f4..286bca7c 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -76,10 +76,10 @@ export function AssignmentListItemSubjectsPage({
                 id={projectName.replace(/\s/g, '')}
                 key={projectName}
                 disablePadding
-                sx={{ maxHeight: '30px' }}
+                sx={{ maxHeight: '40px' }}
             >
                 <ListItemButton
-                    sx={{ maxHeight: '30px' }}
+                    sx={{ maxHeight: '40px' }}
                     onClick={handleProjectClick}
                 >
                     {isStudent ? (

From 60eb45dd44bd6f9ca20cc491d84ff2cf59ec31e5 Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Mon, 20 May 2024 11:09:20 +0200
Subject: [PATCH 113/145] in addchange subject page, divider is not suppposed
 to be at bottom of list, so to be consistent with other pages

---
 .../src/pages/subjectsPage/AddChangeSubjectPage.tsx      | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 6b92f9e3..c49aad4c 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -78,6 +78,7 @@ function UserList(
                             }
                             return (
                                 <>
+                                    <Divider />
                                     <ListItem>
                                         <EvenlySpacedRow
                                             items={[
@@ -126,7 +127,7 @@ function UserList(
                                             ]}
                                         />
                                     </ListItem>
-                                    <Divider />
+
                                 </>
                             )
                         })}
@@ -650,10 +651,9 @@ export function AddChangeSubjectPage() {
                                                             {t('students')}
                                                         </Typography>
                                                     </Box>
-                                                    <Divider />
                                                     <Box
                                                         sx={{
-                                                            marginTop: -2.5,
+                                                            marginTop: -3.1,
                                                         }}
                                                     >
                                                         {UserList(
@@ -700,10 +700,9 @@ export function AddChangeSubjectPage() {
                                                             {t('teachers')}
                                                         </Typography>
                                                     </Box>
-                                                    <Divider />
                                                     <Box
                                                         sx={{
-                                                            marginTop: -2.5,
+                                                            marginTop: -3.1,
                                                         }}
                                                     >
                                                         {UserList(

From 6a8a78834252aaf682f1937ea8948d38e01d0498 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 11:09:33 +0200
Subject: [PATCH 114/145] routing error gefikst

---
 frontend/frontend/src/components/CopyToClipboard.tsx | 1 +
 frontend/frontend/src/components/CourseCard.tsx      | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/components/CopyToClipboard.tsx b/frontend/frontend/src/components/CopyToClipboard.tsx
index 80c021a1..74cab02f 100644
--- a/frontend/frontend/src/components/CopyToClipboard.tsx
+++ b/frontend/frontend/src/components/CopyToClipboard.tsx
@@ -54,6 +54,7 @@ export const CopyToClipboard = ({ invitationLink }: CopyToClipboardProps) => {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
+                                justifyContent: 'flex-start',
                                 padding: 0,
                                 gap: 1,
                                 '&:hover': {
diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index 1838fada..d98ca157 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -333,10 +333,8 @@ export function CourseCard({
                                                 )
                                                 .map((assignment) => (
                                                     <AssignmentListItem
-                                                        key={
-                                                            assignment.project_id
-                                                        }
-                                                        id={`project${assignment.project_id}`}
+                                                        key={`project${assignment.project_id}`}
+                                                        id={assignment.project_id.toString()}
                                                         courseId={courseId}
                                                         projectName={
                                                             assignment.titel

From be1f2612541b69a4cb843892d7e6abf501550b60 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 11:22:04 +0200
Subject: [PATCH 115/145] routing error gefikst

---
 frontend/frontend/src/components/CourseCard.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index d98ca157..0359ee2c 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -369,10 +369,8 @@ export function CourseCard({
                                                     {assignments.map(
                                                         (assignment) => (
                                                             <AssignmentListItem
-                                                                key={
-                                                                    assignment.project_id
-                                                                }
-                                                                id={`project${assignment.project_id}`}
+                                                                key={`project${assignment.project_id}`}
+                                                                id={assignment.project_id.toString()}
                                                                 courseId={
                                                                     courseId
                                                                 }
@@ -415,10 +413,8 @@ export function CourseCard({
                                                         )
                                                         .map((assignment) => (
                                                             <AssignmentListItem
-                                                                key={
-                                                                    assignment.project_id
-                                                                }
-                                                                id={`project${assignment.project_id}`}
+                                                                key={`project${assignment.project_id}`}
+                                                                id={assignment.project_id.toString()}
                                                                 courseId={
                                                                     courseId
                                                                 }

From 2a027397b58c5db6294bb810f1a8f02829477453 Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Mon, 20 May 2024 11:27:12 +0200
Subject: [PATCH 116/145] fix template ui

---
 .../RestrictionTemplateUI.tsx                 | 165 ++++++++++++------
 1 file changed, 107 insertions(+), 58 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index c1a1eed9..070550be 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,13 +1,13 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import {
     Box,
-    Button,
+    TextField,
     Checkbox,
-    IconButton,
     List,
     ListItem,
     ListItemText,
-    TextField,
+    IconButton,
+    Button,
 } from '@mui/material'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
@@ -17,9 +17,12 @@ import Toolbar from '@mui/material/Toolbar'
 import CloseIcon from '@mui/icons-material/Close'
 import { restriction } from './AddChangeAssignmentPage.tsx'
 
+// Define a type for the parameters
+type ParamValue = string | number | boolean | string[]
+
 const saveRestrictionTemplate = (
     restrictionCode: string,
-    params: { [key: string]: any },
+    params: { [key: string]: ParamValue },
     templateFileName: string
 ) => {
     // This function will save the restriction template with the given parameters.
@@ -103,11 +106,16 @@ export default function RestrictionTemplateUI({
 
     const params = parseParams(restrictionCode)
 
-    const [paramsState, setParamsState] = useState<{ [key: string]: any }>({})
+    // change this paramsState to be an array of the following type of objects:
+    // {name: string, value: string | number | boolean | string[]}
+    // it mus have a [Symbol.iterator] method
+    const [paramsState, setParamsState] = useState<{
+        [key: string]: number | string | boolean | string[]
+    }>({})
 
     // Initialize paramsState with default values
     useState(() => {
-        const initialState: { [key: string]: any } = {}
+        const initialState: { [key: string]: ParamValue } = {}
         params.forEach((param) => {
             initialState[param.variable] = param.value
         })
@@ -126,6 +134,8 @@ export default function RestrictionTemplateUI({
             file: new File([code], templateFileName, { type: 'text/plain' }),
             moet_slagen: false,
         }
+        console.log('code:')
+        console.log(code)
         setRestrictions([...restrictions, newRestriction])
         handleCloseTemplateInterface()
     }
@@ -145,31 +155,58 @@ export default function RestrictionTemplateUI({
     // It will change the row at the given index to the new value.
     const handleChangeRow = (
         variable: string,
-        newValue: any,
+        newValue: string,
         index: number
     ) => {
-        const newArrayValues = [...paramsState[variable]]
-        newArrayValues[index] = newValue
-        setParamsState((prevState) => ({
-            ...prevState,
-            [variable]: newArrayValues,
-        }))
+        const currentValue = paramsState[variable]
+        if (Array.isArray(currentValue)) {
+            const newArrayValues = [...currentValue] // TypeScript now knows currentValue is a string[]
+            newArrayValues[index] = newValue
+            setParamsState((prevState) => ({
+                ...prevState,
+                [variable]: newArrayValues,
+            }))
+        } else {
+            console.error(
+                `Expected an array for variable ${variable}, but got:`,
+                currentValue
+            )
+        }
     }
 
     const handleDeleteRow = (variable: string, index: number) => {
-        const newArrayValues = [...paramsState[variable]]
-        newArrayValues.splice(index, 1)
-        setParamsState((prevState) => ({
-            ...prevState,
-            [variable]: newArrayValues,
-        }))
+        const currentValue = paramsState[variable]
+        if (Array.isArray(currentValue)) {
+            const newArrayValues = [...currentValue] // TypeScript now knows currentValue is a string[]
+            newArrayValues.splice(index, 1)
+            setParamsState((prevState) => ({
+                ...prevState,
+                [variable]: newArrayValues,
+            }))
+        } else {
+            console.error(
+                `Expected an array for variable ${variable}, but got:`,
+                currentValue
+            )
+        }
     }
 
     const handleAddRow = (variable: string) => {
-        setParamsState((prevState) => ({
-            ...prevState,
-            [variable]: [...(prevState[variable] || []), ''], // Initialize with an empty string
-        }))
+        setParamsState((prevState) => {
+            const currentArray = prevState[variable]
+            if (Array.isArray(currentArray)) {
+                return {
+                    ...prevState,
+                    [variable]: [...currentArray, ''], // Initialize with an empty string
+                }
+            } else {
+                console.error(
+                    `Expected an array for variable ${variable}, but got:`,
+                    currentArray
+                )
+                return prevState // Return previous state without modification
+            }
+        })
     }
 
     return (
@@ -255,7 +292,9 @@ export default function RestrictionTemplateUI({
                                     {param.description}
                                 </Typography>
                                 <Checkbox
-                                    checked={paramsState[param.variable]}
+                                    checked={Boolean(
+                                        paramsState[param.variable]
+                                    )}
                                     color="primary"
                                     onChange={(e) =>
                                         handleArrayChange(
@@ -275,38 +314,48 @@ export default function RestrictionTemplateUI({
                                     {param.description}
                                 </Typography>
                                 <List>
-                                    {(paramsState[param.variable] || []).map(
-                                        (item: string, idx: number) => (
-                                            <ListItem key={idx}>
-                                                <ListItemText>
-                                                    <TextField
-                                                        type="text"
-                                                        value={item}
-                                                        onChange={(e) =>
-                                                            handleChangeRow(
-                                                                param.variable,
-                                                                e.target.value,
-                                                                idx
-                                                            )
-                                                        }
-                                                    />
-                                                </ListItemText>
-                                                <IconButton
-                                                    edge="end"
-                                                    aria-label="delete"
-                                                    onClick={() =>
-                                                        handleDeleteRow(
-                                                            param.variable,
-                                                            idx
-                                                        )
-                                                    }
-                                                >
-                                                    <DeleteOutlineIcon />
-                                                </IconButton>
-                                            </ListItem>
+                                    {(() => {
+                                        const paramArray = paramsState[
+                                            param.variable
+                                        ] as string[] | undefined
+                                        return (
+                                            Array.isArray(paramArray) &&
+                                            paramArray.map(
+                                                (item: string, idx: number) => (
+                                                    <ListItem key={idx}>
+                                                        <ListItemText>
+                                                            <TextField
+                                                                type="text"
+                                                                value={item}
+                                                                onChange={(e) =>
+                                                                    handleChangeRow(
+                                                                        param.variable,
+                                                                        e.target
+                                                                            .value,
+                                                                        idx
+                                                                    )
+                                                                }
+                                                            />
+                                                        </ListItemText>
+                                                        <IconButton
+                                                            edge="end"
+                                                            aria-label="delete"
+                                                            onClick={() =>
+                                                                handleDeleteRow(
+                                                                    param.variable,
+                                                                    idx
+                                                                )
+                                                            }
+                                                        >
+                                                            <DeleteOutlineIcon />
+                                                        </IconButton>
+                                                    </ListItem>
+                                                )
+                                            )
                                         )
-                                    )}
+                                    })()}
                                 </List>
+
                                 <Button
                                     variant="outlined"
                                     onClick={() => handleAddRow(param.variable)}
@@ -324,7 +373,7 @@ export default function RestrictionTemplateUI({
 }
 
 // Helper function for parsing a value in either python or bash code.
-function parseValue(value: string): string | number | boolean | any[] {
+function parseValue(value: string): string | number | boolean | string[] {
     if (value.startsWith('"') && value.endsWith('"')) {
         return value.slice(1, -1)
     } else if (value === 'True' || value === 'true') {
@@ -341,14 +390,14 @@ function parseValue(value: string): string | number | boolean | any[] {
         return value
             .slice(1, -1)
             .split(',')
-            .map((item) => parseValue(item.trim())) // in python the values are separated by commas
+            .map((item) => String(parseValue(item.trim()))) // in python the values are separated by commas
     } else if (value.startsWith('(') && value.endsWith(')')) {
         // round brackets for bash lists
         // Bash-style list
         return value
             .slice(1, -1)
             .split(' ')
-            .map((item) => parseValue(item.trim())) // in bash the values are separated by whitespace
+            .map((item) => String(parseValue(item.trim()))) // in bash the values are separated by whitespace
     } else {
         return value
     }

From 475cd91a17c2995eeed3da0371c6b2294d33644a Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 11:34:08 +0200
Subject: [PATCH 117/145] verdwenen code toegevoegd

---
 .../SubmissionListItemTeacherPage.tsx         |  3 +-
 .../pages/assignmentPage/AssignmentPage.tsx   | 96 ++++++++++++++-----
 2 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
index dc15b90b..f3f748f5 100644
--- a/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
+++ b/frontend/frontend/src/components/SubmissionListItemTeacherPage.tsx
@@ -1,9 +1,9 @@
 import {
+    Box,
     ListItem,
     ListItemButton,
     ListItemIcon,
     ListItemText,
-    Box,
 } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import DownloadIcon from '@mui/icons-material/Download'
@@ -140,6 +140,7 @@ export function SubmissionListItemTeacherPage({
                 <ListItemButton
                     sx={{ maxHeight: '40px' }}
                     onClick={handleSubmissionClick}
+                    disabled={!submitted}
                 >
                     <EvenlySpacedRow
                         items={[
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index e3125b39..a5da5ff8 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -26,7 +26,6 @@ import { useNavigate, useParams } from 'react-router-dom'
 import JSZip from 'jszip'
 import { Submission } from '../submissionPage/SubmissionPage.tsx'
 import { Project } from '../scoresPage/ProjectScoresPage.tsx'
-import { GroupAccessComponent } from '../../components/GroupAccessComponent.tsx'
 import dayjs from 'dayjs'
 import DownloadIcon from '@mui/icons-material/Download'
 import WarningPopup from '../../components/WarningPopup.tsx'
@@ -407,18 +406,26 @@ export function AssignmentPage() {
                                                 height={50}
                                             />
                                         ) : (
-                                            <Typography
-                                                variant={'h6'}
-                                                color={'text.primary'}
-                                            >
-                                                {assignment
-                                                    ? dayjs(
-                                                          assignment.deadline
-                                                      ).format(
-                                                          'DD/MM/YYYY HH:mm'
-                                                      )
-                                                    : t('no_deadline')}
-                                            </Typography>
+                                            <>
+                                                {assignment !== undefined &&
+                                                    assignment.deadline !==
+                                                        null && (
+                                                        <Typography
+                                                            variant="h6"
+                                                            color={
+                                                                'text.primary'
+                                                            }
+                                                        >
+                                                            {assignment
+                                                                ? dayjs(
+                                                                      assignment.deadline
+                                                                  ).format(
+                                                                      'DD/MM/YYYY-HH:MM'
+                                                                  )
+                                                                : 'no deadline'}
+                                                        </Typography>
+                                                    )}
+                                            </>
                                         )}
                                     </Box>
                                     {loading ? (
@@ -433,18 +440,57 @@ export function AssignmentPage() {
                                         />
                                     ) : (
                                         <>
-                                            {(assignment?.max_groep_grootte
-                                                ? assignment.max_groep_grootte
-                                                : 1) > 1 && (
-                                                <GroupAccessComponent
-                                                    assignmentid={parseInt(
-                                                        assignmentId
-                                                    )}
-                                                    courseid={parseInt(
-                                                        courseId
-                                                    )}
-                                                />
-                                            )}
+                                            <>
+                                                {assignment?.student_groep ? (
+                                                    <Button
+                                                        sx={{
+                                                            bgcolor:
+                                                                'secondary.main',
+                                                            textTransform:
+                                                                'none',
+                                                        }}
+                                                        onClick={goToGroups}
+                                                    >
+                                                        <Typography color="secondary.contrastText">
+                                                            {t('group')}
+                                                        </Typography>
+                                                    </Button>
+                                                ) : (
+                                                    <Box
+                                                        sx={{
+                                                            position:
+                                                                'absolute',
+                                                            top: 90,
+                                                            right: 50,
+                                                            display: 'flex',
+                                                            justifyContent:
+                                                                'flex-end',
+                                                            zIndex: 1,
+                                                            marginTop: '-40px',
+                                                        }}
+                                                    >
+                                                        {assignment?.max_groep_grootte ===
+                                                        1 ? (
+                                                            <Typography variant="body1">
+                                                                {user.first_name +
+                                                                    ' ' +
+                                                                    user.last_name}
+                                                            </Typography>
+                                                        ) : (
+                                                            <>
+                                                                <StudentPopUp
+                                                                    students={
+                                                                        studentsLoading
+                                                                            ? []
+                                                                            : students
+                                                                    }
+                                                                    text="group_members"
+                                                                />
+                                                            </>
+                                                        )}
+                                                    </Box>
+                                                )}
+                                            </>
                                         </>
                                     )}
                                 </Box>

From 6ac02e8a91385fffa0756c07a49f58bed9688bec Mon Sep 17 00:00:00 2001
From: Mathis De Witte <49711425+mathis2003@users.noreply.github.com>
Date: Mon, 20 May 2024 11:49:50 +0200
Subject: [PATCH 118/145] Update RestrictionTemplateUI.tsx

---
 .../src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 070550be..857cc83f 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import {
     Box,
     TextField,

From 7c1276fa19c16da42fd8a4943aee928229867b6c Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Mon, 20 May 2024 15:48:56 +0200
Subject: [PATCH 119/145] unused import

---
 .../src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 070550be..857cc83f 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import {
     Box,
     TextField,

From f3f6387647ffafc08199cf24aaa0b09cf3904123 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 16:11:09 +0200
Subject: [PATCH 120/145] logo login terug gezet

---
 frontend/frontend/src/pages/loginPage/LoginPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/pages/loginPage/LoginPage.tsx b/frontend/frontend/src/pages/loginPage/LoginPage.tsx
index ff1e209a..28b4cb29 100644
--- a/frontend/frontend/src/pages/loginPage/LoginPage.tsx
+++ b/frontend/frontend/src/pages/loginPage/LoginPage.tsx
@@ -81,7 +81,7 @@ export function LoginPage() {
                         alignSelf={'center'}
                     >
                         <Box
-                            id='logo'
+                            id="logo"
                             component="img"
                             src={t('logo_blue')}
                             alt="logo"
@@ -93,7 +93,7 @@ export function LoginPage() {
                         />
                         <Box
                             component="img"
-                            src={'assets/logo_duif.png'}
+                            src={'/assets/logo_duif.png'}
                             alt="logo_app"
                             sx={{
                                 padding: 0,

From 414d4c341cf4ccc8fec03c809962da942f8cc1fe Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 17:21:14 +0200
Subject: [PATCH 121/145] assignmentpage zou in orde moeten zijn terug, lijn
 per lijn nagekeken met oude commit

---
 .../pages/assignmentPage/AssignmentPage.tsx   | 115 ++++++++----------
 1 file changed, 52 insertions(+), 63 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index a5da5ff8..9a87337e 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -32,6 +32,7 @@ import WarningPopup from '../../components/WarningPopup.tsx'
 import { User } from '../subjectsPage/AddChangeSubjectPage.tsx'
 import StudentPopUp from '../subjectsPage/StudentPopUp.tsx'
 import axios, { AxiosResponse } from 'axios'
+import { GroupAccessComponent } from '../../components/GroupAccessComponent.tsx'
 
 // group interface
 export interface Group {
@@ -440,60 +441,59 @@ export function AssignmentPage() {
                                         />
                                     ) : (
                                         <>
-                                            <>
-                                                {assignment?.student_groep ? (
-                                                    <Button
-                                                        sx={{
-                                                            bgcolor:
-                                                                'secondary.main',
-                                                            textTransform:
-                                                                'none',
-                                                        }}
-                                                        onClick={goToGroups}
-                                                    >
-                                                        <Typography color="secondary.contrastText">
-                                                            {t('group')}
-                                                        </Typography>
-                                                    </Button>
-                                                ) : (
-                                                    <Box
-                                                        sx={{
-                                                            position:
-                                                                'absolute',
-                                                            top: 90,
-                                                            right: 50,
-                                                            display: 'flex',
-                                                            justifyContent:
-                                                                'flex-end',
-                                                            zIndex: 1,
-                                                            marginTop: '-40px',
-                                                        }}
-                                                    >
-                                                        {assignment?.max_groep_grootte ===
-                                                        1 ? (
-                                                            <Typography variant="body1">
-                                                                {user.first_name +
-                                                                    ' ' +
-                                                                    user.last_name}
-                                                            </Typography>
-                                                        ) : (
-                                                            <>
-                                                                <StudentPopUp
-                                                                    students={
-                                                                        studentsLoading
-                                                                            ? []
-                                                                            : students
-                                                                    }
-                                                                    text="group_members"
-                                                                />
-                                                            </>
-                                                        )}
-                                                    </Box>
-                                                )}
-                                            </>
+                                            {(assignment?.max_groep_grootte
+                                                ? assignment.max_groep_grootte
+                                                : 1) > 1 && (
+                                                <GroupAccessComponent
+                                                    assignmentid={parseInt(
+                                                        assignmentId
+                                                    )}
+                                                    courseid={parseInt(
+                                                        courseId
+                                                    )}
+                                                />
+                                            )}
                                         </>
                                     )}
                                 </Box>
+                                {/*extra deadline*/}
+                                {assignment?.extra_deadline && (
+                                    <Box
+                                        display={'flex'}
+                                        flexDirection={'row'}
+                                        alignItems={'center'}
+                                        gap={1}
+                                        pl={2.5}
+                                    >
+                                        <Typography
+                                            variant="h6"
+                                            color="text.primary"
+                                            fontWeight={'bold'}
+                                        >
+                                            Extra Deadline:
+                                        </Typography>
+                                        {loading ? (
+                                            <Skeleton
+                                                variant="text"
+                                                width={180}
+                                                height={50}
+                                            />
+                                        ) : (
+                                            <Typography
+                                                variant="h6"
+                                                color={'text.primary'}
+                                            >
+                                                {assignment
+                                                    ? dayjs(
+                                                          assignment.extra_deadline
+                                                      ).format(
+                                                          'DD/MM/YYYY-HH:MM'
+                                                      )
+                                                    : 'no deadline'}
+                                            </Typography>
+                                        )}
+                                    </Box>
+                                )}
 
                                 {/* Assignment description */}
                                 <Card sx={{ padding: '20px' }}>
@@ -1057,18 +1057,7 @@ export function AssignmentPage() {
                                                                         )}
                                                                         <SubmissionListItemStudentPage
                                                                             realId={submission.indiening_id.toString()}
-                                                                            visualId={(
-                                                                                submission.indiening_id -
-                                                                                Math.min(
-                                                                                    ...submissions.map(
-                                                                                        (
-                                                                                            submission
-                                                                                        ) =>
-                                                                                            submission.indiening_id
-                                                                                    )
-                                                                                ) +
-                                                                                1
-                                                                            ).toString()}
+                                                                            visualId={index.toString()}
                                                                             timestamp={dayjs(
                                                                                 submission.tijdstip
                                                                             ).format(

From 57d451158727d7a5cdea881eb5e255f12ca7bc01 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 17:26:49 +0200
Subject: [PATCH 122/145] index laten beginnen van 1 ipv 0

---
 .../frontend/src/pages/assignmentPage/AssignmentPage.tsx     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 9a87337e..5d13f24f 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -1057,7 +1057,10 @@ export function AssignmentPage() {
                                                                         )}
                                                                         <SubmissionListItemStudentPage
                                                                             realId={submission.indiening_id.toString()}
-                                                                            visualId={index.toString()}
+                                                                            visualId={(
+                                                                                submissions.length -
+                                                                                index
+                                                                            ).toString()}
                                                                             timestamp={dayjs(
                                                                                 submission.tijdstip
                                                                             ).format(

From 20101c0e75e784a3d04566aedbcdc559a7d4c068 Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 18:12:19 +0200
Subject: [PATCH 123/145] tijdsformaat van dayjs gefixt op assignmentpage

---
 .../frontend/src/pages/assignmentPage/AssignmentPage.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index 5d13f24f..fe9fb20f 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -421,7 +421,7 @@ export function AssignmentPage() {
                                                                 ? dayjs(
                                                                       assignment.deadline
                                                                   ).format(
-                                                                      'DD/MM/YYYY-HH:MM'
+                                                                      'DD/MM/YYYY HH:mm'
                                                                   )
                                                                 : 'no deadline'}
                                                         </Typography>
@@ -487,7 +487,7 @@ export function AssignmentPage() {
                                                     ? dayjs(
                                                           assignment.extra_deadline
                                                       ).format(
-                                                          'DD/MM/YYYY-HH:MM'
+                                                          'DD/MM/YYYY HH:mm'
                                                       )
                                                     : 'no deadline'}
                                             </Typography>
@@ -772,7 +772,7 @@ export function AssignmentPage() {
                                                                     ? dayjs(
                                                                           assignment.deadline
                                                                       ).format(
-                                                                          'DD/MM/YYYY-HH:MM'
+                                                                          'DD/MM/YYYY HH:mm'
                                                                       )
                                                                     : 'no deadline'}
                                                             </Typography>
@@ -877,7 +877,7 @@ export function AssignmentPage() {
                                                     ? dayjs(
                                                           assignment.extra_deadline
                                                       ).format(
-                                                          'DD/MM/YYYY-HH:MM'
+                                                          'DD/MM/YYYY HH:mm'
                                                       )
                                                     : 'no deadline'}
                                             </Typography>

From d5aa7ecc77179d96dc8d8e562aa4a80a1df63c3c Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 18:16:05 +0200
Subject: [PATCH 124/145] kleine taalfix GroepsNummer -> Groepnummer

---
 frontend/frontend/src/i18n/nl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index ea6fe94d..cb7a9b09 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -116,7 +116,7 @@ const dutch = {
     noGroup: 'Je lijkt nog geen groep te hebben.',
     chooseGroup: 'Kies een groep voor je indient',
     contactTeacher: 'Gelieve contact op te nemen met je lesgever.',
-    group_number: 'GroepsNummer',
+    group_number: 'Groepnummer',
     open_with_ui: 'Open met UI',
     choose_existing: 'Kies een bestaand script',
     make_new_script: 'Maak nieuw script aan',

From e98c1a70938e7c9e04106d280e0442030239b9a6 Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 18:49:47 +0200
Subject: [PATCH 125/145] 'geen score' op subjectPage ipv 0/20

---
 .../pages/subjectsPage/AssignmentListItemSubjectsPage.tsx   | 4 ++--
 frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx   | 6 ------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 286bca7c..66c2570a 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -33,7 +33,7 @@ interface AssignmentListItemSubjectsPageProps {
     projectName: string
     dueDate: Dayjs
     submissions: number
-    score: Score
+    score: Score | undefined
     maxScore: number
     isStudent: boolean
     archived: boolean
@@ -119,7 +119,7 @@ export function AssignmentListItemSubjectsPage({
                                         />
                                     ) : (
                                         <ListItemText
-                                            primary={`0/${maxScore} (0%)`}
+                                            primary={t('no_score_yet')}
                                         />
                                     )}
                                 </>,
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index 0e7a64e4..caa0953d 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -282,12 +282,6 @@ export function ProjectsView({
                                                     }
                                                     score={
                                                         project.score
-                                                            ? project.score
-                                                            : {
-                                                                  score_id: 0,
-                                                                  score: 0,
-                                                                  indiening: 0,
-                                                              }
                                                     }
                                                     maxScore={Number(
                                                         project.assignment

From b31e8f17436e9196c7deb0dac565f65ee12aca03 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 18:58:21 +0200
Subject: [PATCH 126/145] cancel + alert add change subject

---
 .../subjectsPage/AddChangeSubjectPage.tsx     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index c49aad4c..2d33ca2a 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -127,7 +127,6 @@ function UserList(
                                             ]}
                                         />
                                     </ListItem>
-
                                 </>
                             )
                         })}
@@ -461,6 +460,7 @@ export function AddChangeSubjectPage() {
                 })
                 .catch((err) => {
                     console.log(err)
+                    alert(err.response.data)
                 })
         }
     }
@@ -564,7 +564,7 @@ export function AddChangeSubjectPage() {
                         <>
                             <Stack direction={'column'}>
                                 <Header
-                                    variant={loading ? 'default' : 'not_main'}
+                                    variant={'default'}
                                     title={loading ? '' : title}
                                 />
                                 <Stack
@@ -622,13 +622,27 @@ export function AddChangeSubjectPage() {
                                                 />
                                             )}
                                         </Box>
-                                        <Box padding={'20px'}>
+                                        <Box
+                                            padding={'20px'}
+                                            display={'flex'}
+                                            flexDirection={'row'}
+                                            gap={2}
+                                        >
                                             <SecondaryButton
+                                                /* This is the large save button on the top of the page */
+                                                onClick={() =>
+                                                    navigate(`/course/${vakID}`)
+                                                }
+                                            >
+                                                {t('cancel')}
+                                            </SecondaryButton>
+
+                                            <Button
                                                 /* This is the large save button on the top of the page */
                                                 onClick={handleSave}
                                             >
                                                 {t('save')}
-                                            </SecondaryButton>
+                                            </Button>
                                         </Box>
                                     </Box>
                                     <Stack direction={'row'} gap={10}>

From 2a9f0d263bf97eaedbb60b1870f13f65b6039789 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 19:05:05 +0200
Subject: [PATCH 127/145] kotjes deadlines terug opgeschoond

---
 .../src/components/DeadlineCalendar.tsx       | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index 51c041a8..f5007ba6 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -7,13 +7,13 @@ import {
 import dayjs, { Dayjs } from 'dayjs'
 import {
     Badge,
-    SxProps,
-    Stack,
-    Typography,
     List,
     ListItem,
     ListItemButton,
     ListItemText,
+    Stack,
+    SxProps,
+    Typography,
 } from '@mui/material'
 import { useEffect, useRef, useState } from 'react'
 import AssignmentIcon from '@mui/icons-material/Assignment'
@@ -125,7 +125,14 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
                         <ListItem>
                             <ListItemButton
                                 sx={{
-                                    border: 1,
+                                    border: 0.5,
+                                    borderColor: 'primary.main',
+                                    textAlign: 'center',
+                                    width: '100%',
+                                    borderRadius: 2,
+                                    '&:hover': {
+                                        backgroundColor: 'primary.light',
+                                    },
                                 }}
                                 onClick={() =>
                                     handleProjectClick(
@@ -134,8 +141,14 @@ function DeadlineMenu({ assignments, selectedDay }: DeadlineMenuProps) {
                                     )
                                 }
                             >
-                                <ListItemText primary={assignment.titel} />
-
+                                <ListItemText sx={{ maxWidth: '100%' }}>
+                                    <Typography
+                                        textOverflow={'ellipsis'}
+                                        color={'text.primary'}
+                                    >
+                                        {assignment.titel}
+                                    </Typography>
+                                </ListItemText>
                             </ListItemButton>
                         </ListItem>
                     ))}

From 3fe2e92890b43da55046c40016b279296f4d2c7e Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Mon, 20 May 2024 19:05:43 +0200
Subject: [PATCH 128/145] fix restrictions dialog

---
 .../RestrictionTemplateUI.tsx                 |  2 +-
 .../RestrictionsDialog.tsx                    | 20 ++-----------------
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
index 070550be..857cc83f 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionTemplateUI.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import {
     Box,
     TextField,
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
index 942d6d54..7a719850 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/RestrictionsDialog.tsx
@@ -81,7 +81,6 @@ export default function RestrictionsDialog({
 }: RestrictionsDialogProps) {
     const [openTextEditor, setOpenTextEditor] = useState(false)
     const [openTemplateInterface, setOpenTemplateInterface] = useState(false)
-    const [mustPass, setMustPass] = useState(false)
     const [openTemplateInUI, setOpenTemplateInUI] = useState(false)
     const [textFieldContent, setTextFieldContent] = useState('')
     const [restrictionName, setRestrictionName] = useState('')
@@ -103,7 +102,7 @@ export default function RestrictionsDialog({
                 const newRestriction: restriction = {
                     script: file.name,
                     file: file,
-                    moet_slagen: mustPass,
+                    moet_slagen: false,
                 }
                 newRestrictions.push(newRestriction)
             }
@@ -126,7 +125,7 @@ export default function RestrictionsDialog({
                 restrictionName + restrictionType,
                 { type: 'text/plain' }
             ),
-            moet_slagen: mustPass,
+            moet_slagen: false,
         }
         setRestrictions([...restrictions, newRestriction])
         handleCloseTextEditor()
@@ -239,21 +238,6 @@ export default function RestrictionsDialog({
             >
                 {buttons}
             </Box>
-            <Box
-                paddingTop="5px"
-                display={'flex'}
-                flexDirection={'row'}
-                alignItems={'center'}
-            >
-                <Typography variant={'body2'}>
-                    {t('must_pass') + ':'}
-                </Typography>
-                <Switch
-                    id="mustPassSwitch"
-                    value={mustPass}
-                    onChange={() => setMustPass(!mustPass)}
-                />
-            </Box>
             <Box padding="20px" />
             <Typography variant={'h6'} color={'secondary.contrastText'}>
                 {t('choose_existing') + ':'}

From a88b7fa3e5c00893de7d4ee8a19577c214d8e9d5 Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 19:20:35 +0200
Subject: [PATCH 129/145] groepsleden knop geeft nu geen error meer, maar laat
 weten aan de student dat die nog niet in een groepje zit

---
 .../pages/assignmentPage/AssignmentPage.tsx   | 18 ++++---
 .../src/pages/subjectsPage/StudentPopUp.tsx   | 48 ++++++++++++-------
 .../src/pages/subjectsPage/SubjectsPage.tsx   |  1 +
 3 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index fe9fb20f..a532ef89 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -187,15 +187,18 @@ export function AssignmentPage() {
             const groupResponse = await instance.get(
                 `groepen/?student=${user.user}&project=${assignmentId}`
             )
-            const group: Group = groupResponse.data[0]
 
-            const studentPromises: Promise<AxiosResponse<User>>[] =
-                group.studenten.map((id: number) =>
-                    instance.get('/gebruikers/' + id)
-                )
+            if (groupResponse.data.length > 0) {
+                const group: Group = groupResponse.data[0]
+
+                const studentPromises: Promise<AxiosResponse<User>>[] =
+                    group.studenten.map((id: number) =>
+                        instance.get('/gebruikers/' + id)
+                    )
 
-            const temp_students = await axios.all(studentPromises)
-            setStudents(temp_students.map((res) => res.data))
+                const temp_students = await axios.all(studentPromises)
+                setStudents(temp_students.map((res) => res.data))
+            }
 
             setStudentsLoading(false)
         }
@@ -837,6 +840,7 @@ export function AssignmentPage() {
                                                                             : students
                                                                     }
                                                                     text="group_members"
+                                                                    noGroup={students.length == 0}
                                                                 />
                                                             </>
                                                         )}
diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
index cc728f50..f045e495 100644
--- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
@@ -17,9 +17,10 @@ import { t } from 'i18next'
 interface StudentPopUpProps {
     students: User[]
     text: string
+    noGroup: boolean
 }
 
-export default function StudentPopUp({ students, text }: StudentPopUpProps) {
+export default function StudentPopUp({ students, text, noGroup }: StudentPopUpProps) {
     const [open, setOpen] = React.useState(false)
 
     const handleClose = () => {
@@ -59,22 +60,35 @@ export default function StudentPopUp({ students, text }: StudentPopUpProps) {
                     </IconButton>
                 </DialogTitle>
                 <DialogContent dividers>
-                    {/* List of Students */}
-                    {students.length > 0 ? (
-                        <List>
-                            {students.map((student) => (
-                                <ListItem key={student.user}>
-                                    <ListItemText
-                                        primary={`${student.first_name} ${student.last_name}`}
-                                    />
-                                </ListItem>
-                            ))}
-                        </List>
-                    ) : (
-                        <Typography variant="body1">
-                            {t('loading') + ' ' + t('students') + '...'}
-                        </Typography>
-                    )}
+                    {noGroup ?
+                        <>
+                            <Typography variant="body1">
+                                {t('noGroup')}
+                            </Typography>
+                            <Typography variant="body1">
+                                {t('contactTeacher')}
+                            </Typography>
+                        </>
+                    :
+                        <>
+                            {/* List of Students */}
+                            {students.length > 0 ? (
+                                <List>
+                                    {students.map((student) => (
+                                        <ListItem key={student.user}>
+                                            <ListItemText
+                                                primary={`${student.first_name} ${student.last_name}`}
+                                            />
+                                        </ListItem>
+                                    ))}
+                                </List>
+                            ) : (
+                                <Typography variant="body1">
+                                    {t('loading') + ' ' + t('students') + '...'}
+                                </Typography>
+                            )}
+                        </>
+                    }
                 </DialogContent>
             </Dialog>
         </>
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 83f6e456..86909b4b 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -455,6 +455,7 @@ export function SubjectsPage() {
                                             studentsLoading ? [] : students
                                         }
                                         text="students"
+                                        noGroup={false}
                                     ></StudentPopUp>
                                 </Box>
                             </Stack>

From 6c9d245354dfa1adf53f76ce546ba7c42f1ddc4c Mon Sep 17 00:00:00 2001
From: Mathis De Witte <mathisdw@icloud.com>
Date: Mon, 20 May 2024 19:38:35 +0200
Subject: [PATCH 130/145] headers for restrictions list

---
 .../AddChangeAssignmentPage.tsx                  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 39f49c20..467c0e7d 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -805,6 +805,22 @@ export function AddChangeAssignmentPage() {
                                                 {t('restrictions')}
                                             </Typography>
                                             <Box sx={{ padding: 1 }}>
+                                                <Box
+                                                    display="flex"
+                                                    flexDirection="row"
+                                                    justifyContent="space-between"
+                                                    sx={{ padding: 1 }}
+                                                >
+                                                    <Typography variant="body1">
+                                                        {t('name')}
+                                                    </Typography>
+                                                    <Typography variant="body1">
+                                                        {t('must_pass')}
+                                                    </Typography>
+                                                    <Typography variant="body1">
+                                                        {t('remove')}
+                                                    </Typography>
+                                                </Box>
                                                 {/*This list will render the restrictions that are added to the assignment.*/}
                                                 <List
                                                     sx={{

From 7ba0357f1383333b1b63e0b01e5e167cfc02328a Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 19:51:54 +0200
Subject: [PATCH 131/145] opdracht icons worden nu wel geupdate op verandering
 van jaar in kalender

---
 frontend/frontend/src/components/DeadlineCalendar.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/frontend/src/components/DeadlineCalendar.tsx b/frontend/frontend/src/components/DeadlineCalendar.tsx
index f5007ba6..9835c497 100644
--- a/frontend/frontend/src/components/DeadlineCalendar.tsx
+++ b/frontend/frontend/src/components/DeadlineCalendar.tsx
@@ -215,6 +215,12 @@ export function DeadlineCalendar({
         fetchHighlightedDays(date)
     }
 
+    const handleYearChange = (date: Dayjs) => {
+        setIsLoading(true)
+        setHighlightedDays([])
+        fetchHighlightedDays(date)
+    }
+
     return (
         <>
             <Stack direction={'column'}>
@@ -224,6 +230,7 @@ export function DeadlineCalendar({
                     value={value}
                     onChange={(newValue) => setValue(newValue)}
                     onMonthChange={(newValue) => handleMonthChange(newValue)}
+                    onYearChange={(newValue) => handleYearChange(newValue)}
                     renderLoading={() => <DayCalendarSkeleton />}
                     loading={isLoading}
                     sx={dateStyle}

From 22e6eb23d7d0b8f32e13a356d9d04313c083c13e Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 19:55:46 +0200
Subject: [PATCH 132/145] status op mainpage in orde gebracht

---
 .../frontend/src/components/CourseCard.tsx    | 61 ++++++++++++++++---
 .../src/pages/mainPage/ArchivedView.tsx       |  3 +
 .../src/pages/mainPage/CoursesView.tsx        |  3 +
 .../frontend/src/pages/mainPage/MainPage.tsx  |  2 +
 4 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index 0359ee2c..75d9bde7 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -19,6 +19,9 @@ import { Course, project } from '../pages/mainPage/MainPage.tsx'
 import dayjs from 'dayjs'
 
 import { CourseCardSkeleton } from './CourseCardSkeleton.tsx'
+import { Submission } from '../pages/submissionPage/SubmissionPage.tsx'
+import { Group } from '../pages/groupsPage/GroupsPage.tsx'
+import axios from 'axios'
 /*
  * CourseCard component displays a card with course information and a list of assignments
  * @param courseId: string, the id of the course
@@ -29,6 +32,7 @@ import { CourseCardSkeleton } from './CourseCardSkeleton.tsx'
 //TODO: fix archived with state so that the card moves to ArchivedView when archived
 
 interface CourseCardProps {
+    userid: number
     courseId: string
     archived: boolean
     isStudent: boolean
@@ -38,6 +42,7 @@ interface CourseCardProps {
 }
 
 export function CourseCard({
+    userid,
     courseId,
     archived,
     isStudent,
@@ -54,6 +59,9 @@ export function CourseCard({
         gearchiveerd: false,
     })
     const [assignments, setAssignments] = useState<project[]>([])
+    const [groupsWithSubmissions, setGroupsWithSubmissions] = useState<Group[]>(
+        []
+    )
     const [teachers, setTeachers] = useState<
         { first_name: string; last_name: string }[]
     >([])
@@ -77,6 +85,32 @@ export function CourseCard({
                 setCourse(courseResponse.data)
                 setAssignments(assignmentsResponse.data)
 
+                //fetch submissions as well if user is student
+                if (isStudent) {
+                    const groups: Group[] = await instance
+                        .get(`/groepen/?student=${userid}`)
+                        .then((response) => response.data)
+                    const submissionPromises = groups.map(async (group) => {
+                        const response = await instance.get<Submission>(
+                            `/indieningen/?project=${group.project}`
+                        )
+                        return response.data
+                    })
+                    const submissions = await axios.all(submissionPromises)
+
+                    console.log(groups)
+                    const validGroups = groups.filter((group) =>
+                        submissions
+                            .flat(Infinity)
+                            .some(
+                                (submission) =>
+                                    submission.groep === group.groep_id
+                            )
+                    )
+
+                    setGroupsWithSubmissions(validGroups)
+                }
+
                 if (courseResponse.data && courseResponse.data.lesgevers) {
                     const lesgevers = []
                     for (const teacherId of courseResponse.data.lesgevers) {
@@ -346,10 +380,11 @@ export function CourseCard({
                                                                 'DD/MM/YYYY HH:mm'
                                                             ) || undefined
                                                         }
-                                                        status={
-                                                            assignment.project_id ===
-                                                            1
-                                                        } //TODO dit moet nog aangepast worden
+                                                        status={groupsWithSubmissions.some(
+                                                            (group) =>
+                                                                group.project ===
+                                                                assignment.project_id
+                                                        )}
                                                         isStudent={isStudent}
                                                     />
                                                 ))}
@@ -386,8 +421,13 @@ export function CourseCard({
                                                                     undefined
                                                                 }
                                                                 status={
-                                                                    assignment.project_id ===
-                                                                    1
+                                                                    groupsWithSubmissions.some(
+                                                                        (
+                                                                            group
+                                                                        ) =>
+                                                                            group.project ===
+                                                                            assignment.project_id
+                                                                    )
                                                                     //TODO: status has to check if there is already a submission
                                                                 }
                                                                 isStudent={
@@ -429,10 +469,11 @@ export function CourseCard({
                                                                     ) ||
                                                                     undefined
                                                                 }
-                                                                status={
-                                                                    assignment.project_id ===
-                                                                    1
-                                                                }
+                                                                status={groupsWithSubmissions.some(
+                                                                    (group) =>
+                                                                        group.project ===
+                                                                        assignment.project_id
+                                                                )}
                                                                 isStudent={
                                                                     isStudent
                                                                 }
diff --git a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
index 616165b6..5997915a 100644
--- a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
+++ b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
@@ -3,6 +3,7 @@ import { CourseCard } from '../../components/CourseCard.tsx'
 import { Course } from './MainPage.tsx'
 
 interface CourseCardProps {
+    userid: number
     isStudent: boolean
     archivedCourses: Course[]
     pinnedCourses: number[]
@@ -10,6 +11,7 @@ interface CourseCardProps {
 }
 
 export function ArchivedView({
+    userid,
     isStudent,
     archivedCourses,
     pinnedCourses,
@@ -40,6 +42,7 @@ export function ArchivedView({
                         {archivedCourses.map((course) => {
                             return (
                                 <CourseCard
+                                    userid={userid}
                                     courseId={course.vak_id.toString()}
                                     archived={true}
                                     isStudent={isStudent}
diff --git a/frontend/frontend/src/pages/mainPage/CoursesView.tsx b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
index 5660a1cf..ce262aca 100644
--- a/frontend/frontend/src/pages/mainPage/CoursesView.tsx
+++ b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom'
 import { Course } from './MainPage.tsx'
 
 interface CourseCardProps {
+    userid: number
     isStudent: boolean
     activecourses: Course[]
     pinnedCourses: number[]
@@ -13,6 +14,7 @@ interface CourseCardProps {
 }
 
 export function CoursesView({
+    userid,
     isStudent,
     activecourses,
     pinnedCourses,
@@ -46,6 +48,7 @@ export function CoursesView({
                         A CourseCard displays brief information about the course such as the title, deadlines, ...*/}
                         {activecourses.map((course: Course) => (
                             <CourseCard
+                                userid={userid}
                                 key={course.naam}
                                 courseId={course.vak_id.toString()}
                                 archived={false}
diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx
index b02a936f..6f99df8e 100644
--- a/frontend/frontend/src/pages/mainPage/MainPage.tsx
+++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx
@@ -228,6 +228,7 @@ export default function MainPage() {
                                   ]
                                 : [
                                       <CoursesView
+                                          userid={user}
                                           isStudent={role == 'student'}
                                           activecourses={courses
                                               .filter(
@@ -273,6 +274,7 @@ export default function MainPage() {
                                           pinCourse={pinCourse}
                                       />,
                                       <ArchivedView
+                                          userid={user}
                                           isStudent={role == 'student'}
                                           archivedCourses={courses
                                               .filter(

From 87b2811c6af6e08df45782e0d7b2e6aab3c1bbd4 Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Mon, 20 May 2024 20:10:00 +0200
Subject: [PATCH 133/145] studentPopUp fixed

---
 frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 0654ade6..a2a7cb76 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -298,6 +298,7 @@ export function SubmissionPage() {
                             <StudentPopUp
                                 students={studentsLoading ? [] : students}
                                 text="group_members"
+                                noGroup={false}
                             />
                         )}
                     </Box>

From bea5be1fe57c761dc51c0fc400954ca791589b31 Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 20:24:08 +0200
Subject: [PATCH 134/145] pin icon verschijnt rechtsboven

---
 frontend/frontend/src/components/CourseCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index 75d9bde7..fe65304f 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -232,10 +232,6 @@ export function CourseCard({
                                 </Box>
                                 {/* Number of students enrolled */}
                                 <Box>
-                                    <Typography variant={'subtitle1'}>
-                                        {t('students') + ': '}
-                                        {course.studenten.length || 0}
-                                    </Typography>
                                     <Box
                                         display={'flex'}
                                         flexDirection={'column'}
@@ -261,6 +257,10 @@ export function CourseCard({
                                             )}
                                         </IconButton>
                                     </Box>
+                                    <Typography variant={'subtitle1'}>
+                                        {t('students') + ': '}
+                                        {course.studenten.length || 0}
+                                    </Typography>
                                 </Box>
                             </Box>
                         </CardActionArea>

From afd8c575a65cffc6b947ec2e12d247b3bb129a02 Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 20:53:37 +0200
Subject: [PATCH 135/145] 'geen deadline' word nu overal correct getoond

---
 .../frontend/src/components/CourseCard.tsx    | 25 ++++---
 .../pages/assignmentPage/AssignmentPage.tsx   | 68 ++++++++-----------
 .../AssignmentListItemSubjectsPage.tsx        |  2 +-
 .../src/pages/subjectsPage/ProjectsView.tsx   | 12 ++--
 4 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index fe65304f..52af7594 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -374,11 +374,13 @@ export function CourseCard({
                                                             assignment.titel
                                                         }
                                                         dueDate={
-                                                            dayjs(
-                                                                assignment.deadline
-                                                            ).format(
-                                                                'DD/MM/YYYY HH:mm'
-                                                            ) || undefined
+                                                            assignment.deadline
+                                                                ? dayjs(
+                                                                    assignment.deadline
+                                                                  ).format(
+                                                                    'DD/MM/YYYY HH:mm'
+                                                                  )
+                                                                : undefined
                                                         }
                                                         status={groupsWithSubmissions.some(
                                                             (group) =>
@@ -413,12 +415,13 @@ export function CourseCard({
                                                                     assignment.titel
                                                                 }
                                                                 dueDate={
-                                                                    dayjs(
-                                                                        assignment.deadline
-                                                                    ).format(
-                                                                        'DD/MM/YYYY HH:mm'
-                                                                    ) ||
-                                                                    undefined
+                                                                    assignment.deadline
+                                                                        ? dayjs(
+                                                                            assignment.deadline
+                                                                          ).format(
+                                                                            'DD/MM/YYYY HH:mm'
+                                                                          )
+                                                                        : undefined
                                                                 }
                                                                 status={
                                                                     groupsWithSubmissions.some(
diff --git a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
index a532ef89..ffa4f0cd 100644
--- a/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
+++ b/frontend/frontend/src/pages/assignmentPage/AssignmentPage.tsx
@@ -410,26 +410,20 @@ export function AssignmentPage() {
                                                 height={50}
                                             />
                                         ) : (
-                                            <>
-                                                {assignment !== undefined &&
-                                                    assignment.deadline !==
-                                                        null && (
-                                                        <Typography
-                                                            variant="h6"
-                                                            color={
-                                                                'text.primary'
-                                                            }
-                                                        >
-                                                            {assignment
-                                                                ? dayjs(
-                                                                      assignment.deadline
-                                                                  ).format(
-                                                                      'DD/MM/YYYY HH:mm'
-                                                                  )
-                                                                : 'no deadline'}
-                                                        </Typography>
-                                                    )}
-                                            </>
+                                            <Typography
+                                                variant="h6"
+                                                color={
+                                                    'text.primary'
+                                                }
+                                            >
+                                                {assignment && assignment.deadline
+                                                    ? dayjs(
+                                                            assignment.deadline
+                                                        ).format(
+                                                            'DD/MM/YYYY HH:mm'
+                                                        )
+                                                    : t('no_deadline')}
+                                            </Typography>
                                         )}
                                     </Box>
                                     {loading ? (
@@ -761,26 +755,20 @@ export function AssignmentPage() {
                                                     height={50}
                                                 />
                                             ) : (
-                                                <>
-                                                    {assignment !== undefined &&
-                                                        assignment.deadline !==
-                                                            null && (
-                                                            <Typography
-                                                                variant="h6"
-                                                                color={
-                                                                    'text.primary'
-                                                                }
-                                                            >
-                                                                {assignment
-                                                                    ? dayjs(
-                                                                          assignment.deadline
-                                                                      ).format(
-                                                                          'DD/MM/YYYY HH:mm'
-                                                                      )
-                                                                    : 'no deadline'}
-                                                            </Typography>
-                                                        )}
-                                                </>
+                                                <Typography
+                                                    variant="h6"
+                                                    color={
+                                                        'text.primary'
+                                                    }
+                                                >
+                                                    {assignment && assignment.deadline
+                                                        ? dayjs(
+                                                                assignment.deadline
+                                                            ).format(
+                                                                'DD/MM/YYYY HH:mm'
+                                                            )
+                                                        : t('no_deadline')}
+                                                </Typography>
                                             )}
                                         </Box>
                                         <Box style={{ flexGrow: 1 }} />
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 66c2570a..11fd7e66 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -31,7 +31,7 @@ import { EvenlySpacedRow } from '../../components/CustomComponents.tsx'
 
 interface AssignmentListItemSubjectsPageProps {
     projectName: string
-    dueDate: Dayjs
+    dueDate: Dayjs | undefined
     submissions: number
     score: Score | undefined
     maxScore: number
diff --git a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
index caa0953d..c40f2be5 100644
--- a/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/ProjectsView.tsx
@@ -271,10 +271,14 @@ export function ProjectsView({
                                                     projectName={
                                                         project.assignment.titel
                                                     }
-                                                    dueDate={dayjs(
-                                                        project.assignment
-                                                            .deadline
-                                                    )}
+                                                    dueDate={
+                                                        project.assignment.deadline
+                                                            ? dayjs(
+                                                              project.assignment
+                                                                .deadline
+                                                              )
+                                                            : undefined
+                                                    }
                                                     submissions={
                                                         project.submissions
                                                             ? project.submissions

From 423ba47ea826f1fe5398a9c4e47eab9cdabb79ad Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 21:05:06 +0200
Subject: [PATCH 136/145] verwijderen restricties mogelijk + toevoegknop
 verplaatst

---
 .../AddChangeAssignmentPage.tsx               | 76 ++++++++++++-------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 467c0e7d..65eef916 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -95,6 +95,7 @@ export function AddChangeAssignmentPage() {
     const [description, setDescription] = useState('')
     const [dueDate, setDueDate] = useState<Dayjs | null>(null)
     const [extraDueDate, setExtraDueDate] = useState<Dayjs | null>(null)
+    const [oldRestrictions, setOldRestrictions] = useState<restriction[]>([])
     const [restrictions, setRestrictions] = useState<restriction[]>([])
     const [visible, setVisible] = useState(false)
     const [assignmentFile, setAssignmentFile] = useState<File>()
@@ -232,6 +233,7 @@ export function AddChangeAssignmentPage() {
                                 console.error(error)
                             })
                     }
+                    setOldRestrictions(restrictions)
                     setRestrictions(restrictions)
                 })
                 .catch((error) => {
@@ -332,6 +334,19 @@ export function AddChangeAssignmentPage() {
             },
         }
 
+        //delete removed restrictions
+        oldRestrictions.forEach((oldRestriction) => {
+            if (!restrictions.includes(oldRestriction)) {
+                instance
+                    .delete(
+                        '/restricties/' + oldRestriction.restrictie_id + '/'
+                    )
+                    .catch((error) => {
+                        console.error(error)
+                    })
+            }
+        })
+
         restrictions.forEach((restriction) => {
             const formData = new FormData()
             formData.append('project', projectId)
@@ -732,8 +747,8 @@ export function AddChangeAssignmentPage() {
                                     <Card aria-label={'description'}>
                                         <Box
                                             padding={2}
-                                            maxHeight={'20svh'}
-                                            minHeight={'20svh'}
+                                            maxHeight={'18svh'}
+                                            minHeight={'18svh'}
                                         >
                                             <Typography
                                                 variant={'h5'}
@@ -776,7 +791,7 @@ export function AddChangeAssignmentPage() {
                                                     }
                                                     sx={{
                                                         overflowY: 'auto',
-                                                        maxHeight: '25svh',
+                                                        maxHeight: '23svh',
                                                     }}
                                                 />
                                             )}
@@ -788,6 +803,8 @@ export function AddChangeAssignmentPage() {
                                         marginTop={3}
                                         display={'flex'}
                                         flexDirection={'row'}
+                                        alignItems={'flex-end'}
+                                        gap={1}
                                     >
                                         <Card
                                             sx={{
@@ -864,34 +881,35 @@ export function AddChangeAssignmentPage() {
                                                     )}
                                                 </List>
                                             </Box>
-                                            <Box
-                                                width={'100%'}
-                                                display={'flex'}
-                                                justifyContent={'flex-end'}
+                                        </Card>
+                                        <Box
+                                            height={'fit-content'}
+                                            width={'fit-content'}
+                                            display={'flex'}
+                                            flexDirection={'column'}
+                                            justifyContent={'flex-end'}
+                                            alignItems={'flex-end'}
+                                        >
+                                            <Tooltip
+                                                title={t('add_restriction')}
                                             >
-                                                <Tooltip
-                                                    title={t('add_restriction')}
-                                                >
-                                                    <AddRestrictionButton
-                                                        // When this button is clicked, a pop up will show.
-                                                        // This popup will allow you to choose to make a restriction yourself,
-                                                        // create one starting from a template,
-                                                        // or choose a file from the system.
-                                                        restrictions={
-                                                            restrictions
-                                                        }
-                                                        setRestrictions={(
+                                                <AddRestrictionButton
+                                                    // When this button is clicked, a pop up will show.
+                                                    // This popup will allow you to choose to make a restriction yourself,
+                                                    // create one starting from a template,
+                                                    // or choose a file from the system.
+                                                    restrictions={restrictions}
+                                                    setRestrictions={(
+                                                        newRestrictions
+                                                    ) =>
+                                                        setRestrictions(
                                                             newRestrictions
-                                                        ) =>
-                                                            setRestrictions(
-                                                                newRestrictions
-                                                            )
-                                                        }
-                                                        userid={user.user}
-                                                    ></AddRestrictionButton>
-                                                </Tooltip>
-                                            </Box>
-                                        </Card>
+                                                        )
+                                                    }
+                                                    userid={user.user}
+                                                ></AddRestrictionButton>
+                                            </Tooltip>
+                                        </Box>
                                     </Box>
                                     {/* Main actions section */}
                                     <Box

From 943f6e389976bc8cadc4af610a489a56a35d73df Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 21:33:24 +0200
Subject: [PATCH 137/145] patch fix

---
 .../addChangeAssignmentPage/AddChangeAssignmentPage.tsx    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 65eef916..bc619a6d 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -350,9 +350,7 @@ export function AddChangeAssignmentPage() {
         restrictions.forEach((restriction) => {
             const formData = new FormData()
             formData.append('project', projectId)
-            if (restriction.file !== undefined) {
-                formData.append('script', restriction.file)
-            }
+
             formData.append('moet_slagen', restriction.moet_slagen.toString())
             if (restriction.restrictie_id !== undefined) {
                 formData.append(
@@ -369,6 +367,9 @@ export function AddChangeAssignmentPage() {
                         console.error(error)
                     })
             } else {
+                if (restriction.file !== undefined) {
+                    formData.append('script', restriction.file)
+                }
                 instance
                     .post('/restricties/', formData, config)
                     .catch((error) => {

From 259e4ec9c99dc532d1781805e16c8dce5374a7c9 Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 21:52:46 +0200
Subject: [PATCH 138/145] voeg jezelf toe bij nieuw vak, geen spookvakken meer

---
 frontend/frontend/src/components/Header.tsx            |  2 +-
 .../src/pages/subjectsPage/AddChangeSubjectPage.tsx    | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/frontend/src/components/Header.tsx b/frontend/frontend/src/components/Header.tsx
index 0a21c2b3..f8a83cd3 100644
--- a/frontend/frontend/src/components/Header.tsx
+++ b/frontend/frontend/src/components/Header.tsx
@@ -147,7 +147,7 @@ export const Header = ({ variant, title }: Props) => {
                         >
                             {variant === 'main' && (
                                 <Box
-                                    id='logo'
+                                    id="logo"
                                     component="img"
                                     src={'assets/logo_duif_top_wit.png'}
                                     alt="logo_app"
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 2d33ca2a..b070d9c0 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -79,7 +79,12 @@ function UserList(
                             return (
                                 <>
                                     <Divider />
-                                    <ListItem>
+                                    <ListItem
+                                        disabled={
+                                            users.length == 1 &&
+                                            users[0].is_lesgever
+                                        }
+                                    >
                                         <EvenlySpacedRow
                                             items={[
                                                 <ListItemText
@@ -469,6 +474,9 @@ export function AddChangeSubjectPage() {
         async function fetchUser() {
             setUserLoading(true)
             const userResponse = await instance.get('/gebruikers/me/')
+            if (vakID == undefined) {
+                setTeachers([userResponse.data])
+            }
             setUser(userResponse.data)
             setUserLoading(false)
         }

From f5727c674ea0fe2b89da629c12313acfaedb033a Mon Sep 17 00:00:00 2001
From: elias <Elias.Meynckens@UGent.be>
Date: Mon, 20 May 2024 21:59:20 +0200
Subject: [PATCH 139/145] cleanup restrictions box in addchangeAssigmentPage

---
 .../src/components/RestrictionCard.tsx        | 17 ++---
 .../AddChangeAssignmentPage.tsx               | 74 ++++++++++---------
 2 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/frontend/frontend/src/components/RestrictionCard.tsx b/frontend/frontend/src/components/RestrictionCard.tsx
index cdfa256b..75ad36ee 100644
--- a/frontend/frontend/src/components/RestrictionCard.tsx
+++ b/frontend/frontend/src/components/RestrictionCard.tsx
@@ -2,6 +2,7 @@ import { restriction } from '../pages/addChangeAssignmentPage/AddChangeAssignmen
 import { Box, IconButton, Switch, Typography } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import React from 'react'
+import {EvenlySpacedRow} from "./CustomComponents.tsx";
 
 interface RestrictionCardProps {
     restriction: restriction
@@ -28,26 +29,20 @@ export function RestrictionCard({
 
     return (
         <>
-            <Box
-                display={'flex'}
-                flexDirection={'row'}
-                width={'100%'}
-                justifyContent={'space-between'}
-            >
+            <EvenlySpacedRow items={[
                 <Typography id="script" variant={'body2'}>
                     {restriction.script.replace(/^.*[\\/]/, '')}
-                </Typography>
+                </Typography>,
                 <Switch
                     id="mustPassSwitch"
                     value={mustPass}
                     checked={mustPass}
                     onChange={() => handleMustPassChange()}
-                />
-
+                />,
                 <IconButton id="closeButton" onClick={handleRemove}>
                     <CloseIcon />
-                </IconButton>
-            </Box>
+                </IconButton>]}
+            />
         </>
     )
 }
diff --git a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
index 65eef916..ac17ca1a 100644
--- a/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
+++ b/frontend/frontend/src/pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx
@@ -1,4 +1,4 @@
-import { Card } from '../../components/CustomComponents.tsx'
+import {Card, Divider, EvenlySpacedRow} from '../../components/CustomComponents.tsx'
 import {
     Box,
     CircularProgress,
@@ -538,7 +538,7 @@ export function AddChangeAssignmentPage() {
                                             ) : (
                                                 <TextField
                                                     type="text"
-                                                    placeholder={'Title'}
+                                                    placeholder={t('name')}
                                                     error={
                                                         assignmentErrors.title
                                                     }
@@ -808,37 +808,40 @@ export function AddChangeAssignmentPage() {
                                     >
                                         <Card
                                             sx={{
-                                                padding: 1,
                                                 backgroundColor:
                                                     'background.default',
                                                 width: '70%',
                                                 height: '28svh',
                                             }}
                                         >
+                                            <Box
+                                                sx={{
+                                                    backgroundColor: 'secondary.main',
+                                                    height: 48,
+                                                    padding: 1,
+                                                }}
+                                            >
                                             <Typography
                                                 variant={'h5'}
                                                 fontWeight={'bold'}
                                             >
                                                 {t('restrictions')}
                                             </Typography>
-                                            <Box sx={{ padding: 1 }}>
-                                                <Box
-                                                    display="flex"
-                                                    flexDirection="row"
-                                                    justifyContent="space-between"
-                                                    sx={{ padding: 1 }}
-                                                >
-                                                    <Typography variant="body1">
+                                            <EvenlySpacedRow items={[
+                                                    <Typography variant="body1" fontWeight={'bold'}>
                                                         {t('name')}
-                                                    </Typography>
-                                                    <Typography variant="body1">
+                                                    </Typography>,
+                                                    <Typography variant="body1" fontWeight={'bold'}>
                                                         {t('must_pass')}
-                                                    </Typography>
-                                                    <Typography variant="body1">
+                                                    </Typography>,
+                                                    <Typography variant="body1" fontWeight={'bold'}>
                                                         {t('remove')}
-                                                    </Typography>
-                                                </Box>
-                                                {/*This list will render the restrictions that are added to the assignment.*/}
+                                                    </Typography>]}
+                                            />
+                                            </Box>
+                                            <Divider/>
+                                            {/*This list will render the restrictions that are added to the assignment.*/}
+                                            <Box sx={{marginTop: -1.1}}>
                                                 <List
                                                     sx={{
                                                         maxHeight: '18vh',
@@ -857,23 +860,26 @@ export function AddChangeAssignmentPage() {
                                                                     index
                                                                 ) => {
                                                                     return (
-                                                                        <ListItem
-                                                                            key={
-                                                                                index
-                                                                            }
-                                                                        >
-                                                                            <RestrictionCard
-                                                                                restriction={
-                                                                                    restriction
-                                                                                }
-                                                                                restrictions={
-                                                                                    restrictions
-                                                                                }
-                                                                                setRestrictions={
-                                                                                    setRestrictions
+                                                                        <>
+                                                                            <Divider/>
+                                                                            <ListItem sx={{ maxHeight: '45px'}}
+                                                                                key={
+                                                                                    index
                                                                                 }
-                                                                            />
-                                                                        </ListItem>
+                                                                            >
+                                                                                <RestrictionCard
+                                                                                    restriction={
+                                                                                        restriction
+                                                                                    }
+                                                                                    restrictions={
+                                                                                        restrictions
+                                                                                    }
+                                                                                    setRestrictions={
+                                                                                        setRestrictions
+                                                                                    }
+                                                                                />
+                                                                            </ListItem>
+                                                                        </>
                                                                     )
                                                                 }
                                                             )}

From 68dc6dd50374ef8b089f368bc8354a9d18812b3e Mon Sep 17 00:00:00 2001
From: Alexandre Paice <alexandre.paice@ugent.be>
Date: Mon, 20 May 2024 22:04:10 +0200
Subject: [PATCH 140/145] vakken renderen op jaartal

---
 .../frontend/src/components/CourseCard.tsx    |  1 +
 .../frontend/src/pages/mainPage/MainPage.tsx  | 29 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/frontend/src/components/CourseCard.tsx b/frontend/frontend/src/components/CourseCard.tsx
index fe65304f..e8ab1a07 100644
--- a/frontend/frontend/src/components/CourseCard.tsx
+++ b/frontend/frontend/src/components/CourseCard.tsx
@@ -54,6 +54,7 @@ export function CourseCard({
     const [course, setCourse] = useState<Course>({
         vak_id: 0,
         naam: '',
+        jaartal: 0,
         studenten: [],
         lesgevers: [],
         gearchiveerd: false,
diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx
index 6f99df8e..961fab27 100644
--- a/frontend/frontend/src/pages/mainPage/MainPage.tsx
+++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx
@@ -1,6 +1,6 @@
 import { Header } from '../../components/Header.tsx'
 import { Button } from '../../components/CustomComponents.tsx'
-import { Box, Stack } from '@mui/material'
+import { Box, Stack, MenuItem, Select } from '@mui/material'
 import TabSwitcher from '../../components/TabSwitcher.tsx'
 import { ArchivedView } from './ArchivedView.tsx'
 import { CoursesView } from './CoursesView.tsx'
@@ -17,6 +17,7 @@ import WarningPopup from '../../components/WarningPopup.tsx'
 export interface Course {
     vak_id: number
     naam: string
+    jaartal: number
     studenten: number[]
     lesgevers: number[]
     gearchiveerd: boolean
@@ -50,15 +51,13 @@ export default function MainPage() {
     const [courseOrder, setCourseOrder] = useState<number[]>([])
     const [deadlines, setDeadlines] = useState<Dayjs[]>([])
     const [loading, setLoading] = useState<boolean>(true)
+    const [selectedYear, setSelectedYear] = useState<number>(dayjs().year())
 
     //navigator for routing
     const [assignments, setAssignments] = useState<project[]>([])
     const navigator = useNavigate()
 
     useEffect(() => {
-        console.log('requesting api')
-        //set loading to true every time the data is requested
-
         // Get the courses, their projects, and their respective deadlines + the role of the user
         async function fetchData() {
             //set loading to true every time the data is requested
@@ -233,7 +232,7 @@ export default function MainPage() {
                                           activecourses={courses
                                               .filter(
                                                   (course) =>
-                                                      !course.gearchiveerd
+                                                      !course.gearchiveerd && course.jaartal === selectedYear
                                               )
                                               .sort((a: Course, b: Course) => {
                                                   if (
@@ -321,7 +320,25 @@ export default function MainPage() {
                                   ]
                         }
                     />
-
+                    <Box
+                    display={'flex'}
+                    justifyContent={'center'}
+                    alignItems={'center'}
+                    mb={2}
+                >
+                    <Select
+                        value={selectedYear}
+                        onChange={(e) => setSelectedYear(e.target.value as number)}
+                        label="Select Academic Year"
+                        sx={{ minWidth: 150 }}
+                    >
+                        {[2022, 2023, 2024, 2025].map((year) => (
+                            <MenuItem key={year} value={year}>
+                                {year}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                    </Box>
                     {/* Add a calendar to the right of the mainpage. */}
                     <Box
                         aria-label={'calendarView'}

From 9cb42df6a0c1e29a0e87f235f63824ef8e8c02aa Mon Sep 17 00:00:00 2001
From: Gus Vanpoucke <159711661+gusvanpoucke@users.noreply.github.com>
Date: Mon, 20 May 2024 22:32:44 +0200
Subject: [PATCH 141/145] er verschijnen nu alerts als je op de
 addchangesubjectpage ongeldige gebruikers probeert toe te voegen, en de input
 velden worden automatisch gecleart

---
 frontend/frontend/src/i18n/en.ts              |  4 +++
 frontend/frontend/src/i18n/nl.ts              |  4 +++
 .../subjectsPage/AddChangeSubjectPage.tsx     | 34 ++++++++++++++++---
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/i18n/en.ts b/frontend/frontend/src/i18n/en.ts
index aa4ef3bd..3be359c7 100644
--- a/frontend/frontend/src/i18n/en.ts
+++ b/frontend/frontend/src/i18n/en.ts
@@ -120,6 +120,10 @@ const english = {
     open_with_ui: 'Open with UI',
     choose_existing: 'Choose existing',
     make_new_script: 'Make new script',
+    cant_add_teachers_to_student_list: 'You cannot add teachers to the student list',
+    cant_add_students_to_teacher_list: 'You cannot add students to the teacher list',
+    cant_add_users_twice: 'You cannot add users to a subject twice',
+    this_user_doesnt_exist: 'This user does not exist',
 }
 
 export default english
diff --git a/frontend/frontend/src/i18n/nl.ts b/frontend/frontend/src/i18n/nl.ts
index cb7a9b09..a00800fc 100644
--- a/frontend/frontend/src/i18n/nl.ts
+++ b/frontend/frontend/src/i18n/nl.ts
@@ -120,6 +120,10 @@ const dutch = {
     open_with_ui: 'Open met UI',
     choose_existing: 'Kies een bestaand script',
     make_new_script: 'Maak nieuw script aan',
+    cant_add_teachers_to_student_list: 'Je kan geen leerkrachten aan de studenten lijst toevoegen',
+    cant_add_students_to_teacher_list: 'Je kan geen studenten aan de leerkrachten lijst toevoegen',
+    cant_add_users_twice: 'Je kan gebruikers geen twee keer toevoegen',
+    this_user_doesnt_exist: 'Deze gebruiker bestaat niet',
 }
 
 export default dutch
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 2d33ca2a..f516fdc5 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -18,7 +18,7 @@ import {
     Typography,
 } from '@mui/material'
 import { Header } from '../../components/Header'
-import React, { ChangeEvent, useEffect, useState } from 'react'
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import List from '@mui/material/List'
 import { t } from 'i18next'
@@ -144,7 +144,8 @@ function UploadPart(
     handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void,
     setEmail: React.Dispatch<React.SetStateAction<string>>,
     handleAdd: () => void,
-    str: string
+    str: string,
+    textFieldRef: React.RefObject<HTMLInputElement>
 ) {
     return (
         <>
@@ -159,6 +160,7 @@ function UploadPart(
                                 onChange={(event) =>
                                     setEmail(event.target.value)
                                 }
+                                inputRef={textFieldRef}
                             />
                         </Box>
                         <Box>
@@ -226,6 +228,8 @@ export function AddChangeSubjectPage() {
     const [studentFile, setStudentFile] = useState<File>()
     const [teacherFile, setTeacherFile] = useState<File>()
     const [user, setUser] = useState<User>()
+    const studentRef = useRef<HTMLInputElement>(null)
+    const teacherRef = useRef<HTMLInputElement>(null)
 
     const [vakID, setVakID] = useState(params.courseId)
 
@@ -256,6 +260,7 @@ export function AddChangeSubjectPage() {
             .then((res) => {
                 setStudents((oldstudents) => {
                     if (res.data.length == 0) {
+                        alert(t('this_user_doesnt_exist'))
                         return oldstudents
                     }
                     return addUser(false, res.data[0], oldstudents)
@@ -266,6 +271,11 @@ export function AddChangeSubjectPage() {
             })
 
         handleUploadStudent()
+
+        if (studentRef.current) {
+            studentRef.current.value = '';
+            setEmailStudent('')
+        }
     }
 
     const handleStudentFileChange = (
@@ -347,6 +357,7 @@ export function AddChangeSubjectPage() {
                     //This is like this to prevent the same user being in the list twice
 
                     if (res.data.length == 0) {
+                        alert(t('this_user_doesnt_exist'))
                         return oldteachers
                     }
 
@@ -357,6 +368,11 @@ export function AddChangeSubjectPage() {
                 console.log(err)
             })
         handleUploadTeacher()
+
+        if (teacherRef.current) {
+            teacherRef.current.value = '';
+            setEmailTeacher('')
+        }
     }
 
     const handleTeacherFileChange = (
@@ -421,6 +437,11 @@ export function AddChangeSubjectPage() {
         let found = false
         const id = userData.user
         if (userData.is_lesgever != isLesgever) {
+            if (userData.is_lesgever){
+                alert(t('cant_add_teachers_to_student_list'))
+            } else {
+                alert(t('cant_add_students_to_teacher_list'))
+            }
             return olduser
         }
         for (const teacher of olduser) {
@@ -429,6 +450,7 @@ export function AddChangeSubjectPage() {
             }
         }
         if (found) {
+            alert(t('cant_add_users_twice'))
             return olduser
         } else {
             return [...olduser, userData]
@@ -684,14 +706,15 @@ export function AddChangeSubjectPage() {
                                                         handleStudentFileChange,
                                                         setEmailStudent,
                                                         handleAddStudent,
-                                                        t('upload_students')
+                                                        t('upload_students'),
+                                                        studentRef,
                                                     )}
                                                 </Box>
                                                 {DialogWindow(
                                                     handleCloseStudent,
                                                     openStudent,
                                                     handleRemoveStudent,
-                                                    t('delete_student')
+                                                    t('delete_student'),
                                                 )}
                                             </Stack>
                                         </Box>
@@ -733,7 +756,8 @@ export function AddChangeSubjectPage() {
                                                         handleTeacherFileChange,
                                                         setEmailTeacher,
                                                         handleAddTeacher,
-                                                        t('upload_teachers')
+                                                        t('upload_teachers'),
+                                                        teacherRef,
                                                     )}
                                                 </Box>
                                                 {DialogWindow(

From 2b7145e8e360432571004fedfd318f0bf2e52e6c Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 23:00:32 +0200
Subject: [PATCH 142/145] popup weggewerkt en jaarkeuze andere kleur

---
 .../src/pages/mainPage/ArchivedView.tsx       |  2 +-
 .../src/pages/mainPage/CoursesView.tsx        |  2 +-
 .../frontend/src/pages/mainPage/MainPage.tsx  | 58 ++++++++++++-------
 .../subjectsPage/AddChangeSubjectPage.tsx     | 44 +++++++-------
 4 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
index 5997915a..5dec46d6 100644
--- a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
+++ b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
@@ -21,7 +21,7 @@ export function ArchivedView({
         <>
             <Stack
                 flexDirection={{ xs: 'column-reverse', md: 'row' }}
-                minWidth={{ md: '62svw', lg: '73svw' }}
+                minWidth={{ md: '47svw', lg: '68svw' }}
             >
                 <Stack
                     direction={'column'}
diff --git a/frontend/frontend/src/pages/mainPage/CoursesView.tsx b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
index ce262aca..d89dbd5e 100644
--- a/frontend/frontend/src/pages/mainPage/CoursesView.tsx
+++ b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
@@ -27,7 +27,7 @@ export function CoursesView({
         <>
             <Stack
                 flexDirection={{ xs: 'column-reverse', md: 'row' }}
-                minWidth={{ md: '62svw', lg: '73svw' }}
+                minWidth={{ md: '47svw', lg: '68svw' }}
             >
                 <Stack
                     direction={'column'}
diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx
index 961fab27..52a9b7f5 100644
--- a/frontend/frontend/src/pages/mainPage/MainPage.tsx
+++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx
@@ -1,6 +1,6 @@
 import { Header } from '../../components/Header.tsx'
 import { Button } from '../../components/CustomComponents.tsx'
-import { Box, Stack, MenuItem, Select } from '@mui/material'
+import { Box, MenuItem, Select, Stack } from '@mui/material'
 import TabSwitcher from '../../components/TabSwitcher.tsx'
 import { ArchivedView } from './ArchivedView.tsx'
 import { CoursesView } from './CoursesView.tsx'
@@ -202,8 +202,8 @@ export default function MainPage() {
                                               md: 'row',
                                           }}
                                           minWidth={{
-                                              md: '60svw',
-                                              lg: '69svw',
+                                              md: '40svw',
+                                              lg: '49svw',
                                           }}
                                       >
                                           {[...Array(3)].map((_, index) => (
@@ -216,8 +216,8 @@ export default function MainPage() {
                                               md: 'row',
                                           }}
                                           minWidth={{
-                                              md: '60svw',
-                                              lg: '69svw',
+                                              md: '40svw',
+                                              lg: '49svw',
                                           }}
                                       >
                                           {[...Array(3)].map((_, index) => (
@@ -232,7 +232,9 @@ export default function MainPage() {
                                           activecourses={courses
                                               .filter(
                                                   (course) =>
-                                                      !course.gearchiveerd && course.jaartal === selectedYear
+                                                      !course.gearchiveerd &&
+                                                      course.jaartal ===
+                                                          selectedYear
                                               )
                                               .sort((a: Course, b: Course) => {
                                                   if (
@@ -321,23 +323,35 @@ export default function MainPage() {
                         }
                     />
                     <Box
-                    display={'flex'}
-                    justifyContent={'center'}
-                    alignItems={'center'}
-                    mb={2}
-                >
-                    <Select
-                        value={selectedYear}
-                        onChange={(e) => setSelectedYear(e.target.value as number)}
-                        label="Select Academic Year"
-                        sx={{ minWidth: 150 }}
+                        height={'100%'}
+                        display={'flex'}
+                        flexDirection={'column'}
+                        justifyContent={'center'}
+                        alignItems={'flex-start'}
+                        mb={2}
                     >
-                        {[2022, 2023, 2024, 2025].map((year) => (
-                            <MenuItem key={year} value={year}>
-                                {year}
-                            </MenuItem>
-                        ))}
-                    </Select>
+                        <Select
+                            variant={'outlined'}
+                            color={'primary'}
+                            value={selectedYear}
+                            onChange={(e) =>
+                                setSelectedYear(e.target.value as number)
+                            }
+                            label="Select Academic Year"
+                            sx={{
+                                minWidth: 150,
+                                '& .MuiSelect-outlined': {
+                                    border: 1.5,
+                                    borderColor: 'primary.main',
+                                },
+                            }}
+                        >
+                            {[2022, 2023, 2024, 2025].map((year) => (
+                                <MenuItem key={year} value={year}>
+                                    {year}
+                                </MenuItem>
+                            ))}
+                        </Select>
                     </Box>
                     {/* Add a calendar to the right of the mainpage. */}
                     <Box
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 0bb045a4..52ae6366 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -43,7 +43,8 @@ function UserList(
     loading: boolean,
     users: User[],
     setSelected: React.Dispatch<React.SetStateAction<number>>,
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+    handleRemove: () => void
 ) {
     return (
         <Box marginTop={3}>
@@ -70,7 +71,12 @@ function UserList(
                         {users.map((user) => {
                             const handleClickOpen = () => {
                                 setSelected(user.user)
-                                setOpen(true)
+
+                                if (user.is_lesgever) {
+                                    setOpen(true)
+                                } else {
+                                    handleRemove()
+                                }
                             }
                             {
                                 /* The list of users is mapped onto buttons
@@ -247,15 +253,12 @@ export function AddChangeSubjectPage() {
     }
 
     const handleRemoveStudent = (): void => {
-        setStudents((oldstudents: User[]): User[] => {
-            for (let i = 0; i < oldstudents.length; i++) {
-                if (oldstudents[i].user == selectedStudent) {
-                    oldstudents.splice(i, 1)
-                    return oldstudents
-                }
-            }
-            return oldstudents
-        })
+        const newstudents = students.filter(
+            (student) => student.user != selectedStudent
+        )
+
+        setStudents(newstudents)
+
         setOpenStudent(false)
     }
 
@@ -342,15 +345,10 @@ export function AddChangeSubjectPage() {
     // This function will remove a teacher from the list.
     // It does so by looping through the list and removing the teacher with the correct ID.
     const handleRemoveTeacher = () => {
-        setTeachers((oldteacher) => {
-            for (let i = 0; i < oldteacher.length; i++) {
-                if (oldteacher[i].user == selectedTeacher) {
-                    oldteacher.splice(i, 1)
-                    return oldteacher
-                }
-            }
-            return oldteacher
-        })
+        const newTeachers = teachers.filter(
+            (teacher) => teacher.user != selectedTeacher
+        )
+        setTeachers(newTeachers)
         setOpenTeacher(false)
     }
 
@@ -704,7 +702,8 @@ export function AddChangeSubjectPage() {
                                                             loading,
                                                             students,
                                                             setSelectedStudent,
-                                                            setOpenStudent
+                                                            setOpenStudent,
+                                                            handleRemoveStudent
                                                         )}
                                                     </Box>
                                                 </Card>
@@ -754,7 +753,8 @@ export function AddChangeSubjectPage() {
                                                             loading,
                                                             teachers,
                                                             setSelectedTeacher,
-                                                            setOpenTeacher
+                                                            setOpenTeacher,
+                                                            handleRemoveTeacher
                                                         )}
                                                     </Box>
                                                 </Card>

From 6b0f8cb1b508e5b0b46c3b8c7485ee2fc471648d Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 23:10:04 +0200
Subject: [PATCH 143/145] remove unused import

---
 .../src/components/RestrictionCard.tsx        | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/frontend/src/components/RestrictionCard.tsx b/frontend/frontend/src/components/RestrictionCard.tsx
index 75ad36ee..504238c6 100644
--- a/frontend/frontend/src/components/RestrictionCard.tsx
+++ b/frontend/frontend/src/components/RestrictionCard.tsx
@@ -1,8 +1,8 @@
 import { restriction } from '../pages/addChangeAssignmentPage/AddChangeAssignmentPage.tsx'
-import { Box, IconButton, Switch, Typography } from '@mui/material'
+import { IconButton, Switch, Typography } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import React from 'react'
-import {EvenlySpacedRow} from "./CustomComponents.tsx";
+import { EvenlySpacedRow } from './CustomComponents.tsx'
 
 interface RestrictionCardProps {
     restriction: restriction
@@ -29,19 +29,21 @@ export function RestrictionCard({
 
     return (
         <>
-            <EvenlySpacedRow items={[
-                <Typography id="script" variant={'body2'}>
-                    {restriction.script.replace(/^.*[\\/]/, '')}
-                </Typography>,
-                <Switch
-                    id="mustPassSwitch"
-                    value={mustPass}
-                    checked={mustPass}
-                    onChange={() => handleMustPassChange()}
-                />,
-                <IconButton id="closeButton" onClick={handleRemove}>
-                    <CloseIcon />
-                </IconButton>]}
+            <EvenlySpacedRow
+                items={[
+                    <Typography id="script" variant={'body2'}>
+                        {restriction.script.replace(/^.*[\\/]/, '')}
+                    </Typography>,
+                    <Switch
+                        id="mustPassSwitch"
+                        value={mustPass}
+                        checked={mustPass}
+                        onChange={() => handleMustPassChange()}
+                    />,
+                    <IconButton id="closeButton" onClick={handleRemove}>
+                        <CloseIcon />
+                    </IconButton>,
+                ]}
             />
         </>
     )

From b46d41cba3608c6915168f0fc7eb5c3230f235fd Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Mon, 20 May 2024 23:58:03 +0200
Subject: [PATCH 144/145] positie jaarkiezer verandert

---
 .../frontend/src/components/TabSwitcher.tsx   | 75 +++++++++++++++----
 .../src/pages/mainPage/ArchivedView.tsx       |  2 +-
 .../src/pages/mainPage/CoursesView.tsx        |  2 +-
 .../frontend/src/pages/mainPage/MainPage.tsx  | 44 ++---------
 4 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/frontend/frontend/src/components/TabSwitcher.tsx b/frontend/frontend/src/components/TabSwitcher.tsx
index 9c213db8..591416fa 100644
--- a/frontend/frontend/src/components/TabSwitcher.tsx
+++ b/frontend/frontend/src/components/TabSwitcher.tsx
@@ -8,8 +8,11 @@ import { ReactNode } from 'react'
 import { t } from 'i18next'
 import theme from '../Theme.ts'
 import { grey } from '@mui/material/colors'
+import { Box, MenuItem, Select } from '@mui/material'
 
 interface TabSwitcherProps {
+    selectedYear: number
+    setSelectedYear: (year: number) => void
     titles: string[]
     nodes: ReactNode[]
 }
@@ -22,25 +25,69 @@ interface TabSwitcherProps {
  * the number of titles and nodes should be the same
  */
 
-export default function TabSwitcher({ titles, nodes }: TabSwitcherProps) {
+export default function TabSwitcher({
+    selectedYear,
+    setSelectedYear,
+    titles,
+    nodes,
+}: TabSwitcherProps) {
     titles.length !== nodes.length &&
         console.error('The number of titles and nodes should be the same')
 
     return (
-        <Tabs defaultValue={0} color={'background.default'}>
-            <TabsList>
-                {titles.map((title, index) => (
-                    <Tab id={`tab${index}`} key={index} value={index}>
-                        {t(title)}
-                    </Tab>
+        <>
+            <Tabs defaultValue={0} color={'background.default'}>
+                <Box
+                    display={'flex'}
+                    flexDirection={'row'}
+                    justifyContent={'space-between'}
+                >
+                    <TabsList>
+                        {titles.map((title, index) => (
+                            <Tab id={`tab${index}`} key={index} value={index}>
+                                {t(title)}
+                            </Tab>
+                        ))}
+                    </TabsList>
+                    <Box
+                        height={'100%'}
+                        display={'flex'}
+                        flexDirection={'column'}
+                        justifyContent={'center'}
+                        alignItems={'flex-start'}
+                        mb={2}
+                    >
+                        <Select
+                            variant={'outlined'}
+                            color={'primary'}
+                            value={selectedYear}
+                            onChange={(e) =>
+                                setSelectedYear(e.target.value as number)
+                            }
+                            label="Select Academic Year"
+                            sx={{
+                                minWidth: 150,
+                                '& .MuiSelect-outlined': {
+                                    border: 1.5,
+                                    borderColor: 'primary.main',
+                                },
+                            }}
+                        >
+                            {[2022, 2023, 2024, 2025].map((year) => (
+                                <MenuItem key={year} value={year}>
+                                    {year}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </Box>
+                </Box>
+                {nodes.map((node, index) => (
+                    <TabPanel id={`node${index}`} key={index} value={index}>
+                        {node}
+                    </TabPanel>
                 ))}
-            </TabsList>
-            {nodes.map((node, index) => (
-                <TabPanel id={`node${index}`} key={index} value={index}>
-                    {node}
-                </TabPanel>
-            ))}
-        </Tabs>
+            </Tabs>
+        </>
     )
 }
 
diff --git a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
index 5dec46d6..d128b0bb 100644
--- a/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
+++ b/frontend/frontend/src/pages/mainPage/ArchivedView.tsx
@@ -21,7 +21,7 @@ export function ArchivedView({
         <>
             <Stack
                 flexDirection={{ xs: 'column-reverse', md: 'row' }}
-                minWidth={{ md: '47svw', lg: '68svw' }}
+                minWidth={{ md: '57svw', lg: '78svw' }}
             >
                 <Stack
                     direction={'column'}
diff --git a/frontend/frontend/src/pages/mainPage/CoursesView.tsx b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
index d89dbd5e..cbf24c91 100644
--- a/frontend/frontend/src/pages/mainPage/CoursesView.tsx
+++ b/frontend/frontend/src/pages/mainPage/CoursesView.tsx
@@ -27,7 +27,7 @@ export function CoursesView({
         <>
             <Stack
                 flexDirection={{ xs: 'column-reverse', md: 'row' }}
-                minWidth={{ md: '47svw', lg: '68svw' }}
+                minWidth={{ md: '57svw', lg: '78svw' }}
             >
                 <Stack
                     direction={'column'}
diff --git a/frontend/frontend/src/pages/mainPage/MainPage.tsx b/frontend/frontend/src/pages/mainPage/MainPage.tsx
index 52a9b7f5..b71a6a90 100644
--- a/frontend/frontend/src/pages/mainPage/MainPage.tsx
+++ b/frontend/frontend/src/pages/mainPage/MainPage.tsx
@@ -1,6 +1,6 @@
 import { Header } from '../../components/Header.tsx'
 import { Button } from '../../components/CustomComponents.tsx'
-import { Box, MenuItem, Select, Stack } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import TabSwitcher from '../../components/TabSwitcher.tsx'
 import { ArchivedView } from './ArchivedView.tsx'
 import { CoursesView } from './CoursesView.tsx'
@@ -192,6 +192,8 @@ export default function MainPage() {
                     CoursesView is a scroll-box with the current courses, 
                     ArchivedView is the same but for the archived courses.  */}
                     <TabSwitcher
+                        selectedYear={selectedYear}
+                        setSelectedYear={setSelectedYear}
                         titles={['current_courses', 'archived']}
                         nodes={
                             loading
@@ -202,8 +204,8 @@ export default function MainPage() {
                                               md: 'row',
                                           }}
                                           minWidth={{
-                                              md: '40svw',
-                                              lg: '49svw',
+                                              md: '57svw',
+                                              lg: '78svw',
                                           }}
                                       >
                                           {[...Array(3)].map((_, index) => (
@@ -216,8 +218,8 @@ export default function MainPage() {
                                               md: 'row',
                                           }}
                                           minWidth={{
-                                              md: '40svw',
-                                              lg: '49svw',
+                                              md: '57svw',
+                                              lg: '78svw',
                                           }}
                                       >
                                           {[...Array(3)].map((_, index) => (
@@ -322,37 +324,7 @@ export default function MainPage() {
                                   ]
                         }
                     />
-                    <Box
-                        height={'100%'}
-                        display={'flex'}
-                        flexDirection={'column'}
-                        justifyContent={'center'}
-                        alignItems={'flex-start'}
-                        mb={2}
-                    >
-                        <Select
-                            variant={'outlined'}
-                            color={'primary'}
-                            value={selectedYear}
-                            onChange={(e) =>
-                                setSelectedYear(e.target.value as number)
-                            }
-                            label="Select Academic Year"
-                            sx={{
-                                minWidth: 150,
-                                '& .MuiSelect-outlined': {
-                                    border: 1.5,
-                                    borderColor: 'primary.main',
-                                },
-                            }}
-                        >
-                            {[2022, 2023, 2024, 2025].map((year) => (
-                                <MenuItem key={year} value={year}>
-                                    {year}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </Box>
+
                     {/* Add a calendar to the right of the mainpage. */}
                     <Box
                         aria-label={'calendarView'}

From 97c8a76b2b8d0fcb69475314fae3925319cecaed Mon Sep 17 00:00:00 2001
From: Ben De Meurichy <ben.demeurichy@ugent.be>
Date: Tue, 21 May 2024 00:06:49 +0200
Subject: [PATCH 145/145] fixed missing properties

---
 .../frontend/src/components/TabSwitcher.tsx   | 64 ++++++++++---------
 .../src/pages/subjectsPage/SubjectsPage.tsx   |  4 ++
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/frontend/frontend/src/components/TabSwitcher.tsx b/frontend/frontend/src/components/TabSwitcher.tsx
index 591416fa..a934c518 100644
--- a/frontend/frontend/src/components/TabSwitcher.tsx
+++ b/frontend/frontend/src/components/TabSwitcher.tsx
@@ -11,7 +11,7 @@ import { grey } from '@mui/material/colors'
 import { Box, MenuItem, Select } from '@mui/material'
 
 interface TabSwitcherProps {
-    selectedYear: number
+    selectedYear?: number
     setSelectedYear: (year: number) => void
     titles: string[]
     nodes: ReactNode[]
@@ -49,37 +49,39 @@ export default function TabSwitcher({
                             </Tab>
                         ))}
                     </TabsList>
-                    <Box
-                        height={'100%'}
-                        display={'flex'}
-                        flexDirection={'column'}
-                        justifyContent={'center'}
-                        alignItems={'flex-start'}
-                        mb={2}
-                    >
-                        <Select
-                            variant={'outlined'}
-                            color={'primary'}
-                            value={selectedYear}
-                            onChange={(e) =>
-                                setSelectedYear(e.target.value as number)
-                            }
-                            label="Select Academic Year"
-                            sx={{
-                                minWidth: 150,
-                                '& .MuiSelect-outlined': {
-                                    border: 1.5,
-                                    borderColor: 'primary.main',
-                                },
-                            }}
+                    {selectedYear && (
+                        <Box
+                            height={'100%'}
+                            display={'flex'}
+                            flexDirection={'column'}
+                            justifyContent={'center'}
+                            alignItems={'flex-start'}
+                            mb={2}
                         >
-                            {[2022, 2023, 2024, 2025].map((year) => (
-                                <MenuItem key={year} value={year}>
-                                    {year}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </Box>
+                            <Select
+                                variant={'outlined'}
+                                color={'primary'}
+                                value={selectedYear}
+                                onChange={(e) =>
+                                    setSelectedYear(e.target.value as number)
+                                }
+                                label="Select Academic Year"
+                                sx={{
+                                    minWidth: 150,
+                                    '& .MuiSelect-outlined': {
+                                        border: 1.5,
+                                        borderColor: 'primary.main',
+                                    },
+                                }}
+                            >
+                                {[2022, 2023, 2024, 2025].map((year) => (
+                                    <MenuItem key={year} value={year}>
+                                        {year}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </Box>
+                    )}
                 </Box>
                 {nodes.map((node, index) => (
                     <TabPanel id={`node${index}`} key={index} value={index}>
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 86909b4b..91a52e1d 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -271,6 +271,8 @@ export function SubjectsPage() {
                                         />
                                     ) : (
                                         <TabSwitcher
+                                            selectedYear={undefined}
+                                            setSelectedYear={() => undefined}
                                             titles={[
                                                 'current_projects',
                                                 'archived',
@@ -400,6 +402,8 @@ export function SubjectsPage() {
                                         />
                                     ) : (
                                         <TabSwitcher
+                                            selectedYear={undefined}
+                                            setSelectedYear={() => undefined}
                                             titles={[
                                                 'current_projects',
                                                 'archived',