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

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

* feat: add timestamp selector for insights date filtering

- Add TimestampFilter component with Start Time/Created At options
- Extend useInsightsBookingParameters hook with timestamp selection
- Update all insight components to use dateTarget parameter
- Add i18n translations for new UI strings
- Position selector next to DateRangeFilter as requested

Addresses user request to add select box next to date range filter
allowing users to choose between startTime (default) and createdAt
for displaying booking metrics on the Insights page.

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* refactor: rename TimestampFilter to DateTargetSelector with nuqs URL state

- Rename TimestampFilter component to DateTargetSelector
- Implement nuqs hook in InsightsPageContent for URL state management
- Update useInsightsBookingParameters to return dateTarget from URL state
- Add dateTarget field to insightsRoutingServiceInputSchema and related types
- Simplify individual insight components to use insightsBookingParams directly
- Remove manual timestampTarget destructuring from all components
- Update all tRPC routing service calls to include dateTarget parameter
- All TypeScript checks now pass successfully

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* update styles

* fix inconsistency

* feat: replace Select with Command component and rename filter ID

- Replace Select with Command + Popover for compact width and wider dropdown
- Add descriptive option labels with translations
- Change filter ID from 'createdAt' to 'timestamp' across all components
- Maintain URL state management with nuqs
- Fix ESLint warning for missing dependency in useEffect

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: revert routing components to use createdAt filter ID

- Keep timestamp filter ID change scoped only to main insights page
- Routing components should continue using createdAt as filter ID
- Only insights-view.tsx and related booking hooks use timestamp

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* update styles

* fix trpc router

* refactor timestamp column for insights booking service

* fix

* update text

* rename and clean up

* fix endDate in DateRangeFilter

* fix type errors

* fix startTime filter and type errors

* provide default date range

* add completed to getMembersStatsWithCount

* add unit tests

* fix type error

* address feedback

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: eunjae-lee

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