fix: date range computation on /insights (calcom#21436)

* fix: date range computation on /insights

* remove log

* error handling

* update test cases

* WIP

* fix implementation

* support weekStart

* clean up

* fix date range presets

* clean up timeView

* fix timeView

* clean up

* fix event trends

* remove unused variables

* fix flaky e2e tests

* fix date range

* update formatting logic

Author: eunjae-lee

apps/web/playwright/filter-helpers.ts

@@ -1,6 +1,10 @@
 import type { Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 
+// Helper function to get text within a specific table column
+export const getByTableColumnText = (page: Page, columnId: string, text: string) =>
+  page.locator(`[data-testid="data-table-td-${columnId}"]`).getByText(text);
+
 /**
  * Add a filter from the filter dropdown
  */

apps/web/playwright/filter-segment.e2e.ts

@@ -10,6 +10,7 @@ import {
   listSegments,
   clearFilters,
   openSegmentSubmenu,
+  getByTableColumnText,
 } from "./filter-helpers";
 import { test } from "./lib/fixtures";
 
@@ -58,20 +59,20 @@ test.describe("Filter Segment Functionality", () => {
     await test.step("Can apply and save a role filter as a segment", async () => {
       await applySelectFilter(page, "role", "admin");
 
-      await expect(page.getByText(adminUser.email)).toBeVisible();
-      await expect(page.getByText(memberUser.email)).toBeHidden();
+      await expect(getByTableColumnText(page, "member", adminUser.email)).toBeVisible();
+      await expect(getByTableColumnText(page, "member", memberUser.email)).toBeHidden();
 
       await createFilterSegment(page, segmentName);
 
       await clearFilters(page);
 
-      await expect(page.getByText(adminUser.email)).toBeVisible();
-      await expect(page.getByText(memberUser.email)).toBeVisible();
+      await expect(getByTableColumnText(page, "member", adminUser.email)).toBeVisible();
+      await expect(getByTableColumnText(page, "member", memberUser.email)).toBeVisible();
 
       await selectSegment(page, segmentName);
 
-      await expect(page.getByText(adminUser.email)).toBeVisible();
-      await expect(page.getByText(memberUser.email)).toBeHidden();
+      await expect(getByTableColumnText(page, "member", adminUser.email)).toBeVisible();
+      await expect(getByTableColumnText(page, "member", memberUser.email)).toBeHidden();
     });
 
     await test.step("Can delete a filter segment", async () => {
@@ -119,8 +120,8 @@ test.describe("Filter Segment Functionality", () => {
 
     await selectSegment(page, segmentName);
 
-    await expect(page.getByText(adminUser.email)).toBeVisible();
-    await expect(page.getByText(memberUser.email)).toBeHidden();
+    await expect(getByTableColumnText(page, "member", adminUser.email)).toBeVisible();
+    await expect(getByTableColumnText(page, "member", memberUser.email)).toBeHidden();
 
     await deleteSegment(page, segmentName);
   });
@@ -167,8 +168,8 @@ test.describe("Filter Segment Functionality", () => {
 
       await clearFilters(page);
       await selectSegment(page, segmentName);
-      await expect(page.getByText(adminUser.email)).toBeVisible();
-      await expect(page.getByText(memberUser.email)).toBeHidden();
+      await expect(getByTableColumnText(page, "member", adminUser.email)).toBeVisible();
+      await expect(getByTableColumnText(page, "member", memberUser.email)).toBeHidden();
     });
 
     await test.step("Regular member can see but not modify team segments", async () => {
@@ -193,8 +194,8 @@ test.describe("Filter Segment Functionality", () => {
       await expect(dataTable).toBeVisible();
 
       await selectSegment(page, "Team Admin Filter");
-      await expect(page.getByText(adminUser.email)).toBeVisible();
-      await expect(page.getByText(memberUser.email)).toBeHidden();
+      await expect(getByTableColumnText(page, "member", adminUser.email)).toBeVisible();
+      await expect(getByTableColumnText(page, "member", memberUser.email)).toBeHidden();
 
       await openSegmentSubmenu(page, segmentName);
       await expect(

apps/web/playwright/insights-routing-filters.e2e.ts

@@ -11,6 +11,7 @@ import {
   applyTextFilter,
   applyNumberFilter,
   selectOptionValue,
+  getByTableColumnText,
 } from "./filter-helpers";
 import { test } from "./lib/fixtures";
 
@@ -186,8 +187,8 @@ test.describe("Insights > Routing Filters", () => {
 
     await applySelectFilter(page, "bookingUserId", user1Name);
 
-    await expect(page.getByText("John Doe")).toBeVisible();
-    await expect(page.getByText("Jane Smith")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "John Doe")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Jane Smith")).toBeHidden();
 
     await prisma.booking.delete({ where: { id: booking1.id } });
     await prisma.booking.delete({ where: { id: booking2.id } });
@@ -291,26 +292,26 @@ test.describe("Insights > Routing Filters", () => {
     await page.getByPlaceholder("Filter attendees by name or email").fill("John");
     await page.keyboard.press("Enter");
 
-    await expect(page.getByText("Response 1")).toBeVisible();
-    await expect(page.getByText("Response 2")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "Response 1")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Response 2")).toBeHidden();
 
     await clearFilters(page);
     await addFilter(page, "bookingAttendees");
     await openFilter(page, "bookingAttendees");
     await page.getByPlaceholder("Filter attendees by name or email").fill("jane.smith@example");
     await page.keyboard.press("Enter");
 
-    await expect(page.getByText("Response 2")).toBeVisible();
-    await expect(page.getByText("Response 1")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "Response 2")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Response 1")).toBeHidden();
 
     await clearFilters(page);
     await addFilter(page, "bookingAttendees");
     await openFilter(page, "bookingAttendees");
     await page.getByPlaceholder("Filter attendees by name or email").fill("JANE");
     await page.keyboard.press("Enter");
 
-    await expect(page.getByText("Response 2")).toBeVisible();
-    await expect(page.getByText("Response 1")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "Response 2")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Response 1")).toBeHidden();
 
     await prisma.booking.delete({ where: { id: booking1.id } });
     await prisma.booking.delete({ where: { id: booking2.id } });
@@ -392,26 +393,26 @@ test.describe("Insights > Routing Filters", () => {
 
     await applyTextFilter(page, fieldId, "Contains", "test");
 
-    await expect(page.getByText("This is a test description")).toBeVisible();
-    await expect(page.getByText("Another description for testing")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "This is a test description")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Another description for testing")).toBeVisible();
 
     await clearFilters(page);
     await applyTextFilter(page, fieldId, "Is", "This is a test description");
 
-    await expect(page.getByText("This is a test description")).toBeVisible();
-    await expect(page.getByText("Another description for testing")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "This is a test description")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Another description for testing")).toBeHidden();
 
     await clearFilters(page);
     await applyTextFilter(page, fieldId, "Is empty");
 
-    await expect(page.getByText("This is a test description")).toBeHidden();
-    await expect(page.getByText("Another description for testing")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "This is a test description")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "Another description for testing")).toBeHidden();
 
     await clearFilters(page);
     await applyTextFilter(page, fieldId, "Contains", "TEST");
 
-    await expect(page.getByText("This is a test description")).toBeVisible();
-    await expect(page.getByText("Another description for testing")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "This is a test description")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Another description for testing")).toBeVisible();
   });
 
   test("NUMBER field: should filter with different number operators", async ({
@@ -489,26 +490,23 @@ test.describe("Insights > Routing Filters", () => {
 
     await applyNumberFilter(page, fieldId, "=", 3);
 
-    const getByNumber = (number: number) =>
-      page.locator(`[data-testid="data-table-td-${fieldId}"]`).getByText(String(number));
-
-    await expect(getByNumber(3)).toBeVisible();
-    await expect(getByNumber(1)).toBeHidden();
-    await expect(getByNumber(5)).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "3")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "1")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "5")).toBeHidden();
 
     await clearFilters(page);
     await applyNumberFilter(page, fieldId, ">", 3);
 
-    await expect(getByNumber(5)).toBeVisible();
-    await expect(getByNumber(1)).toBeHidden();
-    await expect(getByNumber(3)).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "5")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "1")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "3")).toBeHidden();
 
     await clearFilters(page);
     await applyNumberFilter(page, fieldId, "≤", 3);
 
-    await expect(getByNumber(1)).toBeVisible();
-    await expect(getByNumber(3)).toBeVisible();
-    await expect(getByNumber(5)).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "1")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "3")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "5")).toBeHidden();
   });
 
   test("SINGLE_SELECT and MULTI_SELECT fields: should filter correctly", async ({
@@ -620,19 +618,16 @@ test.describe("Insights > Routing Filters", () => {
 
     await page.goto(`/insights/routing`);
 
-    const getByColumnValue = (columnId: string, value: string) =>
-      page.locator(`[data-testid="data-table-td-${columnId}"]`).getByText(value);
-
     await applySelectFilter(page, locationFieldId, "New York");
-    await expect(getByColumnValue(locationFieldId, "New York")).toBeVisible();
-    await expect(getByColumnValue(locationFieldId, "London")).toBeHidden();
+    await expect(getByTableColumnText(page, locationFieldId, "New York")).toBeVisible();
+    await expect(getByTableColumnText(page, locationFieldId, "London")).toBeHidden();
 
     await clearFilters(page);
     await applySelectFilter(page, skillFieldId, "JavaScript");
     await applySelectFilter(page, skillFieldId, "TypeScript");
-    await expect(getByColumnValue(skillFieldId, "JavaScript")).toBeVisible();
-    await expect(getByColumnValue(skillFieldId, "TypeScript")).toBeVisible();
-    await expect(getByColumnValue(skillFieldId, "React")).toBeHidden();
+    await expect(getByTableColumnText(page, skillFieldId, "JavaScript")).toBeVisible();
+    await expect(getByTableColumnText(page, skillFieldId, "TypeScript")).toBeVisible();
+    await expect(getByTableColumnText(page, skillFieldId, "React")).toBeHidden();
   });
 
   test("createdAt filter: should filter by date range", async ({ page, users, routingForms, prisma }) => {
@@ -698,14 +693,14 @@ test.describe("Insights > Routing Filters", () => {
     await page.getByTestId("date-range-options-w").click(); // Last 7 Days
     await page.keyboard.press("Escape");
 
-    await expect(page.getByText("Recent Response")).toBeVisible();
-    await expect(page.getByText("Old Response")).toBeHidden();
+    await expect(getByTableColumnText(page, fieldId, "Recent Response")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Old Response")).toBeHidden();
 
     await openFilter(page, "createdAt");
     await page.getByTestId("date-range-options-t").click(); // Last 30 Days
     await page.keyboard.press("Escape");
 
-    await expect(page.getByText("Recent Response")).toBeVisible();
-    await expect(page.getByText("Old Response")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Recent Response")).toBeVisible();
+    await expect(getByTableColumnText(page, fieldId, "Old Response")).toBeVisible();
   });
 });

packages/features/data-table/lib/dateRange.ts

@@ -28,7 +28,7 @@ export const PRESET_OPTIONS: PresetOption[] = [
   CUSTOM_PRESET,
 ];
 
-export const getDefaultStartDate = () => dayjs().subtract(1, "week").startOf("day");
+export const getDefaultStartDate = () => dayjs().subtract(6, "day").startOf("day");
 
 export const getDefaultEndDate = () => dayjs().endOf("day");
 
@@ -46,11 +46,11 @@ export const getDateRangeFromPreset = (val: string | null) => {
       endDate = dayjs().endOf("day");
       break;
     case "w": // Last 7 days
-      startDate = dayjs().subtract(1, "week").startOf("day");
+      startDate = dayjs().subtract(6, "day").startOf("day");
       endDate = dayjs().endOf("day");
       break;
     case "t": // Last 30 days
-      startDate = dayjs().subtract(30, "day").startOf("day");
+      startDate = dayjs().subtract(29, "day").startOf("day");
       endDate = dayjs().endOf("day");
       break;
     case "m": // Month to Date

packages/features/insights/components/BookingStatusLineChart.tsx

@@ -1,5 +1,4 @@
 import { Title } from "@tremor/react";
-import { useMemo } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
@@ -12,23 +11,14 @@ import { LoadingInsight } from "./LoadingInsights";
 
 export const BookingStatusLineChart = () => {
   const { t } = useLocale();
-  const { isAll, teamId, userId, startDate, endDate, dateRangePreset, eventTypeId } = useInsightsParameters();
-
-  const selectedTimeView = useMemo(() => {
-    if (dateRangePreset === "tdy") return "day";
-    else if (dateRangePreset === "w") return "week";
-    else if (dateRangePreset === "m") return "month";
-    else if (dateRangePreset === "y") return "year";
-    else return "week";
-  }, [dateRangePreset]);
+  const { isAll, teamId, userId, startDate, endDate, eventTypeId } = useInsightsParameters();
 
   const {
     data: eventsTimeLine,
     isSuccess,
     isPending,
   } = trpc.viewer.insights.eventsTimeline.useQuery(
     {
-      timeView: selectedTimeView,
       startDate,
       endDate,
       teamId,

packages/features/insights/hooks/useInsightsParameters.ts

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 
+import dayjs from "@calcom/dayjs";
 import {
   useFilterValue,
   useColumnFilters,
@@ -28,14 +29,21 @@ export function useInsightsParameters() {
   const eventTypeId = useFilterValue("eventTypeId", ZSingleSelectFilterValue)?.data as number | undefined;
   const routingFormId = useFilterValue("formId", ZSingleSelectFilterValue)?.data as string | undefined;
   const createdAtRange = useFilterValue("createdAt", ZDateRangeFilterValue)?.data;
-  const startDate = useMemo(
-    () => preserveLocalTime(createdAtRange?.startDate ?? getDefaultStartDate().toISOString()),
-    [createdAtRange?.startDate, preserveLocalTime]
-  );
-  const endDate = useMemo(
-    () => preserveLocalTime(createdAtRange?.endDate ?? getDefaultEndDate().toISOString()),
-    [createdAtRange?.endDate, preserveLocalTime]
-  );
+  // TODO for future: this preserving local time & startOf & endOf should be handled
+  // from DateRangeFilter out of the box.
+  // When we do it, we also need to remove those timezone handling logic from the backend side at the same time.
+  const startDate = useMemo(() => {
+    const timestamp = dayjs(createdAtRange?.startDate ?? getDefaultStartDate().toISOString())
+      .startOf("day")
+      .toISOString();
+    return preserveLocalTime(timestamp);
+  }, [createdAtRange?.startDate, preserveLocalTime]);
+  const endDate = useMemo(() => {
+    const timestamp = dayjs(createdAtRange?.endDate ?? getDefaultEndDate().toISOString())
+      .endOf("day")
+      .toISOString();
+    return preserveLocalTime(timestamp);
+  }, [createdAtRange?.endDate, preserveLocalTime]);
 
   const dateRangePreset = useMemo<PresetOptionValue>(() => {
     return (createdAtRange?.preset as PresetOptionValue) ?? CUSTOM_PRESET_VALUE;