show selected filter values

packages/features/data-table/components/filters/FilterPopover.tsx

@@ -0,0 +1,69 @@
+// eslint-disable-next-line no-restricted-imports
+import startCase from "lodash/startCase";
+
+import { Button, Icon, Popover, PopoverContent, PopoverTrigger } from "@calcom/ui";
+
+import { useFilterValue } from "../../hooks";
+import { type FilterableColumn, type FilterValue, ZFilterValue } from "../../lib/types";
+import {
+  isSingleSelectFilterValue,
+  isMultiSelectFilterValue,
+  isTextFilterValue,
+  isNumberFilterValue,
+} from "../../lib/utils";
+import { FilterOptions } from "./FilterOptions";
+
+const FILTER_ICONS = {
+  text: "file-text",
+  number: "binary",
+  multi_select: "layers",
+  single_select: "disc",
+} as const;
+
+type FilterPopoverProps = {
+  column: FilterableColumn;
+};
+
+const useSelectedLabels = ({
+  column,
+  filterValue,
+}: {
+  column: FilterableColumn;
+  filterValue: FilterValue;
+}) => {
+  if (isTextFilterValue(filterValue)) {
+    return { text: filterValue.data.operand, moreCount: 0 };
+  } else if (isNumberFilterValue(filterValue)) {
+    return { text: filterValue.data.operand, moreCount: 0 };
+  } else if (isSingleSelectFilterValue(filterValue)) {
+    const text = Array.from(column.options.keys()).find((opt) => opt.value === filterValue.data)?.label;
+    return { text, moreCount: 0 };
+  } else if (isMultiSelectFilterValue(filterValue)) {
+    const text = Array.from(column.options.keys()).find((opt) => opt.value === filterValue.data[0])?.label;
+    return { text, moreCount: filterValue.data.length - 1 };
+  } else {
+    return { text: "", moreCount: 0 };
+  }
+};
+
+export function FilterPopover({ column }: FilterPopoverProps) {
+  const icon = column.icon || FILTER_ICONS[column.type];
+  const filterValue = useFilterValue(column.id, ZFilterValue);
+  const { text, moreCount } = useSelectedLabels({ column, filterValue });
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button color="secondary" className="items-center">
+          <Icon name={icon} className="mr-2 h-4 w-4" />
+          <span>{startCase(column.title)}</span>
+          {text && <span className="bg-subtle ml-2 rounded-md px-2">{text}</span>}
+          {moreCount > 0 && <span className="bg-subtle ml-2 rounded-md px-2">+{moreCount}</span>}
+          <Icon name="chevron-down" className="ml-2 h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <FilterOptions column={column} />
+      </PopoverContent>
+    </Popover>
+  );
+}

packages/features/data-table/components/filters/index.tsx

@@ -28,7 +28,7 @@ import { useDataTable } from "../../hooks";
 import type { FilterableColumn } from "../../lib/types";
 import { ClearFiltersButton } from "./ClearFiltersButton";
 import { DateRangeFilter } from "./DateRangeFilter";
-import { FilterOptions } from "./FilterOptions";
+import { FilterPopover } from "./FilterPopover";
 
 interface ColumnVisiblityProps<TData> {
   table: Table<TData>;
@@ -221,13 +221,6 @@ interface ActiveFiltersProps<TData> {
   table: Table<TData>;
 }
 
-const filterIcons = {
-  text: "file-text",
-  number: "binary",
-  multi_select: "layers",
-  single_select: "disc",
-} as const;
-
 function ActiveFilters<TData>({ table }: ActiveFiltersProps<TData>) {
   const { activeFilters } = useDataTable();
   const filterableColumns = useFilterableColumns(table);
@@ -237,21 +230,7 @@ function ActiveFilters<TData>({ table }: ActiveFiltersProps<TData>) {
       {activeFilters.map((filter) => {
         const column = filterableColumns.find((col) => col.id === filter.f);
         if (!column) return null;
-        const icon = column.icon || filterIcons[column.type];
-        return (
-          <Popover key={column.id}>
-            <PopoverTrigger asChild>
-              <Button color="secondary">
-                <Icon name={icon} className="mr-2 h-4 w-4" />
-                {startCase(column.title)}
-                <Icon name="chevron-down" className="ml-2 h-4 w-4" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="start">
-              <FilterOptions column={column} />
-            </PopoverContent>
-          </Popover>
-        );
+        return <FilterPopover key={column.id} column={column} />;
       })}
     </>
   );

packages/features/data-table/hooks/useColumnFilters.ts

@@ -5,7 +5,7 @@ import { ZFilterValue } from "../lib/types";
 import { isMultiSelectFilterValue } from "../lib/utils";
 import { useDataTable } from "./useDataTable";
 
-export function useColumnFilters({ exclude }: { exclude?: string[] }): ColumnFilter[] {
+export function useColumnFilters({ exclude }: { exclude?: string[] } = {}): ColumnFilter[] {
   const { activeFilters } = useDataTable();
 
   // Stringify the exclude array for stable memoization

packages/features/data-table/lib/utils.ts

@@ -6,12 +6,14 @@ import type {
   TextFilterValue,
   FilterValue,
   NumberFilterValue,
+  DateRangeFilterValue,
 } from "./types";
 import {
   ZNumberFilterValue,
   ZSingleSelectFilterValue,
   ZMultiSelectFilterValue,
   ZTextFilterValue,
+  ZDateRangeFilterValue,
 } from "./types";
 
 export const textFilter = (cellValue: unknown, filterValue: TextFilterValue) => {
@@ -113,6 +115,10 @@ export const isNumberFilterValue = (filterValue: unknown): filterValue is Number
   return ZNumberFilterValue.safeParse(filterValue).success;
 };
 
+export const isDateRangeFilterValue = (filterValue: unknown): filterValue is DateRangeFilterValue => {
+  return ZDateRangeFilterValue.safeParse(filterValue).success;
+};
+
 export const dataTableFilter = (cellValue: unknown, filterValue: FilterValue) => {
   if (isSingleSelectFilterValue(filterValue)) {
     return singleSelectFilter(cellValue, filterValue);

packages/features/insights/components/RoutingFormResponsesTable.tsx

@@ -27,7 +27,6 @@ import {
   textFilter,
   dataTableFilter,
   useDataTable,
-  ZNumberFilterValue,
   ZDateRangeFilterValue,
   ZSingleSelectFilterValue,
   DateRangeFilter,
@@ -280,14 +279,13 @@ export function RoutingFormResponsesTableContent() {
   const teamId = orgTeamsType === "team" ? selectedTeamId : undefined;
   const userId = orgTeamsType === "yours" ? session.data?.user.id : undefined;
 
-  const memberUserId = useFilterValue("bookingUserId", ZNumberFilterValue)?.data.operand;
+  const memberUserId = useFilterValue("bookingUserId", ZSingleSelectFilterValue)?.data;
   const routingFormId = useFilterValue("formId", ZSingleSelectFilterValue)?.data;
   const createdAtRange = useFilterValue("createdAt", ZDateRangeFilterValue)?.data;
   const { startDate, endDate } = createdAtRange ?? {
     startDate: dayjs().subtract(1, "week").startOf("day").toISOString(),
     endDate: dayjs().endOf("day").toISOString(),
   };
-  console.log("💡 startDate, endDate", { startDate, endDate });
 
   const {
     data: headers,