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-generic-modal.tsx
+++ b/apps/start/src/components/overview/overview-top-generic-modal.tsx
@@ -0,0 +1,106 @@
+import { useEventQueryFilters } from '@/hooks/use-event-query-filters';
+
+import { useTRPC } from '@/integrations/trpc/react';
+import { ModalContent, ModalHeader } from '@/modals/Modal/Container';
+import type { IGetTopGenericInput } from '@openpanel/db';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { ChevronRightIcon } from 'lucide-react';
+import { SerieIcon } from '../report-chart/common/serie-icon';
+import { Button } from '../ui/button';
+import { ScrollArea } from '../ui/scroll-area';
+import {
+  OVERVIEW_COLUMNS_NAME,
+  OVERVIEW_COLUMNS_NAME_PLURAL,
+} from './overview-constants';
+import { OverviewWidgetTableGeneric } from './overview-widget-table';
+import { useOverviewOptions } from './useOverviewOptions';
+
+interface OverviewTopGenericModalProps {
+  projectId: string;
+  column: IGetTopGenericInput['column'];
+}
+
+export default function OverviewTopGenericModal({
+  projectId,
+  column,
+}: OverviewTopGenericModalProps) {
+  const [filters, setFilter] = useEventQueryFilters();
+  const { startDate, endDate, range } = useOverviewOptions();
+  const trpc = useTRPC();
+  const query = useInfiniteQuery(
+    trpc.overview.topGeneric.infiniteQueryOptions(
+      {
+        projectId,
+        filters,
+        startDate,
+        endDate,
+        range,
+        limit: 50,
+        column,
+      },
+      {
+        getNextPageParam: (lastPage, pages) => {
+          if (lastPage.length === 0) {
+            return null;
+          }
+
+          return pages.length + 1;
+        },
+      },
+    ),
+  );
+
+  const data = query.data?.pages.flat() || [];
+  const isEmpty = !query.hasNextPage && !query.isFetching;
+
+  const columnNamePlural = OVERVIEW_COLUMNS_NAME_PLURAL[column];
+  const columnName = OVERVIEW_COLUMNS_NAME[column];
+
+  return (
+    <ModalContent>
+      <ModalHeader title={`Top ${columnNamePlural}`} />
+      <ScrollArea className="-mx-6 px-2">
+        <OverviewWidgetTableGeneric
+          data={data}
+          column={{
+            name: columnName,
+            render(item) {
+              return (
+                <div className="row items-center gap-2 min-w-0 relative">
+                  <SerieIcon name={item.prefix || item.name} />
+                  <button
+                    type="button"
+                    className="truncate"
+                    onClick={() => {
+                      setFilter(column, item.name);
+                    }}
+                  >
+                    {item.prefix && (
+                      <span className="mr-1 row inline-flex items-center gap-1">
+                        <span>{item.prefix}</span>
+                        <span>
+                          <ChevronRightIcon className="size-3" />
+                        </span>
+                      </span>
+                    )}
+                    {item.name || 'Not set'}
+                  </button>
+                </div>
+              );
+            },
+          }}
+        />
+        <div className="row center-center p-4 pb-0">
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={() => query.fetchNextPage()}
+            disabled={isEmpty}
+          >
+            Load more
+          </Button>
+        </div>
+      </ScrollArea>
+    </ModalContent>
+  );
+}