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/profiles/table/index.tsx
+++ b/apps/start/src/components/profiles/table/index.tsx
@@ -0,0 +1,94 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+
+import { useDataTableColumnVisibility } from '@/components/ui/data-table/data-table-hooks';
+import type { RouterOutputs } from '@/trpc/client';
+import { useColumns } from './columns';
+
+import { DataTable } from '@/components/ui/data-table/data-table';
+import { useDataTablePagination } from '@/components/ui/data-table/data-table-hooks';
+import {
+  AnimatedSearchInput,
+  DataTableToolbarContainer,
+} from '@/components/ui/data-table/data-table-toolbar';
+import { DataTableViewOptions } from '@/components/ui/data-table/data-table-view-options';
+import { useSearchQueryState } from '@/hooks/use-search-query-state';
+import { arePropsEqual } from '@/utils/are-props-equal';
+import type { IServiceProfile } from '@openpanel/db';
+import type { PaginationState, Table, Updater } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { memo } from 'react';
+
+type Props = {
+  query: UseQueryResult<RouterOutputs['profile']['list'], unknown>;
+  type: 'profiles' | 'power-users';
+};
+
+const LOADING_DATA = [{}, {}, {}, {}, {}, {}, {}, {}, {}] as IServiceProfile[];
+
+export const ProfilesTable = memo(
+  ({ type, query }: Props) => {
+    const { data, isLoading } = query;
+    const columns = useColumns(type);
+
+    const { setPage, state: pagination } = useDataTablePagination();
+    const { columnVisibility, setColumnVisibility } =
+      useDataTableColumnVisibility(columns);
+
+    const table = useReactTable({
+      data: isLoading ? LOADING_DATA : (data?.data ?? []),
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+      manualFiltering: true,
+      manualSorting: true,
+      columns,
+      rowCount: data?.meta.count,
+      pageCount: Math.ceil(
+        (data?.meta.count || 0) / (pagination.pageSize || 1),
+      ),
+      filterFns: {
+        isWithinRange: () => true,
+      },
+      state: {
+        pagination,
+        columnVisibility,
+      },
+      onColumnVisibilityChange: setColumnVisibility,
+      onPaginationChange: (updaterOrValue: Updater<PaginationState>) => {
+        const nextPagination =
+          typeof updaterOrValue === 'function'
+            ? updaterOrValue(pagination)
+            : updaterOrValue;
+        setPage(nextPagination.pageIndex + 1);
+      },
+    });
+
+    return (
+      <>
+        <ProfileTableToolbar table={table} />
+        <DataTable
+          table={table}
+          loading={isLoading}
+          empty={{
+            title: 'No profiles',
+            description: "Looks like you haven't identified any profiles yet.",
+          }}
+        />
+      </>
+    );
+  },
+  arePropsEqual(['query.isLoading', 'query.data', 'type']),
+);
+
+function ProfileTableToolbar({ table }: { table: Table<IServiceProfile> }) {
+  const { search, setSearch } = useSearchQueryState();
+  return (
+    <DataTableToolbarContainer>
+      <AnimatedSearchInput
+        placeholder="Search profiles"
+        value={search}
+        onChange={setSearch}
+      />
+      <DataTableViewOptions table={table} />
+    </DataTableToolbarContainer>
+  );
+}