fix: wip

apps/remix/app/components/general/document/document-audit-log-download-button.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+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 DocumentAuditLogDownloadButtonProps = {
+  className?: string;
+  documentId: number;
+};
+
+export const DocumentAuditLogDownloadButton = ({
+  className,
+  documentId,
+}: DocumentAuditLogDownloadButtonProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const { mutateAsync: downloadAuditLogs, isPending } =
+    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: _(msg`Something went wrong`),
+        description: _(
+          msg`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={isPending}
+      onClick={() => void onDownloadAuditLogsClick()}
+    >
+      {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}
+      <Trans>Download Audit Logs</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/general/document/document-certificate-download-button.tsx

@@ -0,0 +1,85 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentStatus } from '@prisma/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 DocumentCertificateDownloadButtonProps = {
+  className?: string;
+  documentId: number;
+  documentStatus: DocumentStatus;
+};
+
+export const DocumentCertificateDownloadButton = ({
+  className,
+  documentId,
+  documentStatus,
+}: DocumentCertificateDownloadButtonProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const { mutateAsync: downloadCertificate, isPending } =
+    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: _(msg`Something went wrong`),
+        description: _(
+          msg`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={isPending}
+      variant="outline"
+      disabled={documentStatus !== DocumentStatus.COMPLETED}
+      onClick={() => void onDownloadCertificatesClick()}
+    >
+      {!isPending && <DownloadIcon className="mr-1.5 h-4 w-4" />}
+      <Trans>Download Certificate</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -0,0 +1,411 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
+import { useNavigate, useSearchParams } from 'react-router';
+
+import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
+import {
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
+import type { TDocument } from '@documenso/lib/types/document';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
+import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import { AddSettingsFormPartial } from '@documenso/ui/primitives/document-flow/add-settings';
+import type { TAddSettingsFormSchema } from '@documenso/ui/primitives/document-flow/add-settings.types';
+import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/add-signers';
+import type { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
+import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/add-subject';
+import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type DocumentEditFormProps = {
+  className?: string;
+  initialDocument: TDocument;
+  documentRootPath: string;
+  isDocumentEnterprise: boolean;
+};
+
+type EditDocumentStep = 'settings' | 'signers' | 'fields' | 'subject';
+const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields', 'subject'];
+
+export const DocumentEditForm = ({
+  className,
+  initialDocument,
+  documentRootPath,
+  isDocumentEnterprise,
+}: DocumentEditFormProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const navigate = useNavigate();
+
+  const [searchParams] = useSearchParams();
+  const team = useOptionalCurrentTeam();
+
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const { data: document, refetch: refetchDocument } =
+    trpc.document.getDocumentWithDetailsById.useQuery(
+      {
+        documentId: initialDocument.id,
+      },
+      {
+        initialData: initialDocument,
+        ...SKIP_QUERY_BATCH_META,
+      },
+    );
+
+  const { recipients, fields } = document;
+
+  const { mutateAsync: updateDocument } = trpc.document.setSettingsForDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          documentId: initialDocument.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: setSigningOrderForDocument } =
+    trpc.document.setSigningOrderForDocument.useMutation({
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      onSuccess: (newData) => {
+        utils.document.getDocumentWithDetailsById.setData(
+          {
+            documentId: initialDocument.id,
+          },
+          (oldData) => ({ ...(oldData || initialDocument), ...newData, id: Number(newData.id) }),
+        );
+      },
+    });
+
+  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: ({ fields: newFields }) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          documentId: initialDocument.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), fields: newFields }),
+      );
+    },
+  });
+
+  const { mutateAsync: setRecipients } = trpc.recipient.setDocumentRecipients.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: ({ recipients: newRecipients }) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          documentId: initialDocument.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), recipients: newRecipients }),
+      );
+    },
+  });
+
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          documentId: initialDocument.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: setPasswordForDocument } =
+    trpc.document.setPasswordForDocument.useMutation();
+
+  const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
+    settings: {
+      title: msg`General`,
+      description: msg`Configure general settings for the document.`,
+      stepIndex: 1,
+    },
+    signers: {
+      title: msg`Add Signers`,
+      description: msg`Add the people who will sign the document.`,
+      stepIndex: 2,
+    },
+    fields: {
+      title: msg`Add Fields`,
+      description: msg`Add all relevant fields for each recipient.`,
+      stepIndex: 3,
+    },
+    subject: {
+      title: msg`Distribute Document`,
+      description: msg`Choose how the document will reach recipients`,
+      stepIndex: 4,
+    },
+  };
+
+  const [step, setStep] = useState<EditDocumentStep>(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const searchParamStep = searchParams?.get('step') as EditDocumentStep | undefined;
+
+    let initialStep: EditDocumentStep = 'settings';
+
+    if (
+      searchParamStep &&
+      documentFlow[searchParamStep] !== undefined &&
+      !(recipients.length === 0 && (searchParamStep === 'subject' || searchParamStep === 'fields'))
+    ) {
+      initialStep = searchParamStep;
+    }
+
+    return initialStep;
+  });
+
+  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
+    try {
+      const { timezone, dateFormat, redirectUrl, language } = data.meta;
+
+      await updateDocument({
+        documentId: document.id,
+        data: {
+          title: data.title,
+          externalId: data.externalId || null,
+          visibility: data.visibility,
+          globalAccessAuth: data.globalAccessAuth ?? null,
+          globalActionAuth: data.globalActionAuth ?? null,
+        },
+        meta: {
+          timezone,
+          dateFormat,
+          redirectUrl,
+          language: isValidLanguageCode(language) ? language : undefined,
+        },
+      });
+
+      setStep('signers');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while updating the document settings.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
+    try {
+      await Promise.all([
+        setSigningOrderForDocument({
+          documentId: document.id,
+          signingOrder: data.signingOrder,
+        }),
+
+        setRecipients({
+          documentId: document.id,
+          recipients: data.signers.map((signer) => ({
+            ...signer,
+            // Explicitly set to null to indicate we want to remove auth if required.
+            actionAuth: signer.actionAuth || null,
+          })),
+        }),
+      ]);
+
+      setStep('fields');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while adding signers.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
+    try {
+      await addFields({
+        documentId: document.id,
+        fields: data.fields,
+      });
+
+      await updateDocument({
+        documentId: document.id,
+
+        meta: {
+          typedSignatureEnabled: data.typedSignatureEnabled,
+        },
+      });
+
+      // Clear all field data from localStorage
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith('field_')) {
+          localStorage.removeItem(key);
+        }
+      }
+
+      setStep('subject');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while adding the fields.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
+    const { subject, message, distributionMethod, emailSettings } = data.meta;
+
+    try {
+      await sendDocument({
+        documentId: document.id,
+        meta: {
+          subject,
+          message,
+          distributionMethod,
+          emailSettings,
+        },
+      });
+
+      if (distributionMethod === DocumentDistributionMethod.EMAIL) {
+        toast({
+          title: _(msg`Document sent`),
+          description: _(msg`Your document has been sent successfully.`),
+          duration: 5000,
+        });
+
+        await navigate(documentRootPath);
+      } else if (document.status === DocumentStatus.DRAFT) {
+        toast({
+          title: _(msg`Links Generated`),
+          description: _(msg`Signing links have been generated for this document.`),
+          duration: 5000,
+        });
+      } else {
+        await navigate(`${documentRootPath}/${document.id}`);
+      }
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while sending the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPasswordSubmit = async (password: string) => {
+    await setPasswordForDocument({
+      documentId: document.id,
+      password,
+    });
+  };
+
+  const currentDocumentFlow = documentFlow[step];
+
+  /**
+   * Refresh the data in the background when steps change.
+   */
+  useEffect(() => {
+    void refetchDocument();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
+  return (
+    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
+      <Card
+        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer
+            key={document.documentData.id}
+            documentData={document.documentData}
+            document={document}
+            password={document.documentMeta?.password}
+            onPasswordSubmit={onPasswordSubmit}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
+          >
+            <AddSettingsFormPartial
+              key={recipients.length}
+              documentFlow={documentFlow.settings}
+              document={document}
+              currentTeamMemberRole={team?.currentTeamMember?.role}
+              recipients={recipients}
+              fields={fields}
+              isDocumentEnterprise={isDocumentEnterprise}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onAddSettingsFormSubmit}
+            />
+
+            <AddSignersFormPartial
+              key={recipients.length}
+              documentFlow={documentFlow.signers}
+              recipients={recipients}
+              signingOrder={document.documentMeta?.signingOrder}
+              fields={fields}
+              isDocumentEnterprise={isDocumentEnterprise}
+              onSubmit={onAddSignersFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+            />
+
+            <AddFieldsFormPartial
+              key={fields.length}
+              documentFlow={documentFlow.fields}
+              recipients={recipients}
+              fields={fields}
+              onSubmit={onAddFieldsFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+              teamId={team?.id}
+            />
+
+            <AddSubjectFormPartial
+              key={recipients.length}
+              documentFlow={documentFlow.subject}
+              document={document}
+              recipients={recipients}
+              fields={fields}
+              onSubmit={onAddSubjectFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -0,0 +1,114 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Document, Recipient, Team, User } from '@prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
+import { Link } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentPageViewButtonProps = {
+  document: Document & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    recipients: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+};
+
+export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps) => {
+  const { user } = useSession();
+
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const recipient = document.recipients.find((recipient) => recipient.email === user.email);
+
+  const isRecipient = !!recipient;
+  const isPending = document.status === DocumentStatus.PENDING;
+  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+  const role = recipient?.role;
+
+  const documentsPath = formatDocumentsPath(document.team?.url);
+
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query(
+        {
+          documentId: document.id,
+        },
+        {
+          context: {
+            teamId: document.team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        throw new Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: documentWithData.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return match({
+    isRecipient,
+    isPending,
+    isComplete,
+    isSigned,
+  })
+    .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
+      <Button className="w-full" asChild>
+        <Link to={`/sign/${recipient?.token}`}>
+          {match(role)
+            .with(RecipientRole.SIGNER, () => (
+              <>
+                <Pencil className="-ml-1 mr-2 h-4 w-4" />
+                <Trans>Sign</Trans>
+              </>
+            ))
+            .with(RecipientRole.APPROVER, () => (
+              <>
+                <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
+                <Trans>Approve</Trans>
+              </>
+            ))
+            .otherwise(() => (
+              <>
+                <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                <Trans>View</Trans>
+              </>
+            ))}
+        </Link>
+      </Button>
+    ))
+    .with({ isComplete: false }, () => (
+      <Button className="w-full" asChild>
+        <Link to={`${documentsPath}/${document.id}/edit`}>
+          <Trans>Edit</Trans>
+        </Link>
+      </Button>
+    ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-full" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        <Trans>Download</Trans>
+      </Button>
+    ))
+    .otherwise(() => null);
+};

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -0,0 +1,200 @@
+import { useState } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentStatus } from '@prisma/client';
+import type { Document, Recipient, Team, User } from '@prisma/client';
+import {
+  Copy,
+  Download,
+  Edit,
+  Loader,
+  MoreHorizontal,
+  ScrollTextIcon,
+  Share,
+  Trash2,
+} from 'lucide-react';
+import { Link } from 'react-router';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcClient } from '@documenso/trpc/client';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
+import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
+import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { DocumentRecipientLinkCopyDialog } from '~/components/document/document-recipient-link-copy-dialog';
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type DocumentPageViewDropdownProps = {
+  document: Document & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    recipients: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+};
+
+export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownProps) => {
+  const { user } = useSession();
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const team = useOptionalCurrentTeam();
+
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+
+  const recipient = document.recipients.find((recipient) => recipient.email === user.email);
+
+  const isOwner = document.user.id === user.id;
+  const isDraft = document.status === DocumentStatus.DRAFT;
+  const isPending = document.status === DocumentStatus.PENDING;
+  const isDeleted = document.deletedAt !== null;
+  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isCurrentTeamDocument = team && document.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
+
+  const documentsPath = formatDocumentsPath(team?.url);
+
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query(
+        {
+          documentId: document.id,
+        },
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: document.title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const nonSignedRecipients = document.recipients.filter((item) => item.signingStatus !== 'SIGNED');
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-52" align="end" forceMount>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
+
+        {(isOwner || isCurrentTeamDocument) && !isComplete && (
+          <DropdownMenuItem asChild>
+            <Link to={`${documentsPath}/${document.id}/edit`}>
+              <Edit className="mr-2 h-4 w-4" />
+              <Trans>Edit</Trans>
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        {isComplete && (
+          <DropdownMenuItem onClick={onDownloadClick}>
+            <Download className="mr-2 h-4 w-4" />
+            <Trans>Download</Trans>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem asChild>
+          <Link to={`${documentsPath}/${document.id}/logs`}>
+            <ScrollTextIcon className="mr-2 h-4 w-4" />
+            <Trans>Audit Log</Trans>
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
+          <Copy className="mr-2 h-4 w-4" />
+          <Trans>Duplicate</Trans>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
+        >
+          <Trash2 className="mr-2 h-4 w-4" />
+          <Trans>Delete</Trans>
+        </DropdownMenuItem>
+
+        <DropdownMenuLabel>
+          <Trans>Share</Trans>
+        </DropdownMenuLabel>
+
+        {canManageDocument && (
+          <DocumentRecipientLinkCopyDialog
+            recipients={document.recipients}
+            trigger={
+              <DropdownMenuItem
+                disabled={!isPending || isDeleted}
+                onSelect={(e) => e.preventDefault()}
+              >
+                <Copy className="mr-2 h-4 w-4" />
+                <Trans>Signing Links</Trans>
+              </DropdownMenuItem>
+            }
+          />
+        )}
+
+        <DocumentResendDialog document={document} recipients={nonSignedRecipients} />
+
+        <DocumentShareButton
+          documentId={document.id}
+          token={isOwner ? undefined : recipient?.token}
+          trigger={({ loading, disabled }) => (
+            <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
+              <div className="flex items-center">
+                {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
+                <Trans>Share Signing Card</Trans>
+              </div>
+            </DropdownMenuItem>
+          )}
+        />
+      </DropdownMenuContent>
+
+      <DocumentDeleteDialog
+        id={document.id}
+        status={document.status}
+        documentTitle={document.title}
+        open={isDeleteDialogOpen}
+        canManageDocument={canManageDocument}
+        onOpenChange={setDeleteDialogOpen}
+      />
+
+      {isDuplicateDialogOpen && (
+        <DocumentDuplicateDialog
+          id={document.id}
+          open={isDuplicateDialogOpen}
+          onOpenChange={setDuplicateDialogOpen}
+        />
+      )}
+    </DropdownMenu>
+  );
+};

apps/remix/app/components/general/document/document-page-view-information.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import type { Document, Recipient, User } from '@prisma/client';
+import { DateTime } from 'luxon';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+
+export type DocumentPageViewInformationProps = {
+  userId: number;
+  document: Document & {
+    user: Pick<User, 'id' | 'name' | 'email'>;
+    recipients: Recipient[];
+  };
+};
+
+export const DocumentPageViewInformation = ({
+  document,
+  userId,
+}: DocumentPageViewInformationProps) => {
+  const isMounted = useIsMounted();
+
+  const { _, i18n } = useLingui();
+
+  const documentInformation = useMemo(() => {
+    return [
+      {
+        description: msg`Uploaded by`,
+        value:
+          userId === document.userId ? _(msg`You`) : (document.user.name ?? document.user.email),
+      },
+      {
+        description: msg`Created`,
+        value: DateTime.fromJSDate(document.createdAt)
+          .setLocale(i18n.locales?.[0] || i18n.locale)
+          .toFormat('MMMM d, yyyy'),
+      },
+      {
+        description: msg`Last modified`,
+        value: DateTime.fromJSDate(document.updatedAt)
+          .setLocale(i18n.locales?.[0] || i18n.locale)
+          .toRelative(),
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMounted, document, userId]);
+
+  return (
+    <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">
+      <h1 className="px-4 py-3 font-medium">
+        <Trans>Information</Trans>
+      </h1>
+
+      <ul className="divide-y border-t">
+        {documentInformation.map((item, i) => (
+          <li
+            key={i}
+            className="flex items-center justify-between px-4 py-2.5 text-sm last:border-b"
+          >
+            <span className="text-muted-foreground">{_(item.description)}</span>
+            <span>{item.value}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};

apps/remix/app/components/general/document/document-page-view-recent-activity.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { AlertTriangle, CheckCheckIcon, CheckIcon, Loader, MailOpen } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { cn } from '@documenso/ui/lib/utils';
+
+export type DocumentPageViewRecentActivityProps = {
+  documentId: number;
+  userId: number;
+};
+
+export const DocumentPageViewRecentActivity = ({
+  documentId,
+  userId,
+}: DocumentPageViewRecentActivityProps) => {
+  const { _ } = useLingui();
+
+  const {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+      filterForRecentActivity: true,
+      orderByColumn: 'createdAt',
+      orderByDirection: 'asc',
+      perPage: 10,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
+
+  const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
+
+  return (
+    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+      <div className="flex flex-row items-center justify-between border-b px-4 py-3">
+        <h1 className="text-foreground font-medium">
+          <Trans>Recent activity</Trans>
+        </h1>
+
+        {/* Can add dropdown menu here for additional options. */}
+      </div>
+
+      {isLoading && (
+        <div className="flex h-full items-center justify-center py-16">
+          <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        </div>
+      )}
+
+      {isLoadingError && (
+        <div className="flex h-full flex-col items-center justify-center py-16">
+          <p className="text-foreground/80 text-sm">
+            <Trans>Unable to load document history</Trans>
+          </p>
+          <button
+            onClick={async () => refetch()}
+            className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+          >
+            <Trans>Click here to retry</Trans>
+          </button>
+        </div>
+      )}
+
+      <AnimateGenericFadeInOut>
+        {data && (
+          <ul role="list" className="space-y-6 p-4">
+            {hasNextPage && (
+              <li className="relative flex gap-x-4">
+                <div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
+                  <div className="bg-border w-px" />
+                </div>
+
+                <div className="bg-widget relative flex h-6 w-6 flex-none items-center justify-center">
+                  <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                </div>
+
+                <button
+                  onClick={async () => fetchNextPage()}
+                  className="text-foreground/70 hover:text-muted-foreground text-xs"
+                >
+                  {isFetchingNextPage ? _(msg`Loading...`) : _(msg`Load older activity`)}
+                </button>
+              </li>
+            )}
+
+            {documentAuditLogs.length === 0 && (
+              <div className="flex items-center justify-center py-4">
+                <p className="text-muted-foreground/70 text-sm">
+                  <Trans>No recent activity</Trans>
+                </p>
+              </div>
+            )}
+
+            {documentAuditLogs.map((auditLog, auditLogIndex) => (
+              <li key={auditLog.id} className="relative flex gap-x-4">
+                <div
+                  className={cn(
+                    auditLogIndex === documentAuditLogs.length - 1 ? 'h-6' : '-bottom-6',
+                    'absolute left-0 top-0 flex w-6 justify-center',
+                  )}
+                >
+                  <div className="bg-border w-px" />
+                </div>
+
+                <div className="bg-widget text-foreground/40 relative flex h-6 w-6 flex-none items-center justify-center">
+                  {match(auditLog.type)
+                    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED, () => (
+                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                        <CheckCheckIcon className="h-3 w-3" aria-hidden="true" />
+                      </div>
+                    ))
+                    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED, () => (
+                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                        <CheckIcon className="h-3 w-3" aria-hidden="true" />
+                      </div>
+                    ))
+                    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED, () => (
+                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                        <AlertTriangle className="h-3 w-3" aria-hidden="true" />
+                      </div>
+                    ))
+                    .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED, () => (
+                      <div className="bg-widget rounded-full border border-gray-300 p-1 dark:border-neutral-600">
+                        <MailOpen className="h-3 w-3" aria-hidden="true" />
+                      </div>
+                    ))
+                    .otherwise(() => (
+                      <div className="bg-widget h-1.5 w-1.5 rounded-full ring-1 ring-gray-300 dark:ring-neutral-600" />
+                    ))}
+                </div>
+
+                <p
+                  className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
+                  title={formatDocumentAuditLogAction(_, auditLog, userId).description}
+                >
+                  {formatDocumentAuditLogAction(_, auditLog, userId).description}
+                </p>
+
+                <time className="text-muted-foreground dark:text-muted-foreground/70 flex-none py-0.5 text-xs leading-5">
+                  {DateTime.fromJSDate(auditLog.createdAt).toRelative({ style: 'short' })}
+                </time>
+              </li>
+            ))}
+          </ul>
+        )}
+      </AnimateGenericFadeInOut>
+    </section>
+  );
+};

apps/remix/app/components/general/document/document-page-view-recipients.tsx

@@ -0,0 +1,171 @@
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import type { Document, Recipient } from '@prisma/client';
+import {
+  AlertTriangle,
+  CheckIcon,
+  Clock,
+  MailIcon,
+  MailOpenIcon,
+  PenIcon,
+  PlusIcon,
+} from 'lucide-react';
+import { Link } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { formatSigningLink } from '@documenso/lib/utils/recipients';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentPageViewRecipientsProps = {
+  document: Document & {
+    recipients: Recipient[];
+  };
+  documentRootPath: string;
+};
+
+export const DocumentPageViewRecipients = ({
+  document,
+  documentRootPath,
+}: DocumentPageViewRecipientsProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const recipients = document.recipients;
+
+  return (
+    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+      <div className="flex flex-row items-center justify-between px-4 py-3">
+        <h1 className="text-foreground font-medium">
+          <Trans>Recipients</Trans>
+        </h1>
+
+        {document.status !== DocumentStatus.COMPLETED && (
+          <Link
+            to={`${documentRootPath}/${document.id}/edit?step=signers`}
+            title={_(msg`Modify recipients`)}
+            className="flex flex-row items-center justify-between"
+          >
+            {recipients.length === 0 ? (
+              <PlusIcon className="ml-2 h-4 w-4" />
+            ) : (
+              <PenIcon className="ml-2 h-3 w-3" />
+            )}
+          </Link>
+        )}
+      </div>
+
+      <ul className="text-muted-foreground divide-y border-t">
+        {recipients.length === 0 && (
+          <li className="flex flex-col items-center justify-center py-6 text-sm">
+            <Trans>No recipients</Trans>
+          </li>
+        )}
+
+        {recipients.map((recipient) => (
+          <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
+            <AvatarWithText
+              avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
+              primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
+              secondaryText={
+                <p className="text-muted-foreground/70 text-xs">
+                  {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+                </p>
+              }
+            />
+
+            <div className="flex flex-row items-center">
+              {document.status !== DocumentStatus.DRAFT &&
+                recipient.signingStatus === SigningStatus.SIGNED && (
+                  <Badge variant="default">
+                    {match(recipient.role)
+                      .with(RecipientRole.APPROVER, () => (
+                        <>
+                          <CheckIcon className="mr-1 h-3 w-3" />
+                          <Trans>Approved</Trans>
+                        </>
+                      ))
+                      .with(RecipientRole.CC, () =>
+                        document.status === DocumentStatus.COMPLETED ? (
+                          <>
+                            <MailIcon className="mr-1 h-3 w-3" />
+                            <Trans>Sent</Trans>
+                          </>
+                        ) : (
+                          <>
+                            <CheckIcon className="mr-1 h-3 w-3" />
+                            <Trans>Ready</Trans>
+                          </>
+                        ),
+                      )
+
+                      .with(RecipientRole.SIGNER, () => (
+                        <>
+                          <SignatureIcon className="mr-1 h-3 w-3" />
+                          <Trans>Signed</Trans>
+                        </>
+                      ))
+                      .with(RecipientRole.VIEWER, () => (
+                        <>
+                          <MailOpenIcon className="mr-1 h-3 w-3" />
+                          <Trans>Viewed</Trans>
+                        </>
+                      ))
+                      .exhaustive()}
+                  </Badge>
+                )}
+
+              {document.status !== DocumentStatus.DRAFT &&
+                recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                  <Badge variant="secondary">
+                    <Clock className="mr-1 h-3 w-3" />
+                    <Trans>Pending</Trans>
+                  </Badge>
+                )}
+
+              {document.status !== DocumentStatus.DRAFT &&
+                recipient.signingStatus === SigningStatus.REJECTED && (
+                  <PopoverHover
+                    trigger={
+                      <Badge variant="destructive">
+                        <AlertTriangle className="mr-1 h-3 w-3" />
+                        <Trans>Rejected</Trans>
+                      </Badge>
+                    }
+                  >
+                    <p className="text-sm">
+                      <Trans>Reason for rejection: </Trans>
+                    </p>
+
+                    <p className="text-muted-foreground mt-1 text-sm">
+                      {recipient.rejectionReason}
+                    </p>
+                  </PopoverHover>
+                )}
+
+              {document.status === DocumentStatus.PENDING &&
+                recipient.signingStatus === SigningStatus.NOT_SIGNED &&
+                recipient.role !== RecipientRole.CC && (
+                  <CopyTextButton
+                    value={formatSigningLink(recipient.token)}
+                    onCopySuccess={() => {
+                      toast({
+                        title: _(msg`Copied to clipboard`),
+                        description: _(msg`The signing link has been copied to your clipboard.`),
+                      });
+                    }}
+                  />
+                )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};