well deserved clean up (#1)

apps/dashboard/src/components/Container.tsx

@@ -1,11 +0,0 @@
-import type { HtmlProps } from '@/types';
-import { cn } from '@/utils/cn';
-
-export function Container({ className, ...props }: HtmlProps<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('mx-auto w-full max-w-4xl px-4', className)}
-      {...props}
-    />
-  );
-}

apps/dashboard/src/components/Content.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { cn } from '@/utils/cn';
-
-interface ContentHeaderProps {
-  title: string;
-  text: string;
-  children?: React.ReactNode;
-}
-
-export function ContentHeader({ title, text, children }: ContentHeaderProps) {
-  return (
-    <div className="flex items-center justify-between py-6 first:pt-0">
-      <div>
-        <h2 className="h2">{title}</h2>
-        <p className="text-sm text-muted-foreground">{text}</p>
-      </div>
-      <div>{children}</div>
-    </div>
-  );
-}
-
-interface ContentSectionProps {
-  title: string;
-  text?: string | React.ReactNode;
-  children: React.ReactNode;
-  asCol?: boolean;
-}
-
-export function ContentSection({
-  title,
-  text,
-  children,
-  asCol,
-}: ContentSectionProps) {
-  return (
-    <div
-      className={cn(
-        'first:pt-0] flex py-6',
-        asCol ? 'col flex' : 'justify-between'
-      )}
-    >
-      {title && (
-        <div className="max-w-[50%]">
-          <h4 className="h4">{title}</h4>
-          {text && <p className="text-sm text-muted-foreground">{text}</p>}
-        </div>
-      )}
-      <div>{children}</div>
-    </div>
-  );
-}

apps/dashboard/src/components/Dropdown.tsx

@@ -1,55 +0,0 @@
-import { cloneElement } from 'react';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from './ui/dropdown-menu';
-
-interface DropdownProps<Value> {
-  children: React.ReactNode;
-  label?: string;
-  items: {
-    label: string;
-    value: Value;
-  }[];
-  onChange?: (value: Value) => void;
-}
-
-export function Dropdown<Value extends string>({
-  children,
-  label,
-  items,
-  onChange,
-}: DropdownProps<Value>) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="start">
-        {label && (
-          <>
-            <DropdownMenuLabel>{label}</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-          </>
-        )}
-        <DropdownMenuGroup>
-          {items.map((item) => (
-            <DropdownMenuItem
-              className="cursor-pointer"
-              key={item.value}
-              onClick={() => {
-                onChange?.(item.value);
-              }}
-            >
-              {item.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

apps/dashboard/src/components/PageTitle.tsx

@@ -1,11 +0,0 @@
-import type { HtmlProps } from '@/types';
-
-type PageTitleProps = HtmlProps<HTMLDivElement>;
-
-export function PageTitle({ children }: PageTitleProps) {
-  return (
-    <div className="my-8 flex justify-between border-b border-border py-4">
-      <h1 className="h1">{children}</h1>
-    </div>
-  );
-}

apps/dashboard/src/components/WithSidebar.tsx

@@ -1,15 +0,0 @@
-import type { HtmlProps } from '@/types';
-
-type WithSidebarProps = HtmlProps<HTMLDivElement>;
-
-export function WithSidebar({ children }: WithSidebarProps) {
-  return (
-    <div className="grid grid-cols-[200px_minmax(0,1fr)] gap-8">{children}</div>
-  );
-}
-
-type SidebarProps = HtmlProps<HTMLDivElement>;
-
-export function Sidebar({ children }: SidebarProps) {
-  return <div className="flex flex-col gap-1">{children}</div>;
-}

apps/dashboard/src/components/clients/table.tsx

@@ -3,7 +3,7 @@ import type { ColumnDef } from '@tanstack/react-table';
 
 import type { IServiceClientWithProject } from '@openpanel/db';
 
-import { ClientActions } from './ClientActions';
+import { ClientActions } from './client-actions';
 
 export const columns: ColumnDef<IServiceClientWithProject>[] = [
   {

apps/dashboard/src/components/forms/InputError.tsx

@@ -1,11 +0,0 @@
-interface InputErrorProps {
-  message?: string;
-}
-
-export function InputError({ message }: InputErrorProps) {
-  if (!message) {
-    return null;
-  }
-
-  return <div className="mt-1 text-sm text-red-600">{message}</div>;
-}

apps/dashboard/src/components/general/ExpandableListItem.tsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import { cn } from '@/utils/cn';
-import { ChevronUp } from 'lucide-react';
-import AnimateHeight from 'react-animate-height';
-
-import { Button } from '../ui/button';
-
-interface ExpandableListItemProps {
-  children: React.ReactNode;
-  content: React.ReactNode;
-  title: React.ReactNode;
-  image?: React.ReactNode;
-  initialOpen?: boolean;
-  className?: string;
-}
-export function ExpandableListItem({
-  title,
-  content,
-  image,
-  initialOpen = false,
-  children,
-  className,
-}: ExpandableListItemProps) {
-  const [open, setOpen] = useState(initialOpen ?? false);
-  return (
-    <div className={cn('card overflow-hidden', className)}>
-      <div className="p-2 sm:p-4 flex gap-4">
-        <div className="flex gap-1">{image}</div>
-        <div className="flex flex-col flex-1 gap-1 min-w-0">
-          <div className="text-md font-medium leading-none mb-1">{title}</div>
-          {!!content && (
-            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
-              {content}
-            </div>
-          )}
-        </div>
-        <Button
-          variant="secondary"
-          size="icon"
-          onClick={() => setOpen((p) => !p)}
-          className="bg-black/5 hover:bg-black/10"
-        >
-          <ChevronUp
-            size={20}
-            className={cn(
-              'transition-transform',
-              open ? 'rotate-180' : 'rotate-0'
-            )}
-          />
-        </Button>
-      </div>
-      <AnimateHeight duration={200} height={open ? 'auto' : 0}>
-        <div className="border-t border-border">{children}</div>
-      </AnimateHeight>
-    </div>
-  );
-}

apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx

@@ -4,7 +4,7 @@ import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
-import { Widget, WidgetBody } from '../../Widget';
+import { Widget, WidgetBody } from '../../widget';
 import { WidgetButtons, WidgetHead } from '../overview-widget';
 import { useOverviewOptions } from '../useOverviewOptions';
 import { useOverviewWidget } from '../useOverviewWidget';

apps/dashboard/src/components/overview/overview-metrics.tsx

@@ -3,7 +3,7 @@
 import { WidgetHead } from '@/components/overview/overview-widget';
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
 import { ChartSwitch } from '@/components/report/chart';
-import { Widget, WidgetBody } from '@/components/Widget';
+import { Widget, WidgetBody } from '@/components/widget';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 

apps/dashboard/src/components/overview/overview-top-devices.tsx

@@ -4,7 +4,7 @@ import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
-import { Widget, WidgetBody } from '../Widget';
+import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';

apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx

@@ -6,7 +6,7 @@ import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 import { BarChartIcon, LineChart, LineChartIcon } from 'lucide-react';
 
-import { Widget, WidgetBody } from '../../Widget';
+import { Widget, WidgetBody } from '../../widget';
 import { OverviewChartToggle } from '../overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from '../overview-widget';
 import { useOverviewOptions } from '../useOverviewOptions';

apps/dashboard/src/components/overview/overview-top-geo.tsx

@@ -4,7 +4,7 @@ import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
-import { Widget, WidgetBody } from '../Widget';
+import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';

apps/dashboard/src/components/overview/overview-top-pages.tsx

@@ -4,7 +4,7 @@ import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
-import { Widget, WidgetBody } from '../Widget';
+import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';

apps/dashboard/src/components/overview/overview-top-sources.tsx

@@ -4,7 +4,7 @@ import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
-import { Widget, WidgetBody } from '../Widget';
+import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
 import { useOverviewOptions } from './useOverviewOptions';

apps/dashboard/src/components/overview/overview-widget.tsx

@@ -13,8 +13,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
-import type { WidgetHeadProps } from '../Widget';
-import { WidgetHead as WidgetHeadBase } from '../Widget';
+import type { WidgetHeadProps } from '../widget';
+import { WidgetHead as WidgetHeadBase } from '../widget';
 
 export function WidgetHead({ className, ...props }: WidgetHeadProps) {
   return (

apps/dashboard/src/components/projects/table.tsx

@@ -1,13 +1,12 @@
 import { formatDate } from '@/utils/date';
 import type { ColumnDef } from '@tanstack/react-table';
 
-import { IServiceProject } from '@openpanel/db';
-import type { Project as IProject } from '@openpanel/db';
+import type { IServiceProject } from '@openpanel/db';
 
-import { ProjectActions } from './ProjectActions';
+import { ProjectActions } from './project-actions';
 
-export type Project = IProject;
-export const columns: ColumnDef<Project>[] = [
+export type Project = IServiceProject;
+export const columns: ColumnDef<IServiceProject>[] = [
   {
     accessorKey: 'name',
     header: 'Name',

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}

apps/dashboard/src/components/ui/dropdown-menu.tsx

@@ -180,6 +180,50 @@ const DropdownMenuShortcut = ({
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
+interface DropdownProps<Value> {
+  children: React.ReactNode;
+  label?: string;
+  items: {
+    label: string;
+    value: Value;
+  }[];
+  onChange?: (value: Value) => void;
+}
+
+export function DropdownMenuComposed<Value extends string>({
+  children,
+  label,
+  items,
+  onChange,
+}: DropdownProps<Value>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        {label && (
+          <>
+            <DropdownMenuLabel>{label}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuGroup>
+          {items.map((item) => (
+            <DropdownMenuItem
+              className="cursor-pointer"
+              key={item.value}
+              onClick={() => {
+                onChange?.(item.value);
+              }}
+            >
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export {
   DropdownMenu,
   DropdownMenuTrigger,

apps/dashboard/src/components/ui/key-value.tsx

@@ -1,17 +1,16 @@
-import { isValidElement } from 'react';
 import { cn } from '@/utils/cn';
 import Link from 'next/link';
 
 interface KeyValueProps {
   name: string;
-  value: unknown;
+  value: any;
   onClick?: () => void;
   href?: string;
 }
 
 export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
   const clickable = href || onClick;
-  const Component = href ? (Link as any) : onClick ? 'button' : 'div';
+  const Component = (href ? Link : onClick ? 'button' : 'div') as 'button';
 
   return (
     <Component
@@ -33,24 +32,3 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
     </Component>
   );
 }
-
-export function KeyValueSubtle({ href, onClick, name, value }: KeyValueProps) {
-  const clickable = href || onClick;
-  const Component = href ? (Link as any) : onClick ? 'button' : 'div';
-  return (
-    <Component
-      className="group flex text-[10px] sm:text-xs gap-2 font-medium self-start min-w-0 max-w-full items-center"
-      {...{ href, onClick }}
-    >
-      <div className="text-gray-400">{name}</div>
-      <div
-        className={cn(
-          'bg-black/5 rounded p-0.5 px-1 sm:p-1 sm:px-2 text-gray-600 whitespace-nowrap text-ellipsis flex items-center gap-1',
-          clickable && 'group-hover:underline'
-        )}
-      >
-        {value}
-      </div>
-    </Component>
-  );
-}