feat: dashboard v2, esm, upgrades (#211)

* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/components/overview/overview-top-pages.tsx
+++ b/apps/start/src/components/overview/overview-top-pages.tsx
@@ -0,0 +1,127 @@
+import { useEventQueryFilters } from '@/hooks/use-event-query-filters';
+import { cn } from '@/utils/cn';
+import { Globe2Icon } from 'lucide-react';
+import { parseAsBoolean, useQueryState } from 'nuqs';
+
+import { useTRPC } from '@/integrations/trpc/react';
+import { pushModal } from '@/modals';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '../ui/button';
+import { Widget, WidgetBody } from '../widget';
+import OverviewDetailsButton from './overview-details-button';
+import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
+import {
+  OverviewWidgetTableLoading,
+  OverviewWidgetTablePages,
+} from './overview-widget-table';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidgetV2 } from './useOverviewWidget';
+
+interface OverviewTopPagesProps {
+  projectId: string;
+}
+
+export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
+  const { interval, range, startDate, endDate } = useOverviewOptions();
+  const [filters] = useEventQueryFilters();
+  const [domain, setDomain] = useQueryState('d', parseAsBoolean);
+  const [widget, setWidget, widgets] = useOverviewWidgetV2('pages', {
+    page: {
+      title: 'Top pages',
+      btn: 'Top pages',
+      meta: {
+        columns: {
+          sessions: 'Sessions',
+        },
+      },
+    },
+    entry: {
+      title: 'Entry Pages',
+      btn: 'Entries',
+      meta: {
+        columns: {
+          sessions: 'Entries',
+        },
+      },
+    },
+    exit: {
+      title: 'Exit Pages',
+      btn: 'Exits',
+      meta: {
+        columns: {
+          sessions: 'Exits',
+        },
+      },
+    },
+    // bot: {
+    //   title: 'Bots',
+    //   btn: 'Bots',
+    // },
+  });
+  const trpc = useTRPC();
+
+  const query = useQuery(
+    trpc.overview.topPages.queryOptions({
+      projectId,
+      filters,
+      startDate,
+      endDate,
+      mode: widget.key,
+      range,
+    }),
+  );
+
+  const data = query.data;
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead>
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets.map((w) => (
+              <button
+                type="button"
+                key={w.key}
+                onClick={() => setWidget(w.key)}
+                className={cn(w.key === widget.key && 'active')}
+              >
+                {w.btn}
+              </button>
+            ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody className="p-0">
+          {query.isLoading ? (
+            <OverviewWidgetTableLoading />
+          ) : (
+            <>
+              {/*<OverviewWidgetTableBots data={data ?? []} />*/}
+              <OverviewWidgetTablePages
+                data={data ?? []}
+                lastColumnName={widget.meta.columns.sessions}
+                showDomain={!!domain}
+              />
+            </>
+          )}
+        </WidgetBody>
+        <WidgetFooter>
+          <OverviewDetailsButton
+            onClick={() => pushModal('OverviewTopPagesModal', { projectId })}
+          />
+          {/* <OverviewChartToggle {...{ chartType, setChartType }} /> */}
+          <div className="flex-1" />
+          <Button
+            variant={'ghost'}
+            onClick={() => {
+              setDomain((p) => !p);
+            }}
+            icon={Globe2Icon}
+          >
+            {domain ? 'Hide domain' : 'Show domain'}
+          </Button>
+        </WidgetFooter>
+      </Widget>
+    </>
+  );
+}