fix: sort table

apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx

@@ -25,6 +25,8 @@ type LeaderboardTableProps = {
   totalPages: number;
   perPage: number;
   page: number;
+  sortBy: 'name' | 'createdAt' | 'signingVolume';
+  sortOrder: 'asc' | 'desc';
 };
 
 export const LeaderboardTable = ({
@@ -32,6 +34,8 @@ export const LeaderboardTable = ({
   totalPages,
   perPage,
   page,
+  sortBy,
+  sortOrder,
 }: LeaderboardTableProps) => {
   const { _ } = useLingui();
 
@@ -49,10 +53,10 @@ export const LeaderboardTable = ({
         size: 10,
       },
       {
-        header: ({ column }) => (
+        header: () => (
           <div
             className="flex cursor-pointer items-center"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            onClick={() => handleColumnSort('name', sortOrder)}
           >
             {_(msg`Name`)}
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -63,10 +67,10 @@ export const LeaderboardTable = ({
         size: 250,
       },
       {
-        header: ({ column }) => (
+        header: () => (
           <div
             className="flex cursor-pointer items-center"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            onClick={() => handleColumnSort('signingVolume', sortOrder)}
           >
             {_(msg`Signing Volume`)}
             <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -76,11 +80,11 @@ export const LeaderboardTable = ({
         cell: ({ row }) => <div>{Number(row.getValue('signingVolume'))}</div>,
       },
       {
-        header: ({ column }) => {
+        header: () => {
           return (
             <div
               className="flex cursor-pointer items-center"
-              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              onClick={() => handleColumnSort('createdAt', sortOrder)}
             >
               {_(msg`Created`)}
               <CaretSortIcon className="ml-2 h-4 w-4" />
@@ -91,7 +95,7 @@ export const LeaderboardTable = ({
         cell: ({ row }) => <div>{row.original.createdAt.toLocaleDateString()}</div>,
       },
     ] satisfies DataTableColumnDef<SigningVolume>[];
-  }, []);
+  }, [sortOrder]);
 
   useEffect(() => {
     startTransition(() => {
@@ -117,6 +121,18 @@ export const LeaderboardTable = ({
     setSearchString(e.target.value);
   };
 
+  const handleColumnSort = (
+    column: 'name' | 'createdAt' | 'signingVolume',
+    sortOrder: 'asc' | 'desc',
+  ) => {
+    startTransition(() => {
+      updateSearchParams({
+        sortBy: sortBy === column,
+        sortOrder: sortOrder === 'asc' ? 'desc' : 'asc',
+      });
+    });
+  };
+
   return (
     <div className="relative">
       <Input

apps/web/src/app/(dashboard)/admin/leaderboard/fetch-leaderboard.actions.ts

@@ -4,14 +4,22 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 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) {
+type SearchOptions = {
+  search: string;
+  page: number;
+  perPage: number;
+  sortBy: 'name' | 'createdAt' | 'signingVolume';
+  sortOrder: 'asc' | 'desc';
+};
+
+export async function search({ search, page, perPage, sortBy, sortOrder }: SearchOptions) {
   const { user } = await getRequiredServerComponentSession();
 
   if (!isAdmin(user)) {
     throw new Error('Unauthorized');
   }
 
-  const results = await getSigningVolume({ search, page, perPage });
+  const results = await getSigningVolume({ search, page, perPage, sortBy, sortOrder });
 
   return results;
 }

apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx

@@ -12,6 +12,8 @@ type AdminLeaderboardProps = {
     search?: string;
     page?: number;
     perPage?: number;
+    sortBy?: 'name' | 'createdAt' | 'signingVolume';
+    sortOrder?: 'asc' | 'desc';
   };
 };
 
@@ -27,9 +29,16 @@ export default async function Leaderboard({ searchParams = {} }: AdminLeaderboar
   const page = Number(searchParams.page) || 1;
   const perPage = Number(searchParams.perPage) || 10;
   const searchString = searchParams.search || '';
+  const sortBy = searchParams.sortBy || 'signingVolume';
+  const sortOrder = searchParams.sortOrder || 'desc';
 
-  // todo: change the name
+  const { leaderboard: signingVolume, totalPages } = await search({
-  const { leaderboard: signingVolume, totalPages } = await search(searchString, page, perPage);
+    search: searchString,
+    page,
+    perPage,
+    sortBy,
+    sortOrder,
+  });
 
   return (
     <div>
@@ -42,6 +51,8 @@ export default async function Leaderboard({ searchParams = {} }: AdminLeaderboar
           totalPages={totalPages}
           page={page}
           perPage={perPage}
+          sortBy={sortBy}
+          sortOrder={sortOrder}
         />
       </div>
     </div>

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

@@ -12,12 +12,16 @@ export type GetSigningVolumeOptions = {
   search?: string;
   page?: number;
   perPage?: number;
+  sortBy?: 'name' | 'createdAt' | 'signingVolume';
+  sortOrder?: 'asc' | 'desc';
 };
 
 export async function getSigningVolume({
   search = '',
   page = 1,
   perPage = 10,
+  sortBy = 'signingVolume',
+  sortOrder = 'desc',
 }: GetSigningVolumeOptions) {
   const whereClause = Prisma.validator<Prisma.SubscriptionWhereInput>()({
     status: 'ACTIVE',
@@ -38,6 +42,8 @@ export async function getSigningVolume({
     ],
   });
 
+  const orderBy = getOrderByClause({ sortBy, sortOrder });
+
   const [subscriptions, totalCount] = await Promise.all([
     prisma.subscription.findMany({
       where: whereClause,
@@ -76,15 +82,7 @@ export async function getSigningVolume({
           },
         },
       },
-      orderBy: [
+      orderBy,
-        {
-          User: {
-            Document: {
-              _count: 'desc',
-            },
-          },
-        },
-      ],
       skip: Math.max(page - 1, 0) * perPage,
       take: perPage,
     }),
@@ -112,3 +110,34 @@ export async function getSigningVolume({
     totalPages: Math.ceil(totalCount / perPage),
   };
 }
+
+type GetOrderByClauseOptions = {
+  sortBy: string;
+  sortOrder: 'asc' | 'desc';
+};
+
+const getOrderByClause = ({ sortBy, sortOrder }: GetOrderByClauseOptions) => {
+  switch (sortBy) {
+    case 'name':
+      return [{ User: { name: sortOrder } }, { team: { name: sortOrder } }];
+    case 'createdAt':
+      return { createdAt: sortOrder };
+    default:
+      return [
+        {
+          User: {
+            Document: {
+              _count: sortOrder,
+            },
+          },
+        },
+        {
+          team: {
+            document: {
+              _count: sortOrder,
+            },
+          },
+        },
+      ];
+  }
+};

packages/lib/translations/de/web.po

@@ -961,7 +961,7 @@ msgid "Create your account and start using state-of-the-art document signing. Op
 msgstr ""
 
 #: apps/web/src/app/(dashboard)/admin/documents/document-results.tsx:62
-#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:85
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:89
 #: apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx:35
 #: apps/web/src/app/(dashboard)/documents/data-table.tsx:54
 #: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx:65
@@ -1989,7 +1989,7 @@ 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:57
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:61
 #: 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
@@ -2594,7 +2594,7 @@ msgstr ""
 msgid "Search by document title"
 msgstr ""
 
-#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:125
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:141
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
 msgid "Search by name or email"
 msgstr ""
@@ -2816,8 +2816,8 @@ msgstr ""
 msgid "Signing up..."
 msgstr ""
 
-#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:71
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:75
-#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:37
+#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:46
 msgid "Signing Volume"
 msgstr ""
 

packages/lib/translations/en/web.po

@@ -956,7 +956,7 @@ msgid "Create your account and start using state-of-the-art document signing. Op
 msgstr "Create your account and start using state-of-the-art document signing. Open and beautiful signing is within your grasp."
 
 #: apps/web/src/app/(dashboard)/admin/documents/document-results.tsx:62
-#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:85
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:89
 #: apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx:35
 #: apps/web/src/app/(dashboard)/documents/data-table.tsx:54
 #: apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx:65
@@ -2007,7 +2007,7 @@ 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:57
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:61
 #: 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
@@ -2612,7 +2612,7 @@ msgstr "Search"
 msgid "Search by document title"
 msgstr "Search by document title"
 
-#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:125
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:141
 #: apps/web/src/app/(dashboard)/admin/users/data-table-users.tsx:144
 msgid "Search by name or email"
 msgstr "Search by name or email"
@@ -2838,8 +2838,8 @@ msgstr "Signing in..."
 msgid "Signing up..."
 msgstr "Signing up..."
 
-#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:71
+#: apps/web/src/app/(dashboard)/admin/leaderboard/data-table-leaderboard.tsx:75
-#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:37
+#: apps/web/src/app/(dashboard)/admin/leaderboard/page.tsx:46
 msgid "Signing Volume"
 msgstr "Signing Volume"