diff --git a/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx b/client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx index 9ec85154a..9091591ef 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(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 = ({

{dateRange.startDate.toDateString()} -{" "} - {dateRange.endDate.toDateString()} + {dateRange.endDate.toDateString()} ( + {totalBookingsForRange} Bookings)

{displayedCalendar ? (