diff --git a/apps/web/modules/insights/insights-view.tsx b/apps/web/modules/insights/insights-view.tsx index c2f4405fa2..9f3e939ce7 100644 --- a/apps/web/modules/insights/insights-view.tsx +++ b/apps/web/modules/insights/insights-view.tsx @@ -19,6 +19,7 @@ import { MostCancelledBookingsTables, PopularEventsTable, RecentFeedbackTable, + TimezoneBadge, } from "@calcom/features/insights/components"; import "@calcom/features/insights/components/tremor.css"; import { InsightsOrgTeamsProvider } from "@calcom/features/insights/context/InsightsOrgTeamsProvider"; @@ -62,6 +63,7 @@ function InsightsPageContent() {
+
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 4df124bc83..0724e3baf7 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -3267,5 +3267,6 @@ "booking_not_allowed_by_restriction_schedule_error": "Booking outside restriction schedule availability.", "restriction_schedule_not_found_error": "Restriction schedule not found", "converted_image_size_limit_exceed": "Image size limit exceeded, please use a smaller image preferably in JPEG format", + "timezone_mismatch_tooltip": "You are viewing the report based on your profile timezone ({{userTimezone}}), while your browser is set to timezone ({{browserTimezone}})", "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑" } diff --git a/packages/features/insights/components/TimezoneBadge.tsx b/packages/features/insights/components/TimezoneBadge.tsx new file mode 100644 index 0000000000..94946756f5 --- /dev/null +++ b/packages/features/insights/components/TimezoneBadge.tsx @@ -0,0 +1,55 @@ +import { useMemo } from "react"; + +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"; + +const TimezoneBadgeContent = () => { + const { t } = useLocale(); + const { timeZone: userTimezone } = useDataTable(); + + const timezoneData = useMemo(() => { + // Use Cal's standard CURRENT_TIMEZONE constant + const browserTimezone = CURRENT_TIMEZONE; + + if (!browserTimezone || !userTimezone || browserTimezone === userTimezone) return null; + + const tooltipContent = t("timezone_mismatch_tooltip", { + browserTimezone, + userTimezone, + interpolation: { escapeValue: false }, + }); + + return { + browser: browserTimezone, + user: userTimezone, + tooltipContent, + badgeContent: userTimezone, + }; + }, [userTimezone, t]); + + // Don't render anything if no timezone mismatch + if (!timezoneData) { + return null; + } + + return ( + + + + + + ); +}; + +export const TimezoneBadge = () => { + return ( + + + + ); +}; diff --git a/packages/features/insights/components/index.ts b/packages/features/insights/components/index.ts index 368c8145db..033930c5d4 100644 --- a/packages/features/insights/components/index.ts +++ b/packages/features/insights/components/index.ts @@ -13,3 +13,4 @@ export { RecentFeedbackTable } from "./RecentFeedbackTable"; export { RoutedToPerPeriod } from "./RoutedToPerPeriod"; export { RoutingFormResponsesTable, type RoutingFormTableType } from "./RoutingFormResponsesTable"; export { RoutingKPICards } from "./RoutingKPICards"; +export { TimezoneBadge } from "./TimezoneBadge";