feat: admin ui for managing instance

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -37,10 +37,12 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
           'justify-start md:w-full',
           pathname?.startsWith('/admin/users') && 'bg-secondary',
         )}
-        disabled
+        asChild
       >
+        <Link href="/admin/users">
           <User2 className="mr-2 h-5 w-5" />
-        Users (Coming Soon)
+          Users
+        </Link>
       </Button>
     </div>
   );

apps/web/src/app/(dashboard)/admin/users/[id]/page.tsx

@@ -0,0 +1,8 @@
+export default function UserPage() {
+  return (
+    <div>
+      <h1>Hey</h1>
+      <h2>Ho</h2>
+    </div>
+  );
+}

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

@@ -0,0 +1,135 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import Link from 'next/link';
+
+import { Edit, Loader } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { Role } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+
+interface User {
+  id: number;
+  name: string | null;
+  email: string;
+  roles: Role[];
+  Subscription: Subscription[];
+}
+
+interface Subscription {
+  id: number;
+  status: string;
+  planId: string | null;
+  priceId: string | null;
+  createdAt: Date | null;
+  periodEnd: Date | null;
+}
+
+type UsersDataTableProps = {
+  users: User[];
+  perPage: number;
+  page: number;
+  totalPages: number;
+};
+
+export const UsersDataTable = ({ users, perPage, page, totalPages }: UsersDataTableProps) => {
+  const [isPending, startTransition] = useTransition();
+  const updateSearchParams = useUpdateSearchParams();
+  console.log(users);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+            cell: ({ row }) => <div>{row.original.id}</div>,
+          },
+          {
+            header: 'Name',
+            accessorKey: 'name',
+            cell: ({ row }) => <div>{row.original.name}</div>,
+          },
+          {
+            header: 'Email',
+            accessorKey: 'email',
+            cell: ({ row }) => <div>{row.original.email}</div>,
+          },
+          {
+            header: 'Roles',
+            accessorKey: 'roles',
+            cell: ({ row }) => {
+              return (
+                <>
+                  {row.original.roles.map((role: string, idx: number) => {
+                    return (
+                      <span key={idx}>
+                        {role} {}
+                      </span>
+                    );
+                  })}
+                </>
+              );
+            },
+          },
+          {
+            header: 'Subscription status',
+            accessorKey: 'subscription',
+            cell: ({ row }) => {
+              return (
+                <>
+                  {row.original.Subscription.map((subscription: Subscription, idx: number) => {
+                    return <span key={idx}>{subscription.status}</span>;
+                  })}
+                </>
+              );
+            },
+          },
+          {
+            header: 'Edit',
+            accessorKey: 'edit',
+            cell: ({ row }) => {
+              return (
+                <div>
+                  <Button className="w-24" asChild>
+                    <Link href={`/admin/users/${row.original.id}`}>
+                      <Edit className="-ml-1 mr-2 h-4 w-4" />
+                      Edit
+                    </Link>
+                  </Button>
+                </div>
+              );
+            },
+          },
+        ]}
+        data={users}
+        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/users/page.tsx

@@ -0,0 +1,35 @@
+import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
+
+/*
+1. retrieve all users from the db
+2. display them in a table
+*/
+import { UsersDataTable } from './data-table-users';
+
+type AdminManageUsersProps = {
+  searchParams?: {
+    page?: number;
+    perPage?: number;
+  };
+};
+
+export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) {
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+
+  const results = await findUsers({ page, perPage });
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Manage users</h2>
+      <div className="mt-8">
+        <UsersDataTable
+          users={results.users}
+          perPage={perPage}
+          page={page}
+          totalPages={results.totalPages}
+        />
+      </div>
+    </div>
+  );
+}

packages/lib/server-only/user/get-all-users.ts

@@ -0,0 +1,37 @@
+import { prisma } from '@documenso/prisma';
+
+type getAllUsersProps = {
+  page: number;
+  perPage: number;
+};
+
+export const findUsers = async ({ page = 1, perPage = 10 }: getAllUsersProps) => {
+  const [users, count] = await Promise.all([
+    await prisma.user.findMany({
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        roles: true,
+        Subscription: {
+          select: {
+            id: true,
+            status: true,
+            planId: true,
+            priceId: true,
+            createdAt: true,
+            periodEnd: true,
+          },
+        },
+      },
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+    }),
+    await prisma.user.count(),
+  ]);
+
+  return {
+    users,
+    totalPages: Math.ceil(count / perPage),
+  };
+};