From b59bf7d1ee572aa13ecd39e1d458563610a8bbf4 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:06:29 +0530
Subject: [PATCH] feat: booking filters (#18303)

Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
---
 .../bookings/views/bookings-listing-view.tsx  |  1 +
 .../bookings/components/FiltersContainer.tsx  |  2 +
 .../features/bookings/lib/useFilterQuery.tsx  |  9 +++
 .../filters/components/StartTimeFilters.tsx   | 56 +++++++++++++++++++
 .../date-range-picker/DateRangePicker.tsx     |  6 +-
 5 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 packages/features/filters/components/StartTimeFilters.tsx

diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
index 20f8096dd6..7ea9b5ddc7 100644
--- a/apps/web/modules/bookings/views/bookings-listing-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx
@@ -78,6 +78,7 @@ export default function Bookings() {
   const { t } = useLocale();
   const user = useMeQuery().data;
   const [isFiltersVisible, setIsFiltersVisible] = useState<boolean>(false);
+
   const query = trpc.viewer.bookings.get.useInfiniteQuery(
     {
       limit: 10,
diff --git a/packages/features/bookings/components/FiltersContainer.tsx b/packages/features/bookings/components/FiltersContainer.tsx
index 1c3c19fe4f..d1267e8f68 100644
--- a/packages/features/bookings/components/FiltersContainer.tsx
+++ b/packages/features/bookings/components/FiltersContainer.tsx
@@ -2,6 +2,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 
 import { PeopleFilter } from "@calcom/features/bookings/components/PeopleFilter";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
+import { StartTimeFilters } from "@calcom/features/filters/components/StartTimeFilters";
 import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip, Button } from "@calcom/ui";
@@ -24,6 +25,7 @@ export function FiltersContainer({ isFiltersVisible }: FiltersContainerProps) {
           <PeopleFilter />
           <EventTypeFilter />
           <TeamsFilter />
+          <StartTimeFilters />
           <Tooltip content={t("remove_filters")}>
             <Button
               color="secondary"
diff --git a/packages/features/bookings/lib/useFilterQuery.tsx b/packages/features/bookings/lib/useFilterQuery.tsx
index 344d741f23..2bed7dca35 100644
--- a/packages/features/bookings/lib/useFilterQuery.tsx
+++ b/packages/features/bookings/lib/useFilterQuery.tsx
@@ -1,5 +1,6 @@
 import z from "zod";
 
+import dayjs from "@calcom/dayjs";
 import { queryNumberArray, useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 
 // TODO: Move this to zod utils
@@ -8,6 +9,14 @@ export const filterQuerySchema = z.object({
   userIds: queryNumberArray.optional(),
   status: z.enum(["upcoming", "recurring", "past", "cancelled", "unconfirmed"]).optional(),
   eventTypeIds: queryNumberArray.optional(),
+  afterStartDate: z
+    .string()
+    .optional()
+    .transform((date) => (date ? dayjs(date).format("YYYY-MM-DD") : undefined)),
+  beforeEndDate: z
+    .string()
+    .optional()
+    .transform((date) => (date ? dayjs(date).format("YYYY-MM-DD") : undefined)),
 });
 
 export function useFilterQuery() {
diff --git a/packages/features/filters/components/StartTimeFilters.tsx b/packages/features/filters/components/StartTimeFilters.tsx
new file mode 100644
index 0000000000..a1ba9d30dd
--- /dev/null
+++ b/packages/features/filters/components/StartTimeFilters.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
+import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
+import { DateRangePicker } from "@calcom/ui";
+
+export const StartTimeFilters = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { data: query } = useFilterQuery();
+
+  const [afterStartDate, setAfterStartDate] = useState<Dayjs | undefined>(undefined);
+  const [beforeEndDate, setBeforeEndDate] = useState<Dayjs | undefined>(undefined);
+
+  const startValue = afterStartDate?.toDate();
+  const endValue = beforeEndDate?.toDate();
+
+  const updatedUrlParams = (newStartDate: Dayjs, newEndDate: Dayjs) => {
+    const search = new URLSearchParams();
+    Object.entries(query).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        search.set(key, value.join(","));
+      } else if (value) {
+        search.set(key, String(value));
+      }
+    });
+
+    search.set("afterStartDate", newStartDate.subtract(1, "day").format("YYYY-MM-DD"));
+    search.set("beforeEndDate", newEndDate.add(1, "day").format("YYYY-MM-DD"));
+    router.replace(`${pathname}?${search.toString()}`);
+  };
+
+  return (
+    <div>
+      <DateRangePicker
+        minDate={null}
+        dates={{ startDate: startValue, endDate: endValue }}
+        onDatesChange={(values) => {
+          console.log(values);
+          const newAfterStartDate = values.startDate ? dayjs(values.startDate) : undefined;
+          const newBeforeEndDate = values.endDate ? dayjs(values.endDate) : undefined;
+          setAfterStartDate(newAfterStartDate);
+          setBeforeEndDate(newBeforeEndDate);
+
+          if (newAfterStartDate && newBeforeEndDate) {
+            updatedUrlParams(newAfterStartDate, newBeforeEndDate);
+          }
+        }}
+      />
+    </div>
+  );
+};
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index 2d443aa9a8..a362eb5ed1 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -10,7 +10,7 @@ import { Button } from "../../button";
 import { Calendar } from "./Calendar";
 
 type DatePickerWithRangeProps = {
-  dates: { startDate: Date; endDate?: Date };
+  dates: { startDate?: Date; endDate?: Date };
   onDatesChange: ({ startDate, endDate }: { startDate?: Date; endDate?: Date }) => void;
   disabled?: boolean;
   minDate?: Date | null;
@@ -29,8 +29,8 @@ export function DatePickerWithRange({
     if (dates?.endDate) {
       onDatesChange({ startDate: date, endDate: undefined });
     } else {
-      const startDate = date < dates.startDate ? date : dates.startDate;
-      const endDate = date < dates.startDate ? dates.startDate : date;
+      const startDate = dates.startDate ? (date < dates.startDate ? date : dates.startDate) : date;
+      const endDate = dates.startDate ? (date < dates.startDate ? dates.startDate : date) : undefined;
       onDatesChange({ startDate, endDate });
     }
   }