well deserved clean up (#1)

apps/dashboard/src/components/report/ReportRange.tsx

@@ -7,9 +7,8 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { useBreakpoint } from '@/hooks/useBreakpoint';
-import { useDispatch, useSelector } from '@/redux';
 import { cn } from '@/utils/cn';
-import { endOfDay, format, startOfDay } from 'date-fns';
+import { format } from 'date-fns';
 import { CalendarIcon, ChevronsUpDownIcon } from 'lucide-react';
 import type { SelectRangeEventHandler } from 'react-day-picker';
 
@@ -18,7 +17,6 @@ import type { IChartRange } from '@openpanel/validation';
 
 import type { ExtendedComboboxProps } from '../ui/combobox';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
-import { changeDates, changeEndDate, changeStartDate } from './reportSlice';
 
 export function ReportRange({
   range,

apps/dashboard/src/components/report/chart/ChartEmpty.tsx

@@ -1,4 +1,4 @@
-import { FullPageEmptyState } from '@/components/FullPageEmptyState';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
 import { cn } from '@/utils/cn';
 
 import { useChartContext } from './ChartProvider';

apps/dashboard/src/components/report/chart/MetricCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { IChartData } from '@/app/_trpc/client';
-import { ColorSquare } from '@/components/ColorSquare';
+import { ColorSquare } from '@/components/color-square';
 import { fancyMinutes, useNumber } from '@/hooks/useNumerFormatter';
 import { theme } from '@/utils/theme';
 import AutoSizer from 'react-virtualized-auto-sizer';

apps/dashboard/src/components/report/chart/ReportLineChart.tsx

@@ -44,7 +44,6 @@ export function ReportLineChart({
   const { series, setVisibleSeries } = useVisibleSeries(data);
   const rechartData = useRechartDataModel(series);
   const number = useNumber();
-  console.log(references.map((ref) => ref.createdAt.getTime()));
 
   return (
     <>

apps/dashboard/src/components/report/chart/ReportPieChart.tsx

@@ -1,5 +1,5 @@
 import type { IChartData } from '@/app/_trpc/client';
-import { AutoSizer } from '@/components/AutoSizer';
+import { AutoSizer } from '@/components/react-virtualized-auto-sizer';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import { cn } from '@/utils/cn';
 import { round } from '@/utils/math';

apps/dashboard/src/components/report/chart/ReportTable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { IChartData } from '@/app/_trpc/client';
-import { Pagination, usePagination } from '@/components/Pagination';
+import { Pagination, usePagination } from '@/components/pagination';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -30,12 +30,14 @@ interface ReportTableProps {
   setVisibleSeries: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
+const ROWS_LIMIT = 50;
+
 export function ReportTable({
   data,
   visibleSeries,
   setVisibleSeries,
 }: ReportTableProps) {
-  const { setPage, paginate, page } = usePagination(50);
+  const { setPage, paginate, page } = usePagination(ROWS_LIMIT);
   const number = useNumber();
   const interval = useSelector((state) => state.report.interval);
   const formatDate = useFormatDateInterval(interval);
@@ -162,7 +164,12 @@ export function ReportTable({
           <Badge>Min: {number.format(data.metrics.min)}</Badge>
           <Badge>Max: {number.format(data.metrics.max)}</Badge>
         </div>
-        <Pagination cursor={page} setCursor={setPage} />
+        <Pagination
+          cursor={page}
+          setCursor={setPage}
+          take={ROWS_LIMIT}
+          count={data.series.length}
+        />
       </div>
     </>
   );

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { api } from '@/app/_trpc/client';
-import { ColorSquare } from '@/components/ColorSquare';
+import { ColorSquare } from '@/components/color-square';
 import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { ColorSquare } from '@/components/ColorSquare';
-import { Dropdown } from '@/components/Dropdown';
+import { ColorSquare } from '@/components/color-square';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Combobox } from '@/components/ui/combobox';
+import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
@@ -94,7 +94,7 @@ export function ReportEvents() {
 
               {/* Segment and Filter buttons */}
               <div className="flex gap-2 p-2 pt-0 text-sm">
-                <Dropdown
+                <DropdownMenuComposed
                   onChange={(segment) => {
                     dispatch(
                       changeEvent({
@@ -166,7 +166,7 @@ export function ReportEvents() {
                       </>
                     )}
                   </button>
-                </Dropdown>
+                </DropdownMenuComposed>
                 {/*  */}
                 <FiltersCombobox event={event} />
 

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

@@ -1,8 +1,8 @@
 import { api } from '@/app/_trpc/client';
-import { ColorSquare } from '@/components/ColorSquare';
-import { Dropdown } from '@/components/Dropdown';
+import { ColorSquare } from '@/components/color-square';
 import { Button } from '@/components/ui/button';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
+import { DropdownMenuComposed } from '@/components/ui/dropdown-menu';
 import { RenderDots } from '@/components/ui/RenderDots';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
@@ -104,7 +104,7 @@ export function FilterItem({ filter, event }: FilterProps) {
         </Button>
       </div>
       <div className="flex gap-1">
-        <Dropdown
+        <DropdownMenuComposed
           onChange={changeFilterOperator}
           items={mapKeys(operators).map((key) => ({
             value: key,
@@ -115,7 +115,7 @@ export function FilterItem({ filter, event }: FilterProps) {
           <Button variant={'ghost'} className="whitespace-nowrap">
             {operators[filter.operator]}
           </Button>
-        </Dropdown>
+        </DropdownMenuComposed>
         <ComboboxAdvanced
           items={valuesCombobox}
           value={filter.value}