calcom
diff --git a/‎apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx‎
Lines changed: 1 addition & 5 deletions b/‎apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx‎
Lines changed: 1 addition & 5 deletions
diff --git a/‎apps/web/app/(use-page-wrapper)/insights/wrong-routing/page.tsx‎
Lines changed: 26 additions & 0 deletions b/‎apps/web/app/(use-page-wrapper)/insights/wrong-routing/page.tsx‎
Lines changed: 26 additions & 0 deletions
diff --git a/‎apps/web/components/booking/RoutingFormResponseSheet.tsx‎
Lines changed: 72 additions & 0 deletions b/‎apps/web/components/booking/RoutingFormResponseSheet.tsx‎
Lines changed: 72 additions & 0 deletions
diff --git a/‎apps/web/components/booking/RoutingTraceSheet.tsx‎
Lines changed: 41 additions & 5 deletions b/‎apps/web/components/booking/RoutingTraceSheet.tsx‎
Lines changed: 41 additions & 5 deletions
diff --git a/‎apps/web/components/booking/actions/BookingActionsDropdown.tsx‎
Lines changed: 24 additions & 25 deletions b/‎apps/web/components/booking/actions/BookingActionsDropdown.tsx‎
Lines changed: 24 additions & 25 deletions
diff --git a/‎apps/web/modules/bookings/components/BookingDetailsSheet.tsx‎
Lines changed: 12 additions & 13 deletions b/‎apps/web/modules/bookings/components/BookingDetailsSheet.tsx‎
Lines changed: 12 additions & 13 deletions
@@ -359,7 +359,6 @@ type RouteActionSelectorProps = {
   onCustomEventTypeSlugChange?: (slug: string) => void;
   eventTypePrefix?: string;
   fieldIdentifiers?: string[];
-  t: (key: string, options?: Record<string, string>) => string;
 };
 
 const RouteActionSelector = ({
@@ -375,8 +374,8 @@ const RouteActionSelector = ({
   onCustomEventTypeSlugChange,
   eventTypePrefix = "",
   fieldIdentifiers = [],
-  t,
 }: RouteActionSelectorProps) => {
+  const { t } = useLocale();
   return (
     <div className={classNames("flex w-full flex-col gap-2 text-sm lg:flex-row", className)}>
       <div className="flex grow items-center gap-2">
@@ -803,7 +802,6 @@ const Route = ({
             onCustomEventTypeSlugChange={setCustomFallbackEventTypeSlug}
             eventTypePrefix={eventTypePrefix}
             fieldIdentifiers={fieldIdentifiers}
-            t={t}
           />
         </div>
         {isOrganization && (
@@ -899,7 +897,6 @@ const Route = ({
                 onCustomEventTypeSlugChange={setCustomEventTypeSlug}
                 eventTypePrefix={eventTypePrefix}
                 fieldIdentifiers={fieldIdentifiers}
-                t={t}
               />
             ) : (
               <div className="bg-default border-subtle my-3 rounded-xl border p-2">
@@ -938,7 +935,6 @@ const Route = ({
                     onCustomEventTypeSlugChange={setCustomEventTypeSlug}
                     eventTypePrefix={eventTypePrefix}
                     fieldIdentifiers={fieldIdentifiers}
-                    t={t}
                   />
                 </div>
                 {attributesQueryBuilder}
 
@@ -0,0 +1,26 @@
+import { _generateMetadata } from "app/_utils";
+
+import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
+import prisma from "@calcom/prisma";
+
+import InsightsWrongRoutingPage from "~/insights/views/insights-wrong-routing-view";
+
+import { checkInsightsPagePermission } from "../checkInsightsPagePermission";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("wrong_routing"),
+    (t) => t("wrong_routing_description"),
+    undefined,
+    undefined,
+    "/insights/wrong-routing"
+  );
+
+export default async function Page() {
+  const session = await checkInsightsPagePermission();
+
+  const userRepository = new UserRepository(prisma);
+  const user = await userRepository.getTimeZoneAndDefaultScheduleId({ userId: session?.user.id ?? -1 });
+
+  return <InsightsWrongRoutingPage timeZone={user?.timeZone ?? "UTC"} />;
+}
@@ -0,0 +1,72 @@
+"use client";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody } from "@calcom/ui/components/sheet";
+
+interface RoutingFormResponseSheetProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  formResponseId: number;
+}
+
+export function RoutingFormResponseSheet({
+  isOpen,
+  setIsOpen,
+  formResponseId,
+}: RoutingFormResponseSheetProps) {
+  const { t } = useLocale();
+
+  const { data, isLoading } = trpc.viewer.appRoutingForms.getFormResponseDisplay.useQuery(
+    { formResponseId },
+    {
+      enabled: isOpen && !!formResponseId,
+      staleTime: 10 * 60 * 1000,
+    }
+  );
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>{t("form_submission")}</SheetTitle>
+        </SheetHeader>
+        <SheetBody>
+          {isLoading && (
+            <div className="flex flex-col gap-4 py-2">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex flex-col gap-1.5">
+                  <div className="bg-muted h-3 w-24 animate-pulse rounded" />
+                  <div className="bg-muted h-5 w-full animate-pulse rounded" />
+                </div>
+              ))}
+            </div>
+          )}
+          {!isLoading && (!data?.responses || data.responses.length === 0) && (
+            <p className="text-subtle text-sm">{t("no_responses_found")}</p>
+          )}
+          {!isLoading && data?.responses && data.responses.length > 0 && (
+            <div className="flex flex-col gap-4">
+              {data.form?.name && (
+                <div className="border-subtle border-b pb-3">
+                  <p className="text-emphasis text-sm font-medium">{data.form.name}</p>
+                  {data.form.description && (
+                    <p className="text-subtle text-xs">{data.form.description}</p>
+                  )}
+                </div>
+              )}
+              {data.responses.map((item) => (
+                <div key={item.fieldId} className="flex flex-col gap-1">
+                  <label className="text-subtle text-xs font-medium uppercase tracking-wide">
+                    {item.label}
+                  </label>
+                  <p className="text-emphasis text-sm">{item.displayValue}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}
@@ -5,16 +5,34 @@ import { DomainIcon } from "@calcom/features/routing-trace/components/DomainIcon
 import { getDomainLabel } from "@calcom/features/routing-trace/presenters/getDomainLabel";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody } from "@calcom/ui/components/sheet";
+import { Button } from "@calcom/ui/components/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+} from "@calcom/ui/components/sheet";
+
 
 interface RoutingTraceSheetProps {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
   bookingUid: string;
+  /** Callback to open the wrong assignment report dialog. If not provided, report button is hidden */
+  onReport?: () => void;
+  hasExistingReport?: boolean;
 }
 
-export function RoutingTraceSheet({ isOpen, setIsOpen, bookingUid }: RoutingTraceSheetProps) {
+export function RoutingTraceSheet({
+  isOpen,
+  setIsOpen,
+  bookingUid,
+  onReport,
+  hasExistingReport,
+}: RoutingTraceSheetProps) {
   const { t } = useLocale();
+  const showReportButton = !!onReport;
 
   const { data, isLoading } = trpc.viewer.bookings.getRoutingTrace.useQuery(
     { bookingUid },
@@ -27,8 +45,24 @@ export function RoutingTraceSheet({ isOpen, setIsOpen, bookingUid }: RoutingTrac
   return (
     <Sheet open={isOpen} onOpenChange={setIsOpen}>
       <SheetContent>
-        <SheetHeader>
-          <SheetTitle>{t("routing_trace")}</SheetTitle>
+        <SheetHeader showCloseButton={!showReportButton} className="w-full">
+          {showReportButton ? (
+            <div className="flex w-full items-center justify-between">
+              <SheetTitle>{t("routing_trace")}</SheetTitle>
+              <div className="flex items-center gap-2 pl-2">
+                <Button
+                  color="secondary"
+                  size="sm"
+                  StartIcon="flag"
+                  disabled={hasExistingReport}
+                  onClick={onReport}>
+                  {t("report")}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <SheetTitle>{t("routing_trace")}</SheetTitle>
+          )}
         </SheetHeader>
         <SheetBody>
           {isLoading && (
@@ -54,7 +88,9 @@ export function RoutingTraceSheet({ isOpen, setIsOpen, bookingUid }: RoutingTrac
                 return (
                   <div key={idx} className="relative flex gap-3 pb-6 last:pb-0">
                     {/* Timeline connector line */}
-                    {!isLast && <div className="border-subtle absolute left-4 top-8 bottom-0 border-l" />}
+                    {!isLast && (
+                      <div className="border-subtle absolute left-4 top-8 bottom-0 border-l" />
+                    )}
                     {/* Icon circle */}
                     <div className="bg-default border-subtle relative z-10 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border">
                       <DomainIcon domain={step.domain} />
 
@@ -1,14 +1,9 @@
-import { useState } from "react";
-import type { z } from "zod";
-
-import { MeetingSessionDetailsDialog } from "@calcom/web/modules/ee/video/components/MeetingSessionDetailsDialog";
-import ViewRecordingsDialog from "~/ee/video/components/ViewRecordingsDialog";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
+import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 import {
   Dropdown,
   DropdownItem,
@@ -19,10 +14,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
-import { Tooltip } from "@calcom/ui/components/tooltip";
 import type { ActionType } from "@calcom/ui/components/table";
 import { showToast } from "@calcom/ui/components/toast";
-
+import { Tooltip } from "@calcom/ui/components/tooltip";
+import { MeetingSessionDetailsDialog } from "@calcom/web/modules/ee/video/components/MeetingSessionDetailsDialog";
 import { AddGuestsDialog } from "@components/dialog/AddGuestsDialog";
 import { CancelBookingDialog } from "@components/dialog/CancelBookingDialog";
 import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
@@ -33,20 +28,22 @@ import { ReportBookingDialog } from "@components/dialog/ReportBookingDialog";
 import { RerouteDialog } from "@components/dialog/RerouteDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import { WrongAssignmentDialog } from "@components/dialog/WrongAssignmentDialog";
-import { RoutingTraceSheet } from "../RoutingTraceSheet";
-
+import { useState } from "react";
+import type { z } from "zod";
+import ViewRecordingsDialog from "~/ee/video/components/ViewRecordingsDialog";
 import { useBookingConfirmation } from "../hooks/useBookingConfirmation";
+import { RoutingTraceSheet } from "../RoutingTraceSheet";
 import type { BookingItemProps } from "../types";
 import { useBookingActionsStoreContext } from "./BookingActionsStoreProvider";
 import {
+  type BookingActionContext,
+  getAfterEventActions,
   getCancelEventAction,
   getEditEventActions,
-  getAfterEventActions,
+  getPendingActions,
   getReportAction,
   shouldShowEditActions,
   shouldShowPendingActions,
-  getPendingActions,
-  type BookingActionContext,
 } from "./bookingActions";
 
 interface BookingActionsDropdownProps {
@@ -455,18 +452,20 @@ export function BookingActionsDropdown({
         status={getBookingStatus()}
       />
       {isBookingFromRoutingForm && (
-        <WrongAssignmentDialog
-          isOpenDialog={isOpenWrongAssignmentDialog}
-          setIsOpenDialog={setIsOpenWrongAssignmentDialog}
-          booking={booking}
-        />
-      )}
-      {booking.assignmentReasonSortedByCreatedAt.length > 0 && (
-        <RoutingTraceSheet
-          isOpen={isOpenRoutingTraceSheet}
-          setIsOpen={setIsOpenRoutingTraceSheet}
-          bookingUid={booking.uid}
-        />
+        <>
+          <WrongAssignmentDialog
+            isOpenDialog={isOpenWrongAssignmentDialog}
+            setIsOpenDialog={setIsOpenWrongAssignmentDialog}
+            booking={booking}
+          />
+          <RoutingTraceSheet
+            isOpen={isOpenRoutingTraceSheet}
+            setIsOpen={setIsOpenRoutingTraceSheet}
+            bookingUid={booking.uid}
+            onReport={() => setIsOpenWrongAssignmentDialog(true)}
+            hasExistingReport={!!booking.report}
+          />
+        </>
       )}
       {booking.paid && booking.payment[0] && (
         <ChargeCardDialog
 
@@ -1,9 +1,5 @@
 "use client";
 
-import Link from "next/link";
-import { useMemo } from "react";
-import { z } from "zod";
-
 import dayjs from "@calcom/dayjs";
 import { useBookingLocation } from "@calcom/features/bookings/hooks";
 import { shouldShowFieldInCustomResponses } from "@calcom/lib/bookings/SystemField";
@@ -15,8 +11,8 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { BookingStatus } from "@calcom/prisma/enums";
 import {
   bookingMetadataSchema,
-  eventTypeBookingFields,
   EventTypeMetaDataSchema,
+  eventTypeBookingFields,
 } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import type { RecurringEvent } from "@calcom/types/Calendar";
@@ -25,28 +21,30 @@ import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { Icon } from "@calcom/ui/components/icon";
+import { SegmentedControl } from "@calcom/ui/components/segmented-control";
 import {
   Sheet,
-  SheetContent,
   SheetBody,
-  SheetHeader,
+  SheetContent,
   SheetFooter,
+  SheetHeader,
   SheetTitle,
 } from "@calcom/ui/components/sheet";
-
+import { BookingHistory } from "@calcom/web/modules/booking-audit/components/BookingHistory";
 import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
-
+import Link from "next/link";
+import { useMemo } from "react";
+import type { z } from "zod";
 import { AcceptBookingButton } from "../../../components/booking/AcceptBookingButton";
-import { RejectBookingButton } from "../../../components/booking/RejectBookingButton";
 import { BookingActionsDropdown } from "../../../components/booking/actions/BookingActionsDropdown";
 import { BookingActionsStoreProvider } from "../../../components/booking/actions/BookingActionsStoreProvider";
+import { RejectBookingButton } from "../../../components/booking/RejectBookingButton";
 import type { BookingListingStatus } from "../../../components/booking/types";
 import { usePaymentStatus } from "../hooks/usePaymentStatus";
 import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";
 import type { BookingOutput } from "../types";
 import { JoinMeetingButton } from "./JoinMeetingButton";
-import { BookingHistory } from "@calcom/web/modules/booking-audit/components/BookingHistory";
-import { SegmentedControl } from "@calcom/ui/components/segmented-control";
+
 type BookingMetaData = z.infer<typeof bookingMetadataSchema>;
 
 interface BookingDetailsSheetProps {
@@ -215,7 +213,8 @@ function BookingDetailsSheetInner({
         .map(([question, answer]) => [question, answer] as [string, unknown])
     : [];
 
-  const reason = booking.assignmentReasonSortedByCreatedAt?.[booking.assignmentReasonSortedByCreatedAt.length - 1];
+  const reason =
+    booking.assignmentReasonSortedByCreatedAt?.[booking.assignmentReasonSortedByCreatedAt.length - 1];
   const reasonTitle = reason && assignmentReasonBadgeTitleMap(reason.reasonEnum);
 
   return (