fix: added timezonebadge to insights/routing which appears on timezone mismatch (#25138)

* fix: added timezonebadge to insights/routing which appears on timezone mismatch

* update: removed user repository and directly used prisma

* clean up code

---------

Co-authored-by: Eunjae Lee <hey@eunjae.dev>

apps/web/app/(use-page-wrapper)/insights/routing/page.tsx

@@ -1,5 +1,7 @@
 import { _generateMetadata } from "app/_utils";
 
+import { prisma } from "@calcom/prisma";
+
 import InsightsRoutingPage from "~/insights/insights-routing-view";
 
 import { checkInsightsPagePermission } from "../checkInsightsPagePermission";
@@ -14,7 +16,14 @@ export const generateMetadata = async () =>
   );
 
 export default async function Page() {
-  await checkInsightsPagePermission();
+  const session = await checkInsightsPagePermission();
 
-  return <InsightsRoutingPage />;
+  const { timeZone } = await prisma.user.findUniqueOrThrow({
+    where: { id: session?.user.id ?? -1 },
+    select: {
+      timeZone: true,
+    },
+  });
+
+  return <InsightsRoutingPage timeZone={timeZone} />;
 }

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

@@ -13,14 +13,14 @@ import {
 import { InsightsOrgTeamsProvider } from "@calcom/features/insights/context/InsightsOrgTeamsProvider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-export default function InsightsRoutingFormResponsesPage() {
+export default function InsightsRoutingFormResponsesPage({ timeZone }: { timeZone: string }) {
   const { t } = useLocale();
   const pathname = usePathname();
 
   if (!pathname) return null;
 
   return (
-    <DataTableProvider tableIdentifier={pathname} useSegments={useSegments}>
+    <DataTableProvider tableIdentifier={pathname} useSegments={useSegments} timeZone={timeZone}>
       <InsightsOrgTeamsProvider>
         <div className="mb-4 space-y-4">
           <RoutingFormResponsesTable />

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
- 
+import { TimezoneBadge } from "@calcom/features/insights/components/booking";
+
 import { useMemo, useEffect } from "react";
 import { createPortal } from "react-dom";
 
@@ -155,6 +156,7 @@ export function RoutingFormResponsesTable() {
           <>
             <DateRangeFilter column={createdAtColumn} options={{ convertToTimeZone: true }} />
             <RoutingFormResponsesDownload sorting={sorting} />
+            <TimezoneBadge />
           </>,
           ctaContainerRef.current
         )}