a looooot

apps/web/src/components/overview/filters/overview-filters-drawer-content.tsx

@@ -9,6 +9,8 @@ import {
   useEventQueryNamesFilter,
 } from '@/hooks/useEventQueryFilters';
 import { useEventValues } from '@/hooks/useEventValues';
+import { useProfileProperties } from '@/hooks/useProfileProperties';
+import { useProfileValues } from '@/hooks/useProfileValues';
 import { XIcon } from 'lucide-react';
 import type { Options as NuqsOptions } from 'nuqs';
 
@@ -18,21 +20,25 @@ import type {
   IChartEventFilterValue,
 } from '@mixan/validation';
 
-interface OverviewFiltersProps {
+export interface OverviewFiltersDrawerContentProps {
   projectId: string;
   nuqsOptions?: NuqsOptions;
   enableEventsFilter?: boolean;
+  mode: 'profiles' | 'events';
 }
 
 export function OverviewFiltersDrawerContent({
   projectId,
   nuqsOptions,
   enableEventsFilter,
-}: OverviewFiltersProps) {
+  mode,
+}: OverviewFiltersDrawerContentProps) {
   const [filters, setFilter] = useEventQueryFilters(nuqsOptions);
   const [event, setEvent] = useEventQueryNamesFilter(nuqsOptions);
   const eventNames = useEventNames(projectId);
   const eventProperties = useEventProperties(projectId);
+  const profileProperties = useProfileProperties(projectId);
+  const properties = mode === 'events' ? eventProperties : profileProperties;
 
   return (
     <div>
@@ -62,7 +68,7 @@ export function OverviewFiltersDrawerContent({
           value=""
           placeholder="Filter by property"
           label="What do you want to filter by?"
-          items={eventProperties.map((item) => ({
+          items={properties.map((item) => ({
             label: item,
             value: item,
           }))}
@@ -74,8 +80,15 @@ export function OverviewFiltersDrawerContent({
         {filters
           .filter((filter) => filter.value[0] !== null)
           .map((filter) => {
-            return (
-              <FilterOption
+            return mode === 'events' ? (
+              <FilterOptionEvent
+                key={filter.name}
+                projectId={projectId}
+                setFilter={setFilter}
+                {...filter}
+              />
+            ) : (
+              <FilterOptionProfile
                 key={filter.name}
                 projectId={projectId}
                 setFilter={setFilter}
@@ -88,7 +101,7 @@ export function OverviewFiltersDrawerContent({
   );
 }
 
-export function FilterOption({
+export function FilterOptionEvent({
   setFilter,
   projectId,
   ...filter
@@ -131,3 +144,43 @@ export function FilterOption({
     </div>
   );
 }
+
+export function FilterOptionProfile({
+  setFilter,
+  projectId,
+  ...filter
+}: IChartEventFilter & {
+  projectId: string;
+  setFilter: (
+    name: string,
+    value: IChartEventFilterValue,
+    operator: IChartEventFilterOperator
+  ) => void;
+}) {
+  const values = useProfileValues(projectId, filter.name);
+
+  return (
+    <div className="flex gap-2 items-center">
+      <div>{filter.name}</div>
+      <Combobox
+        className="flex-1"
+        onChange={(value) => setFilter(filter.name, value, filter.operator)}
+        placeholder={'Select a value'}
+        items={values.map((value) => ({
+          value,
+          label: value,
+        }))}
+        value={String(filter.value[0] ?? '')}
+      />
+      <Button
+        size="icon"
+        variant="ghost"
+        onClick={() =>
+          setFilter(filter.name, filter.value[0] ?? '', filter.operator)
+        }
+      >
+        <XIcon />
+      </Button>
+    </div>
+  );
+}

apps/web/src/components/overview/filters/overview-filters-drawer.tsx

@@ -3,21 +3,13 @@
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { FilterIcon } from 'lucide-react';
-import type { Options as NuqsOptions } from 'nuqs';
 
+import type { OverviewFiltersDrawerContentProps } from './overview-filters-drawer-content';
 import { OverviewFiltersDrawerContent } from './overview-filters-drawer-content';
 
-interface OverviewFiltersDrawerProps {
-  projectId: string;
-  nuqsOptions?: NuqsOptions;
-  enableEventsFilter?: boolean;
-}
-
-export function OverviewFiltersDrawer({
-  projectId,
-  nuqsOptions,
-  enableEventsFilter,
-}: OverviewFiltersDrawerProps) {
+export function OverviewFiltersDrawer(
+  props: OverviewFiltersDrawerContentProps
+) {
   return (
     <Sheet>
       <SheetTrigger asChild>
@@ -26,11 +18,7 @@ export function OverviewFiltersDrawer({
         </Button>
       </SheetTrigger>
       <SheetContent className="!max-w-lg w-full" side="right">
-        <OverviewFiltersDrawerContent
-          projectId={projectId}
-          nuqsOptions={nuqsOptions}
-          enableEventsFilter={enableEventsFilter}
-        />
+        <OverviewFiltersDrawerContent {...props} />
       </SheetContent>
     </Sheet>
   );