From eecdd613b1f3218bee212ea4bfbcffbd05f7f6dc Mon Sep 17 00:00:00 2001
From: bcho892 <AKLbc70@gmail.com>
Date: Wed, 28 Aug 2024 21:05:06 +1200
Subject: [PATCH 1/2] add the total bookings

---
 .../Admin/AdminBookingView/AdminBookingView.tsx       | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx b/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
index 9ec85154a..3948358a1 100644
--- a/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
+++ b/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
@@ -2,7 +2,7 @@ import Button from "@/components/generic/FigmaButtons/FigmaButton"
 import CalenderIcon from "@/assets/icons/calender.svg"
 import Calendar from "@/components/generic/Calendar/Calendar"
 import { TableRowOperation } from "@/components/generic/ReusableTable/TableUtils"
-import { useState, useRef } from "react"
+import { useState, useRef, useMemo } from "react"
 import { useClickOutside } from "@/components/utils/Utils"
 import ModalContainer from "@/components/generic/ModalContainer/ModalContainer"
 import WrappedAdminBookingCreationPopUp from "./WrappedAdminBookingCreationPopUp"
@@ -88,6 +88,12 @@ export const AdminBookingView = ({
 
   const [openAddBookingPopup, setOpenAddBookingPopup] = useState<boolean>(false)
 
+  // Expensive computation to find how many users total are booked in for the rang
+  const totalBookingsForRange = useMemo(
+    () => data.flatMap((date) => date.users).length,
+    [data]
+  )
+
   // Add handler for when the Pick Date button is clicked
   const onClickHandler = () => {
     setDisplayedCalendar(!displayedCalendar)
@@ -115,7 +121,8 @@ export const AdminBookingView = ({
         <span className="border-gray-3 flex h-fit w-full flex-col items-center border bg-white px-2 py-1 sm:flex-row">
           <h4 className="text-dark-blue-100">
             {dateRange.startDate.toDateString()} -{" "}
-            {dateRange.endDate.toDateString()}
+            {dateRange.endDate.toDateString()} ({totalBookingsForRange}{" "}
+            Bookings)
           </h4>
           <span className="relative z-50 flex max-h-[40px] sm:ml-auto">
             {displayedCalendar ? (

From cbf92adb5e8bbc606fbf789746b9c1794c21b377 Mon Sep 17 00:00:00 2001
From: bcho892 <AKLbc70@gmail.com>
Date: Wed, 28 Aug 2024 21:06:58 +1200
Subject: [PATCH 2/2] highlight total bookings

---
 .../composite/Admin/AdminBookingView/AdminBookingView.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx b/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
index 3948358a1..9091591ef 100644
--- a/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
+++ b/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx
@@ -121,8 +121,8 @@ export const AdminBookingView = ({
         <span className="border-gray-3 flex h-fit w-full flex-col items-center border bg-white px-2 py-1 sm:flex-row">
           <h4 className="text-dark-blue-100">
             {dateRange.startDate.toDateString()} -{" "}
-            {dateRange.endDate.toDateString()} ({totalBookingsForRange}{" "}
-            Bookings)
+            {dateRange.endDate.toDateString()} (
+            <strong>{totalBookingsForRange}</strong> Bookings)
           </h4>
           <span className="relative z-50 flex max-h-[40px] sm:ml-auto">
             {displayedCalendar ? (