From cf36ff2f5ac0d5168d61735cfa742370f33e59f7 Mon Sep 17 00:00:00 2001
From: Sander Leeffers <s.leeffers@agrifirm.com>
Date: Mon, 11 May 2020 16:25:16 +0200
Subject: [PATCH 1/5] Settings

---
 src/App.tsx                         | 168 ++++++++++------------------
 src/navigation/header.component.tsx |   4 +-
 src/settings/Settings.component.tsx |  71 ++++++++++++
 3 files changed, 134 insertions(+), 109 deletions(-)
 create mode 100644 src/settings/Settings.component.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f70433d..19733c2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import { CssBaseline, Snackbar, Typography } from "@material-ui/core";
+import { CssBaseline, Snackbar } from "@material-ui/core";
 
-import {
-    makeStyles,
-    ThemeProvider,
-    createMuiTheme,
-} from "@material-ui/core/styles";
+import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 
 import firebase from "./firebase/firebase.component";
 
@@ -18,6 +14,7 @@ import HoursContainer from "./hours/hours-container/HoursContainer.component";
 import PreLoad from "./navigation/pre-load/preLoad.component";
 import Admin from "./admin/Admin.component";
 import AdminDetail from "./admin/detail/Detail.component";
+import Settings from "./settings/Settings.component";
 
 require("dotenv").config();
 
@@ -32,31 +29,7 @@ const theme = createMuiTheme({
     },
 });
 
-const useStyles = makeStyles((theme) => ({
-    root: {},
-    menuButton: {
-        marginRight: 36,
-    },
-    hide: {
-        display: "none",
-    },
-    toolbar: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: theme.spacing(0, 1),
-        ...theme.mixins.toolbar,
-    },
-    content: {
-        flexGrow: 1,
-    },
-    title: {
-        margin: theme.spacing(1, 1),
-    },
-}));
-
 export default function App() {
-    const classes = useStyles();
     const [profile, setProfile] = React.useState<IProfile>({
         displayName: "",
         email: "",
@@ -156,88 +129,69 @@ export default function App() {
 
     return (
         <ThemeProvider theme={theme}>
-            <div className={classes.root}>
-                {isLoading ? (
-                    <PreLoad />
-                ) : (
-                    <Router>
-                        <CssBaseline />
-                        <Header profile={profile} />
-                        <Switch>
-                            <Route
-                                path="/"
-                                exact
-                                component={() => (
-                                    <HoursContainer
-                                        profile={profile}
-                                        type="month"
-                                        notification={notification}
-                                    />
-                                )}
-                            />
-                            <Route path="/template">
-                                <TemplateHeader classes={classes} />
+            {isLoading ? (
+                <PreLoad />
+            ) : (
+                <Router>
+                    <CssBaseline />
+                    <Header profile={profile} />
+                    <Switch>
+                        <Route
+                            path="/"
+                            exact
+                            component={() => (
                                 <HoursContainer
-                                    type="template"
                                     profile={profile}
+                                    type="month"
                                     notification={notification}
                                 />
-                            </Route>
-                            {profile.isAdmin && (
-                                <>
-                                    <Route
-                                        path="/admin"
-                                        exact
-                                        component={() => (
-                                            <Admin
-                                                notification={notification}
-                                            />
-                                        )}
-                                    />
-                                    <Route
-                                        path="/admin/detail/:id"
-                                        component={() => (
-                                            <AdminDetail
-                                                notification={notification}
-                                            />
-                                        )}
-                                    />
-                                </>
                             )}
-                        </Switch>
-                        <Snackbar
-                            open={notificationMessage !== ""}
-                            autoHideDuration={6000}
-                            onClose={closeNotification}
-                            message={notificationMessage}
-                            anchorOrigin={{
-                                vertical: "bottom",
-                                horizontal: "right",
-                            }}
-                        ></Snackbar>
-                    </Router>
-                )}
-
-                <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
-
-                <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-analytics.js"></script>
-
-                <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-auth.js"></script>
-                <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
-            </div>
+                        />
+                        <Route path="/settings">
+                            <Settings
+                                profile={profile}
+                                notification={notification}
+                            />
+                        </Route>
+                        {profile.isAdmin && (
+                            <>
+                                <Route
+                                    path="/admin"
+                                    exact
+                                    component={() => (
+                                        <Admin notification={notification} />
+                                    )}
+                                />
+                                <Route
+                                    path="/admin/detail/:id"
+                                    component={() => (
+                                        <AdminDetail
+                                            notification={notification}
+                                        />
+                                    )}
+                                />
+                            </>
+                        )}
+                    </Switch>
+                    <Snackbar
+                        open={notificationMessage !== ""}
+                        autoHideDuration={6000}
+                        onClose={closeNotification}
+                        message={notificationMessage}
+                        anchorOrigin={{
+                            vertical: "bottom",
+                            horizontal: "right",
+                        }}
+                    ></Snackbar>
+                </Router>
+            )}
+
+            <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
+
+            <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-analytics.js"></script>
+
+            <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-auth.js"></script>
+            <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
         </ThemeProvider>
     );
 }
-
-const TemplateHeader = ({ classes }: { classes: any }) => (
-    <>
-        <Typography variant="body1" className={classes.title}>
-            Maak hier een template voor je gemiddelde werkweek. Pas het template
-            toe op de hele urenstaat met een klik op de knop.
-        </Typography>
-
-        <Typography variant="body2" className={classes.title}>
-            Uren die je al hebt ingevuld worden niet overschreven.
-        </Typography>
-    </>
-);
diff --git a/src/navigation/header.component.tsx b/src/navigation/header.component.tsx
index 4f32f31..5d6829a 100644
--- a/src/navigation/header.component.tsx
+++ b/src/navigation/header.component.tsx
@@ -61,10 +61,10 @@ export default function Header({ profile }: IProps) {
                     <Button
                         component={NavLink}
                         color="inherit"
-                        to="/template"
+                        to="/settings"
                         activeClassName={classes.highlight}
                     >
-                        Template
+                        Instellingen
                     </Button>
                     {profile.isAdmin && (
                         <Button
diff --git a/src/settings/Settings.component.tsx b/src/settings/Settings.component.tsx
new file mode 100644
index 0000000..40f1e45
--- /dev/null
+++ b/src/settings/Settings.component.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { TextField, Typography } from "@material-ui/core/";
+
+import HoursContainer from "../hours/hours-container/HoursContainer.component";
+
+import IProfile from "../common/interfaces/IProfile";
+
+const useStyles = makeStyles((theme) => ({
+    spacing: {
+        margin: theme.spacing(1, 1),
+    },
+    menuButton: {
+        marginRight: 36,
+    },
+    hide: {
+        display: "none",
+    },
+    toolbar: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.spacing(0, 1),
+        ...theme.mixins.toolbar,
+    },
+    content: {
+        flexGrow: 1,
+    },
+    text: {
+        margin: theme.spacing(1, 0),
+    },
+}));
+
+interface IProps {
+    profile: IProfile;
+    notification: any;
+}
+
+export default function Settings({ profile, notification }: IProps) {
+    const classes = useStyles();
+
+    return (
+        <>
+            <div className={classes.spacing}>
+                <Typography variant="h4">Instellingen</Typography>
+                <Typography variant="body1">Hoeveel uren werk jij?</Typography>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="hoursPerWeek"
+                    label="Aantal uren per week"
+                    type="number"
+                />
+                <Typography variant="h5">Template</Typography>
+                <Typography variant="body1" className={classes.text}>
+                    Maak hier een template voor je gemiddelde werkweek. Pas het
+                    template toe op de hele urenstaat met een klik op de knop.
+                </Typography>
+
+                <Typography variant="body2" className={classes.text}>
+                    Uren die je al hebt ingevuld worden niet overschreven.
+                </Typography>
+            </div>
+            <HoursContainer
+                type="template"
+                profile={profile}
+                notification={notification}
+            />
+        </>
+    );
+}

From 91bf4c1cd32571a7b70165fea429ef29958fc940 Mon Sep 17 00:00:00 2001
From: Sander Leeffers <s.leeffers@agrifirm.com>
Date: Tue, 19 May 2020 15:16:44 +0200
Subject: [PATCH 2/5] spacing

---
 src/settings/Settings.component.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/settings/Settings.component.tsx b/src/settings/Settings.component.tsx
index 40f1e45..395c86c 100644
--- a/src/settings/Settings.component.tsx
+++ b/src/settings/Settings.component.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
     content: {
         flexGrow: 1,
     },
-    text: {
+    textSpacing: {
         margin: theme.spacing(1, 0),
     },
 }));
@@ -42,23 +42,23 @@ export default function Settings({ profile, notification }: IProps) {
     return (
         <>
             <div className={classes.spacing}>
-                <Typography variant="h4">Instellingen</Typography>
-                <Typography variant="body1">Hoeveel uren werk jij?</Typography>
+                <Typography variant="h4" className={classes.textSpacing}>
+                    Instellingen
+                </Typography>
+                <Typography variant="body2">
+                    Hoeveel uren werk jij in de week?
+                </Typography>
                 <TextField
                     autoFocus
                     margin="dense"
                     id="hoursPerWeek"
-                    label="Aantal uren per week"
+                    label="Aantal uren (bijv. 40)"
                     type="number"
                 />
-                <Typography variant="h5">Template</Typography>
-                <Typography variant="body1" className={classes.text}>
-                    Maak hier een template voor je gemiddelde werkweek. Pas het
-                    template toe op de hele urenstaat met een klik op de knop.
-                </Typography>
 
-                <Typography variant="body2" className={classes.text}>
-                    Uren die je al hebt ingevuld worden niet overschreven.
+                <Typography variant="body2" className={classes.textSpacing}>
+                    Hieronder zie een je een template van een werkweek. Vul deze
+                    in en je kan hem voor elke maand als basis gebruiken.
                 </Typography>
             </div>
             <HoursContainer

From 0dc6363a1456014780821798504cb62c6fa45d60 Mon Sep 17 00:00:00 2001
From: Sander Leeffers <s.leeffers@agrifirm.com>
Date: Thu, 4 Jun 2020 16:21:31 +0200
Subject: [PATCH 3/5] settings

---
 build/index.html                              | 139 +++++++++++++++++-
 src/App.tsx                                   |  49 +++---
 src/admin/detail/Detail.component.tsx         |   1 +
 src/common/interfaces/IProfile.tsx            |   1 +
 src/firebase/data/Profile.tsx                 |  36 +++++
 .../HoursContainer.component.tsx              |   5 +-
 src/settings/Settings.component.tsx           |  20 ++-
 7 files changed, 225 insertions(+), 26 deletions(-)
 create mode 100644 src/firebase/data/Profile.tsx

diff --git a/build/index.html b/build/index.html
index ea56627..c5f0a2e 100644
--- a/build/index.html
+++ b/build/index.html
@@ -1 +1,138 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><title>CODEZILLA hours</title><link href="/static/css/main.c6592230.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],f=r[2],p=0,s=[];p<i.length;p++)l=i[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonpcodezilla-hours"]=this["webpackJsonpcodezilla-hours"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var c=a;t()}([])</script><script src="/static/js/2.0744c8ea.chunk.js"></script><script src="/static/js/main.90912754.chunk.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+            name="description"
+            content="Web site created using create-react-app"
+        />
+        <link rel="apple-touch-icon" href="/logo192.png" />
+        <link rel="manifest" href="/manifest.json" />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+        />
+        <title>CODEZILLA hours</title>
+        <link href="/static/css/main.c6592230.chunk.css" rel="stylesheet" />
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script>
+            !(function (e) {
+                function r(r) {
+                    for (
+                        var n, l, i = r[0], a = r[1], f = r[2], p = 0, s = [];
+                        p < i.length;
+                        p++
+                    )
+                        (l = i[p]),
+                            Object.prototype.hasOwnProperty.call(o, l) &&
+                                o[l] &&
+                                s.push(o[l][0]),
+                            (o[l] = 0);
+                    for (n in a)
+                        Object.prototype.hasOwnProperty.call(a, n) &&
+                            (e[n] = a[n]);
+                    for (c && c(r); s.length; ) s.shift()();
+                    return u.push.apply(u, f || []), t();
+                }
+                function t() {
+                    for (var e, r = 0; r < u.length; r++) {
+                        for (var t = u[r], n = !0, i = 1; i < t.length; i++) {
+                            var a = t[i];
+                            0 !== o[a] && (n = !1);
+                        }
+                        n && (u.splice(r--, 1), (e = l((l.s = t[0]))));
+                    }
+                    return e;
+                }
+                var n = {},
+                    o = { 1: 0 },
+                    u = [];
+                function l(r) {
+                    if (n[r]) return n[r].exports;
+                    var t = (n[r] = { i: r, l: !1, exports: {} });
+                    return (
+                        e[r].call(t.exports, t, t.exports, l),
+                        (t.l = !0),
+                        t.exports
+                    );
+                }
+                (l.m = e),
+                    (l.c = n),
+                    (l.d = function (e, r, t) {
+                        l.o(e, r) ||
+                            Object.defineProperty(e, r, {
+                                enumerable: !0,
+                                get: t,
+                            });
+                    }),
+                    (l.r = function (e) {
+                        "undefined" != typeof Symbol &&
+                            Symbol.toStringTag &&
+                            Object.defineProperty(e, Symbol.toStringTag, {
+                                value: "Module",
+                            }),
+                            Object.defineProperty(e, "__esModule", {
+                                value: !0,
+                            });
+                    }),
+                    (l.t = function (e, r) {
+                        if ((1 & r && (e = l(e)), 8 & r)) return e;
+                        if (4 & r && "object" == typeof e && e && e.__esModule)
+                            return e;
+                        var t = Object.create(null);
+                        if (
+                            (l.r(t),
+                            Object.defineProperty(t, "default", {
+                                enumerable: !0,
+                                value: e,
+                            }),
+                            2 & r && "string" != typeof e)
+                        )
+                            for (var n in e)
+                                l.d(
+                                    t,
+                                    n,
+                                    function (r) {
+                                        return e[r];
+                                    }.bind(null, n),
+                                );
+                        return t;
+                    }),
+                    (l.n = function (e) {
+                        var r =
+                            e && e.__esModule
+                                ? function () {
+                                      return e.default;
+                                  }
+                                : function () {
+                                      return e;
+                                  };
+                        return l.d(r, "a", r), r;
+                    }),
+                    (l.o = function (e, r) {
+                        return Object.prototype.hasOwnProperty.call(e, r);
+                    }),
+                    (l.p = "/");
+                var i = (this["webpackJsonpcodezilla-hours"] =
+                        this["webpackJsonpcodezilla-hours"] || []),
+                    a = i.push.bind(i);
+                (i.push = r), (i = i.slice());
+                for (var f = 0; f < i.length; f++) r(i[f]);
+                var c = a;
+                t();
+            })([]);
+        </script>
+        <script src="/static/js/2.0744c8ea.chunk.js"></script>
+        <script src="/static/js/main.e5730233.chunk.js"></script>
+    </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
index 19733c2..2081525 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,8 @@ import Admin from "./admin/Admin.component";
 import AdminDetail from "./admin/detail/Detail.component";
 import Settings from "./settings/Settings.component";
 
+import Profile from "./firebase/data/Profile";
+
 require("dotenv").config();
 
 const theme = createMuiTheme({
@@ -33,6 +35,7 @@ export default function App() {
     const [profile, setProfile] = React.useState<IProfile>({
         displayName: "",
         email: "",
+        hoursPerWeek: "40",
         id: "",
         isAdmin: false,
         microsoftId: "",
@@ -84,26 +87,32 @@ export default function App() {
     }, []);
 
     const fetchProfile = async (user: IUser) => {
-        const db = firebase.firestore();
-        const snapshot = await db.collection("profile").get();
-        const response = snapshot.docs.find((doc) => {
-            return doc.data().microsoftId === user.uid;
-        });
-
-        if (!response) {
-            createNewProfile(user);
-            return;
-        }
-
-        const data = response.data();
-        setProfile({
-            id: response.id,
-            isAdmin: Boolean(data.isAdmin),
-            displayName: data.displayName,
-            email: data.email,
-            microsoftId: data.microsoftId,
-        });
-        setIsLoading(false);
+        Profile.getProfile(user.uid)
+            .then((response) => {
+                if (response && response?.docs.length > 0) {
+                    const doc = response.docs[0];
+                    const data = doc.data();
+                    if (data) {
+                        setProfile({
+                            displayName: data.displayName,
+                            email: data.email,
+                            hoursPerWeek: data.hoursPerWeek,
+                            id: doc.id,
+                            isAdmin: Boolean(data.isAdmin),
+                            microsoftId: data.microsoftId,
+                        });
+                        setIsLoading(false);
+                    }
+                } else {
+                    createNewProfile(user);
+                }
+            })
+            .catch((error) => {
+                notification(
+                    "Het is niet gelukt een profiel op te halen: " + error,
+                );
+                setIsLoading(false);
+            });
     };
 
     const createNewProfile = (user: IUser) => {
diff --git a/src/admin/detail/Detail.component.tsx b/src/admin/detail/Detail.component.tsx
index e679d6d..c0a91c9 100644
--- a/src/admin/detail/Detail.component.tsx
+++ b/src/admin/detail/Detail.component.tsx
@@ -39,6 +39,7 @@ export default function AdminDetail({ notification }: { notification: any }) {
         profile: {
             id: "",
             isAdmin: false,
+            hoursPerWeek: "40",
             microsoftId: "",
             displayName: "",
             email: "",
diff --git a/src/common/interfaces/IProfile.tsx b/src/common/interfaces/IProfile.tsx
index 51ec4d5..92aaa4f 100644
--- a/src/common/interfaces/IProfile.tsx
+++ b/src/common/interfaces/IProfile.tsx
@@ -1,6 +1,7 @@
 export default interface IProfile {
     displayName: string;
     email: string;
+    hoursPerWeek: string;
     id: string;
     isAdmin: boolean;
     microsoftId: string;
diff --git a/src/firebase/data/Profile.tsx b/src/firebase/data/Profile.tsx
new file mode 100644
index 0000000..e5b3178
--- /dev/null
+++ b/src/firebase/data/Profile.tsx
@@ -0,0 +1,36 @@
+import firebase from "../firebase.component";
+
+import IProfile from "../../common/interfaces/IProfile";
+
+export default {
+    async getProfile(microsoftId: string): Promise<any> {
+        const db = firebase.firestore();
+        return await db
+            .collection("profile")
+            .where("microsoftId", "==", microsoftId)
+            .get();
+    },
+
+    async updateProfile(document: IProfile): Promise<void> {
+        const db = firebase.firestore();
+        return await db
+            .collection("profile")
+            .doc(document.id)
+            .set({
+                displayName: this.transformToString(document.displayName),
+                email: this.transformToString(document.email),
+                hoursPerWeek: this.transformToString(document.hoursPerWeek),
+                isAdmin: Boolean(document.isAdmin),
+                microsoftId: this.transformToString(document.microsoftId),
+            });
+    },
+
+    async deleteProfile(documentId: string): Promise<void> {
+        const db = firebase.firestore();
+        return await db.collection("profile").doc(documentId).delete();
+    },
+
+    transformToString(value: any): string {
+        return value ? value : "";
+    },
+};
diff --git a/src/hours/hours-container/HoursContainer.component.tsx b/src/hours/hours-container/HoursContainer.component.tsx
index 3e8da63..7eb8b94 100644
--- a/src/hours/hours-container/HoursContainer.component.tsx
+++ b/src/hours/hours-container/HoursContainer.component.tsx
@@ -30,11 +30,12 @@ class HoursContainer extends Component<IProps> {
         project: "",
         profileId: "",
         profile: {
-            id: "",
             displayName: "",
-            microsoftId: "",
             email: "",
+            hoursPerWeek: "40",
+            id: "",
             isAdmin: false,
+            microsoftId: "",
         },
         saved: false,
         approved: false,
diff --git a/src/settings/Settings.component.tsx b/src/settings/Settings.component.tsx
index 395c86c..c9c0887 100644
--- a/src/settings/Settings.component.tsx
+++ b/src/settings/Settings.component.tsx
@@ -3,6 +3,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { TextField, Typography } from "@material-ui/core/";
 
 import HoursContainer from "../hours/hours-container/HoursContainer.component";
+import Profile from "../firebase/data/Profile";
 
 import IProfile from "../common/interfaces/IProfile";
 
@@ -38,6 +39,17 @@ interface IProps {
 
 export default function Settings({ profile, notification }: IProps) {
     const classes = useStyles();
+    const [hoursPerWeek, setHoursPerWeek] = React.useState(
+        profile.hoursPerWeek || "40",
+    );
+
+    React.useEffect(() => {
+        setHoursPerWeek(profile.hoursPerWeek);
+    }, [profile.hoursPerWeek]);
+
+    const save = (): void => {
+        Profile.updateProfile({ ...profile, hoursPerWeek: hoursPerWeek });
+    };
 
     return (
         <>
@@ -49,11 +61,13 @@ export default function Settings({ profile, notification }: IProps) {
                     Hoeveel uren werk jij in de week?
                 </Typography>
                 <TextField
-                    autoFocus
-                    margin="dense"
                     id="hoursPerWeek"
                     label="Aantal uren (bijv. 40)"
-                    type="number"
+                    value={hoursPerWeek}
+                    onChange={(event) => {
+                        setHoursPerWeek(event.target.value);
+                    }}
+                    onBlur={save}
                 />
 
                 <Typography variant="body2" className={classes.textSpacing}>

From c704072d4b8ccff1e3fd148bfefbcbe3ffaf94f1 Mon Sep 17 00:00:00 2001
From: Sander Leeffers <s.leeffers@agrifirm.com>
Date: Fri, 12 Feb 2021 15:46:39 +0100
Subject: [PATCH 4/5] Hours per week

---
 src/App.tsx                                   |  2 --
 src/admin/detail/Detail.component.tsx         |  1 -
 src/common/interfaces/IProfile.tsx            |  1 -
 src/firebase/data/Hours.tsx                   |  1 +
 src/firebase/data/Profile.tsx                 |  1 -
 src/hours/hours-cell/HoursCell.component.tsx  |  3 ++-
 .../HoursContainer.component.tsx              |  6 ++++-
 .../hours-header/HoursHeader.component.tsx    | 25 ++++++++++++++++++
 src/hours/hours-header/hoursHeader.test.js    |  6 ++++-
 src/hours/validation/Validators.tsx           |  4 ++-
 src/settings/Settings.component.tsx           | 26 +------------------
 11 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2081525..4da21c7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,6 @@ export default function App() {
     const [profile, setProfile] = React.useState<IProfile>({
         displayName: "",
         email: "",
-        hoursPerWeek: "40",
         id: "",
         isAdmin: false,
         microsoftId: "",
@@ -96,7 +95,6 @@ export default function App() {
                         setProfile({
                             displayName: data.displayName,
                             email: data.email,
-                            hoursPerWeek: data.hoursPerWeek,
                             id: doc.id,
                             isAdmin: Boolean(data.isAdmin),
                             microsoftId: data.microsoftId,
diff --git a/src/admin/detail/Detail.component.tsx b/src/admin/detail/Detail.component.tsx
index c0a91c9..e679d6d 100644
--- a/src/admin/detail/Detail.component.tsx
+++ b/src/admin/detail/Detail.component.tsx
@@ -39,7 +39,6 @@ export default function AdminDetail({ notification }: { notification: any }) {
         profile: {
             id: "",
             isAdmin: false,
-            hoursPerWeek: "40",
             microsoftId: "",
             displayName: "",
             email: "",
diff --git a/src/common/interfaces/IProfile.tsx b/src/common/interfaces/IProfile.tsx
index 92aaa4f..51ec4d5 100644
--- a/src/common/interfaces/IProfile.tsx
+++ b/src/common/interfaces/IProfile.tsx
@@ -1,7 +1,6 @@
 export default interface IProfile {
     displayName: string;
     email: string;
-    hoursPerWeek: string;
     id: string;
     isAdmin: boolean;
     microsoftId: string;
diff --git a/src/firebase/data/Hours.tsx b/src/firebase/data/Hours.tsx
index abe9365..43c2ac0 100644
--- a/src/firebase/data/Hours.tsx
+++ b/src/firebase/data/Hours.tsx
@@ -52,6 +52,7 @@ export default {
                 profile: document.profile,
                 profileId: this.transformToString(document.profileId),
                 project: this.transformToString(document.project),
+                hoursPerWeek: this.transformToString(document.hoursPerWeek),
                 year: this.transformToString(document.year),
                 month: this.transformToString(document.month),
                 approved: document.approved ? document.approved : false,
diff --git a/src/firebase/data/Profile.tsx b/src/firebase/data/Profile.tsx
index e5b3178..0641091 100644
--- a/src/firebase/data/Profile.tsx
+++ b/src/firebase/data/Profile.tsx
@@ -19,7 +19,6 @@ export default {
             .set({
                 displayName: this.transformToString(document.displayName),
                 email: this.transformToString(document.email),
-                hoursPerWeek: this.transformToString(document.hoursPerWeek),
                 isAdmin: Boolean(document.isAdmin),
                 microsoftId: this.transformToString(document.microsoftId),
             });
diff --git a/src/hours/hours-cell/HoursCell.component.tsx b/src/hours/hours-cell/HoursCell.component.tsx
index 316fa52..5dac89e 100644
--- a/src/hours/hours-cell/HoursCell.component.tsx
+++ b/src/hours/hours-cell/HoursCell.component.tsx
@@ -35,7 +35,8 @@ const HoursCell = ({
         setValue(row[column]);
     }, [row, column, days]);
 
-    const handleHoursInput = (value: string, column: string, day: number) => {
+    const handleHoursInput = (input: string, column: string, day: number) => {
+        const value = input.length ? Number(input).toFixed(0) : null;
         const daysInput = [...days];
         daysInput[day][column] = value;
         setValue(value);
diff --git a/src/hours/hours-container/HoursContainer.component.tsx b/src/hours/hours-container/HoursContainer.component.tsx
index 7eb8b94..7143970 100644
--- a/src/hours/hours-container/HoursContainer.component.tsx
+++ b/src/hours/hours-container/HoursContainer.component.tsx
@@ -28,11 +28,11 @@ class HoursContainer extends Component<IProps> {
         expandColumns: true,
         client: "",
         project: "",
+        hoursPerWeek: "40",
         profileId: "",
         profile: {
             displayName: "",
             email: "",
-            hoursPerWeek: "40",
             id: "",
             isAdmin: false,
             microsoftId: "",
@@ -288,6 +288,7 @@ class HoursContainer extends Component<IProps> {
             profile: this.state.profile,
             profileId: this.state.profileId,
             project: this.state.project,
+            hoursPerWeek: this.state.hoursPerWeek,
             year: this.state.year,
             month: this.state.month,
             approved: this.state.approved,
@@ -362,6 +363,7 @@ class HoursContainer extends Component<IProps> {
 
         const totalHoursValidation = Validators.validateTotalHoursOfMonth(
             this.state.days,
+            this.state.hoursPerWeek
         );
         if (totalHoursValidation) {
             validationMessages.push(totalHoursValidation);
@@ -407,8 +409,10 @@ class HoursContainer extends Component<IProps> {
             <form noValidate autoComplete="off">
                 <HoursHeader
                     handleInputChange={this.handleInputChange}
+                    validateHours={this.isValid}
                     client={this.state.client}
                     project={this.state.project}
+                    hoursPerWeek={this.state.hoursPerWeek}
                     expandColumns={this.state.expandColumns}
                     isTemplate={this.state.isTemplate}
                     applyTemplate={this.applyTemplate}
diff --git a/src/hours/hours-header/HoursHeader.component.tsx b/src/hours/hours-header/HoursHeader.component.tsx
index 888e5e4..e36d335 100644
--- a/src/hours/hours-header/HoursHeader.component.tsx
+++ b/src/hours/hours-header/HoursHeader.component.tsx
@@ -21,8 +21,10 @@ interface IProps {
     isTemplate: boolean;
     client: string;
     project: string;
+    hoursPerWeek: string;
     expandColumns: boolean;
     handleInputChange: any;
+    validateHours: any;
     applyTemplate: any;
     getReport: any;
     getCSV: Function;
@@ -58,8 +60,10 @@ const HoursHeader = ({
     isTemplate,
     client,
     project,
+    hoursPerWeek,
     expandColumns,
     handleInputChange,
+    validateHours,
     applyTemplate,
     getReport,
     getCSV,
@@ -91,8 +95,10 @@ const HoursHeader = ({
                 classes={classes}
                 client={client}
                 project={project}
+                hoursPerWeek={hoursPerWeek}
                 approved={approved}
                 handleInputChange={handleInputChange}
+                validateHours={validateHours}
             />
         );
     return (
@@ -139,8 +145,10 @@ const HoursHeader = ({
                 classes={classes}
                 client={client}
                 project={project}
+                hoursPerWeek={hoursPerWeek}
                 approved={approved}
                 handleInputChange={handleInputChange}
+                validateHours={validateHours}
             />
 
             {validationMessages?.length > 0 ? (
@@ -244,7 +252,9 @@ interface IClientAndProjectProps {
     classes: any;
     client: string;
     project: string;
+    hoursPerWeek: string;
     handleInputChange: any;
+    validateHours: any;
     approved: boolean;
 }
 
@@ -252,7 +262,9 @@ const ClientAndProject = ({
     classes,
     client,
     project,
+    hoursPerWeek,
     handleInputChange,
+    validateHours,
     approved,
 }: IClientAndProjectProps) => (
     <>
@@ -276,5 +288,18 @@ const ClientAndProject = ({
                 handleInputChange("project", event.target.value)
             }
         />
+        <TextField
+            className={classes.spacingLeft}
+            id="hoursPerWeek"
+            label="Uren per week"
+            value={hoursPerWeek}
+            disabled={approved}
+            onChange={(event) =>
+                handleInputChange("hoursPerWeek", event.target.value)
+            }
+            onBlur={(event) =>
+                validateHours("hoursPerWeek", event.target.value)
+            }
+        />
     </>
 );
diff --git a/src/hours/hours-header/hoursHeader.test.js b/src/hours/hours-header/hoursHeader.test.js
index 82bff91..de12135 100644
--- a/src/hours/hours-header/hoursHeader.test.js
+++ b/src/hours/hours-header/hoursHeader.test.js
@@ -30,6 +30,7 @@ describe("HoursHeader", () => {
                 handleInputChange={jest.fn()}
                 client={"Codezilla"}
                 project={"Hours"}
+                hoursPerWeek={"40"}
                 expandColumns
                 isTemplate={false}
                 applyTemplate={jest.fn()}
@@ -40,11 +41,13 @@ describe("HoursHeader", () => {
     it("should only render client and project on template", () => {
         const client = "Codezilla";
         const project = "Hours";
+        const hoursPerWeek = "40";
         const wrapper = mount(
             <HoursHeader
                 handleInputChange={jest.fn()}
                 client={client}
                 project={project}
+                hoursPerWeek={hoursPerWeek}
                 expandColumns
                 isTemplate
                 applyTemplate={jest.fn()}
@@ -52,7 +55,7 @@ describe("HoursHeader", () => {
         );
 
         const inputs = wrapper.find("input");
-        expect(inputs).toHaveLength(2);
+        expect(inputs).toHaveLength(3);
 
         const clientInput = inputs.find("#client");
         expect(clientInput.props().value).toEqual(client);
@@ -117,6 +120,7 @@ describe("HoursHeader", () => {
                 handleInputChange={jest.fn()}
                 client={"Codezilla"}
                 project={"Hours"}
+                hoursPerWeek={"40"}
                 expandColumns
                 isTemplate={false}
                 getReport={getReport}
diff --git a/src/hours/validation/Validators.tsx b/src/hours/validation/Validators.tsx
index 179027a..d20a4f7 100644
--- a/src/hours/validation/Validators.tsx
+++ b/src/hours/validation/Validators.tsx
@@ -18,7 +18,7 @@ export default {
         }
         return;
     },
-    validateTotalHoursOfMonth(days: IDay[]): string {
+    validateTotalHoursOfMonth(days: IDay[], hoursPerWeek: string): string {
         let userTotalHours = 0;
         let potentialTotalHours = 0;
         days.forEach((day: IDay) => {
@@ -29,6 +29,8 @@ export default {
             potentialTotalHours += 8;
         });
 
+        potentialTotalHours *= (Number(hoursPerWeek) / 40);
+
         if (userTotalHours < potentialTotalHours) {
             return (
                 "Er zijn te weinig uren (" +
diff --git a/src/settings/Settings.component.tsx b/src/settings/Settings.component.tsx
index c9c0887..b03c362 100644
--- a/src/settings/Settings.component.tsx
+++ b/src/settings/Settings.component.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { TextField, Typography } from "@material-ui/core/";
+import { Typography } from "@material-ui/core/";
 
 import HoursContainer from "../hours/hours-container/HoursContainer.component";
-import Profile from "../firebase/data/Profile";
 
 import IProfile from "../common/interfaces/IProfile";
 
@@ -39,17 +38,6 @@ interface IProps {
 
 export default function Settings({ profile, notification }: IProps) {
     const classes = useStyles();
-    const [hoursPerWeek, setHoursPerWeek] = React.useState(
-        profile.hoursPerWeek || "40",
-    );
-
-    React.useEffect(() => {
-        setHoursPerWeek(profile.hoursPerWeek);
-    }, [profile.hoursPerWeek]);
-
-    const save = (): void => {
-        Profile.updateProfile({ ...profile, hoursPerWeek: hoursPerWeek });
-    };
 
     return (
         <>
@@ -57,18 +45,6 @@ export default function Settings({ profile, notification }: IProps) {
                 <Typography variant="h4" className={classes.textSpacing}>
                     Instellingen
                 </Typography>
-                <Typography variant="body2">
-                    Hoeveel uren werk jij in de week?
-                </Typography>
-                <TextField
-                    id="hoursPerWeek"
-                    label="Aantal uren (bijv. 40)"
-                    value={hoursPerWeek}
-                    onChange={(event) => {
-                        setHoursPerWeek(event.target.value);
-                    }}
-                    onBlur={save}
-                />
 
                 <Typography variant="body2" className={classes.textSpacing}>
                     Hieronder zie een je een template van een werkweek. Vul deze

From d0c68f75aef3b542cccc614459b7d172176620bf Mon Sep 17 00:00:00 2001
From: Sander Leeffers <s.leeffers@agrifirm.com>
Date: Fri, 19 Mar 2021 15:13:36 +0100
Subject: [PATCH 5/5] fix test

---
 src/hours/hours-cell/HoursCell.component.tsx |  3 ++-
 src/hours/hours-grid/hoursGrid.test.js       | 12 ++++++------
 src/hours/hours.mock.js                      |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/hours/hours-cell/HoursCell.component.tsx b/src/hours/hours-cell/HoursCell.component.tsx
index 5dac89e..209fe42 100644
--- a/src/hours/hours-cell/HoursCell.component.tsx
+++ b/src/hours/hours-cell/HoursCell.component.tsx
@@ -36,7 +36,8 @@ const HoursCell = ({
     }, [row, column, days]);
 
     const handleHoursInput = (input: string, column: string, day: number) => {
-        const value = input.length ? Number(input).toFixed(0) : null;
+        let value = input ? Number(input).toFixed(0) : "";
+        value = value.toString();
         const daysInput = [...days];
         daysInput[day][column] = value;
         setValue(value);
diff --git a/src/hours/hours-grid/hoursGrid.test.js b/src/hours/hours-grid/hoursGrid.test.js
index 3204461..036d271 100644
--- a/src/hours/hours-grid/hoursGrid.test.js
+++ b/src/hours/hours-grid/hoursGrid.test.js
@@ -36,7 +36,7 @@ describe("HoursGrid", () => {
                 days={mockDays}
                 handleChange={() => {}}
                 save={() => {}}
-                isTemplate={false}
+                readOnly={false}
             />,
         );
         expect(wrapper).toMatchSnapshot();
@@ -49,7 +49,7 @@ describe("HoursGrid", () => {
                 days={mockDays}
                 handleChange={() => {}}
                 save={() => {}}
-                isTemplate={false}
+                readOnly={false}
             />,
         );
 
@@ -68,11 +68,11 @@ describe("HoursGrid", () => {
                 days={mockDays}
                 handleChange={onBlur}
                 save={() => {}}
-                isTemplate={false}
+                readOnly={false}
             />,
         );
         const explanations = wrapper.find("input");
-        explanations.first().simulate("blur", { target: { value: 8 } });
+        explanations.first().simulate("blur", { target: { value: "8" } });
 
         expect(onBlur).toHaveBeenCalledWith("days", mockDaysChanged);
     });
@@ -84,7 +84,7 @@ describe("HoursGrid", () => {
                 days={mockWeekend}
                 handleChange={() => {}}
                 save={() => {}}
-                isTemplate={false}
+                readOnly={false}
             />,
         );
 
@@ -99,7 +99,7 @@ describe("HoursGrid", () => {
                 days={mockWeekendTemplate}
                 handleChange={() => {}}
                 save={() => {}}
-                isTemplate
+                readOnly
             />,
         );
 
diff --git a/src/hours/hours.mock.js b/src/hours/hours.mock.js
index 0dff215..80fd629 100644
--- a/src/hours/hours.mock.js
+++ b/src/hours/hours.mock.js
@@ -80,7 +80,7 @@ export const mockDaysChanged = [
     {
         day: 1,
         date: new Date(2020, 3, 1),
-        worked: 8,
+        worked: "8",
         overtime: "",
         sick: "",
         holiday: "",