From da1863069d7010c2ae49217e6075aa8242cb0967 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Mon, 15 Sep 2025 10:53:30 +0200
Subject: [PATCH] feat: sort bookingUserId options alphabetically on the
 /insights/routing page (#23791)

* feat: sort bookingUserId options alphabetically in insights routing faceted values

- Add .sort((a, b) => a.label.localeCompare(b.label)) to bookingUserId options
- Makes user dropdown more human-friendly with alphabetical ordering
- Follows existing sorting pattern used in FilterSegmentSelect.tsx
- Fix ESLint warning by replacing Table<any> with Table<unknown>

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

* fix: use generic type parameter instead of unknown in Table type

- Replace Table<unknown> with <TData>(_: Table<TData>) to fix CI type errors
- Maintains type safety while avoiding ESLint any type warning
- Allows hook to work with any table type through generic parameter

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

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../useInsightsRoutingFacetedUniqueValues.ts  | 91 ++++++++++---------
 1 file changed, 47 insertions(+), 44 deletions(-)

diff --git a/packages/features/insights/hooks/useInsightsRoutingFacetedUniqueValues.ts b/packages/features/insights/hooks/useInsightsRoutingFacetedUniqueValues.ts
index d71a51d04e..c03bb1a670 100644
--- a/packages/features/insights/hooks/useInsightsRoutingFacetedUniqueValues.ts
+++ b/packages/features/insights/hooks/useInsightsRoutingFacetedUniqueValues.ts
@@ -60,52 +60,55 @@ export const useInsightsRoutingFacetedUniqueValues = ({
   );
 
   return useCallback(
-    (_: Table<any>, columnId: string) => (): Map<FacetedValue, number> => {
-      if (!headers) {
-        return new Map<FacetedValue, number>();
-      }
+    <TData>(_: Table<TData>, columnId: string) =>
+      (): Map<FacetedValue, number> => {
+        if (!headers) {
+          return new Map<FacetedValue, number>();
+        }
 
-      const fieldHeader = headers.find((h) => h.id === columnId);
-      if (fieldHeader?.options) {
-        return convertFacetedValuesToMap(
-          fieldHeader.options
-            .filter((option): option is { id: string; label: string } => option.id !== null)
-            .map((option) => ({
-              label: option.label,
-              value: option.id,
+        const fieldHeader = headers.find((h) => h.id === columnId);
+        if (fieldHeader?.options) {
+          return convertFacetedValuesToMap(
+            fieldHeader.options
+              .filter((option): option is { id: string; label: string } => option.id !== null)
+              .map((option) => ({
+                label: option.label,
+                value: option.id,
+              }))
+          );
+        } else if (columnId === "bookingStatusOrder") {
+          return convertFacetedValuesToMap(
+            Object.keys(statusOrder).map((status) => ({
+              value: statusOrder[status as BookingStatus],
+              label: bookingStatusToText(status as BookingStatus),
             }))
-        );
-      } else if (columnId === "bookingStatusOrder") {
-        return convertFacetedValuesToMap(
-          Object.keys(statusOrder).map((status) => ({
-            value: statusOrder[status as BookingStatus],
-            label: bookingStatusToText(status as BookingStatus),
-          }))
-        );
-      } else if (columnId === "formId") {
-        return convertFacetedValuesToMap(
-          forms?.map((form) => ({
-            label: form.name,
-            value: form.id,
-          })) ?? []
-        );
-      } else if (columnId === "bookingUserId") {
-        return convertFacetedValuesToMap(
-          users?.map((user) => ({
-            label: user.name ?? user.email,
-            value: user.id,
-          })) ?? []
-        );
-      } else if (columnId === "eventTypeId") {
-        return convertFacetedValuesToMap(
-          eventTypes?.map((eventType) => ({
-            value: eventType.id,
-            label: eventType.teamId ? `${eventType.title} (${eventType.team?.name})` : eventType.title,
-          })) ?? []
-        );
-      }
-      return new Map<FacetedValue, number>();
-    },
+          );
+        } else if (columnId === "formId") {
+          return convertFacetedValuesToMap(
+            forms?.map((form) => ({
+              label: form.name,
+              value: form.id,
+            })) ?? []
+          );
+        } else if (columnId === "bookingUserId") {
+          return convertFacetedValuesToMap(
+            users
+              ?.map((user) => ({
+                label: user.name ?? user.email,
+                value: user.id,
+              }))
+              .sort((a, b) => a.label.localeCompare(b.label)) ?? []
+          );
+        } else if (columnId === "eventTypeId") {
+          return convertFacetedValuesToMap(
+            eventTypes?.map((eventType) => ({
+              value: eventType.id,
+              label: eventType.teamId ? `${eventType.title} (${eventType.team?.name})` : eventType.title,
+            })) ?? []
+          );
+        }
+        return new Map<FacetedValue, number>();
+      },
     [headers, forms, users, eventTypes]
   );
 };