chore: leaderboard table

2025-11-15 09:12:02 +10:00 · 2024-09-19 10:40:22 +00:00
parent 08d94cf2b2
commit 670393d0d0
10 changed files with 511 additions and 319 deletions
--- a/apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx
+++ b/apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx
@ -0,0 +1,155 @@
+'use client';
+
+import { useEffect, useMemo, useState, useTransition } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { ChevronDownIcon as CaretSortIcon, Loader } from 'lucide-react';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+
+export type SigningVolume = {
+  customer_id: number;
+  customer_type: 'User' | 'Team';
+  customer_created_at: Date;
+  total_documents: bigint;
+  completed_documents: bigint;
+  customer_email: string;
+  customer_name: string;
+};
+
+type LeaderboardTableProps = {
+  signingVolume: SigningVolume[];
+  totalPages: number;
+  perPage: number;
+  page: number;
+};
+
+export const LeaderboardTable = ({
+  signingVolume,
+  totalPages,
+  perPage,
+  page,
+}: LeaderboardTableProps) => {
+  const { _ } = useLingui();
+
+  const [isPending, startTransition] = useTransition();
+  const updateSearchParams = useUpdateSearchParams();
+  const [searchString, setSearchString] = useState('');
+  const debouncedSearchString = useDebouncedValue(searchString, 1000);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Name`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'customer_name',
+        cell: ({ row }) => <div>{row.getValue('customer_name')}</div>,
+      },
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Email`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'customer_email',
+        cell: ({ row }) => <div>{row.getValue('customer_email')}</div>,
+      },
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Signing Volume`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'completed_documents',
+        cell: ({ row }) => <div>{Number(row.getValue('completed_documents'))}</div>,
+      },
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Customer Type`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'customer_type',
+        cell: ({ row }) => <div>{row.getValue('customer_type')}</div>,
+      },
+    ] satisfies DataTableColumnDef<SigningVolume>[];
+  }, []);
+
+  useEffect(() => {
+    startTransition(() => {
+      updateSearchParams({
+        search: debouncedSearchString,
+        page: 1,
+        perPage,
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearchString]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(e.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        className="my-6 flex flex-row gap-4"
+        type="text"
+        placeholder={_(msg`Search by name or email`)}
+        value={searchString}
+        onChange={handleChange}
+      />
+      <DataTable
+        columns={columns}
+        data={signingVolume}
+        perPage={perPage}
+        currentPage={page}
+        totalPages={totalPages}
+        onPaginationChange={onPaginationChange}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      {isPending && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/app/(dashboard)/admin/leaderboard/fetch-leaderboard.actions.ts
+++ b/apps/web/src/app/(dashboard)/admin/leaderboard/fetch-leaderboard.actions.ts
@ -0,0 +1,17 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
+
+export async function search(search: string, page: number, perPage: number) {
+  const { user } = await getRequiredServerComponentSession();
+
+  if (!isAdmin(user)) {
+    throw new Error('Unauthorized');
+  }
+
+  const results = await getSigningVolume({ search, page, perPage });
+
+  return results;
+}
--- a/apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx
+++ b/apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx
@ -0,0 +1,155 @@
+'use client';
+
+import { useEffect, useMemo, useState, useTransition } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { ChevronDownIcon as CaretSortIcon, Loader } from 'lucide-react';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+
+export type SigningVolume = {
+  customer_id: number;
+  customer_type: 'User' | 'Team';
+  customer_created_at: Date;
+  total_documents: bigint;
+  completed_documents: bigint;
+  customer_email: string;
+  customer_name: string;
+};
+
+type LeaderboardTableProps = {
+  signingVolume: SigningVolume[];
+  totalPages: number;
+  perPage: number;
+  page: number;
+};
+
+export const LeaderboardTable = ({
+  signingVolume,
+  totalPages,
+  perPage,
+  page,
+}: LeaderboardTableProps) => {
+  const { _ } = useLingui();
+
+  const [isPending, startTransition] = useTransition();
+  const updateSearchParams = useUpdateSearchParams();
+  const [searchString, setSearchString] = useState('');
+  const debouncedSearchString = useDebouncedValue(searchString, 1000);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Name`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'customer_name',
+        cell: ({ row }) => <div>{row.getValue('customer_name')}</div>,
+      },
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Email`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'customer_email',
+        cell: ({ row }) => <div>{row.getValue('customer_email')}</div>,
+      },
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Signing Volume`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'completed_documents',
+        cell: ({ row }) => <div>{Number(row.getValue('completed_documents'))}</div>,
+      },
+      {
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            {_(msg`Customer Type`)}
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        accessorKey: 'customer_type',
+        cell: ({ row }) => <div>{row.getValue('customer_type')}</div>,
+      },
+    ] satisfies DataTableColumnDef<SigningVolume>[];
+  }, []);
+
+  useEffect(() => {
+    startTransition(() => {
+      updateSearchParams({
+        search: debouncedSearchString,
+        page: 1,
+        perPage,
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearchString]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(e.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        className="my-6 flex flex-row gap-4"
+        type="text"
+        placeholder={_(msg`Search by name or email`)}
+        value={searchString}
+        onChange={handleChange}
+      />
+      <DataTable
+        columns={columns}
+        data={signingVolume}
+        perPage={perPage}
+        currentPage={page}
+        totalPages={totalPages}
+        onPaginationChange={onPaginationChange}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      {isPending && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx
@ -1,16 +1,34 @@
 import { Trans } from '@lingui/macro';

 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
-import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';

-import { DataTableDemo as Table } from './table';
+import { LeaderboardTable } from './data-table-leaderboard';
+import { search } from './fetch-leaderboard.actions';

-export default async function Leaderboard() {
+type AdminLeaderboardProps = {
+  searchParams?: {
+    search?: string;
+    page?: number;
+    perPage?: number;
+  };
+};
+
+export default async function Leaderboard({ searchParams = {} }: AdminLeaderboardProps) {
  setupI18nSSR();

-  const signingVolume = await getSigningVolume();
+  const { user } = await getRequiredServerComponentSession();

-  console.log(signingVolume);
+  if (!isAdmin(user)) {
+    throw new Error('Unauthorized');
+  }
+
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+  const searchString = searchParams.search || '';
+
+  const { signingVolume, totalPages } = await search(searchString, page, perPage);

  return (
    <div>
@ -18,7 +36,12 @@ export default async function Leaderboard() {
        <Trans>Signing Volume</Trans>
      </h2>
      <div className="mt-8">
-        <Table />
+        <LeaderboardTable
+          signingVolume={signingVolume}
+          totalPages={totalPages}
+          page={page}
+          perPage={perPage}
+        />
      </div>
    </div>
  );
--- a/apps/web/src/app/(dashboard)/admin/leaderboard/table.tsx
+++ b/apps/web/src/app/(dashboard)/admin/leaderboard/table.tsx
@ -1,263 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-} from '@tanstack/react-table';
-import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  ChevronDownIcon as CaretSortIcon,
-  ChevronDownIcon as DotsHorizontalIcon,
-} from 'lucide-react';
-
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@documenso/ui/primitives/table';
-
-const data: Payment[] = [
-  {
-    id: 'm5gr84i9',
-    amount: 316,
-    status: 'success',
-    email: 'ken99@yahoo.com',
-  },
-  {
-    id: '3u1reuv4',
-    amount: 242,
-    status: 'success',
-    email: 'Abe45@gmail.com',
-  },
-  {
-    id: 'derv1ws0',
-    amount: 837,
-    status: 'processing',
-    email: 'Monserrat44@gmail.com',
-  },
-  {
-    id: '5kma53ae',
-    amount: 874,
-    status: 'success',
-    email: 'Silas22@gmail.com',
-  },
-  {
-    id: 'bhqecj4p',
-    amount: 721,
-    status: 'failed',
-    email: 'carmella@hotmail.com',
-  },
-  {
-    id: '5kma53ae',
-    amount: 874,
-    status: 'success',
-    email: 'Silas22@gmail.com',
-  },
-  {
-    id: '5kma53ae',
-    amount: 874,
-    status: 'success',
-    email: 'Silas22@gmail.com',
-  },
-  {
-    id: '5kma53ae',
-    amount: 874,
-    status: 'success',
-    email: 'Silas22@gmail.com',
-  },
-  {
-    id: '5kma53ae',
-    amount: 874,
-    status: 'success',
-    email: 'Silas22@gmail.com',
-  },
-];
-
-export type Payment = {
-  id: string;
-  amount: number;
-  status: 'pending' | 'processing' | 'success' | 'failed';
-  email: string;
-};
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    cell: ({ row }) => <div className="capitalize">{row.getValue('status')}</div>,
-  },
-  {
-    accessorKey: 'email',
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          className="pl-0 hover:bg-transparent"
-          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        >
-          Customers
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
-  },
-  {
-    accessorKey: 'amount',
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue('amount'));
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(amount);
-
-      return <div className="text-right font-medium">{formatted}</div>;
-    },
-  },
-  {
-    id: 'actions',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original;
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <DotsHorizontalIcon className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem onClick={async () => navigator.clipboard.writeText(payment.id)}>
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
-  },
-];
-
-export function DataTableDemo() {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  return (
-    <div className="w-full">
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="text-muted-foreground flex-1 text-sm">
-          {table.getFilteredSelectedRowModel().rows.length} of{' '}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-        <div className="space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}