From d29e7b137bfa870a097ea54fcd8f059755c90d1c Mon Sep 17 00:00:00 2001
From: lucia <51058748+lucia-gomez@users.noreply.github.com>
Date: Sat, 19 Oct 2024 15:48:05 -0400
Subject: [PATCH] change date filter buttons to dropdown

---
 .../bookingTable/BookingTableFilters.tsx      | 30 +++++++------------
 .../components/bookingTable/Bookings.tsx      |  2 +-
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/booking-app/components/src/client/routes/components/bookingTable/BookingTableFilters.tsx b/booking-app/components/src/client/routes/components/bookingTable/BookingTableFilters.tsx
index cbad164a..7efb78b2 100644
--- a/booking-app/components/src/client/routes/components/bookingTable/BookingTableFilters.tsx
+++ b/booking-app/components/src/client/routes/components/bookingTable/BookingTableFilters.tsx
@@ -6,14 +6,15 @@ import {
 import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { CalendarMonth, DateRange, Today } from "@mui/icons-material";
 
+import Dropdown from "../../booking/components/Dropdown";
 import FilterList from "@mui/icons-material/FilterList";
 import React from "react";
 import StatusChip from "./StatusChip";
 
-export type DateRangeFilter = "today" | "week" | "all";
+export type DateRangeFilter = "Today" | "This Week" | "All";
 
 export const DATE_FILTERS: Record<DateRangeFilter, (x: Booking) => boolean> = {
-  today: (row) => {
+  Today: (row) => {
     const today = new Date();
     const date = row.startDate.toDate();
     return (
@@ -22,7 +23,7 @@ export const DATE_FILTERS: Record<DateRangeFilter, (x: Booking) => boolean> = {
       date.getDate() === today.getDate()
     );
   },
-  week: (row) => {
+  "This Week": (row) => {
     const today = new Date();
     let dayOfWeek = today.getDay();
     if (dayOfWeek === 0) {
@@ -44,7 +45,7 @@ export const DATE_FILTERS: Record<DateRangeFilter, (x: Booking) => boolean> = {
     const date = row.startDate.toDate();
     return date >= startOfWeek && date <= endOfWeek;
   },
-  all: (row) => true,
+  All: (row) => true,
 };
 
 interface Props {
@@ -83,22 +84,13 @@ export default function BookingTableFilters({
   };
 
   const dateFilters = (
-    <ToggleButtonGroup
-      exclusive
+    <Dropdown
       value={selectedDateRange}
-      onChange={handleDateRangeFilterClick}
-      size="small"
-    >
-      <ToggleButton value="today">
-        <Today />
-      </ToggleButton>
-      <ToggleButton value="week">
-        <DateRange />
-      </ToggleButton>
-      <ToggleButton value="all">
-        <CalendarMonth />
-      </ToggleButton>
-    </ToggleButtonGroup>
+      updateValue={(x) => handleDateRangeFilterClick(null, x)}
+      options={["Today", "This Week", "All"]}
+      placeholder={"Today"}
+      sx={{ width: "125px", mr: 1 }}
+    />
   );
 
   return (
diff --git a/booking-app/components/src/client/routes/components/bookingTable/Bookings.tsx b/booking-app/components/src/client/routes/components/bookingTable/Bookings.tsx
index ab9a48ed..31b62aee 100644
--- a/booking-app/components/src/client/routes/components/bookingTable/Bookings.tsx
+++ b/booking-app/components/src/client/routes/components/bookingTable/Bookings.tsx
@@ -44,7 +44,7 @@ export const Bookings: React.FC<BookingsProps> = ({ pageContext }) => {
   const [modalData, setModalData] = useState<BookingRow>(null);
   const [statusFilters, setStatusFilters] = useState([]);
   const [selectedDateRange, setSelectedDateRange] =
-    useState<DateRangeFilter>("today");
+    useState<DateRangeFilter>("Today");
   const [orderBy, setOrderBy] = useState<keyof BookingRow>("startDate");
   const [order, setOrder] = useState<"asc" | "desc">("asc");
   const [currentTime, setCurrentTime] = useState(new Date());