feat: manage documents admin ui

apps/web/src/app/(dashboard)/admin/documents/data-table-action-button.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Edit, Pencil, Share } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DataTableActionButtonProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  const isRecipient = !!recipient;
+  const isDraft = row.status === DocumentStatus.DRAFT;
+  const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  return match({
+    isOwner,
+    isRecipient,
+    isDraft,
+    isPending,
+    isComplete,
+    isSigned,
+  })
+    .with({ isOwner: true, isDraft: true }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/documents/${row.id}`}>
+          <Edit className="-ml-1 mr-2 h-4 w-4" />
+          Edit
+        </Link>
+      </Button>
+    ))
+    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
+      <Button className="w-24" asChild>
+        <Link href={`/sign/${recipient?.token}`}>
+          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+          Sign
+        </Link>
+      </Button>
+    ))
+    .otherwise(() => (
+      <Button className="w-24" disabled>
+        <Share className="-ml-1 mr-2 h-4 w-4" />
+        Share
+      </Button>
+    ));
+};

apps/web/src/app/(dashboard)/admin/documents/data-table-action-dropdown.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import Link from 'next/link';
+
+import {
+  Copy,
+  Download,
+  Edit,
+  History,
+  MoreHorizontal,
+  Pencil,
+  Share,
+  Trash2,
+  XCircle,
+} from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc } from '@documenso/trpc/client';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type DataTableActionDropdownProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  // const isRecipient = !!recipient;
+  // const isDraft = row.status === DocumentStatus.DRAFT;
+  // const isPending = row.status === DocumentStatus.PENDING;
+  const isComplete = row.status === DocumentStatus.COMPLETED;
+  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+
+  const onDownloadClick = async () => {
+    let document: DocumentWithData | null = null;
+
+    if (!recipient) {
+      document = await trpc.document.getDocumentById.query({
+        id: row.id,
+      });
+    } else {
+      document = await trpc.document.getDocumentByToken.query({
+        token: recipient.token,
+      });
+    }
+
+    const documentData = document?.documentData;
+
+    if (!documentData) {
+      return;
+    }
+
+    const documentBytes = await getFile(documentData);
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="h-5 w-5 text-gray-500" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="start" forceMount>
+        <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+        <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
+          <Download className="mr-2 h-4 w-4" />
+          Download
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <XCircle className="mr-2 h-4 w-4" />
+          Void
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+
+        <DropdownMenuItem disabled>
+          <History className="mr-2 h-4 w-4" />
+          Resend
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { Document, Recipient, User } from '@documenso/prisma/client';
+
+export type DataTableTitleProps = {
+  row: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DataTableTitle = ({ row }: DataTableTitleProps) => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = row.User.id === session.user.id;
+  const isRecipient = !!recipient;
+
+  return match({
+    isOwner,
+    isRecipient,
+  })
+    .with({ isOwner: true }, () => (
+      <Link
+        href={`/documents/${row.id}`}
+        title={row.title}
+        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+      >
+        {row.title}
+      </Link>
+    ))
+    .with({ isRecipient: true }, () => (
+      <Link
+        href={`/sign/${recipient?.token}`}
+        title={row.title}
+        className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
+      >
+        {row.title}
+      </Link>
+    ))
+    .otherwise(() => (
+      <span className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]">
+        {row.title}
+      </span>
+    ));
+};

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

@@ -0,0 +1,115 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import Link from 'next/link';
+
+import { Loader } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { Document, Recipient, User } from '@documenso/prisma/client';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { DataTableActionButton } from './data-table-action-button';
+import { DataTableActionDropdown } from './data-table-action-dropdown';
+import { DataTableTitle } from './data-table-title';
+
+export type DocumentsDataTableProps = {
+  results: FindResultSet<
+    Document & {
+      Recipient: Recipient[];
+      User: Pick<User, 'id' | 'name' | 'email'>;
+    }
+  >;
+};
+
+export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+  const { data: session } = useSession();
+  const [isPending, startTransition] = useTransition();
+
+  const updateSearchParams = useUpdateSearchParams();
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  if (!session) {
+    return null;
+  }
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={[
+          {
+            header: 'Created',
+            accessorKey: 'createdAt',
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+          },
+          {
+            header: 'Title',
+            cell: ({ row }) => <DataTableTitle row={row.original} />,
+          },
+          {
+            header: 'Owner',
+            accessorKey: 'owner',
+            cell: ({ row }) => {
+              return (
+                <Link href={`/admin/users/${row.original.User.id}`}>
+                  <StackAvatarsWithTooltip
+                    recipients={[
+                      {
+                        id: row.original.User.id,
+                        email: row.original.User.email,
+                        name: row.original.User.name,
+                      },
+                    ]}
+                  />
+                </Link>
+              );
+            },
+          },
+          {
+            header: 'Status',
+            accessorKey: 'status',
+            cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
+          },
+          {
+            header: 'Actions',
+            cell: ({ row }) => (
+              <div className="flex items-center gap-x-4">
+                <DataTableActionButton row={row.original} />
+                <DataTableActionDropdown row={row.original} />
+              </div>
+            ),
+          },
+        ]}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.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/documents/page.tsx

@@ -0,0 +1,36 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { findDocuments } from '@documenso/lib/server-only/admin/get-all-documents';
+
+import { DocumentsDataTable } from './data-table';
+
+export type DocumentsPageProps = {
+  searchParams?: {
+    page?: string;
+    perPage?: string;
+  };
+};
+
+export default async function Documents({ searchParams = {} }: DocumentsPageProps) {
+  const user = await getRequiredServerComponentSession();
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 20;
+
+  const results = await findDocuments({
+    userId: user.id,
+    orderBy: {
+      column: 'createdAt',
+      direction: 'desc',
+    },
+    page,
+    perPage,
+  });
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Manage documents</h2>
+      <div className="mt-8">
+        <DocumentsDataTable results={results} />
+      </div>
+    </div>
+  );
+}

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

@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BarChart3, User2 } from 'lucide-react';
+import { BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -44,6 +44,34 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
           Users
         </Link>
       </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/documents') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/documents">
+          <FileStack className="mr-2 h-5 w-5" />
+          Documents
+        </Link>
+      </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/subscriptions') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/subscriptions">
+          <Wallet2 className="mr-2 h-5 w-5" />
+          Subscriptions
+        </Link>
+      </Button>
     </div>
   );
 };

packages/lib/server-only/admin/get-all-documents.ts

@@ -0,0 +1,67 @@
+import { prisma } from '@documenso/prisma';
+import { Document } from '@documenso/prisma/client';
+
+export interface FindDocumentsOptions {
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof Omit<Document, 'document'>;
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findDocuments = async ({
+  term,
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindDocumentsOptions) => {
+  const orderByColumn = orderBy?.column ?? 'createdAt';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  const termFilters = !term
+    ? undefined
+    : ({
+        title: {
+          contains: term,
+          mode: 'insensitive',
+        },
+      } as const);
+
+  const [data, count] = await Promise.all([
+    prisma.document.findMany({
+      where: {
+        ...termFilters,
+      },
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      include: {
+        User: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+        Recipient: true,
+      },
+    }),
+    prisma.document.count({
+      where: {
+        ...termFilters,
+      },
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  };
+};