feat: booking filters (#18303)

Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>

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,

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"

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() {

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>
+  );
+};

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 });
     }
   }