first working cli importer

apps/dashboard/src/components/report/sidebar/ReportEvents.tsx

@@ -28,9 +28,14 @@ import type { ReportEventMoreProps } from './ReportEventMore';
 export function ReportEvents() {
   const previous = useSelector((state) => state.report.previous);
   const selectedEvents = useSelector((state) => state.report.events);
+  const input = useSelector((state) => state.report);
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
-  const eventNames = useEventNames(projectId);
+  const eventNames = useEventNames(projectId, {
+    startDate: input.startDate,
+    endDate: input.endDate,
+    range: input.range,
+  });
 
   const dispatchChangeEvent = useDebounceFn((event: IChartEvent) => {
     dispatch(changeEvent(event));
@@ -54,7 +59,7 @@ export function ReportEvents() {
       <div className="flex flex-col gap-4">
         {selectedEvents.map((event) => {
           return (
-            <div key={event.id} className="bg-def-100 rounded-lg border">
+            <div key={event.id} className="rounded-lg border bg-def-100">
               <div className="flex items-center gap-2 p-2">
                 <ColorSquare>{event.id}</ColorSquare>
                 <Combobox

apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx

@@ -5,7 +5,7 @@ import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
 import { RenderDots } from '@/components/ui/RenderDots';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
-import { useDispatch } from '@/redux';
+import { useDispatch, useSelector } from '@/redux';
 import { api } from '@/trpc/client';
 import { SlidersHorizontal, Trash } from 'lucide-react';
 
@@ -26,12 +26,16 @@ interface FilterProps {
 
 export function FilterItem({ filter, event }: FilterProps) {
   const { projectId } = useAppParams();
+  const { range, startDate, endDate } = useSelector((state) => state.report);
   const getLabel = useMappings();
   const dispatch = useDispatch();
   const potentialValues = api.chart.values.useQuery({
     event: event.name,
     property: filter.name,
     projectId,
+    range,
+    startDate,
+    endDate,
   });
 
   const valuesCombobox =
@@ -90,7 +94,7 @@ export function FilterItem({ filter, event }: FilterProps) {
   return (
     <div
       key={filter.name}
-      className="shadow-def-200 px-4 py-2 shadow-[inset_6px_0_0] first:border-t"
+      className="px-4 py-2 shadow-[inset_6px_0_0] shadow-def-200 first:border-t"
     >
       <div className="mb-2 flex items-center gap-2">
         <ColorSquare className="bg-emerald-500">

apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx

@@ -1,6 +1,6 @@
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
-import { useDispatch } from '@/redux';
+import { useDispatch, useSelector } from '@/redux';
 import { api } from '@/trpc/client';
 import { FilterIcon } from 'lucide-react';
 
@@ -14,12 +14,16 @@ interface FiltersComboboxProps {
 
 export function FiltersCombobox({ event }: FiltersComboboxProps) {
   const dispatch = useDispatch();
+  const { range, startDate, endDate } = useSelector((state) => state.report);
   const { projectId } = useAppParams();
 
   const query = api.chart.properties.useQuery(
     {
       event: event.name,
       projectId,
+      range,
+      startDate,
+      endDate,
     },
     {
       enabled: !!event.name,