feat: allow to choose dateTarget for /insights (startTime by default)

apps/web/modules/insights/insights-view.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import { useState, useCallback } from "react";
+
 import {
   DataTableProvider,
   DataTableFilters,
   DateRangeFilter,
   ColumnFilterType,
   type FilterableColumn,
 } from "@calcom/features/data-table";
+import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
 import { useSegments } from "@calcom/features/data-table/hooks/useSegments";
 import {
   AverageEventDurationChart,
@@ -27,11 +30,13 @@ import {
   TimezoneBadge,
 } from "@calcom/features/insights/components/booking";
 import { InsightsOrgTeamsProvider } from "@calcom/features/insights/context/InsightsOrgTeamsProvider";
+import { DateTargetSelector, type DateTarget } from "@calcom/features/insights/filters/DateTargetSelector";
 import { Download } from "@calcom/features/insights/filters/Download";
 import { OrgTeamsFilter } from "@calcom/features/insights/filters/OrgTeamsFilter";
 import { useInsightsBookings } from "@calcom/features/insights/hooks/useInsightsBookings";
 import { useInsightsOrgTeams } from "@calcom/features/insights/hooks/useInsightsOrgTeams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 
 export default function InsightsPage({ timeZone }: { timeZone: string }) {
   return (
@@ -49,10 +54,26 @@ const createdAtColumn: Extract<FilterableColumn, { type: ColumnFilterType.DATE_R
   type: ColumnFilterType.DATE_RANGE,
 };
 
+const startTimeColumn: Extract<FilterableColumn, { type: ColumnFilterType.DATE_RANGE }> = {
+  id: "startTime",
+  title: "startTime",
+  type: ColumnFilterType.DATE_RANGE,
+};
+
 function InsightsPageContent() {
   const { t } = useLocale();
   const { table } = useInsightsBookings();
   const { isAll, teamId, userId } = useInsightsOrgTeams();
+  const { removeFilter } = useDataTable();
+  const [dateTarget, _setDateTarget] = useState<"startTime" | "createdAt">("startTime");
+
+  const setDateTarget = useCallback(
+    (target: "startTime" | "createdAt") => {
+      _setDateTarget(target);
+      removeFilter(target === "startTime" ? "createdAt" : "startTime");
+    },
+    [_setDateTarget, removeFilter]
+  );
 
   return (
     <>
@@ -63,10 +84,16 @@ function InsightsPageContent() {
         <DataTableFilters.AddFilterButton table={table} hideWhenFilterApplied />
         <DataTableFilters.ActiveFilters table={table} />
         <DataTableFilters.AddFilterButton table={table} variant="sm" showWhenFilterApplied />
-        <DataTableFilters.ClearFiltersButton exclude={["createdAt"]} />
+        <DataTableFilters.ClearFiltersButton exclude={["startTime", "createdAt"]} />
         <div className="grow" />
         <Download />
-        <DateRangeFilter column={createdAtColumn} />
+        <ButtonGroup combined>
+          <DateRangeFilter
+            column={dateTarget === "startTime" ? startTimeColumn : createdAtColumn}
+            options={{ convertToTimeZone: true }}
+          />
+          <DateTargetSelector value={dateTarget as DateTarget} onChange={setDateTarget} />
+        </ButtonGroup>
         <TimezoneBadge />
       </div>
 

apps/web/public/static/locales/en/common.json

@@ -3689,6 +3689,10 @@
   "before_scheduled_start_time": "Before scheduled start time",
   "cancel_booking_acknowledge_no_show_fee": "I acknowledge that by cancelling the booking within {{timeValue}} {{timeUnit}} of the start time I will be charged the no show fee of {{amount, currency}}",
   "contact_organizer": "If you have any questions, please contact the organizer.",
+  "booking_time_option": "Booking time",
+  "booking_time_option_description": "When the booking is scheduled (start to end)",
+  "created_at_option": "Created at",
+  "created_at_option_description": "When the booking was originally created",
   "call_details": "Call Details",
   "call_id": "Call ID",
   "call_information": "Call Information",

packages/features/data-table/components/filters/DateRangeFilter.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
 import classNames from "@calcom/ui/classNames";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button, buttonClasses } from "@calcom/ui/components/button";
@@ -29,6 +30,7 @@ import {
   getDateRangeFromPreset,
   type PresetOption,
 } from "../../lib/dateRange";
+import { preserveLocalTime } from "../../lib/preserveLocalTime";
 import type { FilterableColumn, DateRangeFilterOptions } from "../../lib/types";
 import { ZDateRangeFilterValue, ColumnFilterType } from "../../lib/types";
 import { useFilterPopoverOpen } from "./useFilterPopoverOpen";
@@ -48,9 +50,8 @@ export const DateRangeFilter = ({
 }: DateRangeFilterProps) => {
   const { open, onOpenChange } = useFilterPopoverOpen(column.id);
   const filterValue = useFilterValue(column.id, ZDateRangeFilterValue);
-  const { updateFilter, removeFilter } = useDataTable();
+  const { updateFilter, removeFilter, timeZone: givenTimeZone } = useDataTable();
   const range = options?.range ?? "past";
-  const endOfDay = options?.endOfDay ?? false;
   const forceCustom = range === "custom";
   const forcePast = range === "past";
 
@@ -70,6 +71,19 @@ export const DateRangeFilter = ({
       : DEFAULT_PRESET
   );
 
+  const convertTimestamp = useCallback(
+    (timestamp: string) => {
+      if (!options?.convertToTimeZone) {
+        return timestamp;
+      }
+      if (!givenTimeZone || CURRENT_TIMEZONE === givenTimeZone) {
+        return timestamp;
+      }
+      return preserveLocalTime(timestamp, CURRENT_TIMEZONE, givenTimeZone);
+    },
+    [options?.convertToTimeZone, givenTimeZone]
+  );
+
   const updateValues = useCallback(
     ({ preset, startDate, endDate }: { preset: PresetOption; startDate?: Dayjs; endDate?: Dayjs }) => {
       setSelectedPreset(preset);
@@ -80,14 +94,14 @@ export const DateRangeFilter = ({
         updateFilter(column.id, {
           type: ColumnFilterType.DATE_RANGE,
           data: {
-            startDate: startDate.toDate().toISOString(),
-            endDate: (endOfDay ? endDate.endOf("day") : endDate).toDate().toISOString(),
+            startDate: convertTimestamp(startDate.toDate().toISOString()),
+            endDate: convertTimestamp(endDate.toDate().toISOString()),
             preset: preset.value,
           },
         });
       }
     },
-    [column.id, endOfDay]
+    [column.id, updateFilter, convertTimestamp]
   );
 
   useEffect(() => {
@@ -126,10 +140,12 @@ export const DateRangeFilter = ({
     startDate?: Date | undefined;
     endDate?: Date | undefined;
   }) => {
+    // DateRangePicker returns the beginning of the day,
+    // so we need to update `endDate` to the end of the day.
     updateValues({
       preset: CUSTOM_PRESET,
       startDate: startDate ? dayjs(startDate) : getDefaultStartDate(),
-      endDate: endDate ? dayjs(endDate) : undefined,
+      endDate: endDate ? dayjs(endDate).add(1, "day").subtract(1, "millisecond") : undefined,
     });
   };
 

packages/features/data-table/hooks/useChangeTimeZoneWithPreservedLocalTime.ts

@@ -1,28 +1,20 @@
 import { useMemo } from "react";
 
-import dayjs from "@calcom/dayjs";
+import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
 
 import { preserveLocalTime } from "../lib/preserveLocalTime";
 import { useDataTable } from "./useDataTable";
 
 /**
  * Converts a timestamp to maintain the same local time in a different timezone.
- *
- * For example, if it's midnight (00:00) in Paris time:
- * - Input : "2025-05-22T22:00:00.000Z" (Midnight/00:00 in Paris)
- * - Output: "2025-05-22T15:00:00.000Z" (Midnight/00:00 in Seoul)
- *
- * This ensures that times like midnight (00:00) or end of day (23:59)
- * remain at those exact local times when converting between timezones.
- * The output timestamp is based on the timezone in the user's profile settings.
+ * Fore more info, read packages/features/data-table/lib/preserveLocalTime.ts
  */
 export function useChangeTimeZoneWithPreservedLocalTime(isoString: string) {
   const { timeZone: profileTimeZone } = useDataTable();
   return useMemo(() => {
-    const currentTimeZone = dayjs.tz.guess();
-    if (!profileTimeZone || currentTimeZone === profileTimeZone) {
+    if (!profileTimeZone || CURRENT_TIMEZONE === profileTimeZone) {
       return isoString;
     }
-    return preserveLocalTime(isoString, currentTimeZone, profileTimeZone);
+    return preserveLocalTime(isoString, CURRENT_TIMEZONE, profileTimeZone);
   }, [isoString, profileTimeZone]);
 }

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

@@ -10,6 +10,12 @@ import dayjs from "@calcom/dayjs";
  * This ensures that times like midnight (00:00) or end of day (23:59)
  * remain at those exact local times when converting between timezones.
  * The output timestamp is based on the timezone in the user's profile settings.
+ *
+ * For example, the profile timezone is Asia/Seoul,
+ * but the current user is in Europe/Paris.
+ * `Date` pickers will normally emit timestamps in the user's local timezone. (00:00:00 ~ 23:59:59 in Paris time)
+ * but what we really want is to fetch the data based on the user's profile timezone. (00:00:00 ~ 23:59:59 in Seoul time)
+ * That's why we need to convert the timestamp to the user's profile timezone.
  */
 export const preserveLocalTime = (isoString: string, originalTimeZone: string, targetTimeZone: string) => {
   // Parse the input time

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

@@ -116,7 +116,7 @@ export const ZFilterValue = z.union([
 
 export type DateRangeFilterOptions = {
   range?: "past" | "custom";
-  endOfDay?: boolean;
+  convertToTimeZone?: boolean;
 };
 
 export type TextFilterOptions = {

packages/features/insights/components/booking/EventTrendsChart.tsx

@@ -36,7 +36,7 @@ type EventTrendsData = RouterOutputs["viewer"]["insights"]["eventTrends"][number
 const CustomTooltip = ({
   active,
   payload,
-  label,
+  label: _label,
 }: {
   active?: boolean;
   payload?: Array<{

packages/features/insights/components/booking/LeastCompletedBookings.tsx

@@ -3,7 +3,6 @@
 import { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { useChangeTimeZoneWithPreservedLocalTime } from "@calcom/features/data-table/hooks/useChangeTimeZoneWithPreservedLocalTime";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 
@@ -16,18 +15,6 @@ export const LeastCompletedTeamMembersTable = () => {
   const { t } = useLocale();
   let insightsBookingParams = useInsightsBookingParameters();
 
-  const currentTime = useChangeTimeZoneWithPreservedLocalTime(
-    useMemo(() => {
-      return dayjs().toISOString();
-    }, [])
-  );
-
-  // booking with endDate < now is "accepted" booking
-  insightsBookingParams = {
-    ...insightsBookingParams,
-    endDate: currentTime,
-  };
-
   const { data, isSuccess, isPending } = trpc.viewer.insights.membersWithLeastCompletedBookings.useQuery(
     insightsBookingParams,
     {

packages/features/insights/components/booking/MostCompletedBookings.tsx

@@ -3,7 +3,6 @@
 import { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { useChangeTimeZoneWithPreservedLocalTime } from "@calcom/features/data-table/hooks/useChangeTimeZoneWithPreservedLocalTime";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 
@@ -16,18 +15,6 @@ export const MostCompletedTeamMembersTable = () => {
   const { t } = useLocale();
   let insightsBookingParams = useInsightsBookingParameters();
 
-  const currentTime = useChangeTimeZoneWithPreservedLocalTime(
-    useMemo(() => {
-      return dayjs().toISOString();
-    }, [])
-  );
-
-  // booking with endDate < now is "accepted" booking
-  insightsBookingParams = {
-    ...insightsBookingParams,
-    endDate: currentTime,
-  };
-
   const { data, isSuccess, isPending } = trpc.viewer.insights.membersWithMostCompletedBookings.useQuery(
     insightsBookingParams,
     {

packages/features/insights/components/booking/TimezoneBadge.tsx

@@ -6,7 +6,6 @@ import { useDataTable } from "@calcom/features/data-table";
 import NoSSR from "@calcom/lib/components/NoSSR";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
-import { Badge } from "@calcom/ui/components/badge";
 import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -41,9 +40,7 @@ const TimezoneBadgeContent = () => {
 
   return (
     <Tooltip content={timezoneData.tooltipContent}>
-      <Badge variant="gray" size="sm" data-testid="timezone-mismatch-badge">
-        <Icon name="info" />
-      </Badge>
+      <Icon name="info" data-testid="timezone-mismatch-badge" className="text-subtle" />
     </Tooltip>
   );
 };

packages/features/insights/components/routing/RoutingFormResponsesTable.tsx

@@ -105,7 +105,7 @@ export function RoutingFormResponsesTable() {
       // this also prevents user from clearing the routing form filter
       updateFilter("formId", { type: ColumnFilterType.SINGLE_SELECT, data: newRoutingFormId });
     }
-  }, [table, getInsightsFacetedUniqueValues, routingFormId]);
+  }, [table, getInsightsFacetedUniqueValues, routingFormId, updateFilter]);
 
   return (
     <>

packages/features/insights/filters/DateTargetSelector.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+import { Command, CommandList, CommandItem } from "@calcom/ui/components/command";
+import { Icon } from "@calcom/ui/components/icon";
+import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
+
+export type DateTarget = "startTime" | "createdAt";
+
+interface DateTargetOption {
+  label: string;
+  description: string;
+  value: DateTarget;
+}
+
+interface DateTargetSelectorProps {
+  value: DateTarget;
+  onChange: (value: DateTarget) => void;
+}
+
+export const DateTargetSelector = ({ value, onChange }: DateTargetSelectorProps) => {
+  const { t } = useLocale();
+  const [open, setOpen] = useState(false);
+
+  const options: DateTargetOption[] = [
+    {
+      label: t("booking_time_option"),
+      description: t("booking_time_option_description"),
+      value: "startTime",
+    },
+    {
+      label: t("created_at_option"),
+      description: t("created_at_option_description"),
+      value: "createdAt",
+    },
+  ];
+
+  const selectedOption = options.find((option) => option.value === value) || options[0];
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="icon"
+          color="secondary"
+          StartIcon="sliders-horizontal"
+          role="combobox"
+          aria-expanded={open}>
+          <span className="sr-only">{selectedOption.label}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-0" align="end">
+        <Command>
+          <CommandList>
+            {options.map((option) => (
+              <CommandItem
+                key={option.value}
+                onSelect={() => {
+                  onChange(option.value);
+                  setOpen(false);
+                }}
+                className="flex items-center gap-2 px-4 py-3">
+                <div>
+                  <div className="font-medium">{option.label}</div>
+                  <div className="text-muted-foreground text-sm">{option.description}</div>
+                </div>
+                {selectedOption.label === option.label && (
+                  <Icon name="check" className="text-primary-foreground h-4 w-4" />
+                )}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};