From 0df990483623eb2c04bdea35ebcf37ecc41bcf43 Mon Sep 17 00:00:00 2001
From: WT000 <55751558+WT000@users.noreply.github.com>
Date: Fri, 14 Apr 2023 20:12:09 +0100
Subject: [PATCH 1/6] Fix formatting on edit home

---
 src/components/forms/HomeForm/HomeForm.tsx    | 21 +++++++++++++++++--
 .../InstructionsLayout/InstructionsLayout.tsx |  2 +-
 src/pages/homes/[id]/index.tsx                |  4 ++--
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/HomeForm/HomeForm.tsx b/src/components/forms/HomeForm/HomeForm.tsx
index d94695f..9bf735a 100644
--- a/src/components/forms/HomeForm/HomeForm.tsx
+++ b/src/components/forms/HomeForm/HomeForm.tsx
@@ -7,7 +7,6 @@ import Tile, { TileType } from "../../Tile/Tile";
 import { useEffect, useState } from "react";
 import Role from "../../../lib/utils/roles";
 import PhotoInputLayout from "../../layouts/PhotoInputLayout/PhotoInputLayout";
-import ImageLayout from "../../layouts/ImageLayout/ImageLayout";
 
 export interface HomeFormData {
     name: string;
@@ -169,7 +168,7 @@ export default function HomeForm(props: HomeFormProps) {
 
             {/* Instructions */}
             {/* May need a custom size set on md: breakpoint */}
-            <Tile tileType={TileType.fill} customClass="row-span-3" clickable={false}>
+            <Tile tileType={TileType.fill} customClass="row-span-2" clickable={false}>
                 <InstructionsLayout
                     text=""
                     editable={true}
@@ -227,6 +226,24 @@ export default function HomeForm(props: HomeFormProps) {
                     errorMessage={"*Must be at least £0.01."}
                 />
             </Tile>
+            
+            {/* To be delegates list... */}
+            <Tile tileType={TileType.input} clickable={false}>
+                <InputLayout
+                    icon={<IoText size="32px" />}
+                    text={"Home Name"}
+                    type={"text"}
+                    name={"name"}
+                    placeholder={"My New Home..."}
+                    register={register}
+                    registerSettings={{
+                        required: true,
+                        minLength: 4,
+                    }}
+                    errors={errors.name}
+                    errorMessage={"*Must be at least 4 characters."}
+                />
+            </Tile>
 
             <div className="flex flex-row justify-around w-100 md:w-[368px]">
                 <Button
diff --git a/src/components/layouts/InstructionsLayout/InstructionsLayout.tsx b/src/components/layouts/InstructionsLayout/InstructionsLayout.tsx
index 95ab587..af616e1 100644
--- a/src/components/layouts/InstructionsLayout/InstructionsLayout.tsx
+++ b/src/components/layouts/InstructionsLayout/InstructionsLayout.tsx
@@ -20,7 +20,7 @@ function display(text: string, editable: boolean, register?: UseFormRegister<Hom
         }
         return (
             <textarea
-                className="h-32 placeholder:text-black text-xs w-full md:text-base bg-transparent
+                className="h-20 placeholder:text-black text-xs w-full md:text-base bg-transparent
                     file:border-none file:bg-transparent file:cursor-pointer resize-none"
                 name="energyInstructions"
                 placeholder={placeholder}
diff --git a/src/pages/homes/[id]/index.tsx b/src/pages/homes/[id]/index.tsx
index 06028f7..9bc9f68 100644
--- a/src/pages/homes/[id]/index.tsx
+++ b/src/pages/homes/[id]/index.tsx
@@ -141,7 +141,7 @@ export default function Index(props) {
                                 icon={<IoCreateSharp size="34px"/>}
                                 textLine1="Edit Home"
                                 textLine2="Details"></CompactLayout>} 
-                                clickable={true} onClick={() => console.log("clicked")}></Tile>
+                                clickable={true} onClick={() => router.push(`/homes/${props?.home?._id}/edit`)}></Tile>
                             <Tile tileType={TileType.link} 
                                 children={<CompactLayout 
                                 icon={<IoQrCode size="34px"/>}
@@ -190,7 +190,7 @@ export default function Index(props) {
                     <div className="mt-14 md:mt-0 md:w-[42%]">
                         <Subtitle text1="Delegates" showbar={true}/>
                         <div className="mt-3">                            
-                            <DelegatesList children={delegateItems} onClick={null}></DelegatesList>
+                            <DelegatesList children={delegateItems} onClick={() => router.push(`/homes/${props?.home?._id}/edit`)}></DelegatesList>
                             <Toaster></Toaster>
                             {/* TODO: Horizontal Infinite Scroll */}
                         </div>

From 3839063a79d69514a5184f0d06f4792046d9f47f Mon Sep 17 00:00:00 2001
From: WT000 <55751558+WT000@users.noreply.github.com>
Date: Fri, 14 Apr 2023 22:04:33 +0100
Subject: [PATCH 2/6] Delegate adding functionality

---
 src/components/forms/HomeForm/HomeForm.tsx | 38 ++++++---
 src/pages/api/home.ts                      | 91 +++++++++++++++++-----
 src/pages/homes/[id]/edit.tsx              | 11 ++-
 3 files changed, 109 insertions(+), 31 deletions(-)

diff --git a/src/components/forms/HomeForm/HomeForm.tsx b/src/components/forms/HomeForm/HomeForm.tsx
index 9bf735a..4466ab5 100644
--- a/src/components/forms/HomeForm/HomeForm.tsx
+++ b/src/components/forms/HomeForm/HomeForm.tsx
@@ -1,4 +1,4 @@
-import { IoBed, IoFlash, IoFootsteps, IoImages, IoPerson, IoSave, IoText, IoWallet, IoTrashBin } from "react-icons/io5";
+import { IoBed, IoFlash, IoPerson, IoSave, IoText, IoWallet, IoTrashBin, IoMail } from "react-icons/io5";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import Button from "../../Button/Button";
 import InputLayout from "../../layouts/InputLayout/InputLayout";
@@ -13,6 +13,7 @@ export interface HomeFormData {
     owner: string;
     description?: string;
     image?: string;
+    delegates?: string;
     numBeds: number;
     energyInstructions: string;
     energyTariff: number;
@@ -63,6 +64,24 @@ async function findUser(email: string, userFinder: (email: string) => Promise<bo
     return false;
 }
 
+async function checkEmails(emails: string, userFinder: (email: string) => Promise<boolean>) {
+    if (emails !== "" && typeof emails == "string") {
+        // Detect if inputted as email1,email2 or email1, email2
+        let delegateEmails;
+        if (emails.match(", ")) {
+            delegateEmails = Array.from(new Set(emails.split(", ")));
+        } else {
+            delegateEmails = Array.from(new Set(emails.split(",")));
+        }
+
+        // Map, forEach, etc seem to be very buggy with react-hook-form
+        for (let i=0; i<delegateEmails.length; i++) {
+            if (!await findUser(delegateEmails[i], userFinder)) return false;
+        }
+    }
+    return true;
+}
+
 export default function HomeForm(props: HomeFormProps) {
     const { onSubmit, onCancel, userFinder, isLoading, triggerReset, edit } = props;
 
@@ -230,18 +249,19 @@ export default function HomeForm(props: HomeFormProps) {
             {/* To be delegates list... */}
             <Tile tileType={TileType.input} clickable={false}>
                 <InputLayout
-                    icon={<IoText size="32px" />}
-                    text={"Home Name"}
+                    icon={<IoMail size="32px" />}
+                    text={"Delegate Emails"}
                     type={"text"}
-                    name={"name"}
-                    placeholder={"My New Home..."}
+                    name={"delegates"}
+                    placeholder={"abc@gmail.com, de@g..."}
                     register={register}
                     registerSettings={{
-                        required: true,
-                        minLength: 4,
+                        validate: {
+                            real: (emails) => checkEmails(emails, userFinder),
+                        },
                     }}
-                    errors={errors.name}
-                    errorMessage={"*Must be at least 4 characters."}
+                    errors={errors.delegates}
+                    errorMessage={"*Must be real and comma seperated."}
                 />
             </Tile>
 
diff --git a/src/pages/api/home.ts b/src/pages/api/home.ts
index 1be411d..95c47ab 100644
--- a/src/pages/api/home.ts
+++ b/src/pages/api/home.ts
@@ -7,6 +7,16 @@ import getRole from "../../lib/utils/getRole";
 import Role from "../../lib/utils/roles";
 import { countDecimal } from "../../components/forms/HomeForm/HomeForm";
 
+function getDelegateEmails(delegates) {
+    if (typeof delegates == "string" && delegates.match(", ")) {
+        return Array.from(new Set(delegates.split(", ")));
+    } else if (typeof delegates == "string") {
+        return Array.from(new Set(delegates.split(",")));
+    } else {
+        return delegates;
+    }
+}
+
 // Form error function, so database connections are not needed to check for simple errors
 function checkFormErrors(home, method): boolean {
     // Check name
@@ -22,6 +32,21 @@ function checkFormErrors(home, method): boolean {
     )
         return false;
 
+    // Check delegates
+    if (home.delegates) {
+        let delegateEmails = getDelegateEmails(home.delegates);
+
+        delegateEmails.forEach((email) => {
+            if (
+                !email.match(
+                    "[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
+                )
+            ) {
+                return false;
+            }
+        });
+    }
+
     // Check numBeds
     if (!home.numBeds || typeof home.numBeds !== "number" || home.numBeds <= 0 || !Number.isInteger(home.numBeds)) return false;
 
@@ -53,7 +78,9 @@ export default async function handler(req, res) {
         let valid;
         let role;
         let owner;
-        
+        let delegateEmails;
+        let delegates;
+
         switch (method) {
             case "POST":
                 if (getRole(session) != Role.Agency) {
@@ -67,20 +94,34 @@ export default async function handler(req, res) {
                     return res.status(400).json({ success: false });
                 }
 
+                owner = await User.findOne({ email: home.owner });
+                if (!owner) {
+                    return res.status(400).json({ success: false });
+                }
+                
                 console.log(`Creating home ${home.name}`);
                 
-                owner = await User.findOne({email: home.owner});
+                // Find unique delegate emails, where the email does not equal the home owners email
+                delegateEmails = getDelegateEmails(home.delegates);
+                delegates = await User.find({
+                    $and: [
+                        {email: { $ne: owner.email }},
+                        {email: { $in: delegateEmails }}
+                    ]
+                })
+
                 const newHome = await Home.create({
                     name: home.name,
                     owner: owner._id,
+                    delegates: delegates,
                     numBeds: home.numBeds,
                     energyInstructions: home.energyInstructions,
                     energyTariff: home.energyTariff,
                     energyBuffer: home.energyBuffer,
-                    image: home.image
-                })
+                    image: home.image,
+                });
 
-                return res.json({success: true, id: newHome._id});
+                return res.json({ success: true, id: newHome._id });
 
             case "PUT":
                 home = req.body;
@@ -90,51 +131,63 @@ export default async function handler(req, res) {
                     return res.status(400).json({ success: false });
                 }
 
-                homedb = await Home.findOne({_id: home._id});
+                homedb = await Home.findOne({ _id: home._id });
                 role = getRole(session, homedb);
-                
+
                 if (role != Role.Agency && role != Role.Homeowner) {
                     return res.status(401).json({ success: false });
                 }
 
+                owner = await User.findOne({ email: home.owner });
+                if (!owner) {
+                    return res.status(400).json({ success: false });
+                }
+
+                delegateEmails = getDelegateEmails(home.delegates);
+                delegates = await User.find({
+                    $and: [
+                        {email: { $ne: owner.email }},
+                        {email: { $in: delegateEmails }}
+                    ]
+                })
+
                 console.log(`Editing home ${homedb.name}`);
 
-                owner = await User.findOne({email: home.owner});
                 const editHome = await Home.findByIdAndUpdate(homedb._id, {
                     name: home.name,
                     owner: role == Role.Agency ? owner._id : homedb.owner,
+                    delegates: delegates,
                     numBeds: home.numBeds,
                     energyInstructions: home.energyInstructions,
                     energyTariff: home.energyTariff,
                     energyBuffer: home.energyBuffer,
-                    image: home.image
-                })
-                if (editHome) return res.json({success: true, id: homedb._id});
+                    image: home.image,
+                });
+                if (editHome) return res.json({ success: true, id: homedb._id });
                 break;
 
             case "DELETE":
                 if (getRole(session) != Role.Agency) {
                     return res.status(400).json({ success: false });
                 }
-            
+
                 const homeId = req.query.id;
-                homedb = await Home.findOne({_id: homeId});
-                
+                homedb = await Home.findOne({ _id: homeId });
+
                 if (!homedb) {
-                    return res.status(404).json({success: false});
+                    return res.status(404).json({ success: false });
                 }
 
                 console.log(`Deleting home ${homedb.name}`);
 
                 const homeDelete = await Home.findByIdAndUpdate(homedb._id, {
-                    isDeleted: true
+                    isDeleted: true,
                 });
-                if (homeDelete) return res.json({success: true});
+                if (homeDelete) return res.json({ success: true });
                 break;
         }
-        
+
         res.status(401).json({ success: false });
-    
     } catch (e) {
         console.log(e);
         res.status(500).json({ error: e.message });
diff --git a/src/pages/homes/[id]/edit.tsx b/src/pages/homes/[id]/edit.tsx
index b2f1262..b93515f 100644
--- a/src/pages/homes/[id]/edit.tsx
+++ b/src/pages/homes/[id]/edit.tsx
@@ -16,7 +16,12 @@ import axios from "axios";
 import User from "../../../db/models/User";
 
 export default function EditHome(props) {
-    const { userSession, home, role } = props;
+    const { userSession, homeJSON, role } = props;
+
+    // Parse a bit of JSON here, as delegate lists need their emails extracted
+    const home = JSON.parse(homeJSON);
+    home.owner = home.owner.email;
+    home.delegates = home.delegates.map(obj => obj.email).join(", ");
 
     const navItems = [
         {
@@ -121,7 +126,7 @@ export async function getServerSideProps(context) {
     const session = await getServerSession(context.req, context.res, authOptions);
 
     // Find the home to be edited
-    const home = await Home.findOne({_id: context.params.id}).populate("owner", "email", User);
+    const home = await Home.findOne({_id: context.params.id}).populate("owner", "email", User).populate("delegates", "-_id email", User);
     const role = getRole(session, home);
 
     if (role != Role.Agency && role != Role.Homeowner) {
@@ -169,7 +174,7 @@ export async function getServerSideProps(context) {
                     bookingsLast12Months: (await bookingsLast12MonthsTask).toString(),
                 },
                 homes: homes.map((x) => ToSeriable(x)),
-                home: ToSeriable(home, "email"),
+                homeJSON: JSON.stringify(home),
                 userSession: session,
                 role: role,
             },

From 7589e460bd92eb215e2f3806f4160bc92299bd14 Mon Sep 17 00:00:00 2001
From: WT000 <55751558+WT000@users.noreply.github.com>
Date: Fri, 14 Apr 2023 22:14:38 +0100
Subject: [PATCH 3/6] Tweaks to placeholders and font size

---
 src/components/forms/HomeForm/HomeForm.tsx         |  5 +++--
 src/components/layouts/InputLayout/InputLayout.tsx | 13 +++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/forms/HomeForm/HomeForm.tsx b/src/components/forms/HomeForm/HomeForm.tsx
index 4466ab5..1896802 100644
--- a/src/components/forms/HomeForm/HomeForm.tsx
+++ b/src/components/forms/HomeForm/HomeForm.tsx
@@ -246,14 +246,14 @@ export default function HomeForm(props: HomeFormProps) {
                 />
             </Tile>
             
-            {/* To be delegates list... */}
+            {/* Delegates */}
             <Tile tileType={TileType.input} clickable={false}>
                 <InputLayout
                     icon={<IoMail size="32px" />}
                     text={"Delegate Emails"}
                     type={"text"}
                     name={"delegates"}
-                    placeholder={"abc@gmail.com, de@g..."}
+                    placeholder={"abc@gmail.com, def@g..."}
                     register={register}
                     registerSettings={{
                         validate: {
@@ -262,6 +262,7 @@ export default function HomeForm(props: HomeFormProps) {
                     }}
                     errors={errors.delegates}
                     errorMessage={"*Must be real and comma seperated."}
+                    fontSize="md"
                 />
             </Tile>
 
diff --git a/src/components/layouts/InputLayout/InputLayout.tsx b/src/components/layouts/InputLayout/InputLayout.tsx
index c0f641b..03804e5 100644
--- a/src/components/layouts/InputLayout/InputLayout.tsx
+++ b/src/components/layouts/InputLayout/InputLayout.tsx
@@ -12,16 +12,21 @@ interface InputLayoutProps {
     placeholder: string;
     currency?: boolean;
     // Add HomeFormData | xFormData | yFormData in the future
-    register?: UseFormRegister<HomeFormData> | UseFormRegister<ReadingFormData> | UseFormRegister<BookingFormData> | UseFormRegister<GuestLoginFormData>;
+    register?:
+        | UseFormRegister<HomeFormData>
+        | UseFormRegister<ReadingFormData>
+        | UseFormRegister<BookingFormData>
+        | UseFormRegister<GuestLoginFormData>;
     registerSettings?: object;
     errors?: object;
     errorMessage?: string;
     onChange?: (e) => void;
     disabled?: boolean;
+    fontSize?: string;
 }
 
 export default function InputLayout(props: InputLayoutProps) {
-    const { icon, text, type, name, placeholder, currency, register, registerSettings, errors, errorMessage, disabled } = props;
+    const {fontSize, icon, text, type, name, placeholder, currency, register, registerSettings, errors, errorMessage, disabled } = props;
 
     return (
         <div className="grid grid-cols-5 m-auto w-full">
@@ -36,8 +41,8 @@ export default function InputLayout(props: InputLayoutProps) {
                         onChange={(e) => {
                             props?.onChange && props.onChange(e);
                         }}
-                        className="text-lg placeholder:text-black font-bold bg-transparent w-[95%] disabled:bg-white
-                            file:border-none file:bg-transparent file:cursor-pointer focus:outline-none focus:placeholder:text-black-500"
+                        className={`text-${fontSize ? fontSize : "lg"} placeholder:text-black font-bold bg-transparent w-[95%] disabled:bg-white 
+                            file:border-none file:bg-transparent file:cursor-pointer focus:outline-none focus:placeholder:text-black-500 truncate ...`}
                         type={type}
                         name={name}
                         placeholder={placeholder}

From 793ba9efa7bdd5e15ed4348b8fe66d4b8451ab2c Mon Sep 17 00:00:00 2001
From: WT000 <55751558+WT000@users.noreply.github.com>
Date: Sat, 15 Apr 2023 11:40:34 +0100
Subject: [PATCH 4/6] Delegate information on click

---
 .../DelegatesListItem/DelegatesListItem.tsx   |  6 ++--
 src/components/Notification/Notifications.tsx | 16 ++++++-----
 src/pages/homes/[id]/index.tsx                | 28 +++++++++++++++++--
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/components/DelegatesListItem/DelegatesListItem.tsx b/src/components/DelegatesListItem/DelegatesListItem.tsx
index 609c455..7ecb4f2 100644
--- a/src/components/DelegatesListItem/DelegatesListItem.tsx
+++ b/src/components/DelegatesListItem/DelegatesListItem.tsx
@@ -14,12 +14,12 @@ export default function DelegatesListItem(props: DelegatesListItemProps) {
         <div 
             className="relative h-11 w-11 md:h-12 md:w-12 rounded-full cursor-pointer flex justify-center items-center
                 bg-[#1D1A22] text-[rgb(255,255,255,0.0)]  hover:text-[rgb(255,255,255,1)] 
-                transition duration-500 ease-in-out hover:bg-orange hover:scale-110"
+                transition duration-500 ease-in-out hover:scale-110"
             onClick={onClick}
         >
-            <IoRemove className="" size="20px" />
+            {/* <IoRemove className="" size="20px" /> */}
             <Image
-                className="rounded-full opacity-75 hover:opacity-25"
+                className="rounded-full opacity-75 hover:opacity-100"
                 src={image}
                 alt={username}
                 fill
diff --git a/src/components/Notification/Notifications.tsx b/src/components/Notification/Notifications.tsx
index af2ab88..7fa264d 100644
--- a/src/components/Notification/Notifications.tsx
+++ b/src/components/Notification/Notifications.tsx
@@ -3,7 +3,7 @@ import toast from "react-hot-toast";
 interface NotificationProp {
 	icon: React.ReactElement;
 	text: string;
-	interactive?: { onClick: () => void; text: string };
+	interactive?: { onClick: () => void; text?: string };
 	duration?: number;
 }
 
@@ -57,13 +57,15 @@ export default function Notification(props: NotificationProp) {
 						<IconButton icon={icon} parentToastId={t.id} />
 					)}
 					{interactive && (
-						<div className="grid grid-cols-2 gap-2 ml-auto">
-							<button
-									onClick={function(event){ interactive.onClick(); toast.dismiss(t.id);}}
-									className="inline-flex justify-center w-full text-base font-bold text-center text-white hover:scale-110 transition ease-in-out"
-								>
+						<div className={`grid grid-cols-${interactive.text ? "2" : "1"} gap-2 ml-auto`}>
+							{interactive.text && (
+								<button
+								onClick={function(event){ interactive.onClick(); toast.dismiss(t.id);}}
+								className="inline-flex justify-center w-full text-base font-bold text-center text-white hover:scale-110 transition ease-in-out"
+							>
 									{interactive.text}
-							</button>
+								</button>
+							)}
 							<div className="inline-flex justify-center">
 								<IconButton icon={icon} parentToastId={t.id} />
 							</div>
diff --git a/src/pages/homes/[id]/index.tsx b/src/pages/homes/[id]/index.tsx
index 9bc9f68..3861d0a 100644
--- a/src/pages/homes/[id]/index.tsx
+++ b/src/pages/homes/[id]/index.tsx
@@ -45,8 +45,17 @@ export default function Index(props) {
     const readings = props.readings ? JSON.parse(props.readings) : null;
     const bookings = props.bookings ? JSON.parse(props.bookings) : null;
     const delegates = props.delegates ? JSON.parse(props.delegates) : null;
+    const delegateReadingCount = props.delegateCounts ? Object.assign({}, ...(JSON.parse(props.delegateCounts).map(item => ({ [item._id]: item }) ))) : null;
     const home = props.home;
 
+    delegates?.forEach(delegate => {
+        if (delegateReadingCount.hasOwnProperty(delegate._id)) {
+            delegate["readingCount"] = delegateReadingCount[delegate._id].count;
+        } else {
+            delegate["readingCount"] = 0;
+        }
+    });
+
     // const startDate = getDayMonth(new Date(props?.booking?.startDateTime));
     // const endDate = getDayMonth(new Date(props?.booking?.endDateTime), true);
     const ascendingDates = [...readings];
@@ -75,8 +84,8 @@ export default function Index(props) {
 
     let delegateItems = []
     delegates.map((item, index) => {
-        let interactive = { onClick: () => {console.log("Clicked!");}, text: "Undo" }
-        delegateItems.push(<DelegatesListItem key={index} image={item.image} username={item.name} onClick={Notification({text: "Delegate removed.", icon: <IoClose />, interactive: interactive })}></DelegatesListItem>)
+        let interactive = { onClick: () => {console.log("Clicked!");}}
+        delegateItems.push(<DelegatesListItem key={index} image={item.image} username={item.name} onClick={Notification({text: `${item.name} (${item.email}) has left ${item.readingCount} reading${item.readingCount !== 1 ? "s" : ""}.`, icon: <IoClose />, interactive: interactive })}></DelegatesListItem>)
     })
 
     const stats = [
@@ -243,6 +252,20 @@ export async function getServerSideProps({ req, res, params }) {
         const bookings = await Booking.find({home: h._id, isDeleted: false}).sort({"createdAt": -1}).lean()
         const delegates = h.delegates;       
         const userRole = getRole(session, hNoDelegates);
+
+        const delegateReadingCount = await Reading.aggregate([
+            {
+                $match: {
+                    home: h._id
+                }
+            },
+            {
+                $group: {
+                    _id: "$user",
+                    count: { $sum: 1 }
+                }
+            },
+        ])
     
         if (userRole === Role.Guest) {
             return {
@@ -264,6 +287,7 @@ export async function getServerSideProps({ req, res, params }) {
                 readings: JSON.stringify(readings),
                 bookings: JSON.stringify(bookings),
                 delegates: JSON.stringify(delegates),
+                delegateCounts: JSON.stringify(delegateReadingCount),
                 userRole: userRole,
                 averagePerDay: averagePerDay ?? 0.00,
             },

From b996434cd7ebcb45ad65565d72c41de54f95691e Mon Sep 17 00:00:00 2001
From: WT000 <55751558+WT000@users.noreply.github.com>
Date: Sat, 15 Apr 2023 11:42:30 +0100
Subject: [PATCH 5/6] Note on delegate information

---
 src/pages/homes/[id]/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/homes/[id]/index.tsx b/src/pages/homes/[id]/index.tsx
index 3861d0a..dbeb698 100644
--- a/src/pages/homes/[id]/index.tsx
+++ b/src/pages/homes/[id]/index.tsx
@@ -48,6 +48,8 @@ export default function Index(props) {
     const delegateReadingCount = props.delegateCounts ? Object.assign({}, ...(JSON.parse(props.delegateCounts).map(item => ({ [item._id]: item }) ))) : null;
     const home = props.home;
 
+    // Would be better to build a big aggregate query in the future that'll have this information with the delegate
+    // However, as we're limited on time, this works as a proof of concept
     delegates?.forEach(delegate => {
         if (delegateReadingCount.hasOwnProperty(delegate._id)) {
             delegate["readingCount"] = delegateReadingCount[delegate._id].count;

From fe36a8dd551307a1032365285b5a9578ab544989 Mon Sep 17 00:00:00 2001
From: WT000 <55751558+WT000@users.noreply.github.com>
Date: Mon, 17 Apr 2023 10:13:48 +0100
Subject: [PATCH 6/6] Fix merge fix formatting

---
 src/pages/homes/[id]/index.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/homes/[id]/index.tsx b/src/pages/homes/[id]/index.tsx
index 39c9ed3..64d40c5 100644
--- a/src/pages/homes/[id]/index.tsx
+++ b/src/pages/homes/[id]/index.tsx
@@ -33,7 +33,6 @@ import Notification from "../../../components/Notification/Notifications";
 import Popup from "../../../components/Popup/Popup";
 import QRCode from "../../../components/QRCode/QRCode";
 import ReadingPopup from "../../../components/layouts/ReadingPopupLayout/ReadingPopupLayout";
-import { useRouter } from "next/router";
 
 function displayCost(cost) {
     let costString = "0"
@@ -65,7 +64,6 @@ export default function Index(props) {
 
     // const startDate = getDayMonth(new Date(props?.booking?.startDateTime));
     // const endDate = getDayMonth(new Date(props?.booking?.endDateTime), true);
-    const router = useRouter();
     const [currentPath, setCurrentPath] = useState("");
     useEffect(() => {if (window) {setCurrentPath(window.location.protocol + "//" + window.location.hostname)}});
     const [popupVisible, setPopupVisible] = useState(false);
@@ -170,8 +168,7 @@ export default function Index(props) {
                                 icon={<IoCreateSharp size="34px"/>}
                                 textLine1="Edit Home"
                                 textLine2="Details"></CompactLayout>} 
-                                clickable={true} onClick={() => router.push(`/homes/${home._id}/edit`)}>
-                            </Tile>
+                                clickable={true} onClick={() => router.push(`/homes/${home._id}/edit`)}></Tile>
                             <Tile tileType={TileType.link} 
                                 children={<CompactLayout 
                                 icon={<IoQrCode size="34px"/>}
@@ -182,8 +179,7 @@ export default function Index(props) {
                                     setPopupData({
                                         text: `${currentPath}/auth/guest?name=${home.name}`
                                     })
-                                }}>
-                            </Tile>
+                                }}></Tile>
                         </div>
                         <div className="">
                             <ProgressBar num1={props?.home.energyBuffer} num2={props?.averagePerDay}