From 5168fbbd77a05639b7b928c79de1e803242d4525 Mon Sep 17 00:00:00 2001
From: Emma N <neirinck.emma@gmail.com>
Date: Sun, 21 May 2023 18:42:35 +0200
Subject: [PATCH 1/8] responsiveness communication

---
 .../autocompleteComponent.tsx                 |   2 +-
 frontend/pages/admin/communication.tsx        | 109 ++++++++++--------
 2 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/frontend/components/autocompleteComponents/autocompleteComponent.tsx b/frontend/components/autocompleteComponents/autocompleteComponent.tsx
index 39000eb1..8905703e 100644
--- a/frontend/components/autocompleteComponents/autocompleteComponent.tsx
+++ b/frontend/components/autocompleteComponents/autocompleteComponent.tsx
@@ -86,7 +86,7 @@ const AutocompleteComponent: React.FC<Props> = ({
     }, [fetchOptions, initialId]);
 
     return (
-        <div>
+        <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
             <Form.Label> {label} </Form.Label>
             <br />
             <Autocomplete
diff --git a/frontend/pages/admin/communication.tsx b/frontend/pages/admin/communication.tsx
index 72f7165f..676307bb 100644
--- a/frontend/pages/admin/communication.tsx
+++ b/frontend/pages/admin/communication.tsx
@@ -1,17 +1,18 @@
 import AdminHeader from "@/components/header/adminHeader";
-import { EmailTemplate, getAllEmailTemplates } from "@/lib/email-template";
-import { ChangeEvent, useEffect, useState } from "react";
-import { Button, Col, Container, Form, Row } from "react-bootstrap";
+import {EmailTemplate, getAllEmailTemplates} from "@/lib/email-template";
+import {ChangeEvent, useEffect, useState} from "react";
+import {Button, Col, Container, Form, Row} from "react-bootstrap";
 import TemplateAutocomplete from "@/components/autocompleteComponents/templateAutocomplete";
-import { BuildingInterface, getAllBuildings } from "@/lib/building";
-import { getAllUsers, User } from "@/lib/user";
+import {BuildingInterface, getAllBuildings} from "@/lib/building";
+import {getAllUsers, User} from "@/lib/user";
 import UserAutoComplete from "@/components/autocompleteComponents/userAutocomplete";
-import { useRouter } from "next/router";
-import { withAuthorisation } from "@/components/withAuthorisation";
-import { Send } from "@mui/icons-material";
-import { handleError } from "@/lib/error";
+import {useRouter} from "next/router";
+import {withAuthorisation} from "@/components/withAuthorisation";
+import {Send} from "@mui/icons-material";
+import {handleError} from "@/lib/error";
 
-interface ParsedUrlQuery {}
+interface ParsedUrlQuery {
+}
 
 interface DataCommunicationQuery extends ParsedUrlQuery {
     template?: number;
@@ -54,7 +55,7 @@ function AdminCommunication() {
     async function routeToBuildings(syndicId: number) {
         await router.push({
             pathname: `data/buildings/`,
-            query: { syndic: selectedUser?.email },
+            query: {syndic: selectedUser?.email},
         });
     }
 
@@ -129,59 +130,68 @@ function AdminCommunication() {
 
     return (
         <>
-            <AdminHeader />
+            <AdminHeader/>
             <Container>
                 <p className="title">Communicatie extern</p>
                 <div>
-                    <Row>
-                        <Col md={3}>
-                            <Row>
+                    <Row style={{paddingBottom: '20px'}}>
+                        <Col>
+                            <div>
                                 <TemplateAutocomplete
                                     initialId={templateId}
                                     setObjectId={setTemplateId}
                                     required={false}
                                 />
-                            </Row>
-                            <Row>
-                                <UserAutoComplete initialId={userId} setObjectId={setUserId} required={false} />
-                            </Row>
-                            <Row>
-                                <div className="padding">
-                                    <Button
-                                        className="small_button"
-                                        size="sm"
-                                        onClick={() => {
-                                            if (userId) {
-                                                routeToBuildings(userId).then();
-                                            }
-                                        }}
-                                    >
-                                        Gebouw
-                                    </Button>
-                                </div>
-                            </Row>
+                            </div>
                         </Col>
-                        <Col md={9}>
+                        <Col>
+                            <div>
+                                <UserAutoComplete
+                                    initialId={userId}
+                                    setObjectId={setUserId}
+                                    required={false}
+                                />
+                            </div>
+                        </Col>
+
+                        <Col style={{display: 'flex', alignItems: 'end', justifyContent: 'end'}}>
+                            <div className="padding">
+                                <Button
+                                    style={{height: '50px'}}
+                                    className="button"
+                                    onClick={() => {
+                                        if (userId) {
+                                            routeToBuildings(userId).then();
+                                        }
+                                    }}
+                                >
+                                    Gebouw
+                                </Button>
+                            </div>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
                             <Row>
-                                <div style={{ display: "flex" }}>
-                                    <Form.Control
-                                        as="textarea"
-                                        className="mail_area"
-                                        placeholder="Schrijf je email hier"
-                                        value={updatedTemplateText}
-                                        onChange={handleEditTemplate}
-                                    />
-                                </div>
+                                <Col>
+                                    <div className="input-field">
+                                        <Form.Control
+                                            as="textarea"
+                                            className="mail_area"
+                                            placeholder="Schrijf je email hier"
+                                            value={updatedTemplateText}
+                                            onChange={handleEditTemplate}
+                                        />
+                                    </div>
+                                </Col>
                             </Row>
                         </Col>
                     </Row>
                     <Row>
-                        <Col md={{ span: 3, offset: 3 }}>
+                        <Col>
                             <div className="padding mt-auto">
                                 <Button
-                                    href={`mailto:${getSelectedUserMail()}?body=${encodeURIComponent(
-                                        updatedTemplateText
-                                    )}`}
+                                    href={`mailto:${getSelectedUserMail()}?body=${encodeURIComponent(updatedTemplateText)}`}
                                     className="wide_button"
                                     size="lg"
                                     style={{
@@ -190,11 +200,12 @@ function AdminCommunication() {
                                     }}
                                 >
                                     Verstuur mail
-                                    <Send style={{ height: "10px", paddingLeft: "10px", marginRight: "0.5em" }} />
+                                    <Send style={{height: "10px", paddingLeft: "10px", marginRight: "0.5em"}}/>
                                 </Button>
                             </div>
                         </Col>
                     </Row>
+
                 </div>
             </Container>
         </>

From 2989eac68f145e49a11b5b4147450559c59f419e Mon Sep 17 00:00:00 2001
From: Emma N <neirinck.emma@gmail.com>
Date: Sun, 21 May 2023 18:56:26 +0200
Subject: [PATCH 2/8] minWidth autocomplete change

---
 .../components/autocompleteComponents/autocompleteComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/autocompleteComponents/autocompleteComponent.tsx b/frontend/components/autocompleteComponents/autocompleteComponent.tsx
index 8905703e..8ad754ab 100644
--- a/frontend/components/autocompleteComponents/autocompleteComponent.tsx
+++ b/frontend/components/autocompleteComponents/autocompleteComponent.tsx
@@ -111,7 +111,7 @@ const AutocompleteComponent: React.FC<Props> = ({
                 getOptionLabel={(option: any) => option.label || ""}
                 disabled={disabled}
                 renderInput={(params: AutocompleteRenderInputParams) => (
-                    <TextField {...params} variant="outlined" fullWidth style={{ minWidth: "300px" }} />
+                    <TextField {...params} variant="outlined" fullWidth style={{ minWidth: "150px" }} />
                 )}
                 ListboxProps={{ style: { maxHeight: 200, overflowY: "auto" } }}
             />

From 0805f8aefd705910172a80da1531133217b96634 Mon Sep 17 00:00:00 2001
From: Emma N <neirinck.emma@gmail.com>
Date: Sun, 21 May 2023 19:33:50 +0200
Subject: [PATCH 3/8] fix analysis tour

---
 .../autocompleteComponent.tsx                 |  2 +-
 frontend/pages/admin/analysis/tour.tsx        | 14 ++--
 .../pages/admin/analysis/worked-hours.tsx     | 77 ++++++++++---------
 3 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/frontend/components/autocompleteComponents/autocompleteComponent.tsx b/frontend/components/autocompleteComponents/autocompleteComponent.tsx
index 8ad754ab..147a5a28 100644
--- a/frontend/components/autocompleteComponents/autocompleteComponent.tsx
+++ b/frontend/components/autocompleteComponents/autocompleteComponent.tsx
@@ -86,7 +86,7 @@ const AutocompleteComponent: React.FC<Props> = ({
     }, [fetchOptions, initialId]);
 
     return (
-        <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
+        <div>
             <Form.Label> {label} </Form.Label>
             <br />
             <Autocomplete
diff --git a/frontend/pages/admin/analysis/tour.tsx b/frontend/pages/admin/analysis/tour.tsx
index a4eb5b95..3fd983bf 100644
--- a/frontend/pages/admin/analysis/tour.tsx
+++ b/frontend/pages/admin/analysis/tour.tsx
@@ -420,14 +420,13 @@ function AdminTour() {
             <AdminHeader />
             <Container>
                 <Row style={{ display: "flex", alignItems: "center", padding: "10px" }}>
-                    <div style={{ display: "flex" }}>
-                        <div style={{ marginRight: "20px" }}>
+                        <Col sm={12} md={4}>
                             <label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
                                 Selecteer student
                             </label>
                             <TourUserAutocomplete initialId={selectedStudentId} setObjectId={setSelectedStudentId} />
-                        </div>
-                        <div style={{ marginRight: "20px" }}>
+                        </Col>
+                        <Col sm={12} md={4}>
                             <label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
                                 Selecteer ronde
                             </label>
@@ -438,8 +437,8 @@ function AdminTour() {
                                 studentId={selectedStudentId}
                                 disabled={!validTourUser}
                             />
-                        </div>
-                        <div>
+                        </Col>
+                        <Col sm={12} md={4}>
                             <label style={{ paddingBottom: "35px" }} htmlFor="datepicker">
                                 Selecteer datum
                             </label>
@@ -453,8 +452,7 @@ function AdminTour() {
                                 }
                                 disabled={!validTourUser}
                             />
-                        </div>
-                    </div>
+                        </Col>
                 </Row>
                 <Card>
                     <ErrorMessageAlert setErrorMessages={setErrorMessages} errorMessages={errorMessages} />
diff --git a/frontend/pages/admin/analysis/worked-hours.tsx b/frontend/pages/admin/analysis/worked-hours.tsx
index e27221a6..cb7f31eb 100644
--- a/frontend/pages/admin/analysis/worked-hours.tsx
+++ b/frontend/pages/admin/analysis/worked-hours.tsx
@@ -1,17 +1,17 @@
 import AdminHeader from "@/components/header/adminHeader";
-import React, { useEffect, useState } from "react";
-import { addDays, differenceInMinutes, startOfWeek, subDays, subMonths } from "date-fns";
-import { Card, Col, Container, Form, ListGroup, Row } from "react-bootstrap";
-import { datesEqual, formatDate } from "@/lib/date";
-import { getWorkedHours } from "@/lib/analysis";
-import { getAllTours, Tour } from "@/lib/tour";
-import { getAllRegions, RegionInterface } from "@/lib/region";
-import { getFullName, getTourUsers, User } from "@/lib/user";
+import React, {useEffect, useState} from "react";
+import {differenceInMinutes, startOfWeek, subMonths} from "date-fns";
+import {Card, Col, Container, Form, ListGroup, Row} from "react-bootstrap";
+import {datesEqual} from "@/lib/date";
+import {getWorkedHours} from "@/lib/analysis";
+import {getAllTours, Tour} from "@/lib/tour";
+import {getAllRegions, RegionInterface} from "@/lib/region";
+import {getFullName, getTourUsers, User} from "@/lib/user";
 import ErrorMessageAlert from "@/components/errorMessageAlert";
-import { getAllStudentOnTourFromDate, StudentOnTour, StudentOnTourStringDate } from "@/lib/student-on-tour";
-import { WorkedHours } from "@/types";
-import { handleError } from "@/lib/error";
-import { withAuthorisation } from "@/components/withAuthorisation";
+import {getAllStudentOnTourFromDate, StudentOnTour, StudentOnTourStringDate} from "@/lib/student-on-tour";
+import {WorkedHours} from "@/types";
+import {handleError} from "@/lib/error";
+import {withAuthorisation} from "@/components/withAuthorisation";
 import Select from "react-select";
 import Masonry from "@mui/lab/Masonry";
 import Link from "next/link";
@@ -58,7 +58,8 @@ function AdminAnalysisWorkingHours() {
                 const tours: Tour[] = res.data;
                 setAllTours(tours);
             },
-            () => {}
+            () => {
+            }
         );
 
         getAllRegions().then(
@@ -66,7 +67,8 @@ function AdminAnalysisWorkingHours() {
                 const regions: RegionInterface[] = res.data;
                 setAllRegions(regions);
             },
-            () => {}
+            () => {
+            }
         );
 
         getTourUsers(true).then(
@@ -74,7 +76,8 @@ function AdminAnalysisWorkingHours() {
                 const users: User[] = res.data;
                 setAllUsers(users);
             },
-            () => {}
+            () => {
+            }
         );
     }, []);
 
@@ -89,7 +92,7 @@ function AdminAnalysisWorkingHours() {
             },
             (err) => setErrorMessages(handleError(err))
         );
-        getAllStudentOnTourFromDate({ startDate, endDate }).then(
+        getAllStudentOnTourFromDate({startDate, endDate}).then(
             (res) => {
                 const sots: StudentOnTourStringDate[] = res.data;
                 setStudentOnTours(
@@ -172,27 +175,18 @@ function AdminAnalysisWorkingHours() {
 
     return (
         <div className="tablepageContainer">
-            <AdminHeader />
+            <AdminHeader/>
             <div className="tableContainer">
                 <Container>
                     <label className="title">Overzicht gewerkte uren</label>
-                    <ErrorMessageAlert errorMessages={errorMessages} setErrorMessages={setErrorMessages} />
+                    <ErrorMessageAlert errorMessages={errorMessages} setErrorMessages={setErrorMessages}/>
                     <Card>
                         <Form className="m-2">
                             <Row>
-                                <Form.Group as={Col} sm={12} md={3} lg={3}>
-                                    <Form.Label>Periode:</Form.Label>
-                                    <LocaleDateRangePicker
-                                        startDate={startDate}
-                                        setStartDate={setStartDate}
-                                        endDate={endDate}
-                                        setEndDate={setEndDate}
-                                    />
-                                </Form.Group>
                                 <Form.Group as={Col} sm={12} md={3} lg={3}>
                                     <Form.Label>Sorteer op:</Form.Label>
                                     <Select
-                                        value={{ value: sortType.toString(), label: sortType.toString() }}
+                                        value={{value: sortType.toString(), label: sortType.toString()}}
                                         isClearable={false}
                                         isSearchable={false}
                                         options={Object.values(sortBy).map((t) => {
@@ -214,13 +208,13 @@ function AdminAnalysisWorkingHours() {
                                     <Select
                                         value={
                                             filteredRegion
-                                                ? { value: filteredRegion.id, label: filteredRegion.region }
-                                                : { value: -1, label: "Alle regio's" }
+                                                ? {value: filteredRegion.id, label: filteredRegion.region}
+                                                : {value: -1, label: "Alle regio's"}
                                         }
                                         isClearable={false}
                                         isSearchable={false}
                                         options={[
-                                            { value: -1, label: "Alle regio's" },
+                                            {value: -1, label: "Alle regio's"},
                                             ...allRegions.map((r) => {
                                                 return {
                                                     value: r.id,
@@ -239,11 +233,22 @@ function AdminAnalysisWorkingHours() {
                                         menuPortalTarget={document.querySelector("body")}
                                     />
                                 </Form.Group>
+                                <Form.Group as={Col} sm={12} md={3} lg={3}>
+                                    <Form.Label>Periode:</Form.Label>
+                                    <div style={{maxWidth: '150px'}}>
+                                        <LocaleDateRangePicker
+                                            startDate={startDate}
+                                            setStartDate={setStartDate}
+                                            endDate={endDate}
+                                            setEndDate={setEndDate}
+                                        />
+                                    </div>
+                                </Form.Group>
                             </Row>
                         </Form>
                     </Card>
-                    <br />
-                    <Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} spacing={2}>
+                    <br/>
+                    <Masonry columns={{xs: 1, sm: 2, md: 3, lg: 4}} spacing={2}>
                         {workedHours.map((worked) => {
                             const name: string = getStudentName(worked.student_id);
                             const time: string = toHoursAndMinutes(worked.worked_minutes);
@@ -252,17 +257,17 @@ function AdminAnalysisWorkingHours() {
                                     <Card className="card">
                                         <Card.Body>
                                             <label className="subtitle">{name}</label>
-                                            <Card.Text className="text-muted mt-1" style={{ paddingLeft: "10px" }}>
+                                            <Card.Text className="text-muted mt-1" style={{paddingLeft: "10px"}}>
                                                 {time}
                                             </Card.Text>
                                             <ListGroup className="list-group-flush">
-                                                <ListGroup.Item />
+                                                <ListGroup.Item/>
                                                 {worked.student_on_tour_ids.map((s, index) => {
                                                     const sot: StudentOnTour | undefined = studentOnTours.find(
                                                         (st) => st.id === s
                                                     );
                                                     if (!sot) {
-                                                        return <div key={index} />;
+                                                        return <div key={index}/>;
                                                     }
                                                     return (
                                                         <ListGroup.Item key={index}>

From dc3ce9ab2a68e09e00ab1f4ad498e9780b23e331 Mon Sep 17 00:00:00 2001
From: emneirin <emneirin@users.noreply.github.com>
Date: Sun, 21 May 2023 17:34:37 +0000
Subject: [PATCH 4/8] Auto formatted code

---
 frontend/pages/admin/analysis/tour.tsx        | 66 +++++++++----------
 .../pages/admin/analysis/worked-hours.tsx     | 59 ++++++++---------
 2 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/frontend/pages/admin/analysis/tour.tsx b/frontend/pages/admin/analysis/tour.tsx
index 3fd983bf..15169ba3 100644
--- a/frontend/pages/admin/analysis/tour.tsx
+++ b/frontend/pages/admin/analysis/tour.tsx
@@ -420,39 +420,39 @@ function AdminTour() {
             <AdminHeader />
             <Container>
                 <Row style={{ display: "flex", alignItems: "center", padding: "10px" }}>
-                        <Col sm={12} md={4}>
-                            <label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
-                                Selecteer student
-                            </label>
-                            <TourUserAutocomplete initialId={selectedStudentId} setObjectId={setSelectedStudentId} />
-                        </Col>
-                        <Col sm={12} md={4}>
-                            <label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
-                                Selecteer ronde
-                            </label>
-                            <StudentOnTourAutocomplete
-                                initialId={selectedTourId}
-                                setObjectId={setSelectedTourId}
-                                required={false}
-                                studentId={selectedStudentId}
-                                disabled={!validTourUser}
-                            />
-                        </Col>
-                        <Col sm={12} md={4}>
-                            <label style={{ paddingBottom: "35px" }} htmlFor="datepicker">
-                                Selecteer datum
-                            </label>
-                            <ReactDatePicker
-                                className="custom-datepicker"
-                                selected={selectedDate}
-                                onChange={(date: Date) => setSelectedDate(date)}
-                                highlightDates={validDates} // highlight valid dates
-                                filterDate={(date: Date) =>
-                                    validDates.map((d) => d.toLocaleDateString()).includes(date.toLocaleDateString())
-                                }
-                                disabled={!validTourUser}
-                            />
-                        </Col>
+                    <Col sm={12} md={4}>
+                        <label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
+                            Selecteer student
+                        </label>
+                        <TourUserAutocomplete initialId={selectedStudentId} setObjectId={setSelectedStudentId} />
+                    </Col>
+                    <Col sm={12} md={4}>
+                        <label style={{ marginBottom: "10px" }} htmlFor="tourautocomplete">
+                            Selecteer ronde
+                        </label>
+                        <StudentOnTourAutocomplete
+                            initialId={selectedTourId}
+                            setObjectId={setSelectedTourId}
+                            required={false}
+                            studentId={selectedStudentId}
+                            disabled={!validTourUser}
+                        />
+                    </Col>
+                    <Col sm={12} md={4}>
+                        <label style={{ paddingBottom: "35px" }} htmlFor="datepicker">
+                            Selecteer datum
+                        </label>
+                        <ReactDatePicker
+                            className="custom-datepicker"
+                            selected={selectedDate}
+                            onChange={(date: Date) => setSelectedDate(date)}
+                            highlightDates={validDates} // highlight valid dates
+                            filterDate={(date: Date) =>
+                                validDates.map((d) => d.toLocaleDateString()).includes(date.toLocaleDateString())
+                            }
+                            disabled={!validTourUser}
+                        />
+                    </Col>
                 </Row>
                 <Card>
                     <ErrorMessageAlert setErrorMessages={setErrorMessages} errorMessages={errorMessages} />
diff --git a/frontend/pages/admin/analysis/worked-hours.tsx b/frontend/pages/admin/analysis/worked-hours.tsx
index cb7f31eb..4dc965be 100644
--- a/frontend/pages/admin/analysis/worked-hours.tsx
+++ b/frontend/pages/admin/analysis/worked-hours.tsx
@@ -1,17 +1,17 @@
 import AdminHeader from "@/components/header/adminHeader";
-import React, {useEffect, useState} from "react";
-import {differenceInMinutes, startOfWeek, subMonths} from "date-fns";
-import {Card, Col, Container, Form, ListGroup, Row} from "react-bootstrap";
-import {datesEqual} from "@/lib/date";
-import {getWorkedHours} from "@/lib/analysis";
-import {getAllTours, Tour} from "@/lib/tour";
-import {getAllRegions, RegionInterface} from "@/lib/region";
-import {getFullName, getTourUsers, User} from "@/lib/user";
+import React, { useEffect, useState } from "react";
+import { differenceInMinutes, startOfWeek, subMonths } from "date-fns";
+import { Card, Col, Container, Form, ListGroup, Row } from "react-bootstrap";
+import { datesEqual } from "@/lib/date";
+import { getWorkedHours } from "@/lib/analysis";
+import { getAllTours, Tour } from "@/lib/tour";
+import { getAllRegions, RegionInterface } from "@/lib/region";
+import { getFullName, getTourUsers, User } from "@/lib/user";
 import ErrorMessageAlert from "@/components/errorMessageAlert";
-import {getAllStudentOnTourFromDate, StudentOnTour, StudentOnTourStringDate} from "@/lib/student-on-tour";
-import {WorkedHours} from "@/types";
-import {handleError} from "@/lib/error";
-import {withAuthorisation} from "@/components/withAuthorisation";
+import { getAllStudentOnTourFromDate, StudentOnTour, StudentOnTourStringDate } from "@/lib/student-on-tour";
+import { WorkedHours } from "@/types";
+import { handleError } from "@/lib/error";
+import { withAuthorisation } from "@/components/withAuthorisation";
 import Select from "react-select";
 import Masonry from "@mui/lab/Masonry";
 import Link from "next/link";
@@ -58,8 +58,7 @@ function AdminAnalysisWorkingHours() {
                 const tours: Tour[] = res.data;
                 setAllTours(tours);
             },
-            () => {
-            }
+            () => {}
         );
 
         getAllRegions().then(
@@ -67,8 +66,7 @@ function AdminAnalysisWorkingHours() {
                 const regions: RegionInterface[] = res.data;
                 setAllRegions(regions);
             },
-            () => {
-            }
+            () => {}
         );
 
         getTourUsers(true).then(
@@ -76,8 +74,7 @@ function AdminAnalysisWorkingHours() {
                 const users: User[] = res.data;
                 setAllUsers(users);
             },
-            () => {
-            }
+            () => {}
         );
     }, []);
 
@@ -92,7 +89,7 @@ function AdminAnalysisWorkingHours() {
             },
             (err) => setErrorMessages(handleError(err))
         );
-        getAllStudentOnTourFromDate({startDate, endDate}).then(
+        getAllStudentOnTourFromDate({ startDate, endDate }).then(
             (res) => {
                 const sots: StudentOnTourStringDate[] = res.data;
                 setStudentOnTours(
@@ -175,18 +172,18 @@ function AdminAnalysisWorkingHours() {
 
     return (
         <div className="tablepageContainer">
-            <AdminHeader/>
+            <AdminHeader />
             <div className="tableContainer">
                 <Container>
                     <label className="title">Overzicht gewerkte uren</label>
-                    <ErrorMessageAlert errorMessages={errorMessages} setErrorMessages={setErrorMessages}/>
+                    <ErrorMessageAlert errorMessages={errorMessages} setErrorMessages={setErrorMessages} />
                     <Card>
                         <Form className="m-2">
                             <Row>
                                 <Form.Group as={Col} sm={12} md={3} lg={3}>
                                     <Form.Label>Sorteer op:</Form.Label>
                                     <Select
-                                        value={{value: sortType.toString(), label: sortType.toString()}}
+                                        value={{ value: sortType.toString(), label: sortType.toString() }}
                                         isClearable={false}
                                         isSearchable={false}
                                         options={Object.values(sortBy).map((t) => {
@@ -208,13 +205,13 @@ function AdminAnalysisWorkingHours() {
                                     <Select
                                         value={
                                             filteredRegion
-                                                ? {value: filteredRegion.id, label: filteredRegion.region}
-                                                : {value: -1, label: "Alle regio's"}
+                                                ? { value: filteredRegion.id, label: filteredRegion.region }
+                                                : { value: -1, label: "Alle regio's" }
                                         }
                                         isClearable={false}
                                         isSearchable={false}
                                         options={[
-                                            {value: -1, label: "Alle regio's"},
+                                            { value: -1, label: "Alle regio's" },
                                             ...allRegions.map((r) => {
                                                 return {
                                                     value: r.id,
@@ -235,7 +232,7 @@ function AdminAnalysisWorkingHours() {
                                 </Form.Group>
                                 <Form.Group as={Col} sm={12} md={3} lg={3}>
                                     <Form.Label>Periode:</Form.Label>
-                                    <div style={{maxWidth: '150px'}}>
+                                    <div style={{ maxWidth: "150px" }}>
                                         <LocaleDateRangePicker
                                             startDate={startDate}
                                             setStartDate={setStartDate}
@@ -247,8 +244,8 @@ function AdminAnalysisWorkingHours() {
                             </Row>
                         </Form>
                     </Card>
-                    <br/>
-                    <Masonry columns={{xs: 1, sm: 2, md: 3, lg: 4}} spacing={2}>
+                    <br />
+                    <Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} spacing={2}>
                         {workedHours.map((worked) => {
                             const name: string = getStudentName(worked.student_id);
                             const time: string = toHoursAndMinutes(worked.worked_minutes);
@@ -257,17 +254,17 @@ function AdminAnalysisWorkingHours() {
                                     <Card className="card">
                                         <Card.Body>
                                             <label className="subtitle">{name}</label>
-                                            <Card.Text className="text-muted mt-1" style={{paddingLeft: "10px"}}>
+                                            <Card.Text className="text-muted mt-1" style={{ paddingLeft: "10px" }}>
                                                 {time}
                                             </Card.Text>
                                             <ListGroup className="list-group-flush">
-                                                <ListGroup.Item/>
+                                                <ListGroup.Item />
                                                 {worked.student_on_tour_ids.map((s, index) => {
                                                     const sot: StudentOnTour | undefined = studentOnTours.find(
                                                         (st) => st.id === s
                                                     );
                                                     if (!sot) {
-                                                        return <div key={index}/>;
+                                                        return <div key={index} />;
                                                     }
                                                     return (
                                                         <ListGroup.Item key={index}>

From f11df0123a6116452faf794a4a8dc192ba9606a5 Mon Sep 17 00:00:00 2001
From: Emma N <neirinck.emma@gmail.com>
Date: Sun, 21 May 2023 19:41:42 +0200
Subject: [PATCH 5/8] table responsive

---
 frontend/pages/admin/analysis/tour.tsx | 2 +-
 frontend/pages/admin/dashboard.tsx     | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/admin/analysis/tour.tsx b/frontend/pages/admin/analysis/tour.tsx
index 3fd983bf..13ace237 100644
--- a/frontend/pages/admin/analysis/tour.tsx
+++ b/frontend/pages/admin/analysis/tour.tsx
@@ -494,7 +494,7 @@ function AdminTour() {
                             <Col xs={12} md={9}>
                                 <p className="title" />
                                 <div className="padding">
-                                    <Table className="table">
+                                    <Table responsive className="table">
                                         <thead>
                                             <tr>
                                                 <th>Gebouw</th>
diff --git a/frontend/pages/admin/dashboard.tsx b/frontend/pages/admin/dashboard.tsx
index d7f2f980..ab51c79c 100644
--- a/frontend/pages/admin/dashboard.tsx
+++ b/frontend/pages/admin/dashboard.tsx
@@ -19,7 +19,6 @@ import { getAllRemarksOfStudentOnTour } from "@/lib/remark-at-building";
 import Box from "@mui/material/Box";
 import CheckIcon from "@mui/icons-material/Check";
 import { handleError } from "@/lib/error";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import ErrorMessageAlert from "@/components/errorMessageAlert";
 import { Divider, Tooltip } from "@mui/material";
 import { Card, Container, Table } from "react-bootstrap";
@@ -296,7 +295,7 @@ function AdminDashboard() {
                                     {completedStudentOnTours.length > 0 ? (
                                         <>
                                             <label className="subtitle">Voltooid</label>
-                                            <Table responsive className="table">
+                                            <Table responsive className="table"  style={{overflow: 'auto'}}>
                                                 <thead>
                                                     <tr>
                                                         <th>Ronde</th>
@@ -359,7 +358,7 @@ function AdminDashboard() {
                                     {startedStudentOnTours.length > 0 ? (
                                         <>
                                             <label className="subtitle">Bezig</label>
-                                            <Table className="table">
+                                            <Table responsive className="table">
                                                 <thead>
                                                     <tr>
                                                         <th>Ronde</th>
@@ -417,7 +416,7 @@ function AdminDashboard() {
                                     {notYetStartedStudentOnTours.length > 0 ? (
                                         <>
                                             <label className="subtitle">Nog niet gestarte rondes</label>
-                                            <Table className="table">
+                                            <Table responsive className="table">
                                                 <thead>
                                                     <tr>
                                                         <th>Ronde</th>

From 0d23864055d7f96f9d3e8a6c6b6d3eceea699c2e Mon Sep 17 00:00:00 2001
From: Emma N <neirinck.emma@gmail.com>
Date: Sun, 21 May 2023 19:47:10 +0200
Subject: [PATCH 6/8] garbage autocomplete styling fix

---
 frontend/pages/admin/data/garbage-collection/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/admin/data/garbage-collection/index.tsx b/frontend/pages/admin/data/garbage-collection/index.tsx
index c988cf9d..b627f422 100644
--- a/frontend/pages/admin/data/garbage-collection/index.tsx
+++ b/frontend/pages/admin/data/garbage-collection/index.tsx
@@ -461,8 +461,8 @@ function GarbageCollectionSchedule() {
                         </Col>
                         <Col md={6} style={{ alignItems: "center" }}>
                             <Row>
-                                <Col md={5}>
-                                    <div style={{ display: "flex" }}>
+                                <Col md={6}>
+                                    <div>
                                         <BuildingAutocomplete
                                             initialId={0}
                                             setObjectId={setSearchedBuilding}
@@ -470,7 +470,7 @@ function GarbageCollectionSchedule() {
                                         />
                                     </div>
                                 </Col>
-                                <Col md={5}>
+                                <Col md={6}>
                                     <div>
                                         <TourAutocomplete initialId={0} setObjectId={setSearchedTour} />
                                     </div>

From 20a7e3b7769675ea5467d27fa1d9cfd8493599c9 Mon Sep 17 00:00:00 2001
From: Emma N <neirinck.emma@gmail.com>
Date: Sun, 21 May 2023 20:09:10 +0200
Subject: [PATCH 7/8] responsive communication

---
 frontend/pages/admin/communication.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/admin/communication.tsx b/frontend/pages/admin/communication.tsx
index 676307bb..5002fb56 100644
--- a/frontend/pages/admin/communication.tsx
+++ b/frontend/pages/admin/communication.tsx
@@ -135,7 +135,7 @@ function AdminCommunication() {
                 <p className="title">Communicatie extern</p>
                 <div>
                     <Row style={{paddingBottom: '20px'}}>
-                        <Col>
+                        <Col sm={12} md={4}>
                             <div>
                                 <TemplateAutocomplete
                                     initialId={templateId}
@@ -144,7 +144,7 @@ function AdminCommunication() {
                                 />
                             </div>
                         </Col>
-                        <Col>
+                        <Col sm={12} md={4}>
                             <div>
                                 <UserAutoComplete
                                     initialId={userId}
@@ -153,7 +153,6 @@ function AdminCommunication() {
                                 />
                             </div>
                         </Col>
-
                         <Col style={{display: 'flex', alignItems: 'end', justifyContent: 'end'}}>
                             <div className="padding">
                                 <Button

From 52f893c2393796e911b83b763ac059fd2211f99f Mon Sep 17 00:00:00 2001
From: emneirin <emneirin@users.noreply.github.com>
Date: Sun, 21 May 2023 18:09:54 +0000
Subject: [PATCH 8/8] Auto formatted code

---
 frontend/pages/admin/communication.tsx | 44 ++++++++++++--------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/frontend/pages/admin/communication.tsx b/frontend/pages/admin/communication.tsx
index 5002fb56..0b209795 100644
--- a/frontend/pages/admin/communication.tsx
+++ b/frontend/pages/admin/communication.tsx
@@ -1,18 +1,17 @@
 import AdminHeader from "@/components/header/adminHeader";
-import {EmailTemplate, getAllEmailTemplates} from "@/lib/email-template";
-import {ChangeEvent, useEffect, useState} from "react";
-import {Button, Col, Container, Form, Row} from "react-bootstrap";
+import { EmailTemplate, getAllEmailTemplates } from "@/lib/email-template";
+import { ChangeEvent, useEffect, useState } from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
 import TemplateAutocomplete from "@/components/autocompleteComponents/templateAutocomplete";
-import {BuildingInterface, getAllBuildings} from "@/lib/building";
-import {getAllUsers, User} from "@/lib/user";
+import { BuildingInterface, getAllBuildings } from "@/lib/building";
+import { getAllUsers, User } from "@/lib/user";
 import UserAutoComplete from "@/components/autocompleteComponents/userAutocomplete";
-import {useRouter} from "next/router";
-import {withAuthorisation} from "@/components/withAuthorisation";
-import {Send} from "@mui/icons-material";
-import {handleError} from "@/lib/error";
+import { useRouter } from "next/router";
+import { withAuthorisation } from "@/components/withAuthorisation";
+import { Send } from "@mui/icons-material";
+import { handleError } from "@/lib/error";
 
-interface ParsedUrlQuery {
-}
+interface ParsedUrlQuery {}
 
 interface DataCommunicationQuery extends ParsedUrlQuery {
     template?: number;
@@ -55,7 +54,7 @@ function AdminCommunication() {
     async function routeToBuildings(syndicId: number) {
         await router.push({
             pathname: `data/buildings/`,
-            query: {syndic: selectedUser?.email},
+            query: { syndic: selectedUser?.email },
         });
     }
 
@@ -130,11 +129,11 @@ function AdminCommunication() {
 
     return (
         <>
-            <AdminHeader/>
+            <AdminHeader />
             <Container>
                 <p className="title">Communicatie extern</p>
                 <div>
-                    <Row style={{paddingBottom: '20px'}}>
+                    <Row style={{ paddingBottom: "20px" }}>
                         <Col sm={12} md={4}>
                             <div>
                                 <TemplateAutocomplete
@@ -146,17 +145,13 @@ function AdminCommunication() {
                         </Col>
                         <Col sm={12} md={4}>
                             <div>
-                                <UserAutoComplete
-                                    initialId={userId}
-                                    setObjectId={setUserId}
-                                    required={false}
-                                />
+                                <UserAutoComplete initialId={userId} setObjectId={setUserId} required={false} />
                             </div>
                         </Col>
-                        <Col style={{display: 'flex', alignItems: 'end', justifyContent: 'end'}}>
+                        <Col style={{ display: "flex", alignItems: "end", justifyContent: "end" }}>
                             <div className="padding">
                                 <Button
-                                    style={{height: '50px'}}
+                                    style={{ height: "50px" }}
                                     className="button"
                                     onClick={() => {
                                         if (userId) {
@@ -190,7 +185,9 @@ function AdminCommunication() {
                         <Col>
                             <div className="padding mt-auto">
                                 <Button
-                                    href={`mailto:${getSelectedUserMail()}?body=${encodeURIComponent(updatedTemplateText)}`}
+                                    href={`mailto:${getSelectedUserMail()}?body=${encodeURIComponent(
+                                        updatedTemplateText
+                                    )}`}
                                     className="wide_button"
                                     size="lg"
                                     style={{
@@ -199,12 +196,11 @@ function AdminCommunication() {
                                     }}
                                 >
                                     Verstuur mail
-                                    <Send style={{height: "10px", paddingLeft: "10px", marginRight: "0.5em"}}/>
+                                    <Send style={{ height: "10px", paddingLeft: "10px", marginRight: "0.5em" }} />
                                 </Button>
                             </div>
                         </Col>
                     </Row>
-
                 </div>
             </Container>
         </>