feat: add certificate and audit log pdfs (#1092)

apps/marketing/next.config.js

@@ -22,7 +22,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

apps/web/next.config.js

@@ -23,7 +23,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft, DownloadIcon } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
 import { DateTime } from 'luxon';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
@@ -10,7 +10,6 @@ import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Recipient, Team } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
 import { Card } from '@documenso/ui/primitives/card';
 
 import {
@@ -19,6 +18,8 @@ import {
 } from '~/components/formatter/document-status';
 
 import { DocumentLogsDataTable } from './document-logs-data-table';
+import { DownloadAuditLogButton } from './download-audit-log-button';
+import { DownloadCertificateButton } from './download-certificate-button';
 
 export type DocumentLogsPageViewProps = {
   params: {
@@ -132,15 +133,9 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         </div>
 
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-          <Button variant="outline" className="mr-2 w-full sm:w-auto">
-            <DownloadIcon className="mr-1.5 h-4 w-4" />
-            Download certificate
-          </Button>
+          <DownloadCertificateButton className="mr-2" documentId={document.id} />
 
-          <Button className="w-full sm:w-auto">
-            <DownloadIcon className="mr-1.5 h-4 w-4" />
-            Download PDF
-          </Button>
+          <DownloadAuditLogButton documentId={document.id} />
         </div>
       </div>
 

apps/web/src/app/(dashboard)/documents/[id]/logs/download-audit-log-button.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { DownloadIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DownloadAuditLogButtonProps = {
+  className?: string;
+  documentId: number;
+};
+
+export const DownloadAuditLogButton = ({ className, documentId }: DownloadAuditLogButtonProps) => {
+  const { toast } = useToast();
+
+  const { mutateAsync: downloadAuditLogs, isLoading } =
+    trpc.document.downloadAuditLogs.useMutation();
+
+  const onDownloadAuditLogsClick = async () => {
+    try {
+      const { url } = await downloadAuditLogs({ documentId });
+
+      const iframe = Object.assign(document.createElement('iframe'), {
+        src: url,
+      });
+
+      Object.assign(iframe.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '0',
+        height: '0',
+      });
+
+      const onLoaded = () => {
+        if (iframe.contentDocument?.readyState === 'complete') {
+          iframe.contentWindow?.print();
+
+          iframe.contentWindow?.addEventListener('afterprint', () => {
+            document.body.removeChild(iframe);
+          });
+        }
+      };
+
+      // When the iframe has loaded, print the iframe and remove it from the dom
+      iframe.addEventListener('load', onLoaded);
+
+      document.body.appendChild(iframe);
+
+      onLoaded();
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: 'Something went wrong',
+        description: 'Sorry, we were unable to download the audit logs. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Button
+      className={cn('w-full sm:w-auto', className)}
+      loading={isLoading}
+      onClick={() => void onDownloadAuditLogsClick()}
+    >
+      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
+      Download Audit Logs
+    </Button>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/logs/download-certificate-button.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { DownloadIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DownloadCertificateButtonProps = {
+  className?: string;
+  documentId: number;
+};
+
+export const DownloadCertificateButton = ({
+  className,
+  documentId,
+}: DownloadCertificateButtonProps) => {
+  const { toast } = useToast();
+
+  const { mutateAsync: downloadCertificate, isLoading } =
+    trpc.document.downloadCertificate.useMutation();
+
+  const onDownloadCertificatesClick = async () => {
+    try {
+      const { url } = await downloadCertificate({ documentId });
+
+      const iframe = Object.assign(document.createElement('iframe'), {
+        src: url,
+      });
+
+      Object.assign(iframe.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '0',
+        height: '0',
+      });
+
+      const onLoaded = () => {
+        if (iframe.contentDocument?.readyState === 'complete') {
+          iframe.contentWindow?.print();
+
+          iframe.contentWindow?.addEventListener('afterprint', () => {
+            document.body.removeChild(iframe);
+          });
+        }
+      };
+
+      // When the iframe has loaded, print the iframe and remove it from the dom
+      iframe.addEventListener('load', onLoaded);
+
+      document.body.appendChild(iframe);
+
+      onLoaded();
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: 'Something went wrong',
+        description: 'Sorry, we were unable to download the certificate. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Button
+      className={cn('w-full sm:w-auto', className)}
+      loading={isLoading}
+      variant="outline"
+      onClick={() => void onDownloadCertificatesClick()}
+    >
+      {!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
+      Download Certificate
+    </Button>
+  );
+};

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import type { DateTimeFormatOptions } from 'luxon';
+import { UAParser } from 'ua-parser-js';
+
+import type { TDocumentAuditLog } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type AuditLogDataTableProps = {
+  logs: TDocumentAuditLog[];
+};
+
+const dateFormat: DateTimeFormatOptions = {
+  ...DateTime.DATETIME_SHORT,
+  hourCycle: 'h12',
+};
+
+export const AuditLogDataTable = ({ logs }: AuditLogDataTableProps) => {
+  const parser = new UAParser();
+
+  const uppercaseFistLetter = (text: string) => {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
+
+  return (
+    <Table overflowHidden>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Time</TableHead>
+          <TableHead>User</TableHead>
+          <TableHead>Action</TableHead>
+          <TableHead>IP Address</TableHead>
+          <TableHead>Browser</TableHead>
+        </TableRow>
+      </TableHeader>
+
+      <TableBody className="print:text-xs">
+        {logs.map((log, i) => (
+          <TableRow className="break-inside-avoid" key={i}>
+            <TableCell>
+              <LocaleDate format={dateFormat} date={log.createdAt} />
+            </TableCell>
+
+            <TableCell>
+              {log.name || log.email ? (
+                <div>
+                  {log.name && (
+                    <p className="break-all" title={log.name}>
+                      {log.name}
+                    </p>
+                  )}
+
+                  {log.email && (
+                    <p className="text-muted-foreground break-all" title={log.email}>
+                      {log.email}
+                    </p>
+                  )}
+                </div>
+              ) : (
+                <p>N/A</p>
+              )}
+            </TableCell>
+
+            <TableCell>
+              {uppercaseFistLetter(formatDocumentAuditLogAction(log).description)}
+            </TableCell>
+
+            <TableCell>{log.ipAddress}</TableCell>
+
+            <TableCell>
+              {log.userAgent ? parser.setUA(log.userAgent).getBrowser().name : 'N/A'}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
+import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { Logo } from '~/components/branding/logo';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { AuditLogDataTable } from './data-table';
+
+type AuditLogProps = {
+  searchParams: {
+    d: string;
+  };
+};
+
+export default async function AuditLog({ searchParams }: AuditLogProps) {
+  const { d } = searchParams;
+
+  if (typeof d !== 'string' || !d) {
+    return redirect('/');
+  }
+
+  const rawDocumentId = decryptSecondaryData(d);
+
+  if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
+    return redirect('/');
+  }
+
+  const documentId = Number(rawDocumentId);
+
+  const document = await getEntireDocument({
+    id: documentId,
+  }).catch(() => null);
+
+  if (!document) {
+    return redirect('/');
+  }
+
+  const { data: auditLogs } = await findDocumentAuditLogs({
+    documentId: documentId,
+    userId: document.userId,
+    perPage: 100_000,
+  });
+
+  return (
+    <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
+      <div className="flex items-center">
+        <h1 className="my-8 text-2xl font-bold">Version History</h1>
+      </div>
+
+      <Card>
+        <CardContent className="grid grid-cols-2 gap-4 p-6 text-sm print:text-xs">
+          <p>
+            <span className="font-medium">Document ID</span>
+
+            <span className="mt-1 block break-words">{document.id}</span>
+          </p>
+
+          <p>
+            <span className="font-medium">Enclosed Document</span>
+
+            <span className="mt-1 block break-words">{document.title}</span>
+          </p>
+
+          <p>
+            <span className="font-medium">Status</span>
+
+            <span className="mt-1 block">{document.deletedAt ? 'DELETED' : document.status}</span>
+          </p>
+
+          <p>
+            <span className="font-medium">Owner</span>
+
+            <span className="mt-1 block break-words">
+              {document.User.name} ({document.User.email})
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">Created At</span>
+
+            <span className="mt-1 block">
+              <LocaleDate date={document.createdAt} format="yyyy-mm-dd hh:mm:ss a (ZZZZ)" />
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">Last Updated</span>
+
+            <span className="mt-1 block">
+              <LocaleDate date={document.updatedAt} format="yyyy-mm-dd hh:mm:ss a (ZZZZ)" />
+            </span>
+          </p>
+
+          <p>
+            <span className="font-medium">Time Zone</span>
+
+            <span className="mt-1 block break-words">
+              {document.documentMeta?.timezone ?? 'N/A'}
+            </span>
+          </p>
+
+          <div>
+            <p className="font-medium">Recipients</p>
+
+            <ul className="mt-1 list-inside list-disc">
+              {document.Recipient.map((recipient) => (
+                <li key={recipient.id}>
+                  <span className="text-muted-foreground">
+                    [{RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}]
+                  </span>{' '}
+                  {recipient.name} ({recipient.email})
+                </li>
+              ))}
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-8">
+        <CardContent className="p-0">
+          <AuditLogDataTable logs={auditLogs} />
+        </CardContent>
+      </Card>
+
+      <div className="my-8 flex-row-reverse">
+        <div className="flex items-end justify-end gap-x-4">
+          <Logo className="max-h-6 print:max-h-4" />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx

@@ -0,0 +1,287 @@
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_SIGNING_REASONS,
+} from '@documenso/lib/constants/recipient-roles';
+import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
+import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
+import { getDocumentCertificateAuditLogs } from '@documenso/lib/server-only/document/get-document-certificate-audit-logs';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { FieldType } from '@documenso/prisma/client';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { Logo } from '~/components/branding/logo';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+type SigningCertificateProps = {
+  searchParams: {
+    d: string;
+  };
+};
+
+const FRIENDLY_SIGNING_REASONS = {
+  ['__OWNER__']: 'I am the owner of this document',
+  ...RECIPIENT_ROLE_SIGNING_REASONS,
+};
+
+export default async function SigningCertificate({ searchParams }: SigningCertificateProps) {
+  const { d } = searchParams;
+
+  if (typeof d !== 'string' || !d) {
+    return redirect('/');
+  }
+
+  const rawDocumentId = decryptSecondaryData(d);
+
+  if (!rawDocumentId || isNaN(Number(rawDocumentId))) {
+    return redirect('/');
+  }
+
+  const documentId = Number(rawDocumentId);
+
+  const document = await getEntireDocument({
+    id: documentId,
+  }).catch(() => null);
+
+  if (!document) {
+    return redirect('/');
+  }
+
+  const auditLogs = await getDocumentCertificateAuditLogs({
+    id: documentId,
+  });
+
+  const isOwner = (email: string) => {
+    return email.toLowerCase() === document.User.email.toLowerCase();
+  };
+
+  const getDevice = (userAgent?: string | null) => {
+    if (!userAgent) {
+      return 'Unknown';
+    }
+
+    const parser = new UAParser(userAgent);
+
+    parser.setUA(userAgent);
+
+    const result = parser.getResult();
+
+    return `${result.os.name} - ${result.browser.name} ${result.browser.version}`;
+  };
+
+  const getAuthenticationLevel = (recipientId: number) => {
+    const recipient = document.Recipient.find((recipient) => recipient.id === recipientId);
+
+    if (!recipient) {
+      return 'Unknown';
+    }
+
+    const extractedAuthMethods = extractDocumentAuthMethods({
+      documentAuth: document.authOptions,
+      recipientAuth: recipient.authOptions,
+    });
+
+    let authLevel = match(extractedAuthMethods.derivedRecipientActionAuth)
+      .with('ACCOUNT', () => 'Account Re-Authentication')
+      .with('TWO_FACTOR_AUTH', () => 'Two-Factor Re-Authentication')
+      .with('PASSKEY', () => 'Passkey Re-Authentication')
+      .with('EXPLICIT_NONE', () => 'Email')
+      .with(null, () => null)
+      .exhaustive();
+
+    if (!authLevel) {
+      authLevel = match(extractedAuthMethods.derivedRecipientAccessAuth)
+        .with('ACCOUNT', () => 'Account Authentication')
+        .with(null, () => 'Email')
+        .exhaustive();
+    }
+
+    return authLevel;
+  };
+
+  const getRecipientAuditLogs = (recipientId: number) => {
+    return {
+      [DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT]: auditLogs[DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT && log.data.recipientId === recipientId,
+      ),
+      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED]: auditLogs[
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED
+      ].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED &&
+          log.data.recipientId === recipientId,
+      ),
+      [DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED]: auditLogs[
+        DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED
+      ].filter(
+        (log) =>
+          log.type === DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED &&
+          log.data.recipientId === recipientId,
+      ),
+    };
+  };
+
+  const getRecipientSignatureField = (recipientId: number) => {
+    return document.Recipient.find((recipient) => recipient.id === recipientId)?.Field.find(
+      (field) => field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE,
+    );
+  };
+
+  return (
+    <div className="print-provider pointer-events-none mx-auto max-w-screen-md">
+      <div className="flex items-center">
+        <h1 className="my-8 text-2xl font-bold">Signing Certificate</h1>
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          <Table overflowHidden>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Signer Events</TableHead>
+                <TableHead>Signature</TableHead>
+                <TableHead>Details</TableHead>
+                {/* <TableHead>Security</TableHead> */}
+              </TableRow>
+            </TableHeader>
+
+            <TableBody className="print:text-xs">
+              {document.Recipient.map((recipient, i) => {
+                const logs = getRecipientAuditLogs(recipient.id);
+                const signature = getRecipientSignatureField(recipient.id);
+
+                return (
+                  <TableRow key={i} className="print:break-inside-avoid">
+                    <TableCell truncate={false} className="w-[min-content] max-w-[220px] align-top">
+                      <div className="hyphens-auto break-words font-medium">{recipient.name}</div>
+                      <div className="break-all">{recipient.email}</div>
+                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                        {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                      </p>
+
+                      <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                        <span className="font-medium">Authentication Level:</span>{' '}
+                        <span className="block">{getAuthenticationLevel(recipient.id)}</span>
+                      </p>
+                    </TableCell>
+
+                    <TableCell truncate={false} className="w-[min-content] align-top">
+                      {signature ? (
+                        <>
+                          <div
+                            className="inline-block rounded-lg p-1"
+                            style={{
+                              boxShadow: `0px 0px 0px 4.88px rgba(122, 196, 85, 0.1), 0px 0px 0px 1.22px rgba(122, 196, 85, 0.6), 0px 0px 0px 0.61px rgba(122, 196, 85, 1)`,
+                            }}
+                          >
+                            <img
+                              src={`${signature.Signature?.signatureImageAsBase64}`}
+                              alt="Signature"
+                              className="max-h-12 max-w-full"
+                            />
+                          </div>
+
+                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                            <span className="font-medium">Signature ID:</span>{' '}
+                            <span className="block font-mono uppercase">
+                              {signature.secondaryId}
+                            </span>
+                          </p>
+
+                          <p className="text-muted-foreground mt-2 text-sm print:text-xs">
+                            <span className="font-medium">IP Address:</span>{' '}
+                            <span className="inline-block">
+                              {logs.DOCUMENT_RECIPIENT_COMPLETED[0].ipAddress}
+                            </span>
+                          </p>
+
+                          <p className="text-muted-foreground mt-1 text-sm print:text-xs">
+                            <span className="font-medium">Device:</span>{' '}
+                            <span className="inline-block">
+                              {getDevice(logs.DOCUMENT_RECIPIENT_COMPLETED[0].userAgent)}
+                            </span>
+                          </p>
+                        </>
+                      ) : (
+                        <p className="text-muted-foreground">N/A</p>
+                      )}
+                    </TableCell>
+
+                    <TableCell truncate={false} className="w-[min-content] align-top">
+                      <div className="space-y-1">
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">Sent:</span>{' '}
+                          <span className="inline-block">
+                            <LocaleDate
+                              date={logs.EMAIL_SENT[0].createdAt}
+                              format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
+                            />
+                          </span>
+                        </p>
+
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">Viewed:</span>{' '}
+                          <span className="inline-block">
+                            <LocaleDate
+                              date={logs.DOCUMENT_OPENED[0].createdAt}
+                              format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
+                            />
+                          </span>
+                        </p>
+
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">Signed:</span>{' '}
+                          <span className="inline-block">
+                            <LocaleDate
+                              date={logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt}
+                              format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
+                            />
+                          </span>
+                        </p>
+
+                        <p className="text-muted-foreground text-sm print:text-xs">
+                          <span className="font-medium">Reason:</span>{' '}
+                          <span className="inline-block">
+                            {isOwner(recipient.email)
+                              ? FRIENDLY_SIGNING_REASONS['__OWNER__']
+                              : FRIENDLY_SIGNING_REASONS[recipient.role]}
+                          </span>
+                        </p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <div className="my-8 flex-row-reverse">
+        <div className="flex items-end justify-end gap-x-4">
+          <p className="flex-shrink-0 text-sm font-medium print:text-xs">
+            Signing certificate provided by:
+          </p>
+
+          <Logo className="max-h-6 print:max-h-4" />
+        </div>
+      </div>
+    </div>
+  );
+}