fix: custom email message for self-signers

## Description

Feature flags are broken on SSR due to this error

```
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11731:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (node:internal/deps/undici/undici:8590:41)
      at _resume (node:internal/deps/undici/undici:8563:33)
      at resume (node:internal/deps/undici/undici:8459:7)
      at [dispatch] (node:internal/deps/undici/undici:7704:11)
      at Client.Intercept (node:internal/deps/undici/undici:7377:20)
      at Client.dispatch (node:internal/deps/undici/undici:6023:44)
      at [dispatch] (node:internal/deps/undici/undici:6254:32)
      at Pool.dispatch (node:internal/deps/undici/undici:6023:44)
      at [dispatch] (node:internal/deps/undici/undici:9343:27)
      at Agent.Intercept (node:internal/deps/undici/undici:7377:20) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}
```

I've removed content-length header since it isn't mandatory to my
knowledge for get requests.

## Changes

- Add fallback local flags when individual flag request fails
- Add error logging
- Remove `content-length` from headers being passed to Posthog

.devcontainer/on-create.sh

@@ -1,13 +1,10 @@
 #!/usr/bin/env bash
 
-# Start the database and mailserver
-docker compose -f ./docker/compose-without-app.yml up -d
-
 # Install dependencies
 npm install
 
 # Copy the env file
 cp .env.example .env
 
-# Run the migrations
-npm run prisma:migrate-dev
+# Run the dev setup
+npm run dx

.env.example

@@ -22,26 +22,32 @@ NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documen
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
 NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
-# [[E2E Tests]]
-E2E_TEST_AUTHENTICATE_USERNAME="Test User"
-E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
-E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
-
 # [[SIGNING]]
-# OPTIONAL: Defines the signing transport to use. Available options: local (default)
+# The transport to use for document signing. Available options: local (default) | gcloud-hsm
 NEXT_PRIVATE_SIGNING_TRANSPORT="local"
-# OPTIONAL: Defines the passphrase for the signing certificate.
+# OPTIONAL: The passphrase to use for the local file-based signing transport.
 NEXT_PRIVATE_SIGNING_PASSPHRASE=
-# OPTIONAL: Defines the file contents for the signing certificate as a base64 encoded string.
-NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS=
-# OPTIONAL: Defines the file path for the signing certificate. defaults to ./example/cert.p12
+# OPTIONAL: The local file path to the .p12 file to use for the local signing transport.
 NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud HSM key to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH=
+# OPTIONAL: The path to the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud Credentials file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS=
 
 # [[STORAGE]]
 # OPTIONAL: Defines the storage transport to use. Available options: database (default) | s3
 NEXT_PUBLIC_UPLOAD_TRANSPORT="database"
 # OPTIONAL: Defines the endpoint to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
 NEXT_PRIVATE_UPLOAD_ENDPOINT="http://127.0.0.1:9002"
+# OPTIONAL: Defines the force path style to use for the S3 storage transport. Relevant when using third-party S3-compatible providers.
+# This will change it from using virtual hosts <bucket>.domain.com/<path> to fully qualified paths domain.com/<bucket>/<path>
+NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE="false"
 # OPTIONAL: Defines the region to use for the S3 storage transport. Defaults to us-east-1.
 NEXT_PRIVATE_UPLOAD_REGION="unknown"
 # REQUIRED: Defines the bucket to use for the S3 storage transport.
@@ -91,6 +97,7 @@ NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=5
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID=
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
@@ -100,6 +107,11 @@ NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
 
+# [[E2E Tests]]
+E2E_TEST_AUTHENTICATE_USERNAME="Test User"
+E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+
 # This is only required for the marketing site
 # [[REDIS]]
 NEXT_PRIVATE_REDIS_URL=

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

README.md

@@ -82,7 +82,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 - [NextAuth.js](https://next-auth.js.org/) - Authentication
 - [react-email](https://react.email/) - Email Templates
 - [tRPC](https://trpc.io/) - API
-- [Node SignPDF](https://github.com/vbuch/node-signpdf) - Digital Signature
+- [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
 - [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
 - [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
 - [Stripe](https://stripe.com/) - Payments

SIGNING.md

@@ -17,7 +17,8 @@ For the digital signature of your documents you need a signing certificate in .p
    `openssl pkcs12 -export -out certificate.p12 -inkey private.key -in certificate.crt`
 
 4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
-5. Place the certificate `/apps/web/resources/certificate.p12`
+
+5. Place the certificate `/apps/web/resources/certificate.p12` (If the path does not exist, it needs to be created)
 
 ## Docker
 

apps/documentation/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/documentation/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/documentation/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

apps/documentation/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

apps/documentation/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+});
+
+module.exports = withNextra(nextConfig);

apps/documentation/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@documenso/documentation",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3002",
+    "build": "next build",
+    "start": "next start -p 3002",
+    "lint:fix": "next lint --fix",
+    "clean": "rimraf .next && rimraf node_modules",
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+  },
+  "dependencies": {
+    "next": "14.0.3",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}

apps/documentation/pages/_app.mdx

@@ -0,0 +1,7 @@
+import '../styles.css'
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+
+
+}

apps/documentation/pages/_meta.json

@@ -0,0 +1,44 @@
+{
+  "index": {
+    "title": "Home",
+    "type": "page",
+    "theme": {
+      "layout": "full",
+      "sidebar": false
+    },
+    "display": "hidden"
+  },
+  "app": {
+    "title": "Getting Started",
+    "type": "page"
+  },
+  "faq": {
+    "title": "FAQ",
+    "type": "page"
+  },
+  "local-development": {
+    "title": "Local Development",
+    "type": "page"
+  },
+  "public-api": {
+    "title": "Public API",
+    "type": "page",
+    "href": "/fcc/"
+  },
+  "webhooks": {
+    "title": "Webhooks",
+    "type": "page"
+  },
+  "contributing": {
+    "title": "Contributing Guide",
+    "type": "page"
+  },
+  "---": {
+    "type": "separator"
+  },
+  "GitHub": {
+    "title": "View on GitHub",
+    "href": "https://documen.so/github",
+    "newWindow": true
+  }
+}

apps/documentation/pages/app/getting-started.mdx

@@ -0,0 +1 @@
+# Getting Started

apps/documentation/pages/contributing/_meta.json

@@ -0,0 +1,8 @@
+{
+  "index": {
+    "title": "Get started",
+    "theme": {
+      "sidebar": false
+    }
+  }
+}

apps/documentation/pages/contributing/index.mdx

@@ -0,0 +1,115 @@
+---
+title: Contributing Guide
+description: Learn how to contribute to Documenso and become part of our community.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Contributing to Documenso
+
+If you plan to contribute to Documenso, please take a moment to feel awesome ✨. People like you are what open source is about ♥. Any contributions, no matter how big or small, are highly appreciated 🙏. This guide will help you get started with contributing to Documenso 💻.
+
+## Before Getting Started
+
+<Steps>
+
+### Check the Existing Issues and Pull Requests
+
+Search the existing [issues](https://github.com/documenso/documenso/issues) to see if someone else reported the same issue. Or, check the [existing PRs](https://github.com/documenso/documenso/pulls) to see if someone else is already working on the same thing.
+
+### Creating a New Issue
+
+If there is no issue or PR for the problem you are facing, feel free to create a new issue. Make sure to provide as much detail as possible, including the steps to reproduce the issue.
+
+### Picking an Existing Issue
+
+If you pick an existing issue, take into consideration the discussion on the issue.
+
+### Contributor License Agreement
+
+Accept the [Contributor License Agreement](https://documen.so/cla) to ensure we can accept your contributions.
+
+</Steps>
+
+## Taking Issues
+
+Before taking an issue, ensure that:
+
+- The issue has been assigned the public label.
+- The issue is clearly defined and understood.
+- No one has been assigned to the issue.
+- No one has expressed the intention to work on it.
+
+After that:
+
+1. Comment on the issue with your intention to work on it.
+2. Start working on the issue.
+
+Feel free to ask for help, clarification or guidance if needed. We are here to help you.
+
+## Developing
+
+The development branch is `main`, and all pull requests should be made against this branch. Here's how you can get started with developing:
+
+<Steps>
+
+### Set Up Documenso Locally
+
+Check out the [local development](/local-development) guide to set up your local environment.
+
+### Pick a Task
+
+Find an issue to work on or create a new one.
+
+- Before starting to work on an issue, ensure that no one else is working on it. If no one is assigned to the issue, feel free to pick it up by leaving a comment on the issue and asking to get it assigned to you.
+
+Before creating a new issue, check the existing issues to see if someone else has already reported it.
+
+### Create a New Branch
+
+After you're assigned an issue, you can start working on it. Create a new branch for your feature or bug fix.
+
+When creating a branch, make sure that the branch name:
+
+- starts with the correct prefix: `feat/` for new features, `fix/` for bug fixes, etc.
+- includes the issue id you are working on (if applicable).
+- is descriptive.
+
+```sh
+git checkout -b feat/issue-id-your-branch-name
+
+## Example
+git checkout -b feat/1234-add-share-button-to-articles
+```
+
+In the pull request description, include `references #yyyy` or `fixes #yyyy` to link it to the issue you are working on.
+
+### Implement Your Changes
+
+Start working on the issue you picked up and implement the changes. Make sure to test your changes locally and ensure that they work as expected.
+
+### Open a Pull Request
+
+After implementing your changes, open a pull request against the `main` branch.
+
+</Steps>
+
+<Callout type="info">
+  If you need help getting started, [join us on Discord](https://documen.so/discord).
+</Callout>
+
+## Building
+
+Before pushing code or creating pull requests, please ensure you can successfully create a successful production build. You can build the project by running the following command in your terminal:
+
+```bash
+npm run build
+```
+
+Once the project builds successfully, you can push your code changes or create a pull request.
+
+<Callout type="info">
+  Remember to run tests and perform any necessary checks before finalizing your changes. As a
+  result, we can collaborate more effectively and maintain a high standard of code quality in our
+  project.
+</Callout>

apps/documentation/pages/faq/faq.mdx

@@ -0,0 +1 @@
+# FAQ

apps/documentation/pages/index.mdx

@@ -0,0 +1,78 @@
+export const Wrapper = ({ children }) => {
+  return <div className="p-24">{children}</div>;
+};
+
+<Wrapper>
+
+# Documentation
+
+Welcome to the official Documenso documentation! This documentation is designed to help you get started with Documenso.
+
+For users, we'll guide you through setting up your Documenso account, creating and organizing your documents, collaborating with team members, and leveraging our advanced features. You'll learn how to get the most out of Documenso.
+
+If you're a developer, you'll find detailed information on how to set up your local development environment, work with our API, and utilize webhooks for seamless integration. We'll provide code examples, best practices, and troubleshooting tips to help you effectively incorporate Documenso's features into your applications.
+
+We aim to make our documentation clear, concise, and easy to navigate. If you have any questions, feedback, or suggestions for improving our documentation, please don't hesitate to reach out to us. We want to make your experience with Documenso as smooth and enjoyable as possible.
+
+Let's get started!
+
+## About Documenso
+
+Signing documents digitally should be fast and easy and should be the best practice for every document signed worldwide.
+
+This is technically quite easy today, but it also introduces a new party to every signature: The signing tool providers. While this is not a problem in itself, it should make us think about how we want these providers of trust to work.
+
+Documenso aims to be the world's most trusted document-signing tool. This trust is built by empowering you to self-host Documenso and review how it works under the hood.
+
+Join us in creating the next generation of open trust infrastructure.
+
+## Our tech stack:
+
+- [Typescript](https://www.typescriptlang.org/) - Language
+- [Next.js](https://nextjs.org/) - Framework
+- [Prisma](https://www.prisma.io/) - ORM
+- [Tailwind](https://tailwindcss.com/) - CSS
+- [shadcn/ui](https://ui.shadcn.com/) - Component Library
+- [NextAuth.js](https://next-auth.js.org/) - Authentication
+- [react-email](https://react.email/) - Email Templates
+- [tRPC](https://trpc.io/) - API
+- [@documenso/pdf-sign](https://www.npmjs.com/package/@documenso/pdf-sign) - PDF Signatures
+- [React-PDF](https://github.com/wojtekmaj/react-pdf) - Viewing PDFs
+- [PDF-Lib](https://github.com/Hopding/pdf-lib) - PDF manipulation
+- [Stripe](https://stripe.com/) - Payments
+- [Vercel](https://vercel.com) - Hosting
+
+<div className="mt-16 flex items-center justify-center gap-4">
+  <a href="https://documen.so/discord">
+    <img
+      src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2"
+      alt="Join Documenso on Discord"
+    />
+  </a>
+  <a href="https://github.com/documenso/documenso/stargazers">
+    <img src="https://img.shields.io/github/stars/documenso/documenso" alt="Github Stars" />
+  </a>
+  <a href="https://github.com/documenso/documenso/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License" />
+  </a>
+  <a href="https://github.com/documenso/documenso/pulse">
+    <img
+      src="https://img.shields.io/github/commit-activity/m/documenso/documenso"
+      alt="Commits-per-month"
+    />
+  </a>
+  <a href="https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/documenso/documenso">
+    <img
+      alt="open in devcontainer"
+      src="https://img.shields.io/static/v1?label=Dev%20Containers&message=Enabled&color=blue&logo=visualstudiocode"
+    />
+  </a>
+  <a href="https://github.com/documenso/documenso/blob/main/CODE_OF_CONDUCT.md">
+    <img
+      src="https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg"
+      alt="Contributor Covenant"
+    />
+  </a>
+</div>
+
+</Wrapper>

apps/documentation/pages/local-development/_meta.json

@@ -0,0 +1,7 @@
+{
+  "index": "Home",
+  "quickstart": "Developer Quickstart",
+  "manual": "Manual Setup",
+  "docker": "Docker",
+  "gitpod": "Gitpod"
+}

apps/documentation/pages/local-development/docker.mdx

@@ -0,0 +1,177 @@
+---
+title: Docker Development
+description: Set up Documenso using Docker for local development.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Docker
+
+The following guide will walk you through setting up Documenso using Docker. You can choose between a Docker Compose production setup or a standalone container.
+
+We provide a Docker container for Documenso, which is published on both DockerHub and GitHub Container Registry.
+
+- DockerHub: [https://hub.docker.com/r/documenso/documenso](https://hub.docker.com/r/documenso/documenso)
+- GitHub Container Registry: [https://ghcr.io/documenso/documenso](https://ghcr.io/documenso/documenso)
+
+You can pull the Docker image from either of these registries and run it with your preferred container hosting provider.
+
+Please note that you will need to provide environment variables for connecting to the database, mail server, and other services.
+
+## Prerequisites
+
+Before you begin, ensure that you have the following installed:
+
+- Docker
+- Docker Compose (if using the Docker Compose setup)
+
+## Option 1: Production Docker Compose Setup
+
+This setup includes a PostgreSQL database and the Documenso application. You will need to provide your own SMTP details using environment variables.
+
+<Steps>
+
+### Download the Docker Compose File
+
+Download the Docker Compose file from the Documenso repository - [compose.yml](https://raw.githubusercontent.com/documenso/documenso/release/docker/production/compose.yml).
+
+### Navigate to the `compose.yml` File
+
+Once downloaded, navigate to the directory containing the `compose.yml` file.
+
+### Set Up Environment Variables
+
+Create a `.env` file in the same directory as the `compose.yml` file.
+
+Then add your SMTP details as well as the following environment variables:
+
+```bash
+NEXTAUTH_SECRET="<your-secret>"
+NEXT_PRIVATE_ENCRYPTION_KEY="<your-key>"
+NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-secondary-key>"
+NEXT_PUBLIC_WEBAPP_URL="<your-url>"
+NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth"
+NEXT_PRIVATE_SMTP_HOST="<your-host>"
+NEXT_PRIVATE_SMTP_PORT=<your-port>
+NEXT_PRIVATE_SMTP_USERNAME="<your-username>"
+NEXT_PRIVATE_SMTP_PASSWORD="<your-password>"
+```
+
+### Update the Volume Binding
+
+The `cert.p12` file is required to sign and encrypt documents, so you must provide your key file. Update the volume binding in the `compose.yml` file to point to your key file:
+
+```yaml
+volumes:
+  - /path/to/your/keyfile.p12:/opt/documenso/cert.p12
+```
+
+After updating the volume binding, save the `compose.yml` file and run the following command to start the containers:
+
+```bash
+docker-compose --env-file ./.env -d up
+```
+
+The command will start the PostgreSQL database and the Documenso application containers.
+
+### Access the Application
+
+Access the Documenso application by visiting `http://localhost:3000` in your web browser.
+
+</Steps>
+
+## Option 2: Standalone Docker Container
+
+If you prefer to host the Documenso application on a specific container provider, you can use the pre-built Docker image from DockerHub or GitHub's Package Registry. Note that you will need to provide your own database and SMTP host.
+
+<Steps>
+
+### Pull the Docker Image
+
+Pull the Documenso Docker image from DockerHub:
+
+```bash
+docker pull documenso/documenso
+```
+
+Or, pull the image from GitHub Container Registry:
+
+```bash
+docker pull ghcr.io/documenso/documenso
+```
+
+### Run the Docker Container
+
+Run the Docker container with the required environment variables:
+
+```bash
+docker run -d \
+ -p 3000:3000 \
+ -e NEXTAUTH_URL="<your-nextauth-url>"
+ -e NEXTAUTH_SECRET="<your-nextauth-secret>"
+ -e NEXT_PRIVATE_ENCRYPTION_KEY="<your-next-private-encryption-key>"
+ -e NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-next-private-encryption-secondary-key>"
+ -e NEXT_PUBLIC_WEBAPP_URL="<your-next-public-webapp-url>"
+ -e NEXT_PRIVATE_DATABASE_URL="<your-next-private-database-url>"
+ -e NEXT_PRIVATE_DIRECT_DATABASE_URL="<your-next-private-database-url>"
+ -e NEXT_PRIVATE_SMTP_TRANSPORT="<your-next-private-smtp-transport>"
+ -e NEXT_PRIVATE_SMTP_FROM_NAME="<your-next-private-smtp-from-name>"
+ -e NEXT_PRIVATE_SMTP_FROM_ADDRESS="<your-next-private-smtp-from-address>"
+ -v /path/to/your/keyfile.p12:/opt/documenso/cert.p12
+ documenso/documenso
+```
+
+Replace the placeholders with the actual values.
+
+### Access the Application
+
+Access the Documenso application by visiting the URL you provided for the `NEXT_PUBLIC_WEBAPP_URL` environment variable in your web browser.
+
+</Steps>
+
+## Advanced Configuration
+
+The environment variables listed above are a subset of those available for configuring Documenso. The table below provides a complete list of environment variables and their descriptions.
+
+| Variable                                     | Description                                                                                         |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `PORT`                                       | The port on which the Documenso application runs. It defaults to `3000`.                            |
+| `NEXTAUTH_URL`                               | The URL for the NextAuth.js authentication service.                                                 |
+| `NEXTAUTH_SECRET`                            | The secret key used by NextAuth.js for encryption and signing.                                      |
+| `NEXT_PRIVATE_ENCRYPTION_KEY`                | The primary encryption key for symmetric encryption and decryption (at least 32 characters).        |
+| `NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY`      | The secondary encryption key for symmetric encryption and decryption (at least 32 characters).      |
+| `NEXT_PRIVATE_GOOGLE_CLIENT_ID`              | The Google client ID for Google authentication (optional).                                          |
+| `NEXT_PRIVATE_GOOGLE_CLIENT_SECRET`          | The Google client secret for Google authentication (optional).                                      |
+| `NEXT_PUBLIC_WEBAPP_URL`                     | The URL for the web application.                                                                    |
+| `NEXT_PRIVATE_DATABASE_URL`                  | The URL for the primary database connection (with connection pooling).                              |
+| `NEXT_PRIVATE_DIRECT_DATABASE_URL`           | The URL for the direct database connection (without connection pooling).                            |
+| `NEXT_PRIVATE_SIGNING_TRANSPORT`             | The signing transport to use. Available options: local (default)                                    |
+| `NEXT_PRIVATE_SIGNING_PASSPHRASE`            | The passphrase for the key file.                                                                    |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`   | The base64-encoded contents of the key file will be used instead of the file path.                  |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`       | The path to the key file, default `/opt/documenso/cert.p12`.                                        |
+| `NEXT_PUBLIC_UPLOAD_TRANSPORT`               | The transport for file uploads (database or s3).                                                    |
+| `NEXT_PRIVATE_UPLOAD_ENDPOINT`               | The endpoint for the S3 storage transport (for third-party S3-compatible providers).                |
+| `NEXT_PRIVATE_UPLOAD_FORCE_PATH_STYLE`       | Whether to force path-style URLs for the S3 storage transport.                                      |
+| `NEXT_PRIVATE_UPLOAD_REGION`                 | The region for the S3 storage transport (defaults to us-east-1).                                    |
+| `NEXT_PRIVATE_UPLOAD_BUCKET`                 | The bucket to use for the S3 storage transport.                                                     |
+| `NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID`          | The access key ID for the S3 storage transport.                                                     |
+| `NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY`      | The secret access key for the S3 storage transport.                                                 |
+| `NEXT_PRIVATE_SMTP_TRANSPORT`                | The transport to send emails (smtp-auth, smtp-api, resend, or mailchannels).                        |
+| `NEXT_PRIVATE_SMTP_HOST`                     | The host for the SMTP server for SMTP transports.                                                   |
+| `NEXT_PRIVATE_SMTP_PORT`                     | The port for the SMTP server for SMTP transports.                                                   |
+| `NEXT_PRIVATE_SMTP_USERNAME`                 | The username for the SMTP server for the `smtp-auth` transport.                                     |
+| `NEXT_PRIVATE_SMTP_PASSWORD`                 | The password for the SMTP server for the `smtp-auth` transport.                                     |
+| `NEXT_PRIVATE_SMTP_APIKEY_USER`              | The API key user for the SMTP server for the `smtp-api` transport.                                  |
+| `NEXT_PRIVATE_SMTP_APIKEY`                   | The API key for the SMTP server for the `smtp-api` transport.                                       |
+| `NEXT_PRIVATE_SMTP_SECURE`                   | Whether to force the use of TLS for the SMTP server for SMTP transports.                            |
+| `NEXT_PRIVATE_SMTP_FROM_ADDRESS`             | The email address for the "from" address.                                                           |
+| `NEXT_PRIVATE_SMTP_FROM_NAME`                | The sender name for the "from" address.                                                             |
+| `NEXT_PRIVATE_RESEND_API_KEY`                | The API key for Resend.com for the `resend` transport.                                              |
+| `NEXT_PRIVATE_MAILCHANNELS_API_KEY`          | The optional API key for MailChannels (if using a proxy) for the `mailchannels` transport.          |
+| `NEXT_PRIVATE_MAILCHANNELS_ENDPOINT`         | The optional endpoint for the MailChannels API (if using a proxy) for the `mailchannels` transport. |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN`      | The domain for DKIM signing with MailChannels for the `mailchannels` transport.                     |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR`    | The selector for DKIM signing with MailChannels for the `mailchannels` transport.                   |
+| `NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY` | The private key for DKIM signing with MailChannels for the `mailchannels` transport.                |
+| `NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT`     | The maximum document upload limit displayed to the user (in MB).                                    |
+| `NEXT_PUBLIC_POSTHOG_KEY`                    | The optional PostHog key for analytics and feature flags.                                           |
+| `NEXT_PUBLIC_DISABLE_SIGNUP`                 | Whether to disable user signups through the /signup page.                                           |

apps/documentation/pages/local-development/gitpod.mdx

@@ -0,0 +1,10 @@
+---
+title: Run in Gitpod
+description: Get started with Documenso in a ready-to-use Gitpod workspace in your browser.
+---
+
+# Run in Gitpod
+
+Click below to launch a ready-to-use Gitpod workspace in your browser.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/documenso/documenso)

apps/documentation/pages/local-development/index.mdx

@@ -0,0 +1,15 @@
+---
+title: Local development
+description: Learn how to set up Documenso for local development.
+---
+
+# Local development
+
+There are multiple ways of setting up Documenso for local development. At the moment of writing this documentation, there are 4 ways of running Documenso locally:
+
+- [Using the developer quickstart](/local-development/quickstart)
+- [Manually setting up the development environment](/local-development/manual)
+- [Using the Docker image](/local-development/docker)
+- [Using Gitpod](/local-development/gitpod)
+
+Pick the one that fits your needs the best.

apps/documentation/pages/local-development/manual.mdx

@@ -0,0 +1,77 @@
+---
+title: Manual Setup
+description: Manually set up Documenso on your machine for local development.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Manual Setup
+
+Follow these steps to set up Documenso on your local machine:
+
+<Steps>
+
+### Fork Documenso
+
+Fork the [Documenso repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+### Clone Repository
+
+After forking the repository, clone it to your local device by using the following command:
+
+```bash
+git clone https://github.com/<your-username>/documenso
+```
+
+### Install Dependencies
+
+Run `npm i` in the root directory to install the dependencies required for the project.
+
+### Set Up Environment Variables
+
+Set up the following environment variables in the `.env` file:
+
+```bash
+NEXTAUTH_URL
+NEXTAUTH_SECRET
+NEXT_PUBLIC_WEBAPP_URL
+NEXT_PUBLIC_MARKETING_URL
+NEXT_PRIVATE_DATABASE_URL
+NEXT_PRIVATE_DIRECT_DATABASE_URL
+NEXT_PRIVATE_SMTP_FROM_NAME
+NEXT_PRIVATE_SMTP_FROM_ADDRESS
+```
+
+Alternatively, you can run `cp .env.example .env` to get started with our handpicked defaults.
+
+### Create Database Schema
+
+Create the database schema by running the following command:
+
+```bash
+npm run prisma:migrate-dev
+```
+
+### Optional: Seed the Database
+
+Seed the database with test data by running the following command:
+
+```bash
+npm run prisma:seed -w @documenso/prisma
+```
+
+### Start the Application
+
+Run `npm run dev` in the root directory to start the application.
+
+### Access the Application
+
+Access the Documenso application by visiting `http://localhost:3000` in your web browser.
+
+</Steps>
+
+<Callout type="info">
+  Optional: Create your signing certificate. To generate your own using these steps and a Linux
+  Terminal or Windows Subsystem for Linux (WSL), see **[Create your signing
+  certificate](./SIGNING.md)**.
+</Callout>

apps/documentation/pages/local-development/quickstart.mdx

@@ -0,0 +1,66 @@
+---
+title: Developer Quickstart
+description: Quickly set up Documenso on your machine for local development with Docker and Docker Compose.
+---
+
+import { Callout, Steps } from 'nextra/components';
+
+# Developer Quickstart
+
+<Callout type="info">
+  **Note**: This guide assumes that you have both [docker](https://docs.docker.com/get-docker/) and
+  [docker-compose](https://docs.docker.com/compose/) installed on your machine.
+</Callout>
+
+Want to get up and running quickly? Follow these steps:
+
+<Steps>
+
+### Fork Documenso
+
+Fork the [Documenso repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+### Clone Repository
+
+After forking the repository, clone it to your local device by using the following command:
+
+```bash
+git clone https://github.com/<your-username>/documenso
+```
+
+### Set Up Environment Variables
+
+Set up your environment variables in the `.env` file using the `.env.example` file as a reference.
+
+Alternatively, you can run `cp .env.example .env` to get started with our handpicked defaults.
+
+### Start Database and Mail Server
+
+Run `npm run dx` in the root directory.
+
+This will spin up a Postgres database and inbucket mailserver in a docker container.
+
+### Start the Application
+
+Run `npm run dev` in the root directory to start the application.
+
+### Optional: Fasten the Process
+
+Want it even faster? Just use:
+
+```sh
+npm run d
+```
+
+</Steps>
+
+### Access Points for the Project
+
+You can access the following services:
+
+- Main application - http://localhost:3000
+- Incoming Mail Access - http://localhost:9000
+- Database Connection Details:
+- Port: 54320
+- Connection: Use your favourite database client to connect to the database.
+- S3 Storage Dashboard - http://localhost:9001

apps/documentation/pages/public-api/_meta.json

@@ -0,0 +1,6 @@
+{
+  "intro": "Intro",
+  "authentication": "Authentication",
+  "versioning": "Versioning",
+  "api-reference": "API Reference"
+}

apps/documentation/pages/public-api/api-reference.mdx

@@ -0,0 +1,6 @@
+---
+title: 'API Reference'
+description: 'Reference documentation for the Documenso public API.'
+---
+
+# API Reference

apps/documentation/pages/public-api/authentication.mdx

@@ -0,0 +1,67 @@
+---
+title: 'API Authentication'
+description: 'Learn how to create a Documenso API key and authenticate your API requests.'
+---
+
+# API Authentication
+
+Documenso uses API keys for authentication. An API key is a unique token that is generated for each client. The client must provide the key whenever it makes an API call. This way, Documenso can identify the clients making the requests and authorize their access to the API.
+
+## Creating an API Key
+
+To create an API key, navigate to the user settings page. Click on your avatar in the top right corner of the dashboard and select "**[User settings](https://app.documenso.com/settings)**" from the dropdown menu.
+
+![A screenshot of the Documenso's dashboard that shows the dropdown menu when you click on your user avatar](/public-api-images/documenso-user-dropdown-menu.webp)
+
+Once you're on the user settings page, navigate to the "**[API Tokens](https://app.documenso.com/settings/tokens)**" tab. The "API Token" page lists your existing keys and enables you to create new ones.
+
+![A screenshot of the Documenso's user settings page that shows the API Tokens page](/public-api-images/api-tokens-page-documenso.webp)
+
+To create a new API key, you must:
+
+- Choose a name (e.g. "zapier-key")
+- we recommend using a descriptive name that helps you quickly identify the key and its purpose
+- Choose an expiration date
+- you can set the key to never expire or choose when to become invalid: 7 days, 1 month, 3 months, 6 months, or 1 year
+
+After providing the required information, click the "Create token" button to generate the API key.
+
+![A screenshot of the newly created API token in the Documenso dashboard](/public-api-images/documenso-api-key-blurred.webp)
+
+Once you've created the token, Documenso will display the key on the screen. Make sure to copy the key and store it securely. You won't be able to see the key again once you refresh/leave the page.
+
+## Using the API Key
+
+To authenticate your API requests, you must include the API key in the `Authorization` request header. The format is `Authorization: api_xxxxxxxxxxxxxxxx`.
+
+Here's a sample API request using cURL:
+
+```bash
+curl --location 'https://app.documenso.com/api/v1/documents?page=1&perPage=1' \
+--header 'Authorization: api_xxxxxxxxxxxxxxxx'
+```
+
+Here's a sample response from the API based on the above cURL request:
+
+```json
+{
+  "documents": [
+    {
+      "id": 11,
+      "userId": 2,
+      "teamId": null,
+      "title": "documenso",
+      "status": "PENDING",
+      "documentDataId": "ab2ecm1npk11rt5sp398waf7h",
+      "createdAt": "2024-04-25T11:05:18.420Z",
+      "updatedAt": "2024-04-25T11:05:36.328Z",
+      "completedAt": null
+    }
+  ],
+  "totalPages": 1
+}
+```
+
+![A screenshot of a cURL request to the Documenso public API with the API key in the Authorization header](/public-api-images/documenso-api-authorization.webp)
+
+The API key has access to your account and all its resources. Please keep it secure and do not share it with others. If you suspect that your key has been compromised, you can revoke it from the API Tokens page in your user settings.

apps/documentation/pages/public-api/intro.mdx

@@ -0,0 +1,22 @@
+---
+title: 'Public API'
+description: 'Learn how to interact with your documents programmatically using the Documenso public API.'
+---
+
+# Public API
+
+Documenso provides a public REST API that enables you to interact with your documents programmatically. The API exposes various HTTP endpoints that allow you to perform operations such as:
+
+- retrieving, uploading, deleting, and sending documents for signing
+- creating, updating, and deleting recipients
+- creating, updating, and deleting document fields
+
+The documentation walks you through creating API keys and using them to authenticate your API requests. You'll also learn about the available endpoints, request and response formats, and how to use the API.
+
+## Swagger Documentation
+
+There is also the [Swagger documentation](https://app.documenso.com/api/v1/openapi) available, which provides information about the API endpoints, request parameters, response formats, and authentication methods.
+
+## Availability
+
+The API is available to individual users and teams.

apps/documentation/pages/public-api/versioning.mdx

@@ -0,0 +1,18 @@
+---
+title: 'API Versioning'
+description: 'Versioning information for the Documenso public API.'
+---
+
+import { Callout } from 'nextra/components';
+
+# API Versioning
+
+Documenso uses API versioning to manage changes to the public API. This allows us to introduce new features, fix bugs, and make other changes without breaking existing integrations.
+
+<Callout type="info">The current version of the API is `v1`.</Callout>
+
+The API version is specified in the URL. For example, the base URL for the `v1` API is `https://app.documenso.com/api/v1`.
+
+We may make changes to the API without incrementing the version number. We will always try to avoid breaking changes, but in some cases, it may be necessary to make changes that are not backward compatible. In these cases, we will increment the version number and provide information about the changes in the release notes.
+
+Also, we may deprecate certain features or endpoints in the API. When we deprecate a feature or endpoint, we will provide information about the deprecation in the release notes and give a timeline for when the feature or endpoint will be removed.

apps/documentation/pages/webhooks/_meta.json

@@ -0,0 +1,8 @@
+{
+  "intro": {
+    "title": "Get started",
+    "theme": {
+      "sidebar": false
+    }
+  }
+}

apps/documentation/pages/webhooks/intro.mdx

@@ -0,0 +1,350 @@
+---
+title: 'Webhooks'
+description: 'Learn how to use webhooks to receive real-time notifications about your documents.'
+---
+
+# Webhooks
+
+Webhooks are HTTP callbacks that are triggered by specific events. When the user subscribes to a specific event and that event occurs, the webhook makes an HTTP request to the URL provided by the user. The request can be a simple notification or can carry a payload with more information about the event.
+
+Some of the common use cases for webhooks include:
+
+1. **Real-time Data Syncing**: Webhooks provide a way to keep data in sync across different platforms. For example, you can keep your system up-to-date with your Documenso documents by subscribing to events like document creation or signing.
+2. **Automating Workflows**: They can trigger automated workflows that start when an event occurs. For example, the webhook could trigger an email when a document is signed.
+3. **Integrating Third-Party Services**: Webhooks can be used to integrate Documenso with third-party services. For example, you could use a webhook to send data to a CRM system when a document is signed.
+
+Documenso supports Webhooks and allows you to subscribe to the following events:
+
+- `document.created`
+- `document.sent`
+- `document.opened`
+- `document.signed`
+- `document.completed`
+
+## Create a webhook subscription
+
+You can create a webhook subscription from the user settings page. Click on your avatar in the top right corner of the dashboard and select "**[User settings](https://app.documenso.com/settings)**" from the dropdown menu.
+
+![A screenshot of the Documenso's dashboard that shows the dropdown menu when you click on your user avatar](/webhook-images/dashboard-user-dropdown-menu.webp)
+
+Then, navigate to the "**[Webhooks](https://app.documenso.com/settings/webhooks)**" tab, where you can see a list of your existing webhooks and create new ones.
+
+![A screenshot of the Documenso's user settings page that shows the Webhooks tab and the Create Webhook button](/webhook-images/webhooks-settings-page.webp)
+
+Clicking on the "**Create Webhook**" button opens a modal to create a new webhook subscription.
+
+To create a new webhook subscription, you need to provide the following information:
+
+- Enter the webhook URL that will receive the event payload.
+- Select the event(s) you want to subscribe to: `document.created`, `document.sent`, `document.opened`, `document.signed`, `document.completed`.
+- Optionally, you can provide a secret key that will be used to sign the payload. This key will be included in the `X-Documenso-Signature` header of the request.
+
+![A screenshot of the Create Webhook modal that shows the URL input field and the event checkboxes](/webhook-images/webhooks-page-create-webhook-modal.webp)
+
+After you have filled in the required information, click on the "**Create Webhook**" button to save your subscription.
+
+The screenshot below illustrates a newly created webhook subscription.
+
+![A screenshot of the Documenso's user settings page that shows the newly created webhook subscription](/webhook-images/webhooks-page.webp)
+
+You can edit or delete your webhook subscriptions by clicking the "**Edit**" or "**Delete**" buttons next to the webhook.
+
+## Webhook fields
+
+The payload sent to the webhook URL contains the following fields:
+
+| Field                                        | Type      | Description                                          |
+| -------------------------------------------- | --------- | ---------------------------------------------------- |
+| `event`                                      | string    | The type of event that triggered the webhook.        |
+| `payload.id`                                 | number    | The id of the document.                              |
+| `payload.userId`                             | number    | The id of the user who owns the document.            |
+| `payload.authOptions`                        | json?     | Authentication options for the document.             |
+| `payload.formValues`                         | json?     | Form values for the document.                        |
+| `payload.title`                              | string    | The name of the document.                            |
+| `payload.status`                             | string    | The current status of the document.                  |
+| `payload.documentDataId`                     | string    | The identifier for the document data.                |
+| `payload.createdAt`                          | datetime  | The creation date and time of the document.          |
+| `payload.updatedAt`                          | datetime  | The last update date and time of the document.       |
+| `payload.completedAt`                        | datetime? | The completion date and time of the document.        |
+| `payload.deletedAt`                          | datetime? | The deletion date and time of the document.          |
+| `payload.teamId`                             | number?   | The id of the team.                                  |
+| `payload.documentData.id`                    | string    | The id of the document data.                         |
+| `payload.documentData.type`                  | string    | The type of the document data.                       |
+| `payload.documentData.data`                  | string    | The data of the document.                            |
+| `payload.documentData.initialData`           | string    | The initial data of the document.                    |
+| `payload.Recipient[].id`                     | number    | The id of the recipient.                             |
+| `payload.Recipient[].documentId`             | number?   | The id the document associated with the recipient.   |
+| `payload.Recipient[].templateId`             | number?   | The template identifier for the recipient.           |
+| `payload.Recipient[].email`                  | string    | The email address of the recipient.                  |
+| `payload.Recipient[].name`                   | string    | The name of the recipient.                           |
+| `payload.Recipient[].token`                  | string    | The token associated with the recipient.             |
+| `payload.Recipient[].expired`                | datetime? | The expiration status of the recipient.              |
+| `payload.Recipient[].signedAt`               | datetime? | The date and time the recipient signed the document. |
+| `payload.Recipient[].authOptions.accessAuth` | json?     | Access authentication options.                       |
+| `payload.Recipient[].authOptions.actionAuth` | json?     | Action authentication options.                       |
+| `payload.Recipient[].role`                   | string    | The role of the recipient.                           |
+| `payload.Recipient[].readStatus`             | string    | The read status of the document by the recipient.    |
+| `payload.Recipient[].signingStatus`          | string    | The signing status of the recipient.                 |
+| `payload.Recipient[].sendStatus`             | string    | The send status of the document to the recipient.    |
+| `createdAt`                                  | datetime  | The creation date and time of the webhook event.     |
+| `webhookEndpoint`                            | string    | The endpoint URL where the webhook is sent.          |
+
+## Webhook event payload example
+
+When an event that you have subscribed to occurs, Documenso will send a POST request to the specified webhook URL with a payload containing information about the event.
+
+## Example payloads
+
+Below are examples of the payloads that are sent for each of the supported events. The payloads are sent as JSON data in the body of the POST request.
+
+Example payload for the `document.created` event:
+
+```json
+{
+  "event": "DOCUMENT_CREATED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "DRAFT",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:44:43.341Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null
+  },
+  "createdAt": "2024-04-22T11:44:44.779Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.sent` event:
+
+```json
+{
+  "event": "DOCUMENT_SENT",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "PENDING",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:48:07.569Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null,
+    "Recipient": [
+      {
+        "id": 52,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer2@documenso.com",
+        "name": "Signer 2",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "expired": null,
+        "signedAt": null,
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "VIEWER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      },
+      {
+        "id": 53,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer1@documenso.com",
+        "name": "Signer 1",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "expired": null,
+        "signedAt": null,
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "SIGNER",
+        "readStatus": "NOT_OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:48:07.945Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.opened` event:
+
+```json
+{
+  "event": "DOCUMENT_OPENED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "PENDING",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:48:07.569Z",
+    "completedAt": null,
+    "deletedAt": null,
+    "teamId": null,
+    "Recipient": [
+      {
+        "id": 52,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer2@documenso.com",
+        "name": "Signer 2",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "expired": null,
+        "signedAt": null,
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "VIEWER",
+        "readStatus": "OPENED",
+        "signingStatus": "NOT_SIGNED",
+        "sendStatus": "SENT"
+      }
+    ],
+    "documentData": {
+      "id": "hs8qz1ktr9204jn7mg6c5dxy0",
+      "type": "S3_PATH",
+      "data": "9753/xzqrshtlpokm/documenso.pdf",
+      "initialData": "9753/xzqrshtlpokm/documenso.pdf"
+    }
+  },
+  "createdAt": "2024-04-22T11:50:26.174Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.signed` event:
+
+```json
+{
+  "event": "DOCUMENT_SIGNED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "COMPLETED",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:52:05.708Z",
+    "completedAt": "2024-04-22T11:52:05.707Z",
+    "deletedAt": null,
+    "teamId": null,
+    "Recipient": [
+      {
+        "id": 51,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer1@documenso.com",
+        "name": "Signer 1",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "expired": null,
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "SIGNER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:52:18.577Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+Example payload for the `document.completed` event:
+
+```json
+{
+  "event": "DOCUMENT_COMPLETED",
+  "payload": {
+    "id": 10,
+    "userId": 1,
+    "authOptions": null,
+    "formValues": null,
+    "title": "documenso.pdf",
+    "status": "COMPLETED",
+    "documentDataId": "hs8qz1ktr9204jn7mg6c5dxy0",
+    "createdAt": "2024-04-22T11:44:43.341Z",
+    "updatedAt": "2024-04-22T11:52:05.708Z",
+    "completedAt": "2024-04-22T11:52:05.707Z",
+    "deletedAt": null,
+    "teamId": null,
+    "documentData": {
+      "id": "hs8qz1ktr9204jn7mg6c5dxy0",
+      "type": "S3_PATH",
+      "data": "bk9p1h7x0s3m/documenso-signed.pdf",
+      "initialData": "9753/xzqrshtlpokm/documenso.pdf"
+    },
+    "Recipient": [
+      {
+        "id": 50,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer2@documenso.com",
+        "name": "Signer 2",
+        "token": "vbT8hi3jKQmrFP_LN1WcS",
+        "expired": null,
+        "signedAt": "2024-04-22T11:51:10.055Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "VIEWER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      },
+      {
+        "id": 51,
+        "documentId": 10,
+        "templateId": null,
+        "email": "signer1@documenso.com",
+        "name": "Signer 1",
+        "token": "HkrptwS42ZBXdRKj1TyUo",
+        "expired": null,
+        "signedAt": "2024-04-22T11:52:05.688Z",
+        "authOptions": {
+          "accessAuth": null,
+          "actionAuth": null
+        },
+        "role": "SIGNER",
+        "readStatus": "OPENED",
+        "signingStatus": "SIGNED",
+        "sendStatus": "SENT"
+      }
+    ]
+  },
+  "createdAt": "2024-04-22T11:52:18.277Z",
+  "webhookEndpoint": "https://mywebhooksite.com/mywebhook"
+}
+```
+
+## Availability
+
+Webhooks are available to individual users and teams.

apps/documentation/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/documentation/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/documentation/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

apps/documentation/theme.config.tsx

@@ -0,0 +1,49 @@
+import { useConfig } from 'nextra-theme-docs';
+import type { DocsThemeConfig } from 'nextra-theme-docs';
+
+const themeConfig: DocsThemeConfig = {
+  logo: <span>Documenso Docs</span>,
+  head: function useHead() {
+    const config = useConfig<{ title?: string; description?: string }>();
+
+    const title = `${config.frontMatter.title} | Documenso Docs` || 'Documenso Docs';
+    const description = config.frontMatter.description || 'The official Documenso documentation';
+
+    return (
+      <>
+        <meta httpEquiv="Content-Language" content="en" />
+        <meta name="title" content={title} />
+        <meta name="og:title" content={title} />
+        <meta name="description" content={description} />
+        <meta name="og:description" content={description} />
+      </>
+    );
+  },
+  project: {
+    link: 'https://documen.so/github',
+  },
+  chat: {
+    link: 'https://documen.so/discord',
+  },
+  docsRepositoryBase: 'https://github.com/documenso/documenso/tree/main/apps/documentation',
+  footer: {
+    text: (
+      <span>
+        {new Date().getFullYear()} ©{' '}
+        <a href="https://documen.so" target="_blank">
+          Documenso
+        </a>
+        .
+      </span>
+    ),
+  },
+  primaryHue: 100,
+  primarySaturation: 48.47,
+  useNextSeoProps() {
+    return {
+      titleTemplate: '%s | Documenso Docs',
+    };
+  },
+};
+
+export default themeConfig;

apps/documentation/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/marketing/content/blog/building-documenso-pt1.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Building Documenso — Part 1: Certificates'
-description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+description: Let's take a look why you need a signing certificate and how Documenso does it.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'

apps/marketing/content/blog/building-documenso-pt2.mdx

@@ -0,0 +1,117 @@
+---
+title: 'Building Documenso — Part 2: Signature Validity'
+description: Is a signature valid? And what does that mean? It's a surprisingly complex question; let's take a look.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-04-05
+tags:
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/eu-validate-1.png"
+    width= "650"
+    height= "650"
+    alt= "A report card for signature validity."
+  />
+
+  <figcaption className="text-center">
+    If a tree does not comply with the EU trust list, does it make a sound when validating?r
+  </figcaption>
+</figure>
+
+> TLDR; Signatures can be valid and compliant for different signature levels, even if some validators show higher-level errors. Not all helpful security measures are mandated by law.
+
+# A valid question
+
+A few days ago, an early adopter brought up this question in our [Discord](https://documen.so/discord):
+
+<figure>
+  <MdxNextImage
+    src="/blog/eu-validate-2.png"
+    width= "650"
+    height= "650"
+    alt= "A report card for signature validity."
+  />
+
+  <figcaption className="text-center">
+    You can check out the validator here: [https://documen.so/eu-validator](https://documen.so/eu-validator)
+  </figcaption>
+</figure>
+
+For those unfamiliar with the tool, he used the validator tool of the EU's Digital Signature Service (DSS) Framework to check the signature of a document signed with Documenso. The EU provides this tool to help users and providers check the validity level of their signatures.
+
+A short refresher from [Building Documenso — Part 1: Certificates](https://documen.so/certs):
+
+> Documenso inserts all visual signatures into the document and then seals it using the "Documenso Inc." corporate certificate. This makes the resulting PDF document tamper-proof and guarantees it hasn't changed since signing.
+
+Before we answer if the document was signed correctly, we need to understand what the goal was.
+
+There are three signature levels in the European eIDAS regulation:
+
+1. **Simple Electronic Signatures (Level 1/ SES):** This is just a visual signature or even a checkbox on a document.
+
+2. **Advanded Electronic Signatures (Level 2/ AES)**: An actual crypographic signature (not just a seal on the whole document, but a specific signature), using a certificate linked to the identification data of the signer.
+
+3. **Qualified Electronic Signatures (Level 3/ QES):** Same as 2. but done by a government-certified entity on certified hardware and after identifying the signer with an official ID document (e.g., passport)
+
+> 💡 Side Note: Number 2 (AES) is how most people imagine digital signatures. But most of the market uses 1. plus a seal on the whole document under the name of the signing provider (e.g., Documenso). The signer's data is only inserted visually, not in the actual signature. Why? One of the reasons is that it's much easier, and without a readily available open source framework to draw from, it is quite tricky to build. This is something we aim to build (which many have done) and open source (which no one has done).
+
+From the perspective of eIDAS, Documenso offers Level 1/ SES signatures since it does not adhere to all of the requirements of Level 2/ AES. This means that, technically, there is no legal need to seal the document to achieve this level of validity (at least within eIDAS). We do it anyway since it improves the level of confidence users can have in the signed document. Sealing the document, even though not legally required, is a great example of Documenso's approach to signatures. First, we aim to provide all legal requirements for a given use case. Then, we add any protection that can be added without unwarranted friction to the creation of the signature.
+
+## Not if valid, but how valid
+
+**Q: So, is the signature in the image valid?**
+
+A: Yes, as an eidas Level 1 SES.
+
+**Q: Then why does it say "Unable to build a certificate chain up to a trusted list"**
+
+A: The certificate we use to seal the document after inserting the signatures is not on the EU Trust list.
+
+**Q: Does that mean it is less secure?**
+
+A: No, it means the provider (Wisekey) is not on a list maintained by the EU. The cryptographic signature is just as strong as any other
+
+For someone who does not deal with this stuff daily, this can be hard to comprehend. Whether you use a certificate you generated yourself, one generated by a certificate authority (CA) like Wisekey, or one by another on the EU trust list (e.g., Bundesdruckerei), the cryptographic security guaranteeing that the document has not been tampered with is always the same. Many providers like Documenso, DocuSign, PandaDoc, and Digisigner all use this method for their regular plans. That means if you were to run a document signed by them through the validator above, the result would be the same[1]. The interesting question is why? Why do it like this?
+
+## Certificate Infrastructure is broken
+
+While there are some actual expenses involved in providing AES and QES, the blunt reality is that it's just good business to charge for them per signature, making it unsuitable for the "standard offerings"; almost no one has the resources to set this up themselves. While this initial process of becoming a QES-certified entity is really expensive, selling the certificates afterward is very lucrative. This leads to less innovation in the space and only big players providing these high-compliance services. Even certificates only used to seal documents without being QES certified are sold for a large range of prices, and they cost almost nothing to produce.
+
+## Why Though?
+
+**Q: Why do people buy a certificate for money and not just generate one themselves? Isn't the cryptographic security the same?**
+
+A: Self-generated certificates are not recognized for higher-level compliance signatures like QES
+
+**Q: So if you don't need higher-level signatures, you could just generate one yourself?**
+
+A: Yes, you could. Since eIDAS Level 1 does not require a cert, you could use your own.
+
+**Q: Why don't more people?**
+
+A: One reason is that apart from the EU trust list, there are others, like the Adobe trust list. While not legally required, being on that one (like Wisekey) gives you a green checkmark in Adobe PDF, which is how most people check signature validity.
+
+**Q: Not a question, but all of this sounds weird**
+
+A: It is. This is one of the reasons why Documenso exists. We plan to make this easier.
+
+**Q: How?**
+
+A: By explaining and providing easy-to-use tools and eventually free, highly compliant signature certificates for everyone.
+
+Eventually, we plan to start a free certificate authority called Let's Sign, named after another instituion that broke the paid certificate paradigm to the benefit of the internet: [Let's Encrypt](https://letsencrypt.org/).
+
+As always, feel free to connect on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments.
+
+Best from Hamburg\
+Timur
+\
+\
+\
+[1] The signature format (e.g. PKCS7-B) will vary. It's the format what the signature inserted into the document looks like. eIDAS itself does not specifically require any given format, but the PAdES defined by the EU is mostly used by european providers.

apps/marketing/next.config.js

@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const { withContentlayer } = require('next-contentlayer');
+const { withAxiom } = require('next-axiom');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
@@ -21,7 +22,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -95,4 +96,4 @@ const config = {
   },
 };
 
-module.exports = withContentlayer(config);
+module.exports = withAxiom(withContentlayer(config));

apps/marketing/package.json

@@ -19,6 +19,7 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
@@ -26,6 +27,7 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
+    "next-axiom": "^1.1.1",
     "next-contentlayer": "^0.3.4",
     "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",

apps/marketing/src/api/claim-plan/fetcher.ts

@@ -1,4 +1,5 @@
-import { TClaimPlanRequestSchema, ZClaimPlanResponseSchema } from './types';
+import type { TClaimPlanRequestSchema } from './types';
+import { ZClaimPlanResponseSchema } from './types';
 
 export const claimPlan = async ({
   name,

apps/marketing/src/app/(marketing)/layout.tsx

@@ -2,10 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 
-import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
-import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,7 +36,8 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
     <div
       className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
-        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
+        'overflow-y-auto overflow-x-hidden':
+          pathname && !['/singleplayer', '/pricing'].includes(pathname),
       })}
     >
       <div
@@ -47,16 +46,8 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         })}
       >
         {showProfilesAnnouncementBar && (
-          <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
-            <div className="absolute inset-0 -z-[1]">
-              <Image
-                src={launchWeekTwoImage}
-                className="h-full w-full object-cover"
-                alt="Launch Week 2"
-              />
-            </div>
-
-            <div className="text-background text-center text-sm text-white">
+          <div className="relative inline-flex w-full items-center justify-center overflow-hidden bg-[#e7f3df] px-4 py-2.5">
+            <div className="text-black text-center text-sm font-medium">
               Claim your documenso public profile username now!{' '}
               <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
               <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
   data: T;
@@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <span>{extraInfo}</span>
-      </div>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          <span>{extraInfo}</span>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
@@ -56,6 +55,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
             <Bar
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
               dataKey={metricKey as string}
               maxBarSize={60}
               fill="hsl(var(--primary))"

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -5,8 +5,6 @@ import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@@ -49,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
           <PieChart width={400} height={400}>
             <Pie

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
@@ -14,14 +13,17 @@ export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
 export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
   const formattedData = data.map((item) => ({
     amount: Number(item.amount),
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     date: formatMonth(item.date as string),
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />

apps/marketing/src/app/(marketing)/open/metric-card.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type MonthlyCompletedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyCompletedDocumentsChart = ({
+  className,
+  data,
+}: MonthlyCompletedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">New Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">New Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -2,20 +2,23 @@ import type { Metadata } from 'next';
 
 import { z } from 'zod';
 
+import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
-import { MetricCard } from '~/app/(marketing)/open/metric-card';
-import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MetricCard } from './metric-card';
+import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
 import { Typefully } from './typefully';
 
 export const metadata: Metadata = {
@@ -131,16 +134,18 @@ export default async function OpenPage() {
     { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
+    MONTHLY_USERS,
+    MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
     fetchGithubStats(),
     fetchOpenIssues(),
     fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
+    getUserMonthlyGrowth(),
+    getCompletedDocumentsMonthly(),
   ]);
 
-  const MONTHLY_USERS = await getUserMonthlyGrowth();
-
   return (
     <div>
       <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
@@ -161,7 +166,7 @@ export default async function OpenPage() {
           </p>
         </div>
 
-        <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="my-12 grid grid-cols-12 gap-8">
           <div className="col-span-12 grid grid-cols-4 gap-4">
             <MetricCard
               className="col-span-2 lg:col-span-1"
@@ -188,11 +193,57 @@ export default async function OpenPage() {
           <TeamMembers className="col-span-12" />
 
           <SalaryBands className="col-span-12" />
+        </div>
 
+        <h2 className="px-4 text-2xl font-semibold">Finances</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
           <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
           <CapTable className="col-span-12 lg:col-span-6" />
+        </div>
 
+        <h2 className="px-4 text-2xl font-semibold">Community</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="stars"
+            title="GitHub: Total Stars"
+            label="Stars"
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="mergedPRs"
+            title="GitHub: Total Merged PRs"
+            label="Merged PRs"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="forks"
+            title="GitHub: Total Forks"
+            label="Forks"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="openIssues"
+            title="GitHub: Total Open Issues"
+            label="Open Issues"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <Typefully className="col-span-12 lg:col-span-6" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Growth</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
           <BarMetric<EarlyAdoptersType>
             data={EARLY_ADOPTERS_DATA}
             metricKey="earlyAdopters"
@@ -202,57 +253,29 @@ export default async function OpenPage() {
             extraInfo={<OpenPageTooltip />}
           />
 
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="stars"
-            title="Github: Total Stars"
-            label="Stars"
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="mergedPRs"
-            title="Github: Total Merged PRs"
-            label="Merged PRs"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="forks"
-            title="Github: Total Forks"
-            label="Forks"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="openIssues"
-            title="Github: Total Open Issues"
-            label="Open Issues"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
           <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
           <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
 
-          <Typefully className="col-span-12 lg:col-span-6" />
-
-          <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
-            <h2 className="text-2xl font-bold">Where's the rest?</h2>
-
-            <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
-              We're still working on getting all our metrics together. We'll update this page as
-              soon as we have more to share.
-            </p>
-          </div>
+          <MonthlyCompletedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
         </div>
       </div>
 
+      <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+        <h2 className="text-2xl font-bold">Is there more?</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          This page is evolving as we learn what makes a great signing company. We'll update it when
+          we have more to share.
+        </p>
+      </div>
+
       <CallToAction className="mt-12" utmSource="open-page" />
     </div>
   );

apps/marketing/src/app/(marketing)/open/salary-bands.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

apps/marketing/src/app/(marketing)/open/team-members.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Completed Documents</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US'),
+                'Total Completed Documents',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/typefully.tsx

@@ -6,18 +6,19 @@ import Link from 'next/link';
 
 import { FaXTwitter } from 'react-icons/fa6';
 
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type TypefullyProps = HTMLAttributes<HTMLDivElement>;
 
 export const Typefully = ({ className, ...props }: TypefullyProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border py-8 shadow-sm hover:shadow">
-        <div className="flex flex-col items-center gap-y-4 text-center">
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
           <FaXTwitter className="h-12 w-12" />
           <Link href="https://typefully.com/documenso/stats" target="_blank">
             <h1>Documenso on X</h1>

apps/marketing/src/app/(marketing)/oss-friends/container.tsx

@@ -2,13 +2,14 @@
 
 import Link from 'next/link';
 
-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
 
-import { TOSSFriendsSchema } from './schema';
+import type { TOSSFriendsSchema } from './schema';
 
 const ContainerVariants: Variants = {
   initial: {

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

@@ -158,9 +158,11 @@ export const SinglePlayerClient = () => {
     expired: null,
     signedAt: null,
     readStatus: 'OPENED',
+    documentDeletedAt: null,
     signingStatus: 'NOT_SIGNED',
     sendStatus: 'NOT_SENT',
     role: 'SIGNER',
+    authOptions: null,
   };
 
   const onFileDrop = async (file: File) => {
@@ -246,6 +248,7 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
+                  isDocumentPdfLoaded={true}
                 />
               </fieldset>
 

apps/marketing/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { AxiomWebVitals } from 'next-axiom';
 import { PublicEnvScript } from 'next-runtime-env';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
@@ -67,6 +68,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <PublicEnvScript />
       </head>
 
+      <AxiomWebVitals />
+
       <Suspense>
         <PostHogPageview />
       </Suspense>

apps/marketing/src/app/robots.ts

@@ -1,4 +1,4 @@
-import { MetadataRoute } from 'next';
+import type { MetadataRoute } from 'next';
 
 import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
 

apps/marketing/src/app/sitemap.ts

@@ -1,4 +1,4 @@
-import { MetadataRoute } from 'next';
+import type { MetadataRoute } from 'next';
 
 import { allBlogPosts, allGenericPages } from 'contentlayer/generated';
 

apps/marketing/src/components/(marketing)/callout.tsx

@@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}

apps/marketing/src/components/(marketing)/footer.tsx

@@ -13,6 +13,8 @@ import LogoImage from '@documenso/assets/logo.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
+// import { StatusWidgetContainer } from './status-widget-container';
+
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
 const SOCIAL_LINKS = [
@@ -62,6 +64,10 @@ export const Footer = ({ className, ...props }: FooterProps) => {
               </Link>
             ))}
           </div>
+
+          {/* <div className="mt-6">
+            <StatusWidgetContainer />
+          </div> */}
         </div>
 
         <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">

apps/marketing/src/components/(marketing)/hero.tsx

@@ -96,7 +96,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           variants={HeroTitleVariants}
           initial="initial"
           animate="animate"
-          className="text-center text-4xl font-bold leading-tight tracking-tight lg:text-[64px]"
+          className="text-center text-4xl font-bold leading-tight tracking-tight md:text-[48px] lg:text-[64px]"
         >
           Document signing,
           <span className="block" /> finally open source.
@@ -123,7 +123,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
             </Button>
           </Link>
         </motion.div>

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 

apps/marketing/src/components/(marketing)/pricing-table.tsx

@@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <div className="flex items-center justify-center gap-x-6">
+      <div className="bg-background sticky top-32 flex items-center justify-end gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static lg:justify-center">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"
@@ -40,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'MONTHLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -63,7 +63,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'YEARLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
@@ -51,7 +51,7 @@ export const ShareConnectPaidWidgetBento = ({
         <Card className="col-span-2 lg:col-span-1" spotlight>
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
-              <strong className="block">Connections (Soon).</strong>
+              <strong className="block">Connections</strong>
               Create connections and automations with Zapier and more to integrate with your
               favorite tools.
             </p>

apps/marketing/src/components/(marketing)/status-widget-container.tsx

@@ -0,0 +1,21 @@
+// https://github.com/documenso/documenso/pull/1044/files#r1538258462
+import { Suspense } from 'react';
+
+import { StatusWidget } from './status-widget';
+
+export function StatusWidgetContainer() {
+  return (
+    <Suspense fallback={<StatusWidgetFallback />}>
+      <StatusWidget slug="documenso-status" />
+    </Suspense>
+  );
+}
+
+function StatusWidgetFallback() {
+  return (
+    <div className="border-border inline-flex max-w-fit  items-center justify-between space-x-2 rounded-md border border-gray-200 px-2 py-2 pr-3 text-sm">
+      <span className="bg-muted h-2 w-36 animate-pulse rounded-md" />
+      <span className="bg-muted relative inline-flex h-2 w-2 rounded-full" />
+    </div>
+  );
+}

apps/marketing/src/components/(marketing)/status-widget.tsx

@@ -0,0 +1,73 @@
+import { memo, use } from 'react';
+
+import { type Status, getStatus } from '@openstatus/react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+const getStatusLevel = (level: Status) => {
+  return {
+    operational: {
+      label: 'Operational',
+      color: 'bg-green-500',
+      color2: 'bg-green-400',
+    },
+    degraded_performance: {
+      label: 'Degraded Performance',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    partial_outage: {
+      label: 'Partial Outage',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    major_outage: {
+      label: 'Major Outage',
+      color: 'bg-red-500',
+      color2: 'bg-red-400',
+    },
+    unknown: {
+      label: 'Unknown',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+    incident: {
+      label: 'Incident',
+      color: 'bg-yellow-500',
+      color2: 'bg-yellow-400',
+    },
+    under_maintenance: {
+      label: 'Under Maintenance',
+      color: 'bg-gray-500',
+      color2: 'bg-gray-400',
+    },
+  }[level];
+};
+
+export const StatusWidget = memo(function StatusWidget({ slug }: { slug: string }) {
+  const { status } = use(getStatus(slug));
+  const level = getStatusLevel(status);
+
+  return (
+    <a
+      className="border-border inline-flex max-w-fit  items-center justify-between gap-2 space-x-2 rounded-md border border-gray-200 px-3 py-1 text-sm"
+      href="https://status.documenso.com"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="text-sm">{level.label}</p>
+      </div>
+
+      <span className="relative ml-auto flex h-1.5 w-1.5">
+        <span
+          className={cn(
+            'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
+            level.color2,
+          )}
+        />
+        <span className={cn('relative inline-flex h-1.5 w-1.5 rounded-full', level.color)} />
+      </span>
+    </a>
+  );
+});

apps/marketing/src/components/(marketing)/widget.tsx

@@ -346,7 +346,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                   {signatureText && (
                     <p
                       className={cn(
-                        'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
+                        'text-foreground truncate text-4xl font-semibold [font-family:var(--font-caveat)]',
                       )}
                     >
                       {signatureText}
@@ -360,7 +360,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                 >
                   <Input
                     id="signatureText"
-                    className="text-foreground placeholder:text-muted-foreground border-none p-0 text-sm focus-visible:ring-0"
+                    className="text-foreground placeholder:text-muted-foreground truncate border-none p-0 text-sm focus-visible:ring-0"
                     placeholder="Draw or type name here"
                     disabled={isSubmitting}
                     {...register('signatureText', {

apps/marketing/src/components/form/form-error-message.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { FieldError } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
 
 import { cn } from '@documenso/ui/lib/utils';
 

apps/marketing/src/components/ui/background.tsx

@@ -1,4 +1,4 @@
-import { SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
 
 export type BackgroundProps = Omit<SVGAttributes<SVGElement>, 'viewBox'>;
 

apps/marketing/src/providers/next-theme.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { ThemeProviderProps } from 'next-themes/dist/types';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

apps/web/next.config.js

@@ -2,6 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const { version } = require('./package.json');
+const { withAxiom } = require('next-axiom');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
@@ -22,7 +23,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign', 'playwright'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -91,4 +92,4 @@ const config = {
   },
 };
 
-module.exports = config;
+module.exports = withAxiom(config);

apps/web/package.json

@@ -22,7 +22,10 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@simplewebauthn/browser": "^9.0.1",
+    "@simplewebauthn/server": "^9.0.3",
     "@tanstack/react-query": "^4.29.5",
+    "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
@@ -30,8 +33,10 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
+    "next-axiom": "^1.1.1",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
+    "papaparse": "^5.4.1",
     "perfect-freehand": "^1.2.0",
     "posthog-js": "^1.75.3",
     "posthog-node": "^3.1.1",
@@ -51,9 +56,11 @@
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",
+    "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",
+    "@types/papaparse": "^5.3.14",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@types/ua-parser-js": "^0.7.39",

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

@@ -14,6 +14,7 @@ import { LocaleDate } from '~/components/formatter/locale-date';
 
 import { AdminActions } from './admin-actions';
 import { RecipientItem } from './recipient-item';
+import { SuperDeleteDocumentDialog } from './super-delete-document-dialog';
 
 type AdminDocumentDetailsPageProps = {
   params: {
@@ -81,6 +82,10 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
           ))}
         </Accordion>
       </div>
+
+      <hr className="my-4" />
+
+      {document && <SuperDeleteDocumentDialog document={document} />}
     </div>
   );
 }

apps/web/src/app/(dashboard)/admin/documents/[id]/super-delete-document-dialog.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import type { Document } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type SuperDeleteDocumentDialogProps = {
+  document: Document;
+};
+
+export const SuperDeleteDocumentDialog = ({ document }: SuperDeleteDocumentDialogProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const [reason, setReason] = useState('');
+
+  const { mutateAsync: deleteDocument, isLoading: isDeletingDocument } =
+    trpc.admin.deleteDocument.useMutation();
+
+  const handleDeleteDocument = async () => {
+    try {
+      if (!reason) {
+        return;
+      }
+
+      await deleteDocument({ id: document.id, reason });
+
+      toast({
+        title: 'Document deleted',
+        description: 'The Document has been deleted successfully.',
+        duration: 5000,
+      });
+
+      router.push('/admin/documents');
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            err.message ??
+            'We encountered an unknown error while attempting to delete your document. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <Alert
+          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
+          variant="neutral"
+        >
+          <div>
+            <AlertTitle>Delete Document</AlertTitle>
+            <AlertDescription className="mr-2">
+              Delete the document. This action is irreversible so proceed with caution.
+            </AlertDescription>
+          </div>
+
+          <div className="flex-shrink-0">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="destructive">Delete Document</Button>
+              </DialogTrigger>
+
+              <DialogContent>
+                <DialogHeader className="space-y-4">
+                  <DialogTitle>Delete Document</DialogTitle>
+
+                  <Alert variant="destructive">
+                    <AlertDescription className="selection:bg-red-100">
+                      This action is not reversible. Please be certain.
+                    </AlertDescription>
+                  </Alert>
+                </DialogHeader>
+
+                <div>
+                  <DialogDescription>To confirm, please enter the reason</DialogDescription>
+
+                  <Input
+                    className="mt-2"
+                    type="text"
+                    value={reason}
+                    onChange={(e) => setReason(e.target.value)}
+                  />
+                </div>
+
+                <DialogFooter>
+                  <Button
+                    onClick={handleDeleteDocument}
+                    loading={isDeletingDocument}
+                    variant="destructive"
+                    disabled={!reason}
+                  >
+                    {isDeletingDocument ? 'Deleting document...' : 'Delete Document'}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </Alert>
+      </div>
+    </div>
+  );
+};

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

@@ -58,6 +58,7 @@ export const UsersDataTable = ({
         perPage,
       });
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSearchString]);
 
   const onPaginationChange = (page: number, perPage: number) => {

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

@@ -4,13 +4,22 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { Copy, Download, Edit, Loader, MoreHorizontal, Share, Trash2 } from 'lucide-react';
+import {
+  Copy,
+  Download,
+  Edit,
+  Loader,
+  MoreHorizontal,
+  ScrollTextIcon,
+  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 type { Document, Recipient, Team, TeamEmail, User } from '@documenso/prisma/client';
 import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@@ -32,7 +41,7 @@ export type DocumentPageViewDropdownProps = {
     Recipient: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail: TeamEmail | null };
 };
 
 export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDropdownProps) => {
@@ -50,9 +59,10 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
 
   const isOwner = document.User.id === session.user.id;
   const isDraft = document.status === DocumentStatus.DRAFT;
+  const isDeleted = document.deletedAt !== null;
   const isComplete = document.status === DocumentStatus.COMPLETED;
-  const isDocumentDeletable = isOwner;
   const isCurrentTeamDocument = team && document.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
 
@@ -106,12 +116,22 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
           </DropdownMenuItem>
         )}
 
+        <DropdownMenuItem asChild>
+          <Link href={`${documentsPath}/${document.id}/logs`}>
+            <ScrollTextIcon className="mr-2 h-4 w-4" />
+            Audit Log
+          </Link>
+        </DropdownMenuItem>
+
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail) || isDeleted}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -138,15 +158,15 @@ export const DocumentPageViewDropdown = ({ document, team }: DocumentPageViewDro
         />
       </DropdownMenuContent>
 
-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={document.id}
-          status={document.status}
-          documentTitle={document.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={document.id}
+        status={document.status}
+        documentTitle={document.title}
+        open={isDeleteDialogOpen}
+        canManageDocument={canManageDocument}
+        onOpenChange={setDeleteDialogOpen}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={document.id}

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

@@ -8,17 +8,20 @@ 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 { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
+import { getCompletedFieldsForDocument } from '@documenso/lib/server-only/field/get-completed-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 type { Team, TeamEmail } from '@documenso/prisma/client';
+import { Badge } from '@documenso/ui/primitives/badge';
 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 { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentHistorySheet } from '~/components/document/document-history-sheet';
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import {
   DocumentStatus as DocumentStatusComponent,
   FRIENDLY_STATUS_MAP,
@@ -34,7 +37,7 @@ export type DocumentPageViewProps = {
   params: {
     id: string;
   };
-  team?: Team;
+  team?: Team & { teamEmail: TeamEmail | null };
 };
 
 export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
@@ -83,11 +86,16 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     documentMeta.password = securePassword;
   }
 
-  const recipients = await getRecipientsForDocument({
-    documentId,
-    teamId: team?.id,
-    userId: user.id,
-  });
+  const [recipients, completedFields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      teamId: team?.id,
+      userId: user.id,
+    }),
+    getCompletedFieldsForDocument({
+      documentId,
+    }),
+  ]);
 
   const documentWithRecipients = {
     ...document,
@@ -118,11 +126,17 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
               <div className="text-muted-foreground flex items-center">
                 <Users2 className="mr-2 h-5 w-5" />
 
-                <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
                   <span>{recipients.length} Recipient(s)</span>
                 </StackAvatarsWithTooltip>
               </div>
             )}
+
+            {document.deletedAt && <Badge variant="destructive">Document deleted</Badge>}
           </div>
         </div>
 
@@ -148,6 +162,13 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
           </CardContent>
         </Card>
 
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields
+            fields={completedFields}
+            documentMeta={document.documentMeta || undefined}
+          />
+        )}
+
         <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">

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

@@ -1,29 +1,25 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
 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';
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
+import type { DocumentWithDetails } from '@documenso/prisma/types/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add-fields';
 import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
+import { AddSettingsFormPartial } from '@documenso/ui/primitives/document-flow/add-settings';
+import type { TAddSettingsFormSchema } from '@documenso/ui/primitives/document-flow/add-settings.types';
 import { AddSignersFormPartial } from '@documenso/ui/primitives/document-flow/add-signers';
 import type { TAddSignersFormSchema } from '@documenso/ui/primitives/document-flow/add-signers.types';
 import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/add-subject';
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
-import { AddTitleFormPartial } from '@documenso/ui/primitives/document-flow/add-title';
-import type { TAddTitleFormSchema } from '@documenso/ui/primitives/document-flow/add-title.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -34,27 +30,19 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditDocumentFormProps = {
   className?: string;
-  user: User;
-  document: DocumentWithData;
-  recipients: Recipient[];
-  documentMeta: DocumentMeta | null;
-  fields: Field[];
-  documentData: DocumentData;
+  initialDocument: DocumentWithDetails;
   documentRootPath: string;
+  isDocumentEnterprise: boolean;
 };
 
-type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
-const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'subject'];
+type EditDocumentStep = 'settings' | 'signers' | 'fields' | 'subject';
+const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields', 'subject'];
 
 export const EditDocumentForm = ({
   className,
-  document,
-  recipients,
-  fields,
-  documentMeta,
-  user: _user,
-  documentData,
+  initialDocument,
   documentRootPath,
+  isDocumentEnterprise,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
 
@@ -62,17 +50,83 @@ export const EditDocumentForm = ({
   const searchParams = useSearchParams();
   const team = useOptionalCurrentTeam();
 
-  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
-  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
-  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const { data: document, refetch: refetchDocument } =
+    trpc.document.getDocumentWithDetailsById.useQuery(
+      {
+        id: initialDocument.id,
+        teamId: team?.id,
+      },
+      {
+        initialData: initialDocument,
+        ...SKIP_QUERY_BATCH_META,
+      },
+    );
+
+  const { Recipient: recipients, Field: fields } = document;
+
+  const { mutateAsync: setSettingsForDocument } = trpc.document.setSettingsForDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newFields) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), Field: newFields }),
+      );
+    },
+  });
+
+  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newRecipients) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), Recipient: newRecipients }),
+      );
+    },
+  });
+
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
   const { mutateAsync: setPasswordForDocument } =
     trpc.document.setPasswordForDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
-    title: {
-      title: 'Add Title',
-      description: 'Add the title to the document.',
+    settings: {
+      title: 'General',
+      description: 'Configure general settings for the document.',
       stepIndex: 1,
     },
     signers: {
@@ -96,8 +150,7 @@ export const EditDocumentForm = ({
     // 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';
+    let initialStep: EditDocumentStep = 'settings';
 
     if (
       searchParamStep &&
@@ -110,15 +163,26 @@ export const EditDocumentForm = ({
     return initialStep;
   });
 
-  const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
+  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
     try {
-      // Custom invocation server action
-      await addTitle({
+      const { timezone, dateFormat, redirectUrl } = data.meta;
+
+      await setSettingsForDocument({
         documentId: document.id,
         teamId: team?.id,
-        title: data.title,
+        data: {
+          title: data.title,
+          globalAccessAuth: data.globalAccessAuth ?? null,
+          globalActionAuth: data.globalActionAuth ?? null,
+        },
+        meta: {
+          timezone,
+          dateFormat,
+          redirectUrl,
+        },
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
 
       setStep('signers');
@@ -127,7 +191,7 @@ export const EditDocumentForm = ({
 
       toast({
         title: 'Error',
-        description: 'An error occurred while updating title.',
+        description: 'An error occurred while updating the document settings.',
         variant: 'destructive',
       });
     }
@@ -135,14 +199,19 @@ export const EditDocumentForm = ({
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
-      // Custom invocation server action
       await addSigners({
         documentId: document.id,
         teamId: team?.id,
-        signers: data.signers,
+        signers: data.signers.map((signer) => ({
+          ...signer,
+          // Explicitly set to null to indicate we want to remove auth if required.
+          actionAuth: signer.actionAuth || null,
+        })),
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
+
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -157,13 +226,14 @@ export const EditDocumentForm = ({
 
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
-      // Custom invocation server action
       await addFields({
         documentId: document.id,
         fields: data.fields,
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
+
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -177,7 +247,7 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
+    const { subject, message } = data.meta;
 
     try {
       await sendDocument({
@@ -186,9 +256,6 @@ export const EditDocumentForm = ({
         meta: {
           subject,
           message,
-          dateFormat,
-          timezone,
-          redirectUrl,
         },
       });
 
@@ -219,6 +286,15 @@ export const EditDocumentForm = ({
 
   const currentDocumentFlow = documentFlow[step];
 
+  /**
+   * Refresh the data in the background when steps change.
+   */
+  useEffect(() => {
+    void refetchDocument();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -227,11 +303,12 @@ export const EditDocumentForm = ({
       >
         <CardContent className="p-2">
           <LazyPDFViewer
-            key={documentData.id}
-            documentData={documentData}
+            key={document.documentData.id}
+            documentData={document.documentData}
             document={document}
-            password={documentMeta?.password}
+            password={document.documentMeta?.password}
             onPasswordSubmit={onPasswordSubmit}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>
       </Card>
@@ -245,30 +322,35 @@ export const EditDocumentForm = ({
             currentStep={currentDocumentFlow.stepIndex}
             setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
           >
-            <AddTitleFormPartial
+            <AddSettingsFormPartial
               key={recipients.length}
-              documentFlow={documentFlow.title}
+              documentFlow={documentFlow.settings}
               document={document}
               recipients={recipients}
               fields={fields}
-              onSubmit={onAddTitleFormSubmit}
+              isDocumentEnterprise={isDocumentEnterprise}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onAddSettingsFormSubmit}
             />
-
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
-              document={document}
               recipients={recipients}
               fields={fields}
+              isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
+
             <AddFieldsFormPartial
               key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
+
             <AddSubjectFormPartial
               key={recipients.length}
               documentFlow={documentFlow.subject}
@@ -276,6 +358,7 @@ export const EditDocumentForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSubjectFormSubmit}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
           </Stepper>
         </DocumentFlowFormContainer>

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

@@ -3,11 +3,10 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 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 { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
@@ -37,13 +36,18 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
   const { user } = await getRequiredServerComponentSession();
 
-  const document = await getDocumentById({
+  const isDocumentEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  const document = await getDocumentWithDetailsById({
     id: documentId,
     userId: user.id,
     teamId: team?.id,
   }).catch(() => null);
 
-  if (!document || !document.documentData) {
+  if (!document) {
     redirect(documentRootPath);
   }
 
@@ -51,7 +55,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     redirect(`${documentRootPath}/${documentId}`);
   }
 
-  const { documentData, documentMeta } = document;
+  const { documentMeta, Recipient: recipients } = document;
 
   if (documentMeta?.password) {
     const key = DOCUMENSO_ENCRYPTION_KEY;
@@ -70,18 +74,6 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     documentMeta.password = securePassword;
   }
 
-  const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-      teamId: team?.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">
@@ -100,7 +92,11 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
+            <StackAvatarsWithTooltip
+              recipients={recipients}
+              documentStatus={document.status}
+              position="bottom"
+            >
               <span>{recipients.length} Recipient(s)</span>
             </StackAvatarsWithTooltip>
           </div>
@@ -108,14 +104,10 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
       </div>
 
       <EditDocumentForm
-        className="mt-8"
-        document={document}
-        user={user}
-        documentMeta={documentMeta}
-        recipients={recipients}
-        fields={fields}
-        documentData={documentData}
+        className="mt-6"
+        initialDocument={document}
         documentRootPath={documentRootPath}
+        isDocumentEnterprise={isDocumentEnterprise}
       />
     </div>
   );

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

@@ -2,6 +2,8 @@ import Link from 'next/link';
 
 import { ChevronLeft, Loader } from 'lucide-react';
 
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+
 export default function Loading() {
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
@@ -13,7 +15,12 @@ export default function Loading() {
       <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
         Loading Document...
       </h1>
-      <div className="mt-8 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
+
+      <div className="flex h-10 items-center">
+        <Skeleton className="my-6 h-4 w-24 rounded-2xl" />
+      </div>
+
+      <div className="mt-4 grid h-[80vh] max-h-[60rem] w-full grid-cols-12 gap-x-8">
         <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
           <div className="flex h-[80vh] max-h-[60rem] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />

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

@@ -1,19 +1,25 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft, DownloadIcon } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
+import { DateTime } from 'luxon';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Recipient, Team } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
 import { Card } from '@documenso/ui/primitives/card';
 
-import { FRIENDLY_STATUS_MAP } from '~/components/formatter/document-status';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/formatter/document-status';
 
 import { DocumentLogsDataTable } from './document-logs-data-table';
+import { DownloadAuditLogButton } from './download-audit-log-button';
+import { DownloadCertificateButton } from './download-certificate-button';
 
 export type DocumentLogsPageViewProps = {
   params: {
@@ -23,6 +29,8 @@ export type DocumentLogsPageViewProps = {
 };
 
 export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
+  const locale = getLocale();
+
   const { id } = params;
 
   const documentId = Number(id);
@@ -67,15 +75,21 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     },
     {
       description: 'Created by',
-      value: document.User.name ?? document.User.email,
+      value: document.User.name
+        ? `${document.User.name} (${document.User.email})`
+        : document.User.email,
     },
     {
       description: 'Date created',
-      value: document.createdAt.toISOString(),
+      value: DateTime.fromJSDate(document.createdAt)
+        .setLocale(locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
       description: 'Last updated',
-      value: document.updatedAt.toISOString(),
+      value: DateTime.fromJSDate(document.updatedAt)
+        .setLocale(locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
       description: 'Time zone',
@@ -90,7 +104,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
       text = `${recipient.name} (${recipient.email})`;
     }
 
-    return `${text} - ${recipient.role}`;
+    return `[${recipient.role}] ${text}`;
   };
 
   return (
@@ -104,20 +118,28 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
       </Link>
 
       <div className="flex flex-col justify-between sm:flex-row">
-        <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {document.title}
-        </h1>
+        <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">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
+          </div>
+        </div>
 
         <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-          <Button variant="outline" className="mr-2 w-full sm:w-auto">
-            <DownloadIcon className="mr-1.5 h-4 w-4" />
-            Download certificate
-          </Button>
+          <DownloadCertificateButton
+            className="mr-2"
+            documentId={document.id}
+            documentStatus={document.status}
+          />
 
-          <Button className="w-full sm:w-auto">
-            <DownloadIcon className="mr-1.5 h-4 w-4" />
-            Download PDF
-          </Button>
+          <DownloadAuditLogButton documentId={document.id} />
         </div>
       </div>
 

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

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

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

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

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

@@ -15,7 +15,6 @@ import {
   Pencil,
   Share,
   Trash2,
-  XCircle,
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
@@ -45,7 +44,7 @@ export type DataTableActionDropdownProps = {
     Recipient: Recipient[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };
 
 export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownProps) => {
@@ -67,8 +66,8 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
   // const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
-  const isDocumentDeletable = isOwner;
   const isCurrentTeamDocument = team && row.team?.url === team.url;
+  const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
 
@@ -107,14 +106,14 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger data-testid="document-table-action-btn">
         <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        {recipient && recipient?.role !== RecipientRole.CC && (
+        {!isDraft && recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
             <Link href={`/sign/${recipient?.token}`}>
               {recipient?.role === RecipientRole.VIEWER && (
@@ -141,7 +140,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           </DropdownMenuItem>
         )}
 
-        <DropdownMenuItem disabled={(!isOwner && !isCurrentTeamDocument) || isComplete} asChild>
+        <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
           <Link href={`${documentsPath}/${row.id}/edit`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
@@ -158,14 +157,18 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        {/* No point displaying this if there's no functionality. */}
+        {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />
           Void
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
+        <DropdownMenuItem
+          onClick={() => setDeleteDialogOpen(true)}
+          disabled={Boolean(!canManageDocument && team?.teamEmail)}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
-          Delete
+          {canManageDocument ? 'Delete' : 'Hide'}
         </DropdownMenuItem>
 
         <DropdownMenuLabel>Share</DropdownMenuLabel>
@@ -186,16 +189,16 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         />
       </DropdownMenuContent>
 
-      {isDocumentDeletable && (
-        <DeleteDocumentDialog
-          id={row.id}
-          status={row.status}
-          documentTitle={row.title}
-          open={isDeleteDialogOpen}
-          onOpenChange={setDeleteDialogOpen}
-          teamId={team?.id}
-        />
-      )}
+      <DeleteDocumentDialog
+        id={row.id}
+        status={row.status}
+        documentTitle={row.title}
+        open={isDeleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        teamId={team?.id}
+        canManageDocument={canManageDocument}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={row.id}

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

@@ -29,7 +29,7 @@ export type DocumentsDataTableProps = {
     }
   >;
   showSenderColumn?: boolean;
-  team?: Pick<Team, 'id' | 'url'>;
+  team?: Pick<Team, 'id' | 'url'> & { teamEmail?: string };
 };
 
 export const DocumentsDataTable = ({
@@ -76,7 +76,12 @@ export const DocumentsDataTable = ({
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
+            cell: ({ row }) => (
+              <StackAvatarsWithTooltip
+                recipients={row.original.Recipient}
+                documentStatus={row.original.status}
+              />
+            ),
           },
           {
             header: 'Status',