diff --git a/apps/web/modules/insights/insights-routing-view.tsx b/apps/web/modules/insights/insights-routing-view.tsx index 24cd91896b..cddc6f97d9 100644 --- a/apps/web/modules/insights/insights-routing-view.tsx +++ b/apps/web/modules/insights/insights-routing-view.tsx @@ -1,12 +1,12 @@ "use client"; import { + FailedBookingsByField, RoutingFormResponsesTable, RoutingKPICards, - FailedBookingsByField, } from "@calcom/features/insights/components"; import { FiltersProvider } from "@calcom/features/insights/context/FiltersProvider"; -import { Filters } from "@calcom/features/insights/filters"; +import { RoutingInsightsFilters } from "@calcom/features/insights/filters/routing/FilterBar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import InsightsLayout from "./layout"; @@ -17,12 +17,18 @@ export default function InsightsPage() { return ( - -
- - - + + {/* We now render the "filters and KPI as a children of the table but we still need to pass the table instance to it so we can access column status in the toolbar.*/} + {(table) => ( +
+
+ +
+ +
+ )} +
diff --git a/packages/features/insights/components/RoutingFormResponsesTable.tsx b/packages/features/insights/components/RoutingFormResponsesTable.tsx index 15430c42d9..9a73fffbaf 100644 --- a/packages/features/insights/components/RoutingFormResponsesTable.tsx +++ b/packages/features/insights/components/RoutingFormResponsesTable.tsx @@ -216,7 +216,11 @@ function BookingStatusCell({ export type RoutingFormTableType = ReturnType>; -export function RoutingFormResponsesTable() { +export function RoutingFormResponsesTable({ + children, +}: { + children?: React.ReactNode | ((table: RoutingFormTableType) => React.ReactNode); +}) { const { t } = useLocale(); const { filter } = useFilterContext(); const tableContainerRef = useRef(null); @@ -442,8 +446,9 @@ export function RoutingFormResponsesTable() { fetchMoreOnBottomReached(e.target as HTMLDivElement); } }} - isPending={isFetching && !data} - /> + isPending={isFetching && !data}> + {typeof children === "function" ? children(table) : children} +
); } diff --git a/packages/features/insights/filters/routing/FilterBar.tsx b/packages/features/insights/filters/routing/FilterBar.tsx new file mode 100644 index 0000000000..f0ab9a3c48 --- /dev/null +++ b/packages/features/insights/filters/routing/FilterBar.tsx @@ -0,0 +1,76 @@ +import type { RoutingFormTableType } from "@calcom/features/insights/components/RoutingFormResponsesTable"; +import { useFilterContext } from "@calcom/features/insights/context/provider"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Button, Icon, Tooltip, DataTableFilters } from "@calcom/ui"; + +import { BookingStatusFilter } from "../BookingStatusFilter"; +import { DateSelect } from "../DateSelect"; +import { RoutingDownload } from "../Download"; +import { FilterType } from "../FilterType"; +import { RoutingFormFieldFilter } from "../RoutingFormFieldFilter"; +import { RoutingFormFilterList } from "../RoutingFormFilterList"; +import { TeamAndSelfList } from "../TeamAndSelfList"; +import { UserListInTeam } from "../UsersListInTeam"; + +const ClearFilters = () => { + const { t } = useLocale(); + const { filter, clearFilters } = useFilterContext(); + const { selectedFilter } = filter; + + if (!selectedFilter || selectedFilter?.length < 1) return null; + + return ( + + + + ); +}; + +export const RoutingInsightsFilters = ({ table }: { table: RoutingFormTableType }) => { + const { filter } = useFilterContext(); + const { selectedFilter } = filter; + + // Get all filters that relate to the routing form + const routingFormFieldIds = selectedFilter + ? selectedFilter.map((filter) => { + if (filter.startsWith("rf_")) return filter.substring(3); + }) + : []; + + return ( +
+
+ + + + + + + {routingFormFieldIds.map((fieldId) => { + if (fieldId) return ; + })} + + + + +
+ +
+ + + +
+
+ ); +};