feat: include audit trail log in the completed doc (#1916)

This change allows users to include the audit trail log in the completed
documents; similar to the signing certificate.


https://github.com/user-attachments/assets/d9ae236a-2584-4ad6-b7bc-27b3eb8c74d3

It also solves the issue with the text cutoff.

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.document.tsx

@@ -46,6 +46,7 @@ export default function OrganisationSettingsDocumentPage() {
         documentDateFormat,
         includeSenderDetails,
         includeSigningCertificate,
+        includeAuditLog,
         signatureTypes,
       } = data;
 
@@ -54,7 +55,8 @@ export default function OrganisationSettingsDocumentPage() {
         documentLanguage === null ||
         documentDateFormat === null ||
         includeSenderDetails === null ||
-        includeSigningCertificate === null
+        includeSigningCertificate === null ||
+        includeAuditLog === null
       ) {
         throw new Error('Should not be possible.');
       }
@@ -68,6 +70,7 @@ export default function OrganisationSettingsDocumentPage() {
           documentDateFormat,
           includeSenderDetails,
           includeSigningCertificate,
+          includeAuditLog,
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -170,7 +170,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
             <ul className="text-muted-foreground list-inside list-disc">
               {recipients.map((recipient) => (
                 <li key={`recipient-${recipient.id}`}>
-                  <span className="-ml-2">{formatRecipientText(recipient)}</span>
+                  <span>{formatRecipientText(recipient)}</span>
                 </li>
               ))}
             </ul>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -38,6 +38,7 @@ export default function TeamsSettingsPage() {
         documentDateFormat,
         includeSenderDetails,
         includeSigningCertificate,
+        includeAuditLog,
         signatureTypes,
       } = data;
 
@@ -50,6 +51,7 @@ export default function TeamsSettingsPage() {
           documentDateFormat,
           includeSenderDetails,
           includeSigningCertificate,
+          includeAuditLog,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,

apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.print.css

@@ -0,0 +1,5 @@
+@media print {
+  html {
+    font-size: 10pt;
+  }
+}

apps/remix/app/routes/_internal+/[__htmltopdf]+/audit-log.tsx

@@ -12,10 +12,17 @@ import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-
 import { getTranslations } from '@documenso/lib/utils/i18n';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
+import appStylesheet from '~/app.css?url';
 import { BrandingLogo } from '~/components/general/branding-logo';
 import { InternalAuditLogTable } from '~/components/tables/internal-audit-log-table';
 
 import type { Route } from './+types/audit-log';
+import auditLogStylesheet from './audit-log.print.css?url';
+
+export const links: Route.LinksFunction = () => [
+  { rel: 'stylesheet', href: appStylesheet },
+  { rel: 'stylesheet', href: auditLogStylesheet },
+];
 
 export async function loader({ request }: Route.LoaderArgs) {
   const d = new URL(request.url).searchParams.get('d');
@@ -76,8 +83,8 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
 
   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">{_(msg`Version History`)}</h1>
+      <div className="mb-6 border-b pb-4">
+        <h1 className="text-xl font-semibold">{_(msg`Audit Log`)}</h1>
       </div>
 
       <Card>
@@ -157,11 +164,9 @@ export default function AuditLog({ loaderData }: Route.ComponentProps) {
         </CardContent>
       </Card>
 
-      <Card className="mt-8">
-        <CardContent className="p-0">
-          <InternalAuditLogTable logs={auditLogs} />
-        </CardContent>
-      </Card>
+      <div className="mt-8">
+        <InternalAuditLogTable logs={auditLogs} />
+      </div>
 
       <div className="my-8 flex-row-reverse">
         <div className="flex items-end justify-end gap-x-4">