feat(dashboard): add quick filter for origin

apps/dashboard/src/components/overview/filters/origin-filter.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { useAppParams } from '@/hooks/useAppParams';
+import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
+import { api } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { GlobeIcon } from 'lucide-react';
+
+export function OriginFilter() {
+  const { projectId } = useAppParams();
+  const [filters, setFilter] = useEventQueryFilters();
+  const originFilter = filters.find((item) => item.name === 'origin');
+
+  const { data } = api.event.origin.useQuery(
+    {
+      projectId: projectId,
+    },
+    {
+      staleTime: 1000 * 60 * 60,
+    }
+  );
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {data?.map((item) => {
+        return (
+          <Button
+            key={item.origin}
+            variant="outline"
+            icon={GlobeIcon}
+            className={cn(
+              originFilter?.value.includes(item.origin) && 'border-foreground'
+            )}
+            onClick={() => setFilter('origin', [item.origin], 'is')}
+          >
+            {item.origin}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -12,7 +12,7 @@ import {
 import { useProfileProperties } from '@/hooks/useProfileProperties';
 import { useProfileValues } from '@/hooks/useProfileValues';
 import { usePropertyValues } from '@/hooks/usePropertyValues';
-import { XIcon } from 'lucide-react';
+import { GlobeIcon, XIcon } from 'lucide-react';
 import type { Options as NuqsOptions } from 'nuqs';
 
 import type {
@@ -22,6 +22,7 @@ import type {
 } from '@openpanel/validation';
 
 import { useOverviewOptions } from '../useOverviewOptions';
+import { OriginFilter } from './origin-filter';
 
 export interface OverviewFiltersDrawerContentProps {
   projectId: string;
@@ -52,6 +53,7 @@ export function OverviewFiltersDrawerContent({
 
       <div className="mt-8 flex flex-col rounded-md border bg-def-100">
         <div className="flex flex-col gap-4 p-4">
+          <OriginFilter />
           {enableEventsFilter && (
             <ComboboxAdvanced
               className="w-full"
@@ -106,10 +108,8 @@ export function OverviewFiltersDrawerContent({
                 startDate={startDate}
                 endDate={endDate}
               />
-            ) : (
-              /* TODO: Implement profile filters */
-              null
-            );
+            ) : /* TODO: Implement profile filters */
+            null;
           })}
       </div>
     </div>