feat: add document version history UI

## Description

Currently the document redirect URL feature is preventing documents from
being created unless a redirect URL is provided.

During the document edit flow, the redirect URL is hidden in an advanced
tab with the value of an empty string, which will always fail the
current Zod validation since `optional` requires undefined to pass.

There are multiple ways to fix this, but I think this is the easiest
method where we can assume an empty string is valid.

apps/marketing/content/blog/commodifying-signing.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-01-25
-tags:
+Tags:
   - Vision
   - Mission
   - Open Source

apps/marketing/content/blog/launch-week-2-day-1.mdx

@@ -1,64 +0,0 @@
----
-title: Launch Week II - Day 1 - Teams
-description: Teams for Documenso are here. And they come free for early adopters!
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-02-26
-tags:
-  - Launch Week
-  - teams
-  - early adopter perks
----
-
-<video
-  id="vid"
-  width="100%"
-  src="https://github.com/documenso/design/assets/1309312/12a85ec7-20bb-4813-9714-e4da42c9cfba"
-  autoPlay
-  loop
-  muted
-></video>
-
-> TLDR; Docucmenso now supports teams that share documents, templates and a team mail address. Early Adopter get UNLIMITED<sup>1</sup> Users.
-
-## Kicking off Launch Week II - "Connected"
-
-The day has come! Roughly 5 months after kicked off our first launch week with open sourcing our design and Malfunction Mania, Launch Week #2 is here 🎉 This Launch Week's theme is "connected", since this is all about connecting humans, machines and documents.
-
-Working with documents and getting that signature is a team sport. This is why we are kicking it off today with a very long-awaited feature: Documenso now supports teams!
-
-## Introducing Teams for Documenso
-
-You can now create teams next to your personal account: Simply invite your colleagues, and you can include everyone you like in working with your documents. With teams, you can:
-
-- Send unlimited signature requests with unlimited recipients
-- Create, view, edit and sign documents owned by the team
-- Define a dedicated team email, to receive signing requests into a team inbox for the owner to sign
-- Manage team roles: Member (Create+Edit), Manger Manage (+Manage Team Members), Owner (+Transfer Team +Delete Team + Sign Documents sent to team email)
-
-## Pricing
-
-Together with Teams, we are announcing the new teams pricing:
-
-- $10 per seat per month
-- 5 seats minimum
-- You can add seats dynamically as needed
-
-This pricing will take effect, as soon as the early adopter seats run out. Want to check out teams: [https://documen.so/teams](https://documen.so/teams).
-
-## Early Adopter Perks
-
-There is one more point on pricing I have been looking forward to for a long time:
-
-All early adopter plans now include **UNLIMITED teams and users**<sup>1</sup> . We appreciate your support so far very much, and I'm happy to announce this first of more early adopter perks to come. We have roughly 48 early adopter plans left, so if you plan to onboard your team, now is a great time to [grab your early adopter seat.](https://documen.so/claim-early-adopters-plan)
-
-We are eager to hear from all teams users how you like this addition and what we can add to make it even better. Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here, and we would love to hear from you :)
-
-> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 1! Teams just dropped. Check it out https://documen.so/day1 🚀"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
-
-Best from Hamburg\
-Timur
-
-\
-[1] Within reason. If you are unsure what that means, feel free to contact hi@documenso.com and ask for clarification if it's more than 100.

apps/marketing/content/blog/launch-week-2-day-2.mdx

@@ -1,51 +0,0 @@
----
-title: Launch Week II - Day 2 - Templates
-description: Templates help you prepare regular documents faster. And you can share them with your team!
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-02-27
-tags:
-  - Launch Week
-  - secret
-  - no spoiler
----
-
-<video
-  id="vid"
-  width="100%"
-  src="https://github.com/documenso/design/assets/1309312/c9504db1-26b7-4033-88ed-a95cabd02e92"
-  autoPlay
-  loop
-  muted
-></video>
-
-> TLDR; You can now reuse documents via templates. More field types coming soon as well.
-
-## Introducing Templates
-
-It's day 2 of Launch Week, everybody 🙌 After introducing [Teams](https://documenso.com/blog/launch-week-2-day-1) yesterday, today we are looking at making Documenso faster for daily use:
-We are launching templates for Documenso! Templates are an easy to reuse documents you send out often with just a few clicks. With templates, you can:
-
-- Save often-uploaded documents for reuse
-- Define fields once and just fill them out before sending (if at all)
-- Create and share templates with your team
-
-## Pricing
-
-Templates are **included in all Documenso Plans!** That includes our free tier: The limit of 5 documents per month still applies, but you are free to reach it with less friction using templates. Sharing templates with other users is only possible with the teams plan. If you want to share templates with people not in your team, we might have something coming up later this week 👀
-
-## What's Next for Templates
-
-While this is all great, we have a lot of great stuff coming up for templates:
-
-- More Field Types
-- Custom Field Types Defined by You
-- Sharing Templates Externally 👀
-
-Check out templates [here](https://documen.so/templates) and let us know what you think and what we can improve. Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
-
-> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 2! They just launched templates, and I'm pumped 🎉🚀🚀🚀. Check it out https://documen.so/day2"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
-
-Best from Hamburg\
-Timur

apps/marketing/content/blog/launch-week-2-day-3.mdx

@@ -1,48 +0,0 @@
----
-title: Launch Week II - Day 3 - API
-description: Documenso's mission is to create a plattform developers all around the world can build upon. Today we are releasing the first version of our public API, included in all plans!
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-02-28
-tags:
-  - Launch Week
-  - API
----
-
-<video
-  id="vid"
-  width="100%"
-  src="https://github.com/documenso/design/assets/1309312/cb74d6cb-a127-4cac-a166-ad6b56c6140d"
-  autoPlay
-  loop
-  muted
-></video>
-
-> TLDR; The public API is now availible for all plans.
-
-## Introducing the public Documenso API
-
-Launch. Week. Day. 3 🎉 Documenso's mission is to create a platform that developers all around the world can build upon. Today we are releasing the first version of our public API, and we are pumped. Since this is the first version, we focused on the basics. With the new API you can:
-
-- Get Documents (Individual or all Accessible)
-- Upload documents
-- Delete Documents
-- Trigger Sending Documents for Singing
-
-You can check out the detailed API documentation here: TODO API DOCS URL
-
-## Pricing
-
-We are building Documenso to be an open and extendable platform; therefore, therefore the API is included in all current plans. The API is authenticated via auth tokens, which every user can create at no extra cost. Existing limits still apply (i.e., the number of included documents for the free plan). While we don't have all the details yet, we don't intend to price the API usage in itself (rather the accounts using it) since we want you to build on Documenso without being smothered by API costs.
-
-## What's next for the API
-
-You tell us. This is by far the most requested feature, so we would like to hear from you. What should we add? How can we integrate even better?
-
-Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
-
-> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 3! The public API is here 👀 Check it out https://documen.so/day3"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
-
-Best from Hamburg\
-Timur

apps/marketing/content/blog/launch-week-2-day-4.mdx

@@ -1,48 +0,0 @@
----
-title: Launch Week II - Day 4 - Zapier
-description: If you want to integrate Documenso without fiddling with the API, we got you as well. You can now integrate Documenso via Zapier, included in all plans!
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-02-29
-tags:
-  - Launch Week
-  - Zapier
----
-
-<video
-  id="vid"
-  width="100%"
-  src="https://github.com/documenso/design/assets/1309312/3b60789d-8d27-4c66-ae5c-179e33c2e3e6"
-  autoPlay
-  loop
-  muted
-></video>
-
-> TLDR; The public API is now availible for all plans.
-
-## Introducing the public Documenso API
-
-Launch. Week. Day. 3 🎉 Documenso's mission is to create a platform, developers all around the world can build upon. Today we are releasing the first version of our public API, and we are pumped. This since this is the first version we focused on the basics. The API is With the new API you can:
-
-- Get Documents (Individual or all Accessible)
-- Upload documents
-- Delete Documents
-- Trigger Sending Documents for Singing
-
-You can check out the detailed API documentation here: TODO API DOCS URL
-
-## Pricing
-
-We are building Documenso to be an open and extendable platform; therefore, the API is included in all current plans. The API is authenticated via auth tokens, which every user can create at no extra cost. Existing limits still apply (i.e., the number of included documents for the free plan). While we don't have all the details yet, we don't intend to price the API usage in itself (rather the accounts using it) since we want you to build on Documenso without being smothered by API costs.
-
-## What's next for the API
-
-You tell us. This is by far the most requested feature, so we would like to hear from you. What should we add? How can we integrate even better?
-
-Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
-
-> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 3! The public API is here 👀 Check it out https://documen.so/day3"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
-
-Best from Hamburg\
-Timur

apps/marketing/content/blog/launch-week-2-day-5.mdx

@@ -1,59 +0,0 @@
----
-title: Launch Week II - Day 5 - Documenso Profiles
-description: Documenso profiles allow you to send signing links to people so they can sign anytime and see who you are. Documenso Profile Usernames can be claimed starting today. Long ones free, short ones paid. Profiles will launch as soon as they are shiny.
-authorName: 'Timur Ercan'
-authorImage: '/blog/blog-author-timur.jpeg'
-authorRole: 'Co-Founder'
-date: 2024-03-01
-tags:
-  - Launch Week
-  - Profiles
----
-
-<video
-  id="vid"
-  width="100%"
-  src="https://github.com/documenso/design/assets/1309312/89643ae2-2aa9-484c-a522-a0e35097c469"
-  autoPlay
-  loop
-  muted
-></video>
-
-> TLDR; Documenso profiles allow you to send signing links to people so they can sign anytime and see who you are. Documenso Profile Usernames can be claimed starting today. Long ones free, short ones paid. Profiles launch as soon as they are shiny.
-
-## Introducing Documenso Profile Links
-
-Signing documents has always been between humans, and signing something together should be as frictionless as possible. It should also be async, so you don't force your counterpart to jog to their device to send something when you are ready. Today we are announcing the new Documenso Profiles:
-
-<figure>
-  <MdxNextImage
-    src="/blog/profile.png"
-    width="650"
-    height="100"
-    alt="lorem"
-  />
-
-  <figcaption className="text-center">
-   Async > Sync: Add public templates to your Documenso Link and let people sign whenever they are ready.
-  </figcaption>
-</figure>
-
-Documenso profiles work with your existing templates. You can just add them to your public profile to let everyone with your link sign them. With profiles, we want to bring back the human aspect of signing.
-
-By making profiles public, you can always access what your counterparty offers and make them more visible in the process. Long-term, we plan to add more to profiles to help you ensure the person you are dealing with is who they claim to be. Documenso wants to be the trust layer of the internet, and we want to start at the very fundamental level: The individual transaction.
-
-Profiles are our first step towards bringing more trust into everything, simply by making the use of signing more frictionless. As there is more and more content of questionable origin out there, we want to support you in making it clear what you send out and what not.
-
-## Pricing and Claiming
-
-Documenso profile username can be claimed starting today. Documenso profiles will launch as soon as we are happy with the details ✨
-
-- Long usernames (6 characters or more) come free with every account, e.g. **documenso.com/u/timurercan**
-- Short usernames (5 characters or fewer) or less require any paid account ([Early Adopter](https://documen.so/claim-early-adopters-plan), [Teams](https://documen.so/teams) or Enterprise): **e.g., documenso.com/u/timur**
-
-You can claim your username here: [https://documen.so/claim](https://documen.so/claim)
-
-> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 5! You can now claim your username for the upcoming profile links 😮 https://documen.so/day5"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
-
-Best from Hamburg\
-Timur

apps/marketing/content/blog/linear-gh.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-01-10
-tags:
+Tags:
   - GitHub
   - Backlog
   - Roadmap

apps/marketing/content/blog/why-i-started-documenso.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-02-06
-tags:
+Tags:
   - Founders
   - Mission
   - Open Source

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -85,6 +85,7 @@ export const SinglePlayerClient = () => {
     setFields(
       data.fields.map((field, i) => ({
         id: i,
+        secondaryId: i.toString(),
         documentId: -1,
         templateId: null,
         recipientId: -1,

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

@@ -0,0 +1,110 @@
+'use client';
+
+import Link from 'next/link';
+
+import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+import { match } from 'ts-pattern';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+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'>;
+    Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+  team?: Pick<Team, 'id' | 'url'>;
+};
+
+export const DocumentPageViewButton = ({ document, team }: DocumentPageViewButtonProps) => {
+  const { data: session } = useSession();
+  const { toast } = useToast();
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = document.Recipient.find((recipient) => recipient.email === session.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({
+        id: document.id,
+        teamId: team?.id,
+      });
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        throw new Error('No document available');
+      }
+
+      await downloadPDF({ documentData, fileName: documentWithData.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: '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 href={`/sign/${recipient?.token}`}>
+          {match(role)
+            .with(RecipientRole.SIGNER, () => (
+              <>
+                <Pencil className="-ml-1 mr-2 h-4 w-4" />
+                Sign
+              </>
+            ))
+            .with(RecipientRole.APPROVER, () => (
+              <>
+                <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
+                Approve
+              </>
+            ))
+            .otherwise(() => (
+              <>
+                <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                View
+              </>
+            ))}
+        </Link>
+      </Button>
+    ))
+    .with({ isComplete: false }, () => (
+      <Button className="w-full" asChild>
+        <Link href={`${documentsPath}/${document.id}/edit`}>Edit</Link>
+      </Button>
+    ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-full" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        Download
+      </Button>
+    ))
+    .otherwise(() => null);
+};

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

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState } from 'react';
+
+import Link from 'next/link';
+
+import { Copy, Download, Edit, Loader, MoreHorizontal, Share, Trash2 } from 'lucide-react';
+import { useSession } from 'next-auth/react';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
+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 { ResendDocumentActionItem } from '../_action-items/resend-document';
+import { DeleteDocumentDialog } from '../delete-document-dialog';
+import { DuplicateDocumentDialog } from '../duplicate-document-dialog';
+
+export type DocumentPageViewDropdownProps = {
+  document: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+  team?: Pick<Team, 'id' | 'url'>;
+};
+
+export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
+  const { data: session } = useSession();
+  const { toast } = useToast();
+
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+
+  if (!session) {
+    return null;
+  }
+
+  const recipient = document.Recipient.find((recipient) => recipient.email === session.user.email);
+
+  const isOwner = document.User.id === session.user.id;
+  const isDraft = document.status === DocumentStatus.DRAFT;
+  const isComplete = document.status === DocumentStatus.COMPLETED;
+  const isDocumentDeletable = isOwner;
+  const isCurrentTeamDocument = team && document.team?.url === team.url;
+
+  const documentsPath = formatDocumentsPath(team?.url);
+
+  const onDownloadClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query({
+        id: document.id,
+        teamId: team?.id,
+      });
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: document.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const nonSignedRecipients = document.Recipient.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>Action</DropdownMenuLabel>
+
+        {(isOwner || isCurrentTeamDocument) && !isComplete && (
+          <DropdownMenuItem asChild>
+            <Link href={`${documentsPath}/${document.id}/edit`}>
+              <Edit className="mr-2 h-4 w-4" />
+              Edit
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        {isComplete && (
+          <DropdownMenuItem onClick={onDownloadClick}>
+            <Download className="mr-2 h-4 w-4" />
+            Download
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
+          <Copy className="mr-2 h-4 w-4" />
+          Duplicate
+        </DropdownMenuItem>
+
+        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+
+        <DropdownMenuLabel>Share</DropdownMenuLabel>
+
+        <ResendDocumentActionItem
+          document={document}
+          recipients={nonSignedRecipients}
+          team={team}
+        />
+
+        <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" />}
+                Share Signing Card
+              </div>
+            </DropdownMenuItem>
+          )}
+        />
+      </DropdownMenuContent>
+
+      {isDocumentDeletable && (
+        <DeleteDocumentDialog
+          id={document.id}
+          status={document.status}
+          documentTitle={document.title}
+          open={isDeleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+        />
+      )}
+      {isDuplicateDialogOpen && (
+        <DuplicateDocumentDialog
+          id={document.id}
+          open={isDuplicateDialogOpen}
+          onOpenChange={setDuplicateDialogOpen}
+          team={team}
+        />
+      )}
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { DateTime } from 'luxon';
+
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useLocale } from '@documenso/lib/client-only/providers/locale';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+
+export type DocumentPageViewInformationProps = {
+  userId: number;
+  document: Document & {
+    User: Pick<User, 'id' | 'name' | 'email'>;
+    Recipient: Recipient[];
+  };
+};
+
+export const DocumentPageViewInformation = ({
+  document,
+  userId,
+}: DocumentPageViewInformationProps) => {
+  const isMounted = useIsMounted();
+  const { locale } = useLocale();
+
+  const documentInformation = useMemo(() => {
+    let createdValue = DateTime.fromJSDate(document.createdAt).toFormat('MMMM d, yyyy');
+    let lastModifiedValue = DateTime.fromJSDate(document.updatedAt).toRelative();
+
+    if (!isMounted) {
+      createdValue = DateTime.fromJSDate(document.createdAt)
+        .setLocale(locale)
+        .toFormat('MMMM d, yyyy');
+
+      lastModifiedValue = DateTime.fromJSDate(document.updatedAt).setLocale(locale).toRelative();
+    }
+
+    return [
+      {
+        description: 'Uploaded by',
+        value: userId === document.userId ? 'You' : document.User.name ?? document.User.email,
+      },
+      {
+        description: 'Created',
+        value: createdValue,
+      },
+      {
+        description: 'Last modified',
+        value: lastModifiedValue,
+      },
+    ];
+  }, [isMounted, document, locale, 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">Information</h1>
+
+      <ul className="divide-y border-t">
+        {documentInformation.map((item) => (
+          <li
+            key={item.description}
+            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/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { 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 {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+      filterForRecentActivity: true,
+      orderBy: {
+        column: 'createdAt',
+        direction: 'asc',
+      },
+    },
+    {
+      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">Recent activity</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">Unable to load document history</p>
+          <button
+            onClick={async () => refetch()}
+            className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+          >
+            Click here to retry
+          </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="w-px bg-gray-200" />
+                </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 ? 'Loading...' : 'Load older activity'}
+                </button>
+              </li>
+            )}
+
+            {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_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 py-0.5 text-xs leading-5">
+                  <span className="text-foreground font-medium">
+                    {formatDocumentAuditLogAction(auditLog, userId).prefix}
+                  </span>{' '}
+                  {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/web/src/app/(dashboard)/documents/[id]/document-page-view-recipients.tsx

@@ -0,0 +1,115 @@
+import Link from 'next/link';
+
+import { CheckIcon, Clock, MailIcon, MailOpenIcon, PenIcon, PlusIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import type { Document, Recipient } from '@documenso/prisma/client';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+
+export type DocumentPageViewRecipientsProps = {
+  document: Document & {
+    Recipient: Recipient[];
+  };
+  documentRootPath: string;
+};
+
+export const DocumentPageViewRecipients = ({
+  document,
+  documentRootPath,
+}: DocumentPageViewRecipientsProps) => {
+  const recipients = document.Recipient;
+
+  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">Recipients</h1>
+
+        {document.status !== DocumentStatus.COMPLETED && (
+          <Link
+            href={`${documentRootPath}/${document.id}/edit?step=signers`}
+            title="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">No recipients</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>
+              }
+            />
+
+            {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" />
+                        Approved
+                      </>
+                    ))
+                    .with(RecipientRole.CC, () =>
+                      document.status === DocumentStatus.COMPLETED ? (
+                        <>
+                          <MailIcon className="mr-1 h-3 w-3" />
+                          Sent
+                        </>
+                      ) : (
+                        <>
+                          <CheckIcon className="mr-1 h-3 w-3" />
+                          Ready
+                        </>
+                      ),
+                    )
+
+                    .with(RecipientRole.SIGNER, () => (
+                      <>
+                        <SignatureIcon className="mr-1 h-3 w-3" />
+                        Signed
+                      </>
+                    ))
+                    .with(RecipientRole.VIEWER, () => (
+                      <>
+                        <MailOpenIcon className="mr-1 h-3 w-3" />
+                        Viewed
+                      </>
+                    ))
+                    .exhaustive()}
+                </Badge>
+              )}
+
+            {document.status !== DocumentStatus.DRAFT &&
+              recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                <Badge variant="secondary">
+                  <Clock className="mr-1 h-3 w-3" />
+                  Pending
+                </Badge>
+              )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};

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

@@ -1,22 +1,33 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft, Users2 } from 'lucide-react';
+import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
+import { match } from 'ts-pattern';
 
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentStatus } from '@documenso/prisma/client';
 import type { Team } from '@documenso/prisma/client';
-import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
-import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentStatus } from '~/components/formatter/document-status';
+import { DocumentHistorySheet } from '~/components/document/document-history-sheet';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/formatter/document-status';
+
+import { DocumentPageViewButton } from './document-page-view-button';
+import { DocumentPageViewDropdown } from './document-page-view-dropdown';
+import { DocumentPageViewInformation } from './document-page-view-information';
+import { DocumentPageViewRecentActivity } from './document-page-view-recent-activity';
+import { DocumentPageViewRecipients } from './document-page-view-recipients';
 
 export type DocumentPageViewProps = {
   params: {
@@ -25,7 +36,7 @@ export type DocumentPageViewProps = {
   team?: Team;
 };
 
-export default async function DocumentPageView({ params, team }: DocumentPageViewProps) {
+export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
   const { id } = params;
 
   const documentId = Number(id);
@@ -67,65 +78,120 @@ export default async function DocumentPageView({ params, team }: DocumentPageVie
     documentMeta.password = securePassword;
   }
 
-  const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-    getFieldsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-  ]);
+  const recipients = await getRecipientsForDocument({
+    documentId,
+    userId: user.id,
+  });
+
+  const documentWithRecipients = {
+    ...document,
+    Recipient: recipients,
+  };
 
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+      <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Documents
       </Link>
 
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-        {document.title}
-      </h1>
+      <div className="flex flex-row justify-between">
+        <div>
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+            {document.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
 
-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
+            {recipients.length > 0 && (
+              <div className="text-muted-foreground flex items-center">
+                <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
-              <span>{recipients.length} Recipient(s)</span>
-            </StackAvatarsWithTooltip>
+                <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+                  <span>{recipients.length} Recipient(s)</span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
           </div>
-        )}
+        </div>
+
+        <div className="self-end">
+          <DocumentHistorySheet documentId={document.id} userId={user.id}>
+            <Button variant="outline">
+              <Clock9 className="mr-1.5 h-4 w-4" />
+              Document history
+            </Button>
+          </DocumentHistorySheet>
+        </div>
       </div>
 
-      {document.status !== InternalDocumentStatus.COMPLETED && (
-        <EditDocumentForm
-          className="mt-8"
-          document={document}
-          user={user}
-          documentMeta={documentMeta}
-          recipients={recipients}
-          fields={fields}
-          documentData={documentData}
-          documentRootPath={documentRootPath}
-        />
-      )}
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <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 document={document} key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>
 
-      {document.status === InternalDocumentStatus.COMPLETED && (
-        <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer
-            document={document}
-            key={documentData.id}
-            documentMeta={documentMeta}
-            documentData={documentData}
-          />
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <div className="space-y-6">
+            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  Document {FRIENDLY_STATUS_MAP[document.status].label.toLowerCase()}
+                </h3>
+
+                <DocumentPageViewDropdown document={documentWithRecipients} team={team} />
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm ">
+                {match(document.status)
+                  .with(
+                    DocumentStatus.COMPLETED,
+                    () => 'This document has been signed by all recipients',
+                  )
+                  .with(
+                    DocumentStatus.DRAFT,
+                    () => 'This document is currently a draft and has not been sent',
+                  )
+                  .with(DocumentStatus.PENDING, () => {
+                    const pendingRecipients = recipients.filter(
+                      (recipient) => recipient.signingStatus === 'NOT_SIGNED',
+                    );
+
+                    return `Waiting on ${pendingRecipients.length} recipient${
+                      pendingRecipients.length > 1 ? 's' : ''
+                    }`;
+                  })
+                  .exhaustive()}
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <DocumentPageViewButton document={documentWithRecipients} team={team} />
+              </div>
+            </section>
+
+            {/* Document information section. */}
+            <DocumentPageViewInformation document={documentWithRecipients} userId={user.id} />
+
+            {/* Recipients section. */}
+            <DocumentPageViewRecipients
+              document={documentWithRecipients}
+              documentRootPath={documentRootPath}
+            />
+
+            {/* Recent activity section. */}
+            <DocumentPageViewRecentActivity documentId={document.id} userId={user.id} />
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
-}
+};

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

@@ -2,10 +2,16 @@
 
 import { useState } from 'react';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
-import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
-import { DocumentStatus } from '@documenso/prisma/client';
+import {
+  type DocumentData,
+  type DocumentMeta,
+  DocumentStatus,
+  type Field,
+  type Recipient,
+  type User,
+} from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -49,12 +55,9 @@ export const EditDocumentForm = ({
   documentRootPath,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
-  const router = useRouter();
 
-  // controlled stepper state
-  const [step, setStep] = useState<EditDocumentStep>(
-    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
-  );
+  const router = useRouter();
+  const searchParams = useSearchParams();
 
   const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
@@ -86,6 +89,24 @@ export const EditDocumentForm = ({
     },
   };
 
+  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 =
+      document.status === DocumentStatus.DRAFT ? 'title' : 'signers';
+
+    if (
+      searchParamStep &&
+      documentFlow[searchParamStep] !== undefined &&
+      !(recipients.length === 0 && (searchParamStep === 'subject' || searchParamStep === 'fields'))
+    ) {
+      initialStep = searchParamStep;
+    }
+
+    return initialStep;
+  });
+
   const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
     try {
       // Custom invocation server action
@@ -151,7 +172,7 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, timezone, dateFormat } = data.meta;
+    const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
 
     try {
       await sendDocument({
@@ -159,8 +180,9 @@ export const EditDocumentForm = ({
         meta: {
           subject,
           message,
-          timezone,
           dateFormat,
+          timezone,
+          redirectUrl,
         },
       });
 

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

@@ -0,0 +1,121 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft, Users2 } from 'lucide-react';
+
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+
+import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+export type DocumentEditPageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export const DocumentEditPageView = async ({ params, team }: DocumentEditPageViewProps) => {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect(documentRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const document = await getDocumentById({
+    id: documentId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!document || !document.documentData) {
+    redirect(documentRootPath);
+  }
+
+  if (document.status === InternalDocumentStatus.COMPLETED) {
+    redirect(`${documentRootPath}/${documentId}`);
+  }
+
+  const { documentData, documentMeta } = document;
+
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
+
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+        {document.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
+
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+              <span>{recipients.length} Recipient(s)</span>
+            </StackAvatarsWithTooltip>
+          </div>
+        )}
+      </div>
+
+      <EditDocumentForm
+        className="mt-8"
+        document={document}
+        user={user}
+        documentMeta={documentMeta}
+        recipients={recipients}
+        fields={fields}
+        documentData={documentData}
+        documentRootPath={documentRootPath}
+      />
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/edit/page.tsx

@@ -0,0 +1,11 @@
+import { DocumentEditPageView } from './document-edit-page-view';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default function DocumentEditPage({ params }: DocumentPageProps) {
+  return <DocumentEditPageView params={params} />;
+}

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

@@ -1,4 +1,4 @@
-import DocumentPageView from './document-page-view';
+import { DocumentPageView } from './document-page-view';
 
 export type DocumentPageProps = {
   params: {

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -119,7 +119,7 @@ export const ResendDocumentActionItem = ({
 
         <DialogContent className="sm:max-w-sm" hideClose>
           <DialogHeader>
-            <DialogTitle>
+            <DialogTitle asChild>
               <h1 className="text-center text-xl">Who do you want to remind?</h1>
             </DialogTitle>
           </DialogHeader>

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

@@ -94,7 +94,7 @@ export const DataTableActionButton = ({ row, team }: DataTableActionButtonProps)
       isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
       () => (
         <Button className="w-32" asChild>
-          <Link href={`${documentsPath}/${row.id}`}>
+          <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="-ml-1 mr-2 h-4 w-4" />
             Edit
           </Link>

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

@@ -114,7 +114,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        {recipient?.role !== RecipientRole.CC && (
+        {recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
             <Link href={`/sign/${recipient?.token}`}>
               {recipient?.role === RecipientRole.VIEWER && (
@@ -142,7 +142,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         )}
 
         <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
-          <Link href={`${documentsPath}/${row.id}`}>
+          <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
           </Link>

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

@@ -5,16 +5,19 @@ import Link from 'next/link';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { Document, Recipient, User } from '@documenso/prisma/client';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import type { Document, Recipient, Team, User } from '@documenso/prisma/client';
 
 export type DataTableTitleProps = {
   row: Document & {
     User: Pick<User, 'id' | 'name' | 'email'>;
+    team: Pick<Team, 'url'> | null;
     Recipient: Recipient[];
   };
+  teamUrl?: string;
 };
 
-export const DataTableTitle = ({ row }: DataTableTitleProps) => {
+export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   const { data: session } = useSession();
 
   if (!session) {
@@ -25,14 +28,18 @@ export const DataTableTitle = ({ row }: DataTableTitleProps) => {
 
   const isOwner = row.User.id === session.user.id;
   const isRecipient = !!recipient;
+  const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
+
+  const documentsPath = formatDocumentsPath(isCurrentTeamDocument ? teamUrl : undefined);
 
   return match({
     isOwner,
     isRecipient,
+    isCurrentTeamDocument,
   })
-    .with({ isOwner: true }, () => (
+    .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
       <Link
-        href={`/documents/${row.id}`}
+        href={`${documentsPath}/${row.id}`}
         title={row.title}
         className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
       >

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

@@ -66,7 +66,7 @@ export const DocumentsDataTable = ({
           },
           {
             header: 'Title',
-            cell: ({ row }) => <DataTableTitle row={row.original} />,
+            cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
           },
           {
             id: 'sender',

apps/web/src/app/(dashboard)/documents/documents-page-view.tsx

@@ -33,10 +33,7 @@ export type DocumentsPageViewProps = {
   team?: Team & { teamEmail?: TeamEmail | null };
 };
 
-export default async function DocumentsPageView({
-  searchParams = {},
-  team,
-}: DocumentsPageViewProps) {
+export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPageViewProps) => {
   const { user } = await getRequiredServerComponentSession();
 
   const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
@@ -155,4 +152,4 @@ export default async function DocumentsPageView({
       </div>
     </div>
   );
-}
+};

apps/web/src/app/(dashboard)/documents/duplicate-document-dialog.tsx

@@ -47,7 +47,7 @@ export const DuplicateDocumentDialog = ({
   const { mutateAsync: duplicateDocument, isLoading: isDuplicateLoading } =
     trpcReact.document.duplicateDocument.useMutation({
       onSuccess: (newId) => {
-        router.push(`${documentsPath}/${newId}`);
+        router.push(`${documentsPath}/${newId}/edit`);
 
         toast({
           title: 'Document Duplicated',

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 
 import type { DocumentsPageViewProps } from './documents-page-view';
-import DocumentsPageView from './documents-page-view';
+import { DocumentsPageView } from './documents-page-view';
 
 export type DocumentsPageProps = {
   searchParams?: DocumentsPageViewProps['searchParams'];

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -83,7 +83,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
         timestamp: new Date().toISOString(),
       });
 
-      router.push(`${formatDocumentsPath(team?.url)}/${id}`);
+      router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
     } catch (error) {
       console.error(error);
 

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -28,6 +28,7 @@ export type EditTemplateFormProps = {
   recipients: Recipient[];
   fields: Field[];
   documentData: DocumentData;
+  templateRootPath: string;
 };
 
 type EditTemplateStep = 'signers' | 'fields';
@@ -40,6 +41,7 @@ export const EditTemplateForm = ({
   fields,
   user: _user,
   documentData,
+  templateRootPath,
 }: EditTemplateFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
@@ -98,7 +100,7 @@ export const EditTemplateForm = ({
         duration: 5000,
       });
 
-      router.push('/templates');
+      router.push(templateRootPath);
     } catch (err) {
       toast({
         title: 'Error',

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

@@ -1,81 +1,10 @@
 import React from 'react';
 
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
+import type { TemplatePageViewProps } from './template-page-view';
+import { TemplatePageView } from './template-page-view';
 
-import { ChevronLeft } from 'lucide-react';
+type TemplatePageProps = Pick<TemplatePageViewProps, 'params'>;
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
-import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-
-import { TemplateType } from '~/components/formatter/template-type';
-
-import { EditTemplateForm } from './edit-template';
-
-export type TemplatePageProps = {
-  params: {
-    id: string;
-  };
-};
-
-export default async function TemplatePage({ params }: TemplatePageProps) {
-  const { id } = params;
-
-  const templateId = Number(id);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    redirect('/documents');
-  }
-
-  const { user } = await getRequiredServerComponentSession();
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: user.id,
-  }).catch(() => null);
-
-  if (!template || !template.templateDocumentData) {
-    redirect('/documents');
-  }
-
-  const { templateDocumentData } = template;
-
-  const [templateRecipients, templateFields] = await Promise.all([
-    getRecipientsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-    getFieldsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-  ]);
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Templates
-      </Link>
-
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
-        {template.title}
-      </h1>
-
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
-      </div>
-
-      <EditTemplateForm
-        className="mt-8"
-        template={template}
-        user={user}
-        recipients={templateRecipients}
-        fields={templateFields}
-        documentData={templateDocumentData}
-      />
-    </div>
-  );
+export default function TemplatePage({ params }: TemplatePageProps) {
+  return <TemplatePageView params={params} />;
 }

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
+import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+
+import { TemplateType } from '~/components/formatter/template-type';
+
+import { EditTemplateForm } from './edit-template';
+
+export type TemplatePageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export const TemplatePageView = async ({ params, team }: TemplatePageViewProps) => {
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    redirect(templateRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    redirect(templateRootPath);
+  }
+
+  const { templateDocumentData } = template;
+
+  const [templateRecipients, templateFields] = await Promise.all([
+    getRecipientsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+    getFieldsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Templates
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+        {template.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+      </div>
+
+      <EditTemplateForm
+        className="mt-8"
+        template={template}
+        user={user}
+        recipients={templateRecipients}
+        fields={templateFields}
+        documentData={templateDocumentData}
+        templateRootPath={templateRootPath}
+      />
+    </div>
+  );
+};

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

@@ -21,9 +21,15 @@ import { DuplicateTemplateDialog } from './duplicate-template-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Template;
+  templateRootPath: string;
+  teamId?: number;
 };
 
-export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({
+  row,
+  templateRootPath,
+  teamId,
+}: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -34,6 +40,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   }
 
   const isOwner = row.userId === session.user.id;
+  const isTeamTemplate = row.teamId === teamId;
 
   return (
     <DropdownMenu>
@@ -44,20 +51,25 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled={!isOwner} asChild>
-          <Link href={`/templates/${row.id}`}>
+        <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
+          <Link href={`${templateRootPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
           </Link>
         </DropdownMenuItem>
 
-        {/* <DropdownMenuItem disabled={!isOwner} onClick={async () => onDuplicateButtonClick(row.id)}> */}
-        <DropdownMenuItem disabled={!isOwner} onClick={() => setDuplicateDialogOpen(true)}>
+        <DropdownMenuItem
+          disabled={!isOwner && !isTeamTemplate}
+          onClick={() => setDuplicateDialogOpen(true)}
+        >
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled={!isOwner} onClick={() => setDeleteDialogOpen(true)}>
+        <DropdownMenuItem
+          disabled={!isOwner && !isTeamTemplate}
+          onClick={() => setDeleteDialogOpen(true)}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -65,6 +77,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
       <DuplicateTemplateDialog
         id={row.id}
+        teamId={teamId}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
       />

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

@@ -28,6 +28,9 @@ type TemplatesDataTableProps = {
   perPage: number;
   page: number;
   totalPages: number;
+  documentRootPath: string;
+  templateRootPath: string;
+  teamId?: number;
 };
 
 export const TemplatesDataTable = ({
@@ -35,6 +38,9 @@ export const TemplatesDataTable = ({
   perPage,
   page,
   totalPages,
+  documentRootPath,
+  templateRootPath,
+  teamId,
 }: TemplatesDataTableProps) => {
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
@@ -70,7 +76,7 @@ export const TemplatesDataTable = ({
         duration: 5000,
       });
 
-      router.push(`/documents/${id}`);
+      router.push(`${documentRootPath}/${id}/edit`);
     } catch (err) {
       toast({
         title: 'Error',
@@ -131,7 +137,12 @@ export const TemplatesDataTable = ({
                     {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
                     Use Template
                   </Button>
-                  <DataTableActionDropdown row={row.original} />
+
+                  <DataTableActionDropdown
+                    row={row.original}
+                    teamId={teamId}
+                    templateRootPath={templateRootPath}
+                  />
                 </div>
               );
             },

apps/web/src/app/(dashboard)/templates/delete-template-dialog.tsx

@@ -35,20 +35,15 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
 
       onOpenChange(false);
     },
-  });
-
-  const onDeleteTemplate = async () => {
-    try {
-      await deleteTemplate({ id });
-    } catch {
+    onError: () => {
       toast({
         title: 'Something went wrong',
         description: 'This template could not be deleted at this time. Please try again.',
         variant: 'destructive',
         duration: 7500,
       });
-    }
-  };
+    },
+  });
 
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
@@ -63,20 +58,18 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
         </DialogHeader>
 
         <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={isLoading}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
 
-            <Button type="button" loading={isLoading} onClick={onDeleteTemplate} className="flex-1">
-              Delete
-            </Button>
-          </div>
+          <Button type="button" loading={isLoading} onClick={async () => deleteTemplate({ id })}>
+            Delete
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/web/src/app/(dashboard)/templates/duplicate-template-dialog.tsx

@@ -14,12 +14,14 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DuplicateTemplateDialogProps = {
   id: number;
+  teamId?: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DuplicateTemplateDialog = ({
   id,
+  teamId,
   open,
   onOpenChange,
 }: DuplicateTemplateDialogProps) => {
@@ -40,22 +42,15 @@ export const DuplicateTemplateDialog = ({
 
         onOpenChange(false);
       },
+      onError: () => {
+        toast({
+          title: 'Error',
+          description: 'An error occurred while duplicating template.',
+          variant: 'destructive',
+        });
+      },
     });
 
-  const onDuplicate = async () => {
-    try {
-      await duplicateTemplate({
-        templateId: id,
-      });
-    } catch (err) {
-      toast({
-        title: 'Error',
-        description: 'An error occurred while duplicating template.',
-        variant: 'destructive',
-      });
-    }
-  };
-
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
@@ -66,20 +61,27 @@ export const DuplicateTemplateDialog = ({
         </DialogHeader>
 
         <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button
+            type="button"
+            disabled={isLoading}
+            variant="secondary"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
 
-            <Button type="button" loading={isLoading} onClick={onDuplicate} className="flex-1">
-              Duplicate
-            </Button>
-          </div>
+          <Button
+            type="button"
+            loading={isLoading}
+            onClick={async () =>
+              duplicateTemplate({
+                templateId: id,
+                teamId,
+              })
+            }
+          >
+            Duplicate
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -43,8 +43,14 @@ const ZCreateTemplateFormSchema = z.object({
 
 type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
 
-export const NewTemplateDialog = () => {
+type NewTemplateDialogProps = {
+  teamId?: number;
+  templateRootPath: string;
+};
+
+export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialogProps) => {
   const router = useRouter();
+
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -99,6 +105,7 @@ export const NewTemplateDialog = () => {
       });
 
       const { id } = await createTemplate({
+        teamId,
         title: values.name ? values.name : file.name,
         templateDocumentDataId,
       });
@@ -112,7 +119,7 @@ export const NewTemplateDialog = () => {
 
       setShowNewTemplateDialog(false);
 
-      void router.push(`/templates/${id}`);
+      router.push(`${templateRootPath}/${id}`);
     } catch {
       toast({
         title: 'Something went wrong',

apps/web/src/app/(dashboard)/templates/page.tsx

@@ -2,57 +2,17 @@ import React from 'react';
 
 import type { Metadata } from 'next';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getTemplates } from '@documenso/lib/server-only/template/get-templates';
-
-import { TemplatesDataTable } from './data-table-templates';
-import { EmptyTemplateState } from './empty-state';
-import { NewTemplateDialog } from './new-template-dialog';
+import { TemplatesPageView } from './templates-page-view';
+import type { TemplatesPageViewProps } from './templates-page-view';
 
 type TemplatesPageProps = {
-  searchParams?: {
-    page?: number;
-    perPage?: number;
-  };
+  searchParams?: TemplatesPageViewProps['searchParams'];
 };
 
 export const metadata: Metadata = {
   title: 'Templates',
 };
 
-export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
-  const { user } = await getRequiredServerComponentSession();
-  const page = Number(searchParams.page) || 1;
-  const perPage = Number(searchParams.perPage) || 10;
-
-  const { templates, totalPages } = await getTemplates({
-    userId: user.id,
-    page: page,
-    perPage: perPage,
-  });
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex items-baseline justify-between">
-        <h1 className="mb-5 mt-2 truncate text-2xl font-semibold md:text-3xl">Templates</h1>
-
-        <div>
-          <NewTemplateDialog />
-        </div>
-      </div>
-
-      <div className="relative">
-        {templates.length > 0 ? (
-          <TemplatesDataTable
-            templates={templates}
-            page={page}
-            perPage={perPage}
-            totalPages={totalPages}
-          />
-        ) : (
-          <EmptyTemplateState />
-        )}
-      </div>
-    </div>
-  );
+export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  return <TemplatesPageView searchParams={searchParams} />;
 }

apps/web/src/app/(dashboard)/templates/templates-page-view.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+import { TemplatesDataTable } from './data-table-templates';
+import { EmptyTemplateState } from './empty-state';
+import { NewTemplateDialog } from './new-template-dialog';
+
+export type TemplatesPageViewProps = {
+  searchParams?: {
+    page?: number;
+    perPage?: number;
+  };
+  team?: Team;
+};
+
+export const TemplatesPageView = async ({ searchParams = {}, team }: TemplatesPageViewProps) => {
+  const { user } = await getRequiredServerComponentSession();
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  const { templates, totalPages } = await findTemplates({
+    userId: user.id,
+    teamId: team?.id,
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">Templates</h1>
+        </div>
+
+        <div>
+          <NewTemplateDialog templateRootPath={templateRootPath} teamId={team?.id} />
+        </div>
+      </div>
+
+      <div className="relative mt-5">
+        {templates.length > 0 ? (
+          <TemplatesDataTable
+            templates={templates}
+            page={page}
+            perPage={perPage}
+            totalPages={totalPages}
+            documentRootPath={documentRootPath}
+            templateRootPath={templateRootPath}
+            teamId={team?.id}
+          />
+        ) : (
+          <EmptyTemplateState />
+        )}
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -26,9 +26,10 @@ export type SigningFormProps = {
   document: Document;
   recipient: Recipient;
   fields: Field[];
+  redirectUrl?: string | null;
 };
 
-export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
+export const SigningForm = ({ document, recipient, fields, redirectUrl }: SigningFormProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
   const { data: session } = useSession();
@@ -74,7 +75,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
       timestamp: new Date().toISOString(),
     });
 
-    router.push(`/sign/${recipient.token}/complete`);
+    redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${recipient.token}/complete`);
   };
 
   return (

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -118,7 +118,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
             <span className="text-muted-foreground">({recipient.email})</span>
           </DialogTitle>
 
-          <div className="py-4">
+          <div>
             <Label htmlFor="signature">Full Name</Label>
 
             <Input

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -1,3 +1,4 @@
+import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
@@ -8,12 +9,12 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getDocumentMetaByDocumentId } from '@documenso/lib/server-only/document/get-document-meta-by-document-id';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
+import { extractNextHeaderRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { DocumentStatus, FieldType, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -40,24 +41,26 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const requestHeaders = Object.fromEntries(headers().entries());
+
+  const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
+
   const [document, fields, recipient] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
-    viewedDocument({ token }).catch(() => null),
+    viewedDocument({ token, requestMetadata }).catch(() => null),
   ]);
 
-  const documentMeta = await getDocumentMetaByDocumentId({ id: document!.id }).catch(() => null);
-
   if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
   const truncatedTitle = truncateTitle(document.title);
 
-  const { documentData } = document;
+  const { documentData, documentMeta } = document;
 
   const { user } = await getServerComponentSession();
 
@@ -65,7 +68,9 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED
   ) {
-    redirect(`/sign/${token}/complete`);
+    documentMeta?.redirectUrl
+      ? redirect(documentMeta.redirectUrl)
+      : redirect(`/sign/${token}/complete`);
   }
 
   if (documentMeta?.password) {
@@ -133,7 +138,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
           </Card>
 
           <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <SigningForm document={document} recipient={recipient} fields={fields} />
+            <SigningForm
+              document={document}
+              recipient={recipient}
+              fields={fields}
+              redirectUrl={documentMeta?.redirectUrl}
+            />
           </div>
         </div>
 

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/edit/page.tsx

@@ -0,0 +1,21 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import { DocumentEditPageView } from '~/app/(dashboard)/documents/[id]/edit/document-edit-page-view';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsDocumentEditPage({ params }: DocumentPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <DocumentEditPageView params={params} team={team} />;
+}

apps/web/src/app/(teams)/t/[teamUrl]/documents/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 
-import DocumentPageComponent from '~/app/(dashboard)/documents/[id]/document-page-view';
+import { DocumentPageView } from '~/app/(dashboard)/documents/[id]/document-page-view';
 
 export type DocumentPageProps = {
   params: {
@@ -16,5 +16,5 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
   const { user } = await getRequiredServerComponentSession();
   const team = await getTeamByUrl({ userId: user.id, teamUrl });
 
-  return <DocumentPageComponent params={params} team={team} />;
+  return <DocumentPageView params={params} team={team} />;
 }

apps/web/src/app/(teams)/t/[teamUrl]/documents/page.tsx

@@ -2,7 +2,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 
 import type { DocumentsPageViewProps } from '~/app/(dashboard)/documents/documents-page-view';
-import DocumentsPageView from '~/app/(dashboard)/documents/documents-page-view';
+import { DocumentsPageView } from '~/app/(dashboard)/documents/documents-page-view';
 
 export type TeamsDocumentPageProps = {
   params: {

apps/web/src/app/(teams)/t/[teamUrl]/templates/[id]/page.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import type { TemplatePageViewProps } from '~/app/(dashboard)/templates/[id]/template-page-view';
+import { TemplatePageView } from '~/app/(dashboard)/templates/[id]/template-page-view';
+
+type TeamTemplatePageProps = {
+  params: TemplatePageViewProps['params'] & {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamTemplatePage({ params }: TeamTemplatePageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <TemplatePageView params={params} team={team} />;
+}

apps/web/src/app/(teams)/t/[teamUrl]/templates/page.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import type { TemplatesPageViewProps } from '~/app/(dashboard)/templates/templates-page-view';
+import { TemplatesPageView } from '~/app/(dashboard)/templates/templates-page-view';
+
+type TeamTemplatesPageProps = {
+  searchParams?: TemplatesPageViewProps['searchParams'];
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamTemplatesPage({
+  searchParams = {},
+  params,
+}: TeamTemplatesPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <TemplatesPageView searchParams={searchParams} team={team} />;
+}

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -52,24 +52,22 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
       {...props}
     >
       <div className="flex items-baseline gap-x-6">
-        {navigationLinks
-          .filter(({ href }) => href !== '/templates' || rootHref === '') // Remove templates for team pages.
-          .map(({ href, label }) => (
-            <Link
-              key={href}
-              href={`${rootHref}${href}`}
-              className={cn(
-                'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-                {
-                  'text-foreground dark:text-muted-foreground': pathname?.startsWith(
-                    `${rootHref}${href}`,
-                  ),
-                },
-              )}
-            >
-              {label}
-            </Link>
-          ))}
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={`${rootHref}${href}`}
+            className={cn(
+              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+              {
+                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                  `${rootHref}${href}`,
+                ),
+              },
+            )}
+          >
+            {label}
+          </Link>
+        ))}
       </div>
 
       <CommandMenu open={open} onOpenChange={setOpen} />

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@@ -71,6 +71,22 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
     return TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role];
   };
 
+  /**
+   * Formats the redirect URL so we can switch between documents and templates page
+   * seemlessly between teams and personal accounts.
+   */
+  const formatRedirectUrlOnSwitch = (teamUrl?: string) => {
+    const baseUrl = teamUrl ? `/t/${teamUrl}/` : '/';
+
+    const currentPathname = (pathname ?? '/').replace(TEAM_URL_REGEX, '');
+
+    if (currentPathname === '/templates') {
+      return `${baseUrl}templates`;
+    }
+
+    return baseUrl;
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -100,7 +116,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <DropdownMenuLabel>Personal</DropdownMenuLabel>
 
             <DropdownMenuItem asChild>
-              <Link href="/">
+              <Link href={formatRedirectUrlOnSwitch()}>
                 <AvatarWithText
                   avatarFallback={formatAvatarFallback()}
                   primaryText={user.name}
@@ -152,7 +168,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
 
             {teams.map((team) => (
               <DropdownMenuItem asChild key={team.id}>
-                <Link href={`/t/${team.url}`}>
+                <Link href={formatRedirectUrlOnSwitch(team.url)}>
                   <AvatarWithText
                     avatarFallback={formatAvatarFallback(team.name)}
                     primaryText={team.name}

apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx

@@ -42,7 +42,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
       href: '/settings/profile',
       text: 'Settings',
     },
-  ].filter(({ text, href }) => text !== 'Templates' || href === '/templates'); // Filter out templates for teams.
+  ];
 
   return (
     <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>

apps/web/src/components/document/document-history-sheet-changes.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+
+import { Badge } from '@documenso/ui/primitives/badge';
+
+export type DocumentHistorySheetChangesProps = {
+  values: {
+    key: string | React.ReactNode;
+    value: string | React.ReactNode;
+  }[];
+};
+
+export const DocumentHistorySheetChanges = ({ values }: DocumentHistorySheetChangesProps) => {
+  return (
+    <Badge
+      className="text-muted-foreground mt-3 block w-full space-y-0.5 text-xs"
+      variant="neutral"
+    >
+      {values.map(({ key, value }, i) => (
+        <p key={typeof key === 'string' ? key : i}>
+          <span>{key}: </span>
+          <span className="font-normal">{value}</span>
+        </p>
+      ))}
+    </Badge>
+  );
+};

apps/web/src/components/document/document-history-sheet.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { ArrowRightIcon, Loader } from 'lucide-react';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import { DOCUMENT_AUDIT_LOG_EMAIL_FORMAT } from '@documenso/lib/constants/document-audit-logs';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogActionString } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { DocumentHistorySheetChanges } from './document-history-sheet-changes';
+
+export type DocumentHistorySheetProps = {
+  documentId: number;
+  userId: number;
+  isMenuOpen?: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+  children?: React.ReactNode;
+};
+
+export const DocumentHistorySheet = ({
+  documentId,
+  userId,
+  isMenuOpen,
+  onMenuOpenChange,
+  children,
+}: DocumentHistorySheetProps) => {
+  const [isUserDetailsVisible, setIsUserDetailsVisible] = useState(false);
+
+  const {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
+
+  const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
+
+  const extractBrowser = (userAgent?: string | null) => {
+    if (!userAgent) {
+      return 'Unknown';
+    }
+
+    const parser = new UAParser(userAgent);
+
+    parser.setUA(userAgent);
+
+    const result = parser.getResult();
+
+    return result.browser.name;
+  };
+
+  /**
+   * Applies the following formatting for a given text:
+   * - Uppercase first lower, lowercase rest
+   * - Replace _ with spaces
+   *
+   * @param text The text to format
+   * @returns The formatted text
+   */
+  const formatGenericText = (text: string) => {
+    return (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()).replaceAll('_', ' ');
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      {children && <SheetTrigger asChild>{children}</SheetTrigger>}
+
+      <SheetContent
+        sheetClass="backdrop-blur-none"
+        className="flex w-full max-w-[500px] flex-col overflow-y-auto p-0"
+      >
+        <div className="text-foreground px-6 pt-6">
+          <h1 className="text-lg font-medium">Document history</h1>
+          <button
+            className="text-muted-foreground text-sm"
+            onClick={() => setIsUserDetailsVisible(!isUserDetailsVisible)}
+          >
+            {isUserDetailsVisible ? 'Hide' : 'Show'} additional information
+          </button>
+        </div>
+
+        {isLoading && (
+          <div className="flex h-full items-center justify-center">
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          </div>
+        )}
+
+        {isLoadingError && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <p className="text-foreground/80 text-sm">Unable to load document history</p>
+            <button
+              onClick={async () => refetch()}
+              className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            >
+              Click here to retry
+            </button>
+          </div>
+        )}
+
+        {data && (
+          <ul
+            className={cn('divide-y border-t', {
+              'mb-4 border-b': !hasNextPage,
+            })}
+          >
+            {documentAuditLogs.map((auditLog) => (
+              <li className="px-4 py-2.5" key={auditLog.id}>
+                <div className="flex flex-row items-center">
+                  <Avatar className="mr-2 h-9 w-9">
+                    <AvatarFallback className="text-xs text-gray-400">
+                      {(auditLog?.email ?? auditLog?.name ?? '?').slice(0, 1).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div>
+                    <p className="text-foreground text-xs font-bold">
+                      {formatDocumentAuditLogActionString(auditLog, userId)}
+                    </p>
+                    <p className="text-foreground/50 text-xs">
+                      <LocaleDate date={auditLog.createdAt} format="d MMM, yyyy HH:MM a" />
+                    </p>
+                  </div>
+                </div>
+
+                {match(auditLog)
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT },
+                    () => null,
+                  )
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED },
+                    ({ data }) => {
+                      const values = [
+                        {
+                          key: 'Email',
+                          value: data.recipientEmail,
+                        },
+                        {
+                          key: 'Role',
+                          value: formatGenericText(data.recipientRole),
+                        },
+                      ];
+
+                      if (data.recipientName) {
+                        values.unshift({
+                          key: 'Name',
+                          value: data.recipientName,
+                        });
+                      }
+
+                      return <DocumentHistorySheetChanges values={values} />;
+                    },
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map(({ type, from, to }) => ({
+                          key: formatGenericText(type),
+                          value: (
+                            <span className="inline-flex flex-row items-center">
+                              <span>{type === 'ROLE' ? formatGenericText(from) : from}</span>
+                              <ArrowRightIcon className="h-4 w-4" />
+                              <span>{type === 'ROLE' ? formatGenericText(to) : to}</span>
+                            </span>
+                          ),
+                        }))}
+                      />
+                    );
+                  })
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Field',
+                            value: formatGenericText(data.fieldType),
+                          },
+                          {
+                            key: 'Recipient',
+                            value: formatGenericText(data.fieldRecipientEmail),
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map((change) => ({
+                          key: formatGenericText(change.type),
+                          value: change.type === 'PASSWORD' ? '*********' : change.to,
+                        }))}
+                      />
+                    );
+                  })
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Old',
+                          value: data.from,
+                        },
+                        {
+                          key: 'New',
+                          value: data.to,
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field inserted',
+                          value: formatGenericText(data.field.type),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field uninserted',
+                          value: formatGenericText(data.field),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Type',
+                          value: DOCUMENT_AUDIT_LOG_EMAIL_FORMAT[data.emailType].description,
+                        },
+                        {
+                          key: 'Sent to',
+                          value: data.recipientEmail,
+                        },
+                      ]}
+                    />
+                  ))
+                  .exhaustive()}
+
+                {isUserDetailsVisible && (
+                  <>
+                    <div className="mb-1 mt-2 flex flex-row space-x-2">
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        IP: {auditLog.ipAddress ?? 'Unknown'}
+                      </Badge>
+
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        Browser: {extractBrowser(auditLog.userAgent)}
+                      </Badge>
+                    </div>
+                  </>
+                )}
+              </li>
+            ))}
+
+            {hasNextPage && (
+              <div className="flex items-center justify-center py-4">
+                <Button
+                  variant="outline"
+                  loading={isFetchingNextPage}
+                  onClick={async () => fetchNextPage()}
+                >
+                  Show more
+                </Button>
+              </div>
+            )}
+          </ul>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/web/src/components/formatter/document-status.tsx

@@ -13,7 +13,7 @@ type FriendlyStatus = {
   color: string;
 };
 
-const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
+export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
   PENDING: {
     label: 'Pending',
     icon: Clock,

apps/web/src/components/formatter/locale-date.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import type { DateTimeFormatOptions } from 'luxon';
 import { DateTime } from 'luxon';
@@ -10,7 +10,7 @@ import { useLocale } from '@documenso/lib/client-only/providers/locale';
 
 export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
   date: string | number | Date;
-  format?: DateTimeFormatOptions;
+  format?: DateTimeFormatOptions | string;
 };
 
 /**
@@ -22,13 +22,24 @@ export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
 export const LocaleDate = ({ className, date, format, ...props }: LocaleDateProps) => {
   const { locale } = useLocale();
 
+  const formatDateTime = useCallback(
+    (date: DateTime) => {
+      if (typeof format === 'string') {
+        return date.toFormat(format);
+      }
+
+      return date.toLocaleString(format);
+    },
+    [format],
+  );
+
   const [localeDate, setLocaleDate] = useState(() =>
-    DateTime.fromJSDate(new Date(date)).setLocale(locale).toLocaleString(format),
+    formatDateTime(DateTime.fromJSDate(new Date(date)).setLocale(locale)),
   );
 
   useEffect(() => {
-    setLocaleDate(DateTime.fromJSDate(new Date(date)).toLocaleString(format));
-  }, [date, format]);
+    setLocaleDate(formatDateTime(DateTime.fromJSDate(new Date(date))));
+  }, [date, format, formatDateTime]);
 
   return (
     <span className={className} {...props}>

package-lock.json

@@ -14503,6 +14503,7 @@
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.7.tgz",
       "integrity": "sha512-rUtR77ksqex/eZRLmQ21LKVH5nAAsVicAtAYudK7JgwenEDZ0UIQ1adUGqErz7sMkWYxWTTU1aeP2Jga6WQyJw==",
+      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -19495,14 +19496,14 @@
         "@react-email/section": "0.0.10",
         "@react-email/tailwind": "0.0.9",
         "@react-email/text": "0.0.6",
-        "nodemailer": "^6.9.3",
+        "nodemailer": "^6.9.9",
         "react-email": "^1.9.5",
         "resend": "^2.0.0"
       },
       "devDependencies": {
         "@documenso/tailwind-config": "*",
         "@documenso/tsconfig": "*",
-        "@types/nodemailer": "^6.4.8",
+        "@types/nodemailer": "^6.4.14",
         "tsup": "^7.1.0"
       }
     },
@@ -19520,6 +19521,14 @@
         "node": ">=16.0.0"
       }
     },
+    "packages/email/node_modules/nodemailer": {
+      "version": "6.9.9",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.9.tgz",
+      "integrity": "sha512-dexTll8zqQoVJEZPwQAKzxxtFn0qTnjdQTchoU6Re9BUUGBJiOy3YMn/0ShTW6J5M0dfQ1NeDeRTTl4oIWgQMA==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "packages/eslint-config": {
       "name": "@documenso/eslint-config",
       "version": "0.0.0",

packages/app-tests/e2e/templates/manage-templates.spec.ts

@@ -0,0 +1,205 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { seedTeam, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedTemplate } from '@documenso/prisma/seed/templates';
+
+import { manualLogin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[TEMPLATES]: view templates', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 2',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Owner should see both team templates.
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+
+  // Only should only see their personal template.
+  await page.goto(`${WEBAPP_BASE_URL}/templates`);
+  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEMPLATES]: delete template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 2',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Owner should be able to delete their personal template.
+  await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await expect(page.getByText('Template deleted').first()).toBeVisible();
+
+  // Team member should be able to delete all templates.
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+
+  for (const template of ['Team template 1', 'Team template 2']) {
+    await page
+      .getByRole('row', { name: template })
+      .getByRole('cell', { name: 'Use Template' })
+      .getByRole('button')
+      .nth(1)
+      .click();
+
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
+    await expect(page.getByText('Template deleted').first()).toBeVisible();
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEMPLATES]: duplicate template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Duplicate personal template.
+  await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+  await page.getByRole('button', { name: 'Duplicate' }).click();
+  await expect(page.getByText('Template duplicated').first()).toBeVisible();
+  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+
+  // Duplicate team template.
+  await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+  await page.getByRole('button', { name: 'Duplicate' }).click();
+  await expect(page.getByText('Template duplicated').first()).toBeVisible();
+  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEMPLATES]: use template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Use personal template.
+  await page.getByRole('button', { name: 'Use Template' }).click();
+  await page.waitForURL(/documents/);
+  await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
+  await page.waitForURL('/documents');
+  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+
+  // Use team template.
+  await page.getByRole('button', { name: 'Use Template' }).click();
+  await page.waitForURL(/\/t\/.+\/documents/);
+  await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
+  await page.waitForURL(`/t/${team.url}/documents`);
+  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+
+  await unseedTeam(team.url);
+});

packages/email/package.json

@@ -35,14 +35,14 @@
     "@react-email/section": "0.0.10",
     "@react-email/tailwind": "0.0.9",
     "@react-email/text": "0.0.6",
-    "nodemailer": "^6.9.3",
+    "nodemailer": "^6.9.9",
     "react-email": "^1.9.5",
     "resend": "^2.0.0"
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",
     "@documenso/tsconfig": "*",
-    "@types/nodemailer": "^6.4.8",
+    "@types/nodemailer": "^6.4.14",
     "tsup": "^7.1.0"
   }
 }

packages/lib/constants/document-audit-logs.ts

@@ -0,0 +1,19 @@
+import { DOCUMENT_EMAIL_TYPE } from '../types/document-audit-logs';
+
+export const DOCUMENT_AUDIT_LOG_EMAIL_FORMAT = {
+  [DOCUMENT_EMAIL_TYPE.SIGNING_REQUEST]: {
+    description: 'Signing request',
+  },
+  [DOCUMENT_EMAIL_TYPE.VIEW_REQUEST]: {
+    description: 'Viewing request',
+  },
+  [DOCUMENT_EMAIL_TYPE.APPROVE_REQUEST]: {
+    description: 'Approval request',
+  },
+  [DOCUMENT_EMAIL_TYPE.CC]: {
+    description: 'CC',
+  },
+  [DOCUMENT_EMAIL_TYPE.DOCUMENT_COMPLETED]: {
+    description: 'Document completed',
+  },
+} satisfies Record<keyof typeof DOCUMENT_EMAIL_TYPE, unknown>;

packages/lib/constants/recipient-roles.ts

@@ -1,26 +1,34 @@
 import { RecipientRole } from '@documenso/prisma/client';
 
-export const RECIPIENT_ROLES_DESCRIPTION: {
-  [key in RecipientRole]: { actionVerb: string; progressiveVerb: string; roleName: string };
-} = {
+export const RECIPIENT_ROLES_DESCRIPTION = {
   [RecipientRole.APPROVER]: {
     actionVerb: 'Approve',
+    actioned: 'Approved',
     progressiveVerb: 'Approving',
     roleName: 'Approver',
   },
   [RecipientRole.CC]: {
     actionVerb: 'CC',
+    actioned: 'CCed',
     progressiveVerb: 'CC',
-    roleName: 'CC',
+    roleName: 'Cc',
   },
   [RecipientRole.SIGNER]: {
     actionVerb: 'Sign',
+    actioned: 'Signed',
     progressiveVerb: 'Signing',
     roleName: 'Signer',
   },
   [RecipientRole.VIEWER]: {
     actionVerb: 'View',
+    actioned: 'Viewed',
     progressiveVerb: 'Viewing',
     roleName: 'Viewer',
   },
-};
+} satisfies Record<keyof typeof RecipientRole, unknown>;
+
+export const RECIPIENT_ROLE_TO_EMAIL_TYPE = {
+  [RecipientRole.SIGNER]: 'SIGNING_REQUEST',
+  [RecipientRole.VIEWER]: 'VIEW_REQUEST',
+  [RecipientRole.APPROVER]: 'APPROVE_REQUEST',
+} as const;

packages/lib/constants/teams.ts

@@ -1,6 +1,7 @@
 import { TeamMemberRole } from '@documenso/prisma/client';
 
 export const TEAM_URL_ROOT_REGEX = new RegExp('^/t/[^/]+$');
+export const TEAM_URL_REGEX = new RegExp('^/t/[^/]+');
 
 export const TEAM_MEMBER_ROLE_MAP: Record<keyof typeof TeamMemberRole, string> = {
   ADMIN: 'Admin',

packages/lib/constants/url-regex.ts

@@ -0,0 +1,2 @@
+export const URL_REGEX =
+  /^(https?):\/\/(?:www\.)?[a-zA-Z0-9-]+\.[a-zA-Z0-9()]{2,}(?:\/[a-zA-Z0-9-._?&=/]*)?$/i;

packages/lib/server-only/document-data/create-document-data.ts

@@ -1,7 +1,7 @@
 'use server';
 
 import { prisma } from '@documenso/prisma';
-import { DocumentDataType } from '@documenso/prisma/client';
+import type { DocumentDataType } from '@documenso/prisma/client';
 
 export type CreateDocumentDataOptions = {
   type: DocumentDataType;

packages/lib/server-only/document-meta/upsert-document-meta.ts

@@ -1,5 +1,11 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import {
+  createDocumentAuditLogData,
+  diffDocumentMetaChanges,
+} from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 
 export type CreateDocumentMetaOptions = {
@@ -9,7 +15,9 @@ export type CreateDocumentMetaOptions = {
   timezone?: string;
   password?: string;
   dateFormat?: string;
+  redirectUrl?: string;
   userId: number;
+  requestMetadata: RequestMetadata;
 };
 
 export const upsertDocumentMeta = async ({
@@ -18,47 +26,85 @@ export const upsertDocumentMeta = async ({
   timezone,
   dateFormat,
   documentId,
-  userId,
   password,
+  userId,
+  redirectUrl,
+  requestMetadata,
 }: CreateDocumentMetaOptions) => {
-  await prisma.document.findFirstOrThrow({
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+    },
+  });
+
+  const { documentMeta: originalDocumentMeta } = await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
       OR: [
         {
-          userId,
+          userId: user.id,
         },
         {
           team: {
             members: {
               some: {
-                userId,
+                userId: user.id,
               },
             },
           },
         },
       ],
     },
+    include: {
+      documentMeta: true,
+    },
   });
 
-  return await prisma.documentMeta.upsert({
-    where: {
-      documentId,
-    },
-    create: {
-      subject,
-      message,
-      dateFormat,
-      timezone,
-      password,
-      documentId,
-    },
-    update: {
-      subject,
-      message,
-      dateFormat,
-      password,
-      timezone,
-    },
+  return await prisma.$transaction(async (tx) => {
+    const upsertedDocumentMeta = await tx.documentMeta.upsert({
+      where: {
+        documentId,
+      },
+      create: {
+        subject,
+        message,
+        password,
+        dateFormat,
+        timezone,
+        documentId,
+        redirectUrl,
+      },
+      update: {
+        subject,
+        message,
+        password,
+        dateFormat,
+        timezone,
+        redirectUrl,
+      },
+    });
+
+    const changes = diffDocumentMetaChanges(originalDocumentMeta ?? {}, upsertedDocumentMeta);
+
+    if (changes.length > 0) {
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED,
+          documentId,
+          user,
+          requestMetadata,
+          data: {
+            changes: diffDocumentMetaChanges(originalDocumentMeta ?? {}, upsertedDocumentMeta),
+          },
+        }),
+      });
+    }
+
+    return upsertedDocumentMeta;
   });
 };

packages/lib/server-only/document/complete-document-with-token.ts

@@ -1,5 +1,8 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
@@ -9,11 +12,13 @@ import { sendPendingEmail } from './send-pending-email';
 export type CompleteDocumentWithTokenOptions = {
   token: string;
   documentId: number;
+  requestMetadata?: RequestMetadata;
 };
 
 export const completeDocumentWithToken = async ({
   token,
   documentId,
+  requestMetadata,
 }: CompleteDocumentWithTokenOptions) => {
   'use server';
 
@@ -70,6 +75,24 @@ export const completeDocumentWithToken = async ({
     },
   });
 
+  await prisma.documentAuditLog.create({
+    data: createDocumentAuditLogData({
+      type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
+      documentId: document.id,
+      user: {
+        name: recipient.name,
+        email: recipient.email,
+      },
+      requestMetadata,
+      data: {
+        recipientEmail: recipient.email,
+        recipientName: recipient.name,
+        recipientId: recipient.id,
+        recipientRole: recipient.role,
+      },
+    }),
+  });
+
   const pendingRecipients = await prisma.recipient.count({
     where: {
       documentId: document.id,
@@ -99,6 +122,6 @@ export const completeDocumentWithToken = async ({
   });
 
   if (documents.count > 0) {
-    await sealDocument({ documentId: document.id });
+    await sealDocument({ documentId: document.id, requestMetadata });
   }
 };

packages/lib/server-only/document/create-document.ts

@@ -1,5 +1,9 @@
 'use server';
 
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 
 export type CreateDocumentOptions = {
@@ -7,6 +11,7 @@ export type CreateDocumentOptions = {
   userId: number;
   teamId?: number;
   documentDataId: string;
+  requestMetadata?: RequestMetadata;
 };
 
 export const createDocument = async ({
@@ -14,22 +19,30 @@ export const createDocument = async ({
   title,
   documentDataId,
   teamId,
+  requestMetadata,
 }: CreateDocumentOptions) => {
-  return await prisma.$transaction(async (tx) => {
-    if (teamId !== undefined) {
-      await tx.team.findFirstOrThrow({
-        where: {
-          id: teamId,
-          members: {
-            some: {
-              userId,
-            },
-          },
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      teamMembers: {
+        select: {
+          teamId: true,
         },
-      });
-    }
+      },
+    },
+  });
 
-    return await tx.document.create({
+  if (
+    teamId !== undefined &&
+    !user.teamMembers.some((teamMember) => teamMember.teamId === teamId)
+  ) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Team not found');
+  }
+
+  return await prisma.$transaction(async (tx) => {
+    const document = await tx.document.create({
       data: {
         title,
         documentDataId,
@@ -37,5 +50,19 @@ export const createDocument = async ({
         teamId,
       },
     });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+        documentId: document.id,
+        user,
+        requestMetadata,
+        data: {
+          title,
+        },
+      }),
+    });
+
+    return document;
   });
 };

packages/lib/server-only/document/delete-document.ts

@@ -9,27 +9,72 @@ import { prisma } from '@documenso/prisma';
 import { DocumentStatus } from '@documenso/prisma/client';
 
 import { FROM_ADDRESS, FROM_NAME } from '../../constants/email';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 
 export type DeleteDocumentOptions = {
   id: number;
   userId: number;
   status: DocumentStatus;
+  requestMetadata?: RequestMetadata;
 };
 
-export const deleteDocument = async ({ id, userId, status }: DeleteDocumentOptions) => {
+export const deleteDocument = async ({
+  id,
+  userId,
+  status,
+  requestMetadata,
+}: DeleteDocumentOptions) => {
+  await prisma.document.findFirstOrThrow({
+    where: {
+      id,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+  });
+
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
   // if the document is a draft, hard-delete
   if (status === DocumentStatus.DRAFT) {
-    return await prisma.document.delete({ where: { id, userId, status: DocumentStatus.DRAFT } });
+    return await prisma.$transaction(async (tx) => {
+      // Currently redundant since deleting a document will delete the audit logs.
+      // However may be useful if we disassociate audit lgos and documents if required.
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          documentId: id,
+          type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED,
+          user,
+          requestMetadata,
+          data: {
+            type: 'HARD',
+          },
+        }),
+      });
+
+      return await tx.document.delete({ where: { id, status: DocumentStatus.DRAFT } });
+    });
   }
 
   // if the document is pending, send cancellation emails to all recipients
   if (status === DocumentStatus.PENDING) {
-    const user = await prisma.user.findFirstOrThrow({
-      where: {
-        id: userId,
-      },
-    });
-
     const document = await prisma.document.findUnique({
       where: {
         id,
@@ -77,12 +122,26 @@ export const deleteDocument = async ({ id, userId, status }: DeleteDocumentOptio
   }
 
   // If the document is not a draft, only soft-delete.
-  return await prisma.document.update({
-    where: {
-      id,
-    },
-    data: {
-      deletedAt: new Date().toISOString(),
-    },
+  return await prisma.$transaction(async (tx) => {
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        documentId: id,
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED,
+        user,
+        requestMetadata,
+        data: {
+          type: 'SOFT',
+        },
+      }),
+    });
+
+    return await tx.document.update({
+      where: {
+        id,
+      },
+      data: {
+        deletedAt: new Date().toISOString(),
+      },
+    });
   });
 };

packages/lib/server-only/document/duplicate-document-by-id.ts

@@ -39,6 +39,7 @@ export const duplicateDocumentById = async ({
           dateFormat: true,
           password: true,
           timezone: true,
+          redirectUrl: true,
         },
       },
     },

packages/lib/server-only/document/find-document-audit-logs.ts

@@ -0,0 +1,115 @@
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { prisma } from '@documenso/prisma';
+import type { DocumentAuditLog } from '@documenso/prisma/client';
+import type { Prisma } from '@documenso/prisma/client';
+
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import { parseDocumentAuditLogData } from '../../utils/document-audit-logs';
+
+export interface FindDocumentAuditLogsOptions {
+  userId: number;
+  documentId: number;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof DocumentAuditLog;
+    direction: 'asc' | 'desc';
+  };
+  cursor?: string;
+  filterForRecentActivity?: boolean;
+}
+
+export const findDocumentAuditLogs = async ({
+  userId,
+  documentId,
+  page = 1,
+  perPage = 30,
+  orderBy,
+  cursor,
+  filterForRecentActivity,
+}: FindDocumentAuditLogsOptions) => {
+  const orderByColumn = orderBy?.column ?? 'createdAt';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  await prisma.document.findFirstOrThrow({
+    where: {
+      id: documentId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+  });
+
+  const whereClause: Prisma.DocumentAuditLogWhereInput = {
+    documentId,
+  };
+
+  // Filter events down to what we consider recent activity.
+  if (filterForRecentActivity) {
+    whereClause.OR = [
+      {
+        type: {
+          in: [
+            DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED,
+            DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+            DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED,
+            DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
+            DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
+            DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT,
+          ],
+        },
+      },
+      {
+        type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+        data: {
+          path: ['isResending'],
+          equals: true,
+        },
+      },
+    ];
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.documentAuditLog.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage + 1,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      cursor: cursor ? { id: cursor } : undefined,
+    }),
+    prisma.documentAuditLog.count({
+      where: whereClause,
+    }),
+  ]);
+
+  let nextCursor: string | undefined = undefined;
+
+  const parsedData = data.map((auditLog) => parseDocumentAuditLogData(auditLog));
+
+  if (parsedData.length > perPage) {
+    const nextItem = parsedData.pop();
+    nextCursor = nextItem!.id;
+  }
+
+  return {
+    data: parsedData,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+    nextCursor,
+  } satisfies FindResultSet<typeof parsedData> & { nextCursor?: string };
+};

packages/lib/server-only/document/get-document-by-id.ts

@@ -21,6 +21,19 @@ export const getDocumentById = async ({ id, userId, teamId }: GetDocumentByIdOpt
     include: {
       documentData: true,
       documentMeta: true,
+      User: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+        },
+      },
+      team: {
+        select: {
+          id: true,
+          url: true,
+        },
+      },
     },
   });
 };

packages/lib/server-only/document/get-document-by-token.ts

@@ -27,6 +27,7 @@ export const getDocumentAndSenderByToken = async ({
     include: {
       User: true,
       documentData: true,
+      documentMeta: true,
     },
   });
 

packages/lib/server-only/document/resend-document.tsx

@@ -4,12 +4,18 @@ import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_TO_EMAIL_TYPE,
+} from '@documenso/lib/constants/recipient-roles';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import type { Prisma } from '@documenso/prisma/client';
 
-import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
 import { getDocumentWhereInput } from './get-document-by-id';
 
 export type ResendDocumentOptions = {
@@ -17,6 +23,7 @@ export type ResendDocumentOptions = {
   userId: number;
   recipients: number[];
   teamId?: number;
+  requestMetadata: RequestMetadata;
 };
 
 export const resendDocument = async ({
@@ -24,6 +31,7 @@ export const resendDocument = async ({
   userId,
   recipients,
   teamId,
+  requestMetadata,
 }: ResendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
@@ -76,6 +84,8 @@ export const resendDocument = async ({
         return;
       }
 
+      const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
+
       const { email, name } = recipient;
 
       const customEmailTemplate = {
@@ -99,20 +109,39 @@ export const resendDocument = async ({
 
       const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
 
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: FROM_NAME,
-          address: FROM_ADDRESS,
-        },
-        subject: customEmail?.subject
-          ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : `Please ${actionVerb.toLowerCase()} this document`,
-        html: render(template),
-        text: render(template, { plainText: true }),
+      await prisma.$transaction(async (tx) => {
+        await mailer.sendMail({
+          to: {
+            address: email,
+            name,
+          },
+          from: {
+            name: FROM_NAME,
+            address: FROM_ADDRESS,
+          },
+          subject: customEmail?.subject
+            ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+            : `Please ${actionVerb.toLowerCase()} this document`,
+          html: render(template),
+          text: render(template, { plainText: true }),
+        });
+
+        await tx.documentAuditLog.create({
+          data: createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+            documentId: document.id,
+            user,
+            requestMetadata,
+            data: {
+              emailType: recipientEmailType,
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientRole: recipient.role,
+              recipientId: recipient.id,
+              isResending: true,
+            },
+          }),
+        });
       });
     }),
   );

packages/lib/server-only/document/seal-document.ts

@@ -5,10 +5,13 @@ import path from 'node:path';
 import { PDFDocument } from 'pdf-lib';
 
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { signPdf } from '@documenso/signing';
 
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
 import { putFile } from '../../universal/upload/put-file';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
@@ -17,9 +20,14 @@ import { sendCompletedEmail } from './send-completed-email';
 export type SealDocumentOptions = {
   documentId: number;
   sendEmail?: boolean;
+  requestMetadata?: RequestMetadata;
 };
 
-export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumentOptions) => {
+export const sealDocument = async ({
+  documentId,
+  sendEmail = true,
+  requestMetadata,
+}: SealDocumentOptions) => {
   'use server';
 
   const document = await prisma.document.findFirstOrThrow({
@@ -100,16 +108,30 @@ export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumen
     });
   }
 
-  await prisma.documentData.update({
-    where: {
-      id: documentData.id,
-    },
-    data: {
-      data: newData,
-    },
+  await prisma.$transaction(async (tx) => {
+    await tx.documentData.update({
+      where: {
+        id: documentData.id,
+      },
+      data: {
+        data: newData,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED,
+        documentId: document.id,
+        requestMetadata,
+        user: null,
+        data: {
+          transactionId: nanoid(),
+        },
+      }),
+    });
   });
 
   if (sendEmail) {
-    await sendCompletedEmail({ documentId });
+    await sendCompletedEmail({ documentId, requestMetadata });
   }
 };

packages/lib/server-only/document/send-completed-email.ts

@@ -5,13 +5,17 @@ import { render } from '@documenso/email/render';
 import { DocumentCompletedEmailTemplate } from '@documenso/email/templates/document-completed';
 import { prisma } from '@documenso/prisma';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 
 export interface SendDocumentOptions {
   documentId: number;
+  requestMetadata?: RequestMetadata;
 }
 
-export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) => {
+export const sendCompletedEmail = async ({ documentId, requestMetadata }: SendDocumentOptions) => {
   const document = await prisma.document.findUnique({
     where: {
       id: documentId,
@@ -44,24 +48,43 @@ export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) =>
         downloadLink: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${token}/complete`,
       });
 
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
-          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
-        },
-        subject: 'Signing Complete!',
-        html: render(template),
-        text: render(template, { plainText: true }),
-        attachments: [
-          {
-            filename: document.title,
-            content: Buffer.from(buffer),
+      await prisma.$transaction(async (tx) => {
+        await mailer.sendMail({
+          to: {
+            address: email,
+            name,
           },
-        ],
+          from: {
+            name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+            address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+          },
+          subject: 'Signing Complete!',
+          html: render(template),
+          text: render(template, { plainText: true }),
+          attachments: [
+            {
+              filename: document.title,
+              content: Buffer.from(buffer),
+            },
+          ],
+        });
+
+        await tx.documentAuditLog.create({
+          data: createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+            documentId: document.id,
+            user: null,
+            requestMetadata,
+            data: {
+              emailType: 'DOCUMENT_COMPLETED',
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientId: recipient.id,
+              recipientRole: recipient.role,
+              isResending: false,
+            },
+          }),
+        });
       });
     }),
   );

packages/lib/server-only/document/send-document.tsx

@@ -4,22 +4,37 @@ import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_TO_EMAIL_TYPE,
+} from '@documenso/lib/constants/recipient-roles';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
 
-import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
-
 export type SendDocumentOptions = {
   documentId: number;
   userId: number;
+  requestMetadata?: RequestMetadata;
 };
 
-export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
+export const sendDocument = async ({
+  documentId,
+  userId,
+  requestMetadata,
+}: SendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: userId,
     },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
   });
 
   const document = await prisma.document.findUnique({
@@ -66,6 +81,8 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         return;
       }
 
+      const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
+
       const { email, name } = recipient;
 
       const customEmailTemplate = {
@@ -89,40 +106,73 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
 
       const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
 
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: FROM_NAME,
-          address: FROM_ADDRESS,
-        },
-        subject: customEmail?.subject
-          ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : `Please ${actionVerb.toLowerCase()} this document`,
-        html: render(template),
-        text: render(template, { plainText: true }),
-      });
+      await prisma.$transaction(async (tx) => {
+        await mailer.sendMail({
+          to: {
+            address: email,
+            name,
+          },
+          from: {
+            name: FROM_NAME,
+            address: FROM_ADDRESS,
+          },
+          subject: customEmail?.subject
+            ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+            : `Please ${actionVerb.toLowerCase()} this document`,
+          html: render(template),
+          text: render(template, { plainText: true }),
+        });
 
-      await prisma.recipient.update({
-        where: {
-          id: recipient.id,
-        },
-        data: {
-          sendStatus: SendStatus.SENT,
-        },
+        await tx.recipient.update({
+          where: {
+            id: recipient.id,
+          },
+          data: {
+            sendStatus: SendStatus.SENT,
+          },
+        });
+
+        await tx.documentAuditLog.create({
+          data: createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+            documentId: document.id,
+            user,
+            requestMetadata,
+            data: {
+              emailType: recipientEmailType,
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientRole: recipient.role,
+              recipientId: recipient.id,
+              isResending: false,
+            },
+          }),
+        });
       });
     }),
   );
 
-  const updatedDocument = await prisma.document.update({
-    where: {
-      id: documentId,
-    },
-    data: {
-      status: DocumentStatus.PENDING,
-    },
+  const updatedDocument = await prisma.$transaction(async (tx) => {
+    if (document.status === DocumentStatus.DRAFT) {
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT,
+          documentId: document.id,
+          requestMetadata,
+          user,
+          data: {},
+        }),
+      });
+    }
+
+    return await tx.document.update({
+      where: {
+        id: documentId,
+      },
+      data: {
+        status: DocumentStatus.PENDING,
+      },
+    });
   });
 
   return updatedDocument;

packages/lib/server-only/document/update-title.ts

@@ -1,34 +1,76 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 
 export type UpdateTitleOptions = {
   userId: number;
   documentId: number;
   title: string;
+  requestMetadata?: RequestMetadata;
 };
 
-export const updateTitle = async ({ userId, documentId, title }: UpdateTitleOptions) => {
-  return await prisma.document.update({
+export const updateTitle = async ({
+  userId,
+  documentId,
+  title,
+  requestMetadata,
+}: UpdateTitleOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
     where: {
-      id: documentId,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      id: userId,
+    },
+  });
+
+  return await prisma.$transaction(async (tx) => {
+    const document = await tx.document.findFirstOrThrow({
+      where: {
+        id: documentId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
           },
+        ],
+      },
+    });
+
+    if (document.title === title) {
+      return document;
+    }
+
+    const updatedDocument = await tx.document.update({
+      where: {
+        id: documentId,
+      },
+      data: {
+        title,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED,
+        documentId,
+        user,
+        requestMetadata,
+        data: {
+          from: document.title,
+          to: updatedDocument.title,
         },
-      ],
-    },
-    data: {
-      title,
-    },
+      }),
+    });
+
+    return updatedDocument;
   });
 };

packages/lib/server-only/document/viewed-document.ts

@@ -1,11 +1,15 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { ReadStatus } from '@documenso/prisma/client';
 
 export type ViewedDocumentOptions = {
   token: string;
+  requestMetadata?: RequestMetadata;
 };
 
-export const viewedDocument = async ({ token }: ViewedDocumentOptions) => {
+export const viewedDocument = async ({ token, requestMetadata }: ViewedDocumentOptions) => {
   const recipient = await prisma.recipient.findFirst({
     where: {
       token,
@@ -13,16 +17,38 @@ export const viewedDocument = async ({ token }: ViewedDocumentOptions) => {
     },
   });
 
-  if (!recipient) {
+  if (!recipient || !recipient.documentId) {
     return;
   }
 
-  await prisma.recipient.update({
-    where: {
-      id: recipient.id,
-    },
-    data: {
-      readStatus: ReadStatus.OPENED,
-    },
+  const { documentId } = recipient;
+
+  await prisma.$transaction(async (tx) => {
+    await tx.recipient.update({
+      where: {
+        id: recipient.id,
+      },
+      data: {
+        readStatus: ReadStatus.OPENED,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
+        documentId,
+        user: {
+          name: recipient.name,
+          email: recipient.email,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: recipient.email,
+          recipientId: recipient.id,
+          recipientName: recipient.name,
+          recipientRole: recipient.role,
+        },
+      }),
+    });
   });
 };

packages/lib/server-only/field/get-fields-for-template.ts

@@ -10,7 +10,20 @@ export const getFieldsForTemplate = async ({ templateId, userId }: GetFieldsForT
     where: {
       templateId,
       Template: {
-        userId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        ],
       },
     },
     orderBy: {

packages/lib/server-only/field/remove-signed-field-with-token.ts

@@ -1,16 +1,21 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
 export type RemovedSignedFieldWithTokenOptions = {
   token: string;
   fieldId: number;
+  requestMetadata?: RequestMetadata;
 };
 
 export const removeSignedFieldWithToken = async ({
   token,
   fieldId,
+  requestMetadata,
 }: RemovedSignedFieldWithTokenOptions) => {
   const field = await prisma.field.findFirstOrThrow({
     where: {
@@ -44,8 +49,8 @@ export const removeSignedFieldWithToken = async ({
     throw new Error(`Field ${fieldId} has no recipientId`);
   }
 
-  await Promise.all([
-    prisma.field.update({
+  await prisma.$transaction(async (tx) => {
+    await tx.field.update({
       where: {
         id: field.id,
       },
@@ -53,11 +58,28 @@ export const removeSignedFieldWithToken = async ({
         customText: '',
         inserted: false,
       },
-    }),
-    prisma.signature.deleteMany({
+    });
+
+    await tx.signature.deleteMany({
       where: {
         fieldId: field.id,
       },
-    }),
-  ]);
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
+        documentId: document.id,
+        user: {
+          name: recipient?.name,
+          email: recipient?.email,
+        },
+        requestMetadata,
+        data: {
+          field: field.type,
+          fieldId: field.secondaryId,
+        },
+      }),
+    });
+  });
 };

packages/lib/server-only/field/set-fields-for-document.ts

@@ -1,3 +1,9 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import {
+  createDocumentAuditLogData,
+  diffFieldChanges,
+} from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import type { FieldType } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
@@ -15,12 +21,14 @@ export interface SetFieldsForDocumentOptions {
     pageWidth: number;
     pageHeight: number;
   }[];
+  requestMetadata?: RequestMetadata;
 }
 
 export const setFieldsForDocument = async ({
   userId,
   documentId,
   fields,
+  requestMetadata,
 }: SetFieldsForDocumentOptions) => {
   const document = await prisma.document.findFirst({
     where: {
@@ -42,10 +50,25 @@ export const setFieldsForDocument = async ({
     },
   });
 
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
   if (!document) {
     throw new Error('Document not found');
   }
 
+  if (document.completedAt) {
+    throw new Error('Document already complete');
+  }
+
   const existingFields = await prisma.field.findMany({
     where: {
       documentId,
@@ -75,56 +98,123 @@ export const setFieldsForDocument = async ({
       );
     });
 
-  const persistedFields = await prisma.$transaction(
-    // Disabling as wrapping promises here causes type issues
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
-    linkedFields.map((field) =>
-      prisma.field.upsert({
-        where: {
-          id: field._persisted?.id ?? -1,
-          documentId,
-        },
-        update: {
-          page: field.pageNumber,
-          positionX: field.pageX,
-          positionY: field.pageY,
-          width: field.pageWidth,
-          height: field.pageHeight,
-        },
-        create: {
-          type: field.type,
-          page: field.pageNumber,
-          positionX: field.pageX,
-          positionY: field.pageY,
-          width: field.pageWidth,
-          height: field.pageHeight,
-          customText: '',
-          inserted: false,
-          Document: {
-            connect: {
-              id: documentId,
-            },
+  const persistedFields = await prisma.$transaction(async (tx) => {
+    await Promise.all(
+      linkedFields.map(async (field) => {
+        const fieldSignerEmail = field.signerEmail.toLowerCase();
+
+        const upsertedField = await tx.field.upsert({
+          where: {
+            id: field._persisted?.id ?? -1,
+            documentId,
           },
-          Recipient: {
-            connect: {
-              documentId_email: {
-                documentId,
-                email: field.signerEmail.toLowerCase(),
+          update: {
+            page: field.pageNumber,
+            positionX: field.pageX,
+            positionY: field.pageY,
+            width: field.pageWidth,
+            height: field.pageHeight,
+          },
+          create: {
+            type: field.type,
+            page: field.pageNumber,
+            positionX: field.pageX,
+            positionY: field.pageY,
+            width: field.pageWidth,
+            height: field.pageHeight,
+            customText: '',
+            inserted: false,
+            Document: {
+              connect: {
+                id: documentId,
+              },
+            },
+            Recipient: {
+              connect: {
+                documentId_email: {
+                  documentId,
+                  email: fieldSignerEmail,
+                },
               },
             },
           },
-        },
+        });
+
+        if (upsertedField.recipientId === null) {
+          throw new Error('Not possible');
+        }
+
+        const baseAuditLog = {
+          fieldId: upsertedField.secondaryId,
+          fieldRecipientEmail: fieldSignerEmail,
+          fieldRecipientId: upsertedField.recipientId,
+          fieldType: upsertedField.type,
+        };
+
+        const changes = field._persisted ? diffFieldChanges(field._persisted, upsertedField) : [];
+
+        // Handle field updated audit log.
+        if (field._persisted && changes.length > 0) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: {
+                changes,
+                ...baseAuditLog,
+              },
+            }),
+          });
+        }
+
+        // Handle field created audit log.
+        if (!field._persisted) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: {
+                ...baseAuditLog,
+              },
+            }),
+          });
+        }
+
+        return upsertedField;
       }),
-    ),
-  );
+    );
+  });
 
   if (removedFields.length > 0) {
-    await prisma.field.deleteMany({
-      where: {
-        id: {
-          in: removedFields.map((field) => field.id),
+    await prisma.$transaction(async (tx) => {
+      await tx.field.deleteMany({
+        where: {
+          id: {
+            in: removedFields.map((field) => field.id),
+          },
         },
-      },
+      });
+
+      await tx.documentAuditLog.createMany({
+        data: removedFields.map((field) =>
+          createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED,
+            documentId: documentId,
+            user,
+            requestMetadata,
+            data: {
+              fieldId: field.secondaryId,
+              fieldRecipientEmail: field.Recipient?.email ?? '',
+              fieldRecipientId: field.recipientId ?? -1,
+              fieldType: field.type,
+            },
+          }),
+        ),
+      });
     });
   }
 

packages/lib/server-only/field/set-fields-for-template.ts

@@ -27,7 +27,20 @@ export const setFieldsForTemplate = async ({
   const template = await prisma.template.findFirst({
     where: {
       id: templateId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 

packages/lib/server-only/field/sign-field-with-token.ts

@@ -1,18 +1,23 @@
 'use server';
 
 import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 
 export type SignFieldWithTokenOptions = {
   token: string;
   fieldId: number;
   value: string;
   isBase64?: boolean;
+  requestMetadata?: RequestMetadata;
 };
 
 export const signFieldWithToken = async ({
@@ -20,6 +25,7 @@ export const signFieldWithToken = async ({
   fieldId,
   value,
   isBase64,
+  requestMetadata,
 }: SignFieldWithTokenOptions) => {
   const field = await prisma.field.findFirstOrThrow({
     where: {
@@ -40,6 +46,10 @@ export const signFieldWithToken = async ({
     throw new Error(`Document not found for field ${field.id}`);
   }
 
+  if (!recipient) {
+    throw new Error(`Recipient not found for field ${field.id}`);
+  }
+
   if (document.status === DocumentStatus.COMPLETED) {
     throw new Error(`Document ${document.id} has already been completed`);
   }
@@ -123,6 +133,38 @@ export const signFieldWithToken = async ({
       });
     }
 
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED,
+        documentId: document.id,
+        user: {
+          email: recipient.email,
+          name: recipient.name,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: recipient.email,
+          recipientId: recipient.id,
+          recipientName: recipient.name,
+          recipientRole: recipient.role,
+          fieldId: updatedField.secondaryId,
+          field: match(updatedField.type)
+            .with(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE, (type) => ({
+              type,
+              data: signatureImageAsBase64 || typedSignature || '',
+            }))
+            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, FieldType.TEXT, (type) => ({
+              type,
+              data: updatedField.customText,
+            }))
+            .exhaustive(),
+          fieldSecurity: {
+            type: 'NONE',
+          },
+        },
+      }),
+    });
+
     return updatedField;
   });
 };

packages/lib/server-only/recipient/get-recipients-for-template.ts

@@ -13,7 +13,20 @@ export const getRecipientsForTemplate = async ({
     where: {
       templateId,
       Template: {
-        userId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        ],
       },
     },
     orderBy: {

packages/lib/server-only/recipient/set-recipients-for-document.ts

@@ -1,9 +1,14 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { nanoid } from '@documenso/lib/universal/id';
+import {
+  createDocumentAuditLogData,
+  diffRecipientChanges,
+} from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { RecipientRole } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
 
-import { nanoid } from '../../universal/id';
-
 export interface SetRecipientsForDocumentOptions {
   userId: number;
   documentId: number;
@@ -13,12 +18,14 @@ export interface SetRecipientsForDocumentOptions {
     name: string;
     role: RecipientRole;
   }[];
+  requestMetadata?: RequestMetadata;
 }
 
 export const setRecipientsForDocument = async ({
   userId,
   documentId,
   recipients,
+  requestMetadata,
 }: SetRecipientsForDocumentOptions) => {
   const document = await prisma.document.findFirst({
     where: {
@@ -40,10 +47,25 @@ export const setRecipientsForDocument = async ({
     },
   });
 
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
   if (!document) {
     throw new Error('Document not found');
   }
 
+  if (document.completedAt) {
+    throw new Error('Document already complete');
+  }
+
   const normalizedRecipients = recipients.map((recipient) => ({
     ...recipient,
     email: recipient.email.toLowerCase(),
@@ -77,49 +99,127 @@ export const setRecipientsForDocument = async ({
     })
     .filter((recipient) => {
       return (
-        recipient._persisted?.sendStatus !== SendStatus.SENT &&
-        recipient._persisted?.signingStatus !== SigningStatus.SIGNED
+        recipient._persisted?.role === RecipientRole.CC ||
+        (recipient._persisted?.sendStatus !== SendStatus.SENT &&
+          recipient._persisted?.signingStatus !== SigningStatus.SIGNED)
       );
     });
 
-  const persistedRecipients = await prisma.$transaction(
-    // Disabling as wrapping promises here causes type issues
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
-    linkedRecipients.map((recipient) =>
-      prisma.recipient.upsert({
-        where: {
-          id: recipient._persisted?.id ?? -1,
-          documentId,
-        },
-        update: {
-          name: recipient.name,
-          email: recipient.email,
-          role: recipient.role,
-          documentId,
-          signingStatus:
-            recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-        },
-        create: {
-          name: recipient.name,
-          email: recipient.email,
-          role: recipient.role,
-          token: nanoid(),
-          documentId,
-          sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
-          signingStatus:
-            recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-        },
+  const persistedRecipients = await prisma.$transaction(async (tx) => {
+    await Promise.all(
+      linkedRecipients.map(async (recipient) => {
+        const upsertedRecipient = await tx.recipient.upsert({
+          where: {
+            id: recipient._persisted?.id ?? -1,
+            documentId,
+          },
+          update: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+            documentId,
+            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+            signingStatus:
+              recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+          },
+          create: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+            token: nanoid(),
+            documentId,
+            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+            signingStatus:
+              recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+          },
+        });
+
+        const recipientId = upsertedRecipient.id;
+
+        // Clear all fields if the recipient role is changed to a type that cannot have fields.
+        if (
+          recipient._persisted &&
+          recipient._persisted.role !== recipient.role &&
+          (recipient.role === RecipientRole.CC || recipient.role === RecipientRole.VIEWER)
+        ) {
+          await tx.field.deleteMany({
+            where: {
+              recipientId,
+            },
+          });
+        }
+
+        const baseAuditLog = {
+          recipientEmail: upsertedRecipient.email,
+          recipientName: upsertedRecipient.name,
+          recipientId,
+          recipientRole: upsertedRecipient.role,
+        };
+
+        const changes = recipient._persisted
+          ? diffRecipientChanges(recipient._persisted, upsertedRecipient)
+          : [];
+
+        // Handle recipient updated audit log.
+        if (recipient._persisted && changes.length > 0) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: {
+                changes,
+                ...baseAuditLog,
+              },
+            }),
+          });
+        }
+
+        // Handle recipient created audit log.
+        if (!recipient._persisted) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: baseAuditLog,
+            }),
+          });
+        }
+
+        return upsertedRecipient;
       }),
-    ),
-  );
+    );
+  });
 
   if (removedRecipients.length > 0) {
-    await prisma.recipient.deleteMany({
-      where: {
-        id: {
-          in: removedRecipients.map((recipient) => recipient.id),
+    await prisma.$transaction(async (tx) => {
+      await tx.recipient.deleteMany({
+        where: {
+          id: {
+            in: removedRecipients.map((recipient) => recipient.id),
+          },
         },
-      },
+      });
+
+      await tx.documentAuditLog.createMany({
+        data: removedRecipients.map((recipient) =>
+          createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED,
+            documentId: documentId,
+            user,
+            requestMetadata,
+            data: {
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientId: recipient.id,
+              recipientRole: recipient.role,
+            },
+          }),
+        ),
+      });
     });
   }
 

packages/lib/server-only/recipient/set-recipients-for-template.ts

@@ -20,7 +20,20 @@ export const setRecipientsForTemplate = async ({
   const template = await prisma.template.findFirst({
     where: {
       id: templateId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 

packages/lib/server-only/template/create-document-from-template.ts

@@ -11,7 +11,23 @@ export const createDocumentFromTemplate = async ({
   userId,
 }: CreateDocumentFromTemplateOptions) => {
   const template = await prisma.template.findUnique({
-    where: { id: templateId, userId },
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
     include: {
       Recipient: true,
       Field: true,
@@ -34,6 +50,7 @@ export const createDocumentFromTemplate = async ({
   const document = await prisma.document.create({
     data: {
       userId,
+      teamId: template.teamId,
       title: template.title,
       documentDataId: documentData.id,
       Recipient: {

packages/lib/server-only/template/create-template.ts

@@ -1,20 +1,36 @@
 import { prisma } from '@documenso/prisma';
-import { TCreateTemplateMutationSchema } from '@documenso/trpc/server/template-router/schema';
+import type { TCreateTemplateMutationSchema } from '@documenso/trpc/server/template-router/schema';
 
 export type CreateTemplateOptions = TCreateTemplateMutationSchema & {
   userId: number;
+  teamId?: number;
 };
 
 export const createTemplate = async ({
   title,
   userId,
+  teamId,
   templateDocumentDataId,
 }: CreateTemplateOptions) => {
+  if (teamId) {
+    await prisma.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    });
+  }
+
   return await prisma.template.create({
     data: {
       title,
       userId,
       templateDocumentDataId,
+      teamId,
     },
   });
 };

packages/lib/server-only/template/delete-template.ts

@@ -8,5 +8,23 @@ export type DeleteTemplateOptions = {
 };
 
 export const deleteTemplate = async ({ id, userId }: DeleteTemplateOptions) => {
-  return await prisma.template.delete({ where: { id, userId } });
+  return await prisma.template.delete({
+    where: {
+      id,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+  });
 };

packages/lib/server-only/template/duplicate-template.ts

@@ -1,14 +1,39 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
 import type { TDuplicateTemplateMutationSchema } from '@documenso/trpc/server/template-router/schema';
 
 export type DuplicateTemplateOptions = TDuplicateTemplateMutationSchema & {
   userId: number;
 };
 
-export const duplicateTemplate = async ({ templateId, userId }: DuplicateTemplateOptions) => {
+export const duplicateTemplate = async ({
+  templateId,
+  userId,
+  teamId,
+}: DuplicateTemplateOptions) => {
+  let templateWhereFilter: Prisma.TemplateWhereUniqueInput = {
+    id: templateId,
+    userId,
+    teamId: null,
+  };
+
+  if (teamId !== undefined) {
+    templateWhereFilter = {
+      id: templateId,
+      teamId,
+      team: {
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    };
+  }
+
   const template = await prisma.template.findUnique({
-    where: { id: templateId, userId },
+    where: templateWhereFilter,
     include: {
       Recipient: true,
       Field: true,
@@ -31,6 +56,7 @@ export const duplicateTemplate = async ({ templateId, userId }: DuplicateTemplat
   const duplicatedTemplate = await prisma.template.create({
     data: {
       userId,
+      teamId,
       title: template.title + ' (copy)',
       templateDocumentDataId: documentData.id,
       Recipient: {

packages/lib/server-only/template/find-templates.ts

@@ -0,0 +1,56 @@
+import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
+
+export type FindTemplatesOptions = {
+  userId: number;
+  teamId?: number;
+  page: number;
+  perPage: number;
+};
+
+export const findTemplates = async ({
+  userId,
+  teamId,
+  page = 1,
+  perPage = 10,
+}: FindTemplatesOptions) => {
+  let whereFilter: Prisma.TemplateWhereInput = {
+    userId,
+    teamId: null,
+  };
+
+  if (teamId !== undefined) {
+    whereFilter = {
+      team: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    };
+  }
+
+  const [templates, count] = await Promise.all([
+    prisma.template.findMany({
+      where: whereFilter,
+      include: {
+        templateDocumentData: true,
+        Field: true,
+      },
+      skip: Math.max(page - 1, 0) * perPage,
+      orderBy: {
+        createdAt: 'desc',
+      },
+    }),
+    prisma.template.count({
+      where: whereFilter,
+    }),
+  ]);
+
+  return {
+    templates,
+    totalPages: Math.ceil(count / perPage),
+  };
+};

packages/lib/server-only/template/get-template-by-id.ts

@@ -1,4 +1,5 @@
 import { prisma } from '@documenso/prisma';
+import type { Prisma } from '@documenso/prisma/client';
 
 export interface GetTemplateByIdOptions {
   id: number;
@@ -6,11 +7,26 @@ export interface GetTemplateByIdOptions {
 }
 
 export const getTemplateById = async ({ id, userId }: GetTemplateByIdOptions) => {
+  const whereFilter: Prisma.TemplateWhereInput = {
+    id,
+    OR: [
+      {
+        userId,
+      },
+      {
+        team: {
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+      },
+    ],
+  };
+
   return await prisma.template.findFirstOrThrow({
-    where: {
-      id,
-      userId,
-    },
+    where: whereFilter,
     include: {
       templateDocumentData: true,
     },

packages/lib/server-only/template/get-templates.ts

@@ -1,35 +0,0 @@
-import { prisma } from '@documenso/prisma';
-
-export type GetTemplatesOptions = {
-  userId: number;
-  page: number;
-  perPage: number;
-};
-
-export const getTemplates = async ({ userId, page = 1, perPage = 10 }: GetTemplatesOptions) => {
-  const [templates, count] = await Promise.all([
-    prisma.template.findMany({
-      where: {
-        userId,
-      },
-      include: {
-        templateDocumentData: true,
-        Field: true,
-      },
-      skip: Math.max(page - 1, 0) * perPage,
-      orderBy: {
-        createdAt: 'desc',
-      },
-    }),
-    prisma.template.count({
-      where: {
-        userId,
-      },
-    }),
-  ]);
-
-  return {
-    templates,
-    totalPages: Math.ceil(count / perPage),
-  };
-};

packages/lib/types/document-audit-logs.ts

@@ -0,0 +1,385 @@
+/////////////////////////////////////////////////////////////////////////////////////////////
+//
+// Be aware that any changes to this file may require migrations since we are storing JSON
+// data in Prisma.
+//
+/////////////////////////////////////////////////////////////////////////////////////////////
+import { z } from 'zod';
+
+import { FieldType } from '@documenso/prisma/client';
+
+export const ZDocumentAuditLogTypeSchema = z.enum([
+  // Document actions.
+  'EMAIL_SENT',
+
+  // Document modification events.
+  'FIELD_CREATED',
+  'FIELD_DELETED',
+  'FIELD_UPDATED',
+  'RECIPIENT_CREATED',
+  'RECIPIENT_DELETED',
+  'RECIPIENT_UPDATED',
+
+  // Document events.
+  'DOCUMENT_COMPLETED', // When the document is sealed and fully completed.
+  'DOCUMENT_CREATED', // When the document is created.
+  'DOCUMENT_DELETED', // When the document is soft deleted.
+  'DOCUMENT_FIELD_INSERTED', // When a field is inserted (signed/approved/etc) by a recipient.
+  'DOCUMENT_FIELD_UNINSERTED', // When a field is uninserted by a recipient.
+  'DOCUMENT_META_UPDATED', // When the document meta data is updated.
+  'DOCUMENT_OPENED', // When the document is opened by a recipient.
+  'DOCUMENT_RECIPIENT_COMPLETED', // When a recipient completes all their required tasks for the document.
+  'DOCUMENT_SENT', // When the document transitions from DRAFT to PENDING.
+  'DOCUMENT_TITLE_UPDATED', // When the document title is updated.
+]);
+
+export const ZDocumentAuditLogEmailTypeSchema = z.enum([
+  'SIGNING_REQUEST',
+  'VIEW_REQUEST',
+  'APPROVE_REQUEST',
+  'CC',
+  'DOCUMENT_COMPLETED',
+]);
+
+export const ZDocumentMetaDiffTypeSchema = z.enum([
+  'DATE_FORMAT',
+  'MESSAGE',
+  'PASSWORD',
+  'REDIRECT_URL',
+  'SUBJECT',
+  'TIMEZONE',
+]);
+
+export const ZFieldDiffTypeSchema = z.enum(['DIMENSION', 'POSITION']);
+export const ZRecipientDiffTypeSchema = z.enum(['NAME', 'ROLE', 'EMAIL']);
+
+export const DOCUMENT_AUDIT_LOG_TYPE = ZDocumentAuditLogTypeSchema.Enum;
+export const DOCUMENT_EMAIL_TYPE = ZDocumentAuditLogEmailTypeSchema.Enum;
+export const DOCUMENT_META_DIFF_TYPE = ZDocumentMetaDiffTypeSchema.Enum;
+export const FIELD_DIFF_TYPE = ZFieldDiffTypeSchema.Enum;
+export const RECIPIENT_DIFF_TYPE = ZRecipientDiffTypeSchema.Enum;
+
+export const ZFieldDiffDimensionSchema = z.object({
+  type: z.literal(FIELD_DIFF_TYPE.DIMENSION),
+  from: z.object({
+    width: z.number(),
+    height: z.number(),
+  }),
+  to: z.object({
+    width: z.number(),
+    height: z.number(),
+  }),
+});
+
+export const ZFieldDiffPositionSchema = z.object({
+  type: z.literal(FIELD_DIFF_TYPE.POSITION),
+  from: z.object({
+    page: z.number(),
+    positionX: z.number(),
+    positionY: z.number(),
+  }),
+  to: z.object({
+    page: z.number(),
+    positionX: z.number(),
+    positionY: z.number(),
+  }),
+});
+
+export const ZDocumentAuditLogDocumentMetaSchema = z.union([
+  z.object({
+    type: z.union([
+      z.literal(DOCUMENT_META_DIFF_TYPE.DATE_FORMAT),
+      z.literal(DOCUMENT_META_DIFF_TYPE.MESSAGE),
+      z.literal(DOCUMENT_META_DIFF_TYPE.REDIRECT_URL),
+      z.literal(DOCUMENT_META_DIFF_TYPE.SUBJECT),
+      z.literal(DOCUMENT_META_DIFF_TYPE.TIMEZONE),
+    ]),
+    from: z.string().nullable(),
+    to: z.string().nullable(),
+  }),
+  z.object({
+    type: z.literal(DOCUMENT_META_DIFF_TYPE.PASSWORD),
+  }),
+]);
+
+export const ZDocumentAuditLogFieldDiffSchema = z.union([
+  ZFieldDiffDimensionSchema,
+  ZFieldDiffPositionSchema,
+]);
+
+export const ZRecipientDiffNameSchema = z.object({
+  type: z.literal(RECIPIENT_DIFF_TYPE.NAME),
+  from: z.string(),
+  to: z.string(),
+});
+
+export const ZRecipientDiffRoleSchema = z.object({
+  type: z.literal(RECIPIENT_DIFF_TYPE.ROLE),
+  from: z.string(),
+  to: z.string(),
+});
+
+export const ZRecipientDiffEmailSchema = z.object({
+  type: z.literal(RECIPIENT_DIFF_TYPE.EMAIL),
+  from: z.string(),
+  to: z.string(),
+});
+
+export const ZDocumentAuditLogRecipientDiffSchema = z.union([
+  ZRecipientDiffNameSchema,
+  ZRecipientDiffRoleSchema,
+  ZRecipientDiffEmailSchema,
+]);
+
+const ZBaseFieldEventDataSchema = z.object({
+  fieldId: z.string(), // Note: This is the secondary field ID, which will get migrated in the future.
+  fieldRecipientEmail: z.string(),
+  fieldRecipientId: z.number(),
+  fieldType: z.string(), // We specifically don't want to use enums to allow for more flexibility.
+});
+
+const ZBaseRecipientDataSchema = z.object({
+  recipientEmail: z.string(),
+  recipientName: z.string(),
+  recipientId: z.number(),
+  recipientRole: z.string(),
+});
+
+/**
+ * Event: Email sent.
+ */
+export const ZDocumentAuditLogEventEmailSentSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT),
+  data: ZBaseRecipientDataSchema.extend({
+    emailType: ZDocumentAuditLogEmailTypeSchema,
+    isResending: z.boolean(),
+  }),
+});
+
+/**
+ * Event: Document completed.
+ */
+export const ZDocumentAuditLogEventDocumentCompletedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED),
+  data: z.object({
+    transactionId: z.string(),
+  }),
+});
+
+/**
+ * Event: Document created.
+ */
+export const ZDocumentAuditLogEventDocumentCreatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED),
+  data: z.object({
+    title: z.string(),
+  }),
+});
+
+/**
+ * Event: Document deleted.
+ */
+export const ZDocumentAuditLogEventDocumentDeletedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED),
+  data: z.object({
+    type: z.enum(['SOFT', 'HARD']),
+  }),
+});
+
+/**
+ * Event: Document field inserted.
+ */
+export const ZDocumentAuditLogEventDocumentFieldInsertedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED),
+  data: ZBaseRecipientDataSchema.extend({
+    fieldId: z.string(),
+
+    // Organised into union to allow us to extend each field if required.
+    field: z.union([
+      z.object({
+        type: z.literal(FieldType.EMAIL),
+        data: z.string(),
+      }),
+      z.object({
+        type: z.literal(FieldType.DATE),
+        data: z.string(),
+      }),
+      z.object({
+        type: z.literal(FieldType.NAME),
+        data: z.string(),
+      }),
+      z.object({
+        type: z.literal(FieldType.TEXT),
+        data: z.string(),
+      }),
+      z.object({
+        type: z.union([z.literal(FieldType.SIGNATURE), z.literal(FieldType.FREE_SIGNATURE)]),
+        data: z.string(),
+      }),
+    ]),
+
+    // Todo: Replace with union once we have more field security types.
+    fieldSecurity: z.object({
+      type: z.literal('NONE'),
+    }),
+  }),
+});
+
+/**
+ * Event: Document field uninserted.
+ */
+export const ZDocumentAuditLogEventDocumentFieldUninsertedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED),
+  data: z.object({
+    field: z.nativeEnum(FieldType),
+    fieldId: z.string(),
+  }),
+});
+
+/**
+ * Event: Document meta updated.
+ */
+export const ZDocumentAuditLogEventDocumentMetaUpdatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED),
+  data: z.object({
+    changes: z.array(ZDocumentAuditLogDocumentMetaSchema),
+  }),
+});
+
+/**
+ * Event: Document opened.
+ */
+export const ZDocumentAuditLogEventDocumentOpenedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED),
+  data: ZBaseRecipientDataSchema,
+});
+
+/**
+ * Event: Document recipient completed the document (the recipient has fully actioned and completed their required steps for the document).
+ */
+export const ZDocumentAuditLogEventDocumentRecipientCompleteSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED),
+  data: ZBaseRecipientDataSchema,
+});
+
+/**
+ * Event: Document sent.
+ */
+export const ZDocumentAuditLogEventDocumentSentSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT),
+  data: z.object({}),
+});
+
+/**
+ * Event: Document title updated.
+ */
+export const ZDocumentAuditLogEventDocumentTitleUpdatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED),
+  data: z.object({
+    from: z.string(),
+    to: z.string(),
+  }),
+});
+
+/**
+ * Event: Field created.
+ */
+export const ZDocumentAuditLogEventFieldCreatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED),
+  data: ZBaseFieldEventDataSchema,
+});
+
+/**
+ * Event: Field deleted.
+ */
+export const ZDocumentAuditLogEventFieldRemovedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED),
+  data: ZBaseFieldEventDataSchema,
+});
+
+/**
+ * Event: Field updated.
+ */
+export const ZDocumentAuditLogEventFieldUpdatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED),
+  data: ZBaseFieldEventDataSchema.extend({
+    changes: z.array(ZDocumentAuditLogFieldDiffSchema),
+  }),
+});
+
+/**
+ * Event: Recipient added.
+ */
+export const ZDocumentAuditLogEventRecipientAddedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED),
+  data: ZBaseRecipientDataSchema,
+});
+
+/**
+ * Event: Recipient updated.
+ */
+export const ZDocumentAuditLogEventRecipientUpdatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED),
+  data: ZBaseRecipientDataSchema.extend({
+    changes: z.array(ZDocumentAuditLogRecipientDiffSchema),
+  }),
+});
+
+/**
+ * Event: Recipient deleted.
+ */
+export const ZDocumentAuditLogEventRecipientRemovedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED),
+  data: ZBaseRecipientDataSchema,
+});
+
+export const ZDocumentAuditLogBaseSchema = z.object({
+  id: z.string(),
+  createdAt: z.date(),
+  documentId: z.number(),
+  name: z.string().optional().nullable(),
+  email: z.string().optional().nullable(),
+  userId: z.number().optional().nullable(),
+  userAgent: z.string().optional().nullable(),
+  ipAddress: z.string().optional().nullable(),
+});
+
+export const ZDocumentAuditLogSchema = ZDocumentAuditLogBaseSchema.and(
+  z.union([
+    ZDocumentAuditLogEventEmailSentSchema,
+    ZDocumentAuditLogEventDocumentCompletedSchema,
+    ZDocumentAuditLogEventDocumentCreatedSchema,
+    ZDocumentAuditLogEventDocumentDeletedSchema,
+    ZDocumentAuditLogEventDocumentFieldInsertedSchema,
+    ZDocumentAuditLogEventDocumentFieldUninsertedSchema,
+    ZDocumentAuditLogEventDocumentMetaUpdatedSchema,
+    ZDocumentAuditLogEventDocumentOpenedSchema,
+    ZDocumentAuditLogEventDocumentRecipientCompleteSchema,
+    ZDocumentAuditLogEventDocumentSentSchema,
+    ZDocumentAuditLogEventDocumentTitleUpdatedSchema,
+    ZDocumentAuditLogEventFieldCreatedSchema,
+    ZDocumentAuditLogEventFieldRemovedSchema,
+    ZDocumentAuditLogEventFieldUpdatedSchema,
+    ZDocumentAuditLogEventRecipientAddedSchema,
+    ZDocumentAuditLogEventRecipientUpdatedSchema,
+    ZDocumentAuditLogEventRecipientRemovedSchema,
+  ]),
+);
+
+export type TDocumentAuditLog = z.infer<typeof ZDocumentAuditLogSchema>;
+export type TDocumentAuditLogType = z.infer<typeof ZDocumentAuditLogTypeSchema>;
+
+export type TDocumentAuditLogFieldDiffSchema = z.infer<typeof ZDocumentAuditLogFieldDiffSchema>;
+
+export type TDocumentAuditLogDocumentMetaDiffSchema = z.infer<
+  typeof ZDocumentAuditLogDocumentMetaSchema
+>;
+
+export type TDocumentAuditLogRecipientDiffSchema = z.infer<
+  typeof ZDocumentAuditLogRecipientDiffSchema
+>;
+
+export type DocumentAuditLogByType<T = TDocumentAuditLog['type']> = Extract<
+  TDocumentAuditLog,
+  { type: T }
+>;

packages/lib/universal/extract-request-metadata.ts

@@ -25,10 +25,16 @@ export const extractNextApiRequestMetadata = (req: NextApiRequest): RequestMetad
 export const extractNextAuthRequestMetadata = (
   req: Pick<RequestInternal, 'body' | 'query' | 'headers' | 'method'>,
 ): RequestMetadata => {
-  const parsedIp = ZIpSchema.safeParse(req.headers?.['x-forwarded-for']);
+  return extractNextHeaderRequestMetadata(req.headers ?? {});
+};
+
+export const extractNextHeaderRequestMetadata = (
+  headers: Record<string, string>,
+): RequestMetadata => {
+  const parsedIp = ZIpSchema.safeParse(headers?.['x-forwarded-for']);
 
   const ipAddress = parsedIp.success ? parsedIp.data : undefined;
-  const userAgent = req.headers?.['user-agent'];
+  const userAgent = headers?.['user-agent'];
 
   return {
     ipAddress,

packages/lib/utils/document-audit-logs.ts

@@ -0,0 +1,327 @@
+import { match } from 'ts-pattern';
+
+import type {
+  DocumentAuditLog,
+  DocumentMeta,
+  Field,
+  Recipient,
+  RecipientRole,
+} from '@documenso/prisma/client';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '../constants/recipient-roles';
+import type {
+  TDocumentAuditLog,
+  TDocumentAuditLogDocumentMetaDiffSchema,
+  TDocumentAuditLogFieldDiffSchema,
+  TDocumentAuditLogRecipientDiffSchema,
+} from '../types/document-audit-logs';
+import {
+  DOCUMENT_AUDIT_LOG_TYPE,
+  DOCUMENT_META_DIFF_TYPE,
+  FIELD_DIFF_TYPE,
+  RECIPIENT_DIFF_TYPE,
+  ZDocumentAuditLogSchema,
+} from '../types/document-audit-logs';
+import type { RequestMetadata } from '../universal/extract-request-metadata';
+
+type CreateDocumentAuditLogDataOptions<T = TDocumentAuditLog['type']> = {
+  documentId: number;
+  type: T;
+  data: Extract<TDocumentAuditLog, { type: T }>['data'];
+  user: { email?: string; id?: number | null; name?: string | null } | null;
+  requestMetadata?: RequestMetadata;
+};
+
+type CreateDocumentAuditLogDataResponse = Pick<
+  DocumentAuditLog,
+  'type' | 'ipAddress' | 'userAgent' | 'email' | 'userId' | 'name' | 'documentId'
+> & {
+  data: TDocumentAuditLog['data'];
+};
+
+export const createDocumentAuditLogData = ({
+  documentId,
+  type,
+  data,
+  user,
+  requestMetadata,
+}: CreateDocumentAuditLogDataOptions): CreateDocumentAuditLogDataResponse => {
+  return {
+    type,
+    data,
+    documentId,
+    userId: user?.id ?? null,
+    email: user?.email ?? null,
+    name: user?.name ?? null,
+    userAgent: requestMetadata?.userAgent ?? null,
+    ipAddress: requestMetadata?.ipAddress ?? null,
+  };
+};
+
+/**
+ * Parse a raw document audit log from Prisma, to a typed audit log.
+ *
+ * @param auditLog raw audit log from Prisma.
+ */
+export const parseDocumentAuditLogData = (auditLog: DocumentAuditLog): TDocumentAuditLog => {
+  const data = ZDocumentAuditLogSchema.safeParse(auditLog);
+
+  // Handle any required migrations here.
+  if (!data.success) {
+    console.error(data.error);
+    throw new Error('Migration required');
+  }
+
+  return data.data;
+};
+
+type PartialRecipient = Pick<Recipient, 'email' | 'name' | 'role'>;
+
+export const diffRecipientChanges = (
+  oldRecipient: PartialRecipient,
+  newRecipient: PartialRecipient,
+): TDocumentAuditLogRecipientDiffSchema[] => {
+  const diffs: TDocumentAuditLogRecipientDiffSchema[] = [];
+
+  if (oldRecipient.email !== newRecipient.email) {
+    diffs.push({
+      type: RECIPIENT_DIFF_TYPE.EMAIL,
+      from: oldRecipient.email,
+      to: newRecipient.email,
+    });
+  }
+
+  if (oldRecipient.role !== newRecipient.role) {
+    diffs.push({
+      type: RECIPIENT_DIFF_TYPE.ROLE,
+      from: oldRecipient.role,
+      to: newRecipient.role,
+    });
+  }
+
+  if (oldRecipient.name !== newRecipient.name) {
+    diffs.push({
+      type: RECIPIENT_DIFF_TYPE.NAME,
+      from: oldRecipient.name,
+      to: newRecipient.name,
+    });
+  }
+
+  return diffs;
+};
+
+export const diffFieldChanges = (
+  oldField: Field,
+  newField: Field,
+): TDocumentAuditLogFieldDiffSchema[] => {
+  const diffs: TDocumentAuditLogFieldDiffSchema[] = [];
+
+  if (
+    oldField.page !== newField.page ||
+    !oldField.positionX.equals(newField.positionX) ||
+    !oldField.positionY.equals(newField.positionY)
+  ) {
+    diffs.push({
+      type: FIELD_DIFF_TYPE.POSITION,
+      from: {
+        page: oldField.page,
+        positionX: oldField.positionX.toNumber(),
+        positionY: oldField.positionY.toNumber(),
+      },
+      to: {
+        page: newField.page,
+        positionX: newField.positionX.toNumber(),
+        positionY: newField.positionY.toNumber(),
+      },
+    });
+  }
+
+  if (!oldField.width.equals(newField.width) || !oldField.height.equals(newField.height)) {
+    diffs.push({
+      type: FIELD_DIFF_TYPE.DIMENSION,
+      from: {
+        width: oldField.width.toNumber(),
+        height: oldField.height.toNumber(),
+      },
+      to: {
+        width: newField.width.toNumber(),
+        height: newField.height.toNumber(),
+      },
+    });
+  }
+
+  return diffs;
+};
+
+export const diffDocumentMetaChanges = (
+  oldData: Partial<DocumentMeta> = {},
+  newData: DocumentMeta,
+): TDocumentAuditLogDocumentMetaDiffSchema[] => {
+  const diffs: TDocumentAuditLogDocumentMetaDiffSchema[] = [];
+
+  const oldDateFormat = oldData?.dateFormat ?? '';
+  const oldMessage = oldData?.message ?? '';
+  const oldSubject = oldData?.subject ?? '';
+  const oldTimezone = oldData?.timezone ?? '';
+  const oldPassword = oldData?.password ?? null;
+  const oldRedirectUrl = oldData?.redirectUrl ?? '';
+
+  if (oldDateFormat !== newData.dateFormat) {
+    diffs.push({
+      type: DOCUMENT_META_DIFF_TYPE.DATE_FORMAT,
+      from: oldData?.dateFormat ?? '',
+      to: newData.dateFormat,
+    });
+  }
+
+  if (oldMessage !== newData.message) {
+    diffs.push({
+      type: DOCUMENT_META_DIFF_TYPE.MESSAGE,
+      from: oldMessage,
+      to: newData.message,
+    });
+  }
+
+  if (oldSubject !== newData.subject) {
+    diffs.push({
+      type: DOCUMENT_META_DIFF_TYPE.SUBJECT,
+      from: oldSubject,
+      to: newData.subject,
+    });
+  }
+
+  if (oldTimezone !== newData.timezone) {
+    diffs.push({
+      type: DOCUMENT_META_DIFF_TYPE.TIMEZONE,
+      from: oldTimezone,
+      to: newData.timezone,
+    });
+  }
+
+  if (oldRedirectUrl !== newData.redirectUrl) {
+    diffs.push({
+      type: DOCUMENT_META_DIFF_TYPE.REDIRECT_URL,
+      from: oldRedirectUrl,
+      to: newData.redirectUrl,
+    });
+  }
+
+  if (oldPassword !== newData.password) {
+    diffs.push({
+      type: DOCUMENT_META_DIFF_TYPE.PASSWORD,
+    });
+  }
+
+  return diffs;
+};
+
+/**
+ * Formats the audit log into a description of the action.
+ *
+ * Provide a userId to prefix the action with the user, example 'X did Y'.
+ */
+export const formatDocumentAuditLogActionString = (
+  auditLog: TDocumentAuditLog,
+  userId?: number,
+) => {
+  const { prefix, description } = formatDocumentAuditLogAction(auditLog, userId);
+
+  return prefix ? `${prefix} ${description}` : description;
+};
+
+/**
+ * Formats the audit log into a description of the action.
+ *
+ * Provide a userId to prefix the action with the user, example 'X did Y'.
+ */
+export const formatDocumentAuditLogAction = (auditLog: TDocumentAuditLog, userId?: number) => {
+  let prefix = userId === auditLog.userId ? 'You' : auditLog.name || auditLog.email || '';
+
+  const description = match(auditLog)
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED }, () => ({
+      anonymous: 'A field was added',
+      identified: 'added a field',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED }, () => ({
+      anonymous: 'A field was removed',
+      identified: 'removed a field',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED }, () => ({
+      anonymous: 'A field was updated',
+      identified: 'updated a field',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED }, () => ({
+      anonymous: 'A recipient was added',
+      identified: 'added a recipient',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED }, () => ({
+      anonymous: 'A recipient was removed',
+      identified: 'removed a recipient',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED }, () => ({
+      anonymous: 'A recipient was updated',
+      identified: 'updated a recipient',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED }, () => ({
+      anonymous: 'Document created',
+      identified: 'created the document',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED }, () => ({
+      anonymous: 'Document deleted',
+      identified: 'deleted the document',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, () => ({
+      anonymous: 'Field signed',
+      identified: 'signed a field',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED }, () => ({
+      anonymous: 'Field unsigned',
+      identified: 'unsigned a field',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED }, () => ({
+      anonymous: 'Document updated',
+      identified: 'updated the document',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED }, () => ({
+      anonymous: 'Document opened',
+      identified: 'opened the document',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED }, () => ({
+      anonymous: 'Document title updated',
+      identified: 'updated the document title',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT }, () => ({
+      anonymous: 'Document sent',
+      identified: 'sent the document',
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED }, ({ data }) => {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const action = RECIPIENT_ROLES_DESCRIPTION[data.recipientRole as RecipientRole]?.actioned;
+
+      const value = action ? `${action.toLowerCase()} the document` : 'completed their task';
+
+      return {
+        anonymous: `Recipient ${value}`,
+        identified: value,
+      };
+    })
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => ({
+      anonymous: `Email ${data.isResending ? 'resent' : 'sent'}`,
+      identified: `${data.isResending ? 'resent' : 'sent'} an email`,
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED }, () => {
+      // Clear the prefix since this should be considered an 'anonymous' event.
+      prefix = '';
+
+      return {
+        anonymous: 'Document completed',
+        identified: 'Document completed',
+      };
+    })
+    .exhaustive();
+
+  return {
+    prefix,
+    description: prefix ? description.identified : description.anonymous,
+  };
+};

packages/lib/utils/teams.ts

@@ -12,6 +12,10 @@ export const formatDocumentsPath = (teamUrl?: string) => {
   return teamUrl ? `/t/${teamUrl}/documents` : '/documents';
 };
 
+export const formatTemplatesPath = (teamUrl?: string) => {
+  return teamUrl ? `/t/${teamUrl}/templates` : '/templates';
+};
+
 /**
  * Determines whether a team member can execute a given action.
  *

packages/prisma/migrations/20240206051948_add_teams_templates/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Template" ADD COLUMN     "teamId" INTEGER;
+
+-- AddForeignKey
+ALTER TABLE "Template" ADD CONSTRAINT "Template_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20240206111230_add_document_meta_redirect_url/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "DocumentMeta" ADD COLUMN     "redirectUrl" TEXT;

packages/prisma/migrations/20240209023519_add_document_audit_logs/migration.sql

@@ -0,0 +1,37 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[secondaryId]` on the table `Field` will be added. If there are existing duplicate values, this will fail.
+  - The required column `secondaryId` was added to the `Field` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
+
+*/
+-- AlterTable
+ALTER TABLE "Field" ADD COLUMN     "secondaryId" TEXT;
+
+-- Set all null secondaryId fields to a uuid
+UPDATE "Field" SET "secondaryId" = gen_random_uuid()::text WHERE "secondaryId" IS NULL;
+
+-- Restrict the Field to required
+ALTER TABLE "Field" ALTER COLUMN "secondaryId" SET NOT NULL;
+
+-- CreateTable
+CREATE TABLE "DocumentAuditLog" (
+    "id" TEXT NOT NULL,
+    "documentId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "type" TEXT NOT NULL,
+    "data" JSONB NOT NULL,
+    "name" TEXT,
+    "email" TEXT,
+    "userId" INTEGER,
+    "userAgent" TEXT,
+    "ipAddress" TEXT,
+
+    CONSTRAINT "DocumentAuditLog_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Field_secondaryId_key" ON "Field"("secondaryId");
+
+-- AddForeignKey
+ALTER TABLE "DocumentAuditLog" ADD CONSTRAINT "DocumentAuditLog_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -170,11 +170,30 @@ model Document {
   teamId         Int?
   team           Team?               @relation(fields: [teamId], references: [id])
 
+  auditLogs DocumentAuditLog[]
+
   @@unique([documentDataId])
   @@index([userId])
   @@index([status])
 }
 
+model DocumentAuditLog {
+  id         String   @id @default(cuid())
+  documentId Int
+  createdAt  DateTime @default(now())
+  type       String
+  data       Json
+
+  // Details of the person who performed the action which caused the audit log.
+  name      String?
+  email     String?
+  userId    Int?
+  userAgent String?
+  ipAddress String?
+
+  Document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
+}
+
 enum DocumentDataType {
   S3_PATH
   BYTES
@@ -199,6 +218,7 @@ model DocumentMeta {
   dateFormat String?  @default("yyyy-MM-dd hh:mm a") @db.Text
   documentId Int      @unique
   document   Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  redirectUrl String? 
 }
 
 enum ReadStatus {
@@ -259,6 +279,7 @@ enum FieldType {
 
 model Field {
   id          Int        @id @default(autoincrement())
+  secondaryId String     @unique @default(cuid())
   documentId  Int?
   templateId  Int?
   recipientId Int?
@@ -334,7 +355,8 @@ model Team {
   owner        User          @relation(fields: [ownerUserId], references: [id])
   subscription Subscription?
 
-  document Document[]
+  document  Document[]
+  templates Template[]
 }
 
 model TeamPending {
@@ -415,10 +437,12 @@ model Template {
   type                   TemplateType @default(PRIVATE)
   title                  String
   userId                 Int
+  teamId                 Int?
   templateDocumentDataId String
   createdAt              DateTime     @default(now())
   updatedAt              DateTime     @default(now()) @updatedAt
 
+  team                 Team?        @relation(fields: [teamId], references: [id], onDelete: Cascade)
   templateDocumentData DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
   User                 User         @relation(fields: [userId], references: [id], onDelete: Cascade)
   Recipient            Recipient[]