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/clients/table/columns.tsx
+++ b/apps/start/src/components/clients/table/columns.tsx
@@ -0,0 +1,91 @@
+import { formatDateTime, formatTime } from '@/utils/date';
+import type { ColumnDef } from '@tanstack/react-table';
+import { isToday } from 'date-fns';
+
+import CopyInput from '@/components/forms/copy-input';
+import { createActionColumn } from '@/components/ui/data-table/data-table-helpers';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { handleError, useTRPC } from '@/integrations/trpc/react';
+import { pushModal, showConfirm } from '@/modals';
+import type { RouterOutputs } from '@/trpc/client';
+import { clipboard } from '@/utils/clipboard';
+import { DropdownMenuSeparator } from '@radix-ui/react-dropdown-menu';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+export function useColumns() {
+  const columns: ColumnDef<RouterOutputs['client']['list'][number]>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        return <div className="font-medium">{row.original.name}</div>;
+      },
+    },
+    {
+      accessorKey: 'id',
+      header: 'Client ID',
+      cell: ({ row }) => <CopyInput label={null} value={row.original.id} />,
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created at',
+      cell({ row }) {
+        const date = row.original.createdAt;
+        return (
+          <div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</div>
+        );
+      },
+    },
+    createActionColumn(({ row }) => {
+      const client = row.original;
+      const trpc = useTRPC();
+      const queryClient = useQueryClient();
+      const deletion = useMutation(
+        trpc.client.remove.mutationOptions({
+          onSuccess() {
+            toast('Success', {
+              description:
+                'Client revoked, incoming requests will be rejected.',
+            });
+            queryClient.invalidateQueries(trpc.client.list.pathFilter());
+          },
+          onError: handleError,
+        }),
+      );
+      return (
+        <>
+          <DropdownMenuItem onClick={() => clipboard(client.id)}>
+            Copy client ID
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              pushModal('EditClient', client);
+            }}
+          >
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            onClick={() => {
+              showConfirm({
+                title: 'Revoke client',
+                text: 'Are you sure you want to revoke this client? This action cannot be undone.',
+                onConfirm() {
+                  deletion.mutate({
+                    id: client.id,
+                  });
+                },
+              });
+            }}
+          >
+            Revoke
+          </DropdownMenuItem>
+        </>
+      );
+    }),
+  ];
+
+  return columns;
+}
--- a/apps/start/src/components/clients/table/index.tsx
+++ b/apps/start/src/components/clients/table/index.tsx
@@ -0,0 +1,30 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+
+import { DataTable } from '@/components/ui/data-table/data-table';
+import { DataTableToolbar } from '@/components/ui/data-table/data-table-toolbar';
+import { useTable } from '@/components/ui/data-table/use-table';
+import type { RouterOutputs } from '@/trpc/client';
+import { useColumns } from './columns';
+
+type Props = {
+  query: UseQueryResult<RouterOutputs['client']['list'], unknown>;
+};
+
+export const ClientsTable = ({ query }: Props) => {
+  const columns = useColumns();
+  const { data, isLoading } = query;
+
+  const { table } = useTable({
+    columns,
+    data: data ?? [],
+    loading: isLoading,
+    pageSize: 50,
+  });
+
+  return (
+    <>
+      <DataTableToolbar table={table} />
+      <DataTable table={table} loading={isLoading} />
+    </>
+  );
+};