move sdk packages to its own folder and rename api & dashboard

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

@@ -0,0 +1,16 @@
+import { getConversionEventNames } from '@mixan/db';
+
+import type { OverviewTopEventsProps } from './overview-top-events';
+import OverviewTopEvents from './overview-top-events';
+
+export default async function OverviewTopEventsServer({
+  projectId,
+}: Omit<OverviewTopEventsProps, 'conversions'>) {
+  const eventNames = await getConversionEventNames(projectId);
+  return (
+    <OverviewTopEvents
+      projectId={projectId}
+      conversions={eventNames.map((item) => item.name)}
+    />
+  );
+}

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

@@ -0,0 +1,128 @@
+'use client';
+
+import { ChartSwitch } from '@/components/report/chart';
+import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
+import { cn } from '@/utils/cn';
+
+import { Widget, WidgetBody } from '../../Widget';
+import { WidgetButtons, WidgetHead } from '../overview-widget';
+import { useOverviewOptions } from '../useOverviewOptions';
+import { useOverviewWidget } from '../useOverviewWidget';
+
+export interface OverviewTopEventsProps {
+  projectId: string;
+  conversions: string[];
+}
+export default function OverviewTopEvents({
+  projectId,
+  conversions,
+}: OverviewTopEventsProps) {
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
+  const [filters] = useEventQueryFilters();
+  const [widget, setWidget, widgets] = useOverviewWidget('ev', {
+    all: {
+      title: 'Top events',
+      btn: 'All',
+      chart: {
+        projectId,
+        startDate,
+        endDate,
+        events: [
+          {
+            segment: 'event',
+            filters: [
+              ...filters,
+              {
+                id: 'ex_session',
+                name: 'name',
+                operator: 'isNot',
+                value: ['session_start', 'session_end'],
+              },
+            ],
+            id: 'A',
+            name: '*',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'name',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+    conversions: {
+      title: 'Conversions',
+      btn: 'Conversions',
+      hide: conversions.length === 0,
+      chart: {
+        projectId,
+        startDate,
+        endDate,
+        events: [
+          {
+            segment: 'event',
+            filters: [
+              ...filters,
+              {
+                id: 'conversion',
+                name: 'name',
+                operator: 'is',
+                value: conversions,
+              },
+            ],
+            id: 'A',
+            name: '*',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'name',
+          },
+        ],
+        chartType: 'bar',
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead>
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets
+              .filter((item) => item.hide !== true)
+              .map((w) => (
+                <button
+                  key={w.key}
+                  onClick={() => setWidget(w.key)}
+                  className={cn(w.key === widget.key && 'active')}
+                >
+                  {w.btn}
+                </button>
+              ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody>
+          <ChartSwitch hideID {...widget.chart} previous={false} />
+        </WidgetBody>
+      </Widget>
+    </>
+  );
+}