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-modal.tsx
+++ b/apps/start/src/components/overview/overview-top-pages-modal.tsx
@@ -0,0 +1,61 @@
+import { useEventQueryFilters } from '@/hooks/use-event-query-filters';
+
+import { useTRPC } from '@/integrations/trpc/react';
+import { ModalContent, ModalHeader } from '@/modals/Modal/Container';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { Button } from '../ui/button';
+import { ScrollArea } from '../ui/scroll-area';
+import { OverviewWidgetTablePages } from './overview-widget-table';
+import { useOverviewOptions } from './useOverviewOptions';
+
+interface OverviewTopPagesProps {
+  projectId: string;
+}
+
+export default function OverviewTopPagesModal({
+  projectId,
+}: OverviewTopPagesProps) {
+  const [filters, setFilter] = useEventQueryFilters();
+  const { startDate, endDate, range } = useOverviewOptions();
+  const trpc = useTRPC();
+  const query = useInfiniteQuery(
+    trpc.overview.topPages.infiniteQueryOptions(
+      {
+        projectId,
+        filters,
+        startDate,
+        endDate,
+        mode: 'page',
+        range,
+        limit: 50,
+      },
+      {
+        getNextPageParam: (_, pages) => pages.length + 1,
+      },
+    ),
+  );
+
+  const data = query.data?.pages.flat();
+
+  return (
+    <ModalContent>
+      <ModalHeader title="Top Pages" />
+      <ScrollArea className="-mx-6 px-2">
+        <OverviewWidgetTablePages
+          data={data ?? []}
+          lastColumnName={'Sessions'}
+        />
+        <div className="row center-center p-4 pb-0">
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={() => query.fetchNextPage()}
+            loading={query.isFetching}
+          >
+            Load more
+          </Button>
+        </div>
+      </ScrollArea>
+    </ModalContent>
+  );
+}