chore: leaderboard table

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>
+  );
+};

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;
+}

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>
+  );
+};

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>
   );

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>
-  );
-}

packages/lib/server-only/admin/get-signing-volume.ts

@@ -1,49 +1,128 @@
+import { Prisma } from '@prisma/client';
+
 import { prisma } from '@documenso/prisma';
 
-export const getSigningVolume = async () => {
-  const results = await prisma.$queryRaw` 
-  WITH paying_customers AS (
-    SELECT DISTINCT
-      COALESCE(s."userId", t."ownerUserId") AS customer_id,
-      CASE
-        WHEN s."userId" IS NOT NULL THEN 'User'
-        ELSE 'Team'
-      END AS customer_type,
-      COALESCE(s."createdAt", t."createdAt") AS customer_created_at
-    FROM "Subscription" s
-    FULL OUTER JOIN "Team" t ON s."teamId" = t.id
-    WHERE s.status = 'ACTIVE'
-  ),
-  document_counts AS (
-    SELECT
-      COALESCE(d."userId", t."ownerUserId") AS customer_id,
-      COUNT(DISTINCT d.id) AS total_documents,
-      COUNT(DISTINCT CASE WHEN d.status = 'COMPLETED' THEN d.id END) AS completed_documents
-    FROM "Document" d
-    LEFT JOIN "Team" t ON d."teamId" = t.id
-    GROUP BY COALESCE(d."userId", t."ownerUserId")
-  )
-  SELECT
-    pc.customer_id,
-    pc.customer_type,
-    pc.customer_created_at,
-    COALESCE(dc.total_documents, 0) AS total_documents,
-    COALESCE(dc.completed_documents, 0) AS completed_documents,
-    CASE
-      WHEN pc.customer_type = 'User' THEN u.email
-      ELSE te.email
-    END AS customer_email,
-    CASE
-      WHEN pc.customer_type = 'User' THEN u.name
-      ELSE t.name
-    END AS customer_name
-  FROM paying_customers pc
-  LEFT JOIN document_counts dc ON pc.customer_id = dc.customer_id
-  LEFT JOIN "User" u ON pc.customer_id = u.id AND pc.customer_type = 'User'
-  LEFT JOIN "Team" t ON pc.customer_id = t."ownerUserId" AND pc.customer_type = 'Team'
-  LEFT JOIN "TeamEmail" te ON t.id = te."teamId"
-  ORDER BY dc.completed_documents DESC NULLS LAST, pc.customer_created_at DESC
-  `;
-
-  return results;
+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;
+};
+
+export type GetSigningVolumeOptions = {
+  search?: string;
+  page?: number;
+  perPage?: number;
+};
+
+export const getSigningVolume = async ({
+  search = '',
+  page = 1,
+  perPage = 10,
+}: GetSigningVolumeOptions = {}): Promise<{
+  signingVolume: SigningVolume[];
+  totalPages: number;
+}> => {
+  const offset = (page - 1) * perPage;
+
+  const whereClause = search
+    ? `AND (LOWER(COALESCE(u.name, t.name)) LIKE $1 OR LOWER(COALESCE(u.email, te.email)) LIKE $1)`
+    : '';
+
+  const searchParam = search ? [`%${search.toLowerCase()}%`] : [];
+
+  const [results, totalCount] = await prisma.$transaction(async (tx) => {
+    const signingVolumeQuery = tx.$queryRaw<SigningVolume[]>`
+      WITH paying_customers AS (
+        SELECT DISTINCT
+          COALESCE(s."userId", t."ownerUserId") AS customer_id,
+          CASE
+            WHEN s."userId" IS NOT NULL THEN 'User'
+            ELSE 'Team'
+          END AS customer_type,
+          COALESCE(s."createdAt", t."createdAt") AS customer_created_at
+        FROM "Subscription" s
+        FULL OUTER JOIN "Team" t ON s."teamId" = t.id
+        WHERE s.status = 'ACTIVE'
+      ),
+      document_counts AS (
+        SELECT
+          COALESCE(d."userId", t."ownerUserId") AS customer_id,
+          COUNT(DISTINCT d.id) AS total_documents,
+          COUNT(DISTINCT CASE WHEN d.status = 'COMPLETED' THEN d.id END) AS completed_documents
+        FROM "Document" d
+        LEFT JOIN "Team" t ON d."teamId" = t.id
+        GROUP BY COALESCE(d."userId", t."ownerUserId")
+      )
+      SELECT
+        pc.customer_id,
+        pc.customer_type,
+        pc.customer_created_at,
+        COALESCE(dc.total_documents, 0) AS total_documents,
+        COALESCE(dc.completed_documents, 0) AS completed_documents,
+        CASE
+          WHEN pc.customer_type = 'User' THEN u.email
+          ELSE te.email
+        END AS customer_email,
+        CASE
+          WHEN pc.customer_type = 'User' THEN u.name
+          ELSE t.name
+        END AS customer_name
+      FROM paying_customers pc
+      LEFT JOIN document_counts dc ON pc.customer_id = dc.customer_id
+      LEFT JOIN "User" u ON pc.customer_id = u.id AND pc.customer_type = 'User'
+      LEFT JOIN "Team" t ON pc.customer_id = t."ownerUserId" AND pc.customer_type = 'Team'
+      LEFT JOIN "TeamEmail" te ON t.id = te."teamId"
+      WHERE 1=1 ${Prisma.raw(whereClause)}
+      ORDER BY dc.completed_documents DESC NULLS LAST, pc.customer_created_at DESC
+      LIMIT ${perPage} OFFSET ${offset}
+    `;
+
+    const totalCountQuery = tx.$queryRaw<[{ count: bigint }]>`
+      SELECT COUNT(*) as count
+      FROM (
+        WITH paying_customers AS (
+          SELECT DISTINCT
+            COALESCE(s."userId", t."ownerUserId") AS customer_id,
+            CASE
+              WHEN s."userId" IS NOT NULL THEN 'User'
+              ELSE 'Team'
+            END AS customer_type,
+            COALESCE(s."createdAt", t."createdAt") AS customer_created_at
+          FROM "Subscription" s
+          FULL OUTER JOIN "Team" t ON s."teamId" = t.id
+          WHERE s.status = 'ACTIVE'
+        )
+        SELECT
+          pc.customer_id,
+          CASE
+            WHEN pc.customer_type = 'User' THEN u.email
+            ELSE te.email
+          END AS customer_email,
+          CASE
+            WHEN pc.customer_type = 'User' THEN u.name
+            ELSE t.name
+          END AS customer_name
+        FROM paying_customers pc
+        LEFT JOIN "User" u ON pc.customer_id = u.id AND pc.customer_type = 'User'
+        LEFT JOIN "Team" t ON pc.customer_id = t."ownerUserId" AND pc.customer_type = 'Team'
+        LEFT JOIN "TeamEmail" te ON t.id = te."teamId"
+        WHERE 1=1 ${Prisma.raw(whereClause)}
+      ) subquery
+    `;
+
+    const [signingVolumeResults, totalCountResults] = await Promise.all([
+      signingVolumeQuery,
+      totalCountQuery,
+    ]);
+
+    return [signingVolumeResults, totalCountResults];
+  });
+
+  const totalPages = Math.ceil(Number(totalCount[0].count) / perPage);
+
+  return { signingVolume: results, totalPages };
 };

packages/lib/translations/de/web.po

@@ -1000,6 +1000,11 @@ msgstr ""
 msgid "Current plan: {0}"
 msgstr ""
 
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:94
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:94
+msgid "Customer Type"
+msgstr ""
+
 #: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
 msgid "Daily"
 msgstr ""
@@ -1391,6 +1396,8 @@ msgid "Edit webhook"
 msgstr ""
 
 #: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:166
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:68
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:68
 #: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:114
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:71
 #: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
@@ -1983,6 +1990,8 @@ msgid "My templates"
 msgstr ""
 
 #: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:148
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:55
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:55
 #: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:99
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:66
 #: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
@@ -2587,6 +2596,8 @@ msgstr ""
 msgid "Search by document title"
 msgstr ""
 
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:133
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:133
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
 msgid "Search by name or email"
 msgstr ""
@@ -2808,7 +2819,9 @@ msgstr ""
 msgid "Signing up..."
 msgstr ""
 
-#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:18
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:81
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:81
+#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:36
 msgid "Signing Volume"
 msgstr ""
 

packages/lib/translations/en/web.po

@@ -1000,6 +1000,11 @@ msgstr "Current Password"
 msgid "Current plan: {0}"
 msgstr "Current plan: {0}"
 
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:94
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:94
+msgid "Customer Type"
+msgstr "Customer Type"
+
 #: apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx:28
 msgid "Daily"
 msgstr "Daily"
@@ -1395,6 +1400,8 @@ msgid "Edit webhook"
 msgstr "Edit webhook"
 
 #: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:166
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:68
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:68
 #: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:114
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:71
 #: apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx:213
@@ -2001,6 +2008,8 @@ msgid "My templates"
 msgstr "My templates"
 
 #: apps/web/src/app/(dashboard)/admin/documents/[id]/recipient-item.tsx:148
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:55
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:55
 #: apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx:99
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:66
 #: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx:144
@@ -2605,6 +2614,8 @@ msgstr "Search"
 msgid "Search by document title"
 msgstr "Search by document title"
 
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:133
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:133
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
 msgid "Search by name or email"
 msgstr "Search by name or email"
@@ -2830,7 +2841,9 @@ msgstr "Signing in..."
 msgid "Signing up..."
 msgstr "Signing up..."
 
-#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:18
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:81
+#: apps/web/src/app/(dashboard)/admin/leaderboard/leaderboard-table.tsx:81
+#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:36
 msgid "Signing Volume"
 msgstr "Signing Volume"