v1.12.0-rc.0

Adds password reauthentication to our existing reauth providers,
additionally swaps from an exclusive provider to an inclusive type where
multiple methods can be selected to offer a this or that experience.

.github/workflows/e2e-tests.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Build app
         run: npm run build
 
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
       - name: Run Playwright tests
         run: npm run ci
         env:

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npm run commitlint -- $1

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
 MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
 

.npmrc

@@ -1 +1,3 @@
 auto-install-peers = true
+legacy-peer-deps = true
+prefer-dedupe = true

apps/documentation/next.config.js

@@ -1,3 +1,5 @@
+import nextra from 'nextra';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: [
@@ -9,9 +11,10 @@ const nextConfig = {
   ],
 };
 
-const withNextra = require('nextra')({
+const withNextra = nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
+  codeHighlight: true,
 });
 
-module.exports = withNextra(nextConfig);
+export default withNextra(nextConfig);

apps/documentation/package.json

@@ -15,7 +15,7 @@
     "@documenso/tailwind-config": "*",
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
-    "next": "14.2.6",
+    "next": "14.2.28",
     "next-plausible": "^3.12.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",

apps/documentation/pages/developers/embedding/_meta.json

@@ -6,5 +6,6 @@
   "solid": "Solid Integration",
   "preact": "Preact Integration",
   "angular": "Angular Integration",
-  "css-variables": "CSS Variables"
-}
+  "css-variables": "CSS Variables",
+  "authoring": "Authoring"
+}

apps/documentation/pages/developers/embedding/authoring.mdx

@@ -0,0 +1,167 @@
+---
+title: Authoring
+description: Learn how to use embedded authoring to create documents and templates in your application
+---
+
+# Embedded Authoring
+
+In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation directly within your application.
+
+## How Embedded Authoring Works
+
+The embedded authoring feature enables your users to create new documents without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.
+
+## Creating Documents with Embedded Authoring
+
+To implement document creation in your application, use the `EmbedCreateDocument` component from our SDK:
+
+```jsx
+import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+
+const DocumentCreator = () => {
+  // You'll need to obtain a presign token using your API key
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateDocument
+        presignToken={presignToken}
+        externalId="order-12345"
+        onDocumentCreated={(data) => {
+          console.log('Document created with ID:', data.documentId);
+          console.log('External reference ID:', data.externalId);
+        }}
+      />
+    </div>
+  );
+};
+```
+
+## Obtaining a Presign Token
+
+Before using the `EmbedCreateDocument` component, you'll need to obtain a presign token from your backend. This token authorizes the embedding session.
+
+You can create a presign token by making a request to:
+
+```
+POST /api/v2-beta/embedding/create-presign-token
+```
+
+This API endpoint requires authentication with your Documenso API key. The token has a default expiration of 1 hour, but you can customize this duration based on your security requirements.
+
+You can find more details on this request at our [API Documentation](https://openapi.documenso.com/reference#tag/embedding)
+
+## Configuration Options
+
+The `EmbedCreateDocument` component accepts several configuration options:
+
+| Option             | Type    | Description                                                        |
+| ------------------ | ------- | ------------------------------------------------------------------ |
+| `presignToken`     | string  | **Required**. The authentication token for the embedding session.  |
+| `externalId`       | string  | Optional reference ID from your system to link with the document.  |
+| `host`             | string  | Optional custom host URL. Defaults to `https://app.documenso.com`. |
+| `css`              | string  | Optional custom CSS to style the embedded component.               |
+| `cssVars`          | object  | Optional CSS variables for colors, spacing, and more.              |
+| `darkModeDisabled` | boolean | Optional flag to disable dark mode.                                |
+| `className`        | string  | Optional CSS class name for the iframe.                            |
+
+## Feature Toggles
+
+You can customize the authoring experience by enabling or disabling specific features:
+
+```jsx
+<EmbedCreateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  features={{
+    allowConfigureSignatureTypes: true,
+    allowConfigureLanguage: true,
+    allowConfigureDateFormat: true,
+    allowConfigureTimezone: true,
+    allowConfigureRedirectUrl: true,
+    allowConfigureCommunication: true,
+  }}
+/>
+```
+
+## Handling Document Creation Events
+
+The `onDocumentCreated` callback is triggered when a document is successfully created, providing both the document ID and your external reference ID:
+
+```jsx
+<EmbedCreateDocument
+  presignToken="YOUR_PRESIGN_TOKEN"
+  externalId="order-12345"
+  onDocumentCreated={(data) => {
+    // Navigate to a success page
+    navigate(`/documents/success?id=${data.documentId}`);
+
+    // Or update your database with the document ID
+    updateOrderDocument(data.externalId, data.documentId);
+  }}
+/>
+```
+
+## Styling the Embedded Component
+
+You can customize the appearance of the embedded component using standard CSS classes:
+
+```jsx
+<EmbedCreateDocument
+  className="h-screen w-full rounded-lg border-none shadow-md"
+  presignToken="YOUR_PRESIGN_TOKEN"
+  css={`
+    .documenso-embed {
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  `}
+  cssVars={{
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
+  }}
+/>
+```
+
+## Complete Integration Example
+
+Here's a complete example of integrating document creation in a React application:
+
+```tsx
+import { useState } from 'react';
+
+import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
+
+function DocumentCreator() {
+  // In a real application, you would fetch this token from your backend
+  // using your API key at /api/v2-beta/embedding/create-presign-token
+  const presignToken = 'YOUR_PRESIGN_TOKEN';
+  const [documentId, setDocumentId] = useState<number | null>(null);
+
+  if (documentId) {
+    return (
+      <div>
+        <h2>Document Created Successfully!</h2>
+        <p>Document ID: {documentId}</p>
+        <button onClick={() => setDocumentId(null)}>Create Another Document</button>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: '800px', width: '100%' }}>
+      <EmbedCreateDocument
+        presignToken={presignToken}
+        externalId="order-12345"
+        onDocumentCreated={(data) => {
+          setDocumentId(data.documentId);
+        }}
+      />
+    </div>
+  );
+}
+
+export default DocumentCreator;
+```
+
+With embedded authoring, your users can seamlessly create documents within your application, enhancing the overall user experience and streamlining document workflows.

apps/documentation/pages/developers/embedding/index.mdx

@@ -169,6 +169,19 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
 
 If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.
 
+## Embedded Authoring
+
+In addition to embedding signing experiences, Documenso now supports **embedded authoring**, allowing your users to create documents and templates directly within your application.
+
+With embedded authoring, you can:
+
+- Create new documents with custom fields
+- Configure document properties and settings
+- Set up recipients and signing workflows
+- Customize the authoring experience
+
+For detailed implementation instructions and code examples, see our [Embedded Authoring](/developers/embedding/authoring) guide.
+
 ## Related
 
 - [React Integration](/developers/embedding/react)
@@ -178,3 +191,4 @@ If you're using **web components**, the integration process is slightly differen
 - [Preact Integration](/developers/embedding/preact)
 - [Angular Integration](/developers/embedding/angular)
 - [CSS Variables](/developers/embedding/css-variables)
+- [Embedded Authoring](/developers/embedding/authoring)

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

@@ -532,3 +532,93 @@ Replace the `text` value with the corresponding field type:
 - For the `SELECT` field it should be `select`. (check this before merge)
 
 You must pass this property at all times, even if you don't need to set any other properties. If you don't, the endpoint will throw an error.
+
+## Pre-fill Fields On Document Creation
+
+The API allows you to pre-fill fields on document creation. This is useful when you want to create a document from an existing template and pre-fill the fields with specific values.
+
+To pre-fill a field, you need to make a `POST` request to the `/api/v1/templates/{templateId}/generate-document` endpoint with the field information. Here's an example:
+
+```json
+{
+  "title": "my-document.pdf",
+  "recipients": [
+    {
+      "id": 3,
+      "name": "Example User",
+      "email": "example@documenso.com",
+      "signingOrder": 1,
+      "role": "SIGNER"
+    }
+  ],
+  "prefillFields": [
+    {
+      "id": 21,
+      "type": "text",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "my-value"
+    },
+    {
+      "id": 22,
+      "type": "number",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "123"
+    },
+    {
+      "id": 23,
+      "type": "checkbox",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": ["option-1", "option-2"]
+    }
+  ]
+}
+```
+
+Check out the endpoint in the [API V1 documentation](https://app.documenso.com/api/v1/openapi#:~:text=/%7BtemplateId%7D/-,generate,-%2Ddocument).
+
+### API V2
+
+For API V2, you need to make a `POST` request to the `/api/v2-beta/template/use` endpoint with the field(s) information. Here's an example:
+
+```json
+{
+  "templateId": 111,
+  "recipients": [
+    {
+      "id": 3,
+      "name": "Example User",
+      "email": "example@documenso.com",
+      "signingOrder": 1,
+      "role": "SIGNER"
+    }
+  ],
+  "prefillFields": [
+    {
+      "id": 21,
+      "type": "text",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "my-value"
+    },
+    {
+      "id": 22,
+      "type": "number",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": "123"
+    },
+    {
+      "id": 23,
+      "type": "checkbox",
+      "label": "my-label",
+      "placeholder": "my-placeholder",
+      "value": ["option-1", "option-2"]
+    }
+  ]
+}
+```
+
+Check out the endpoint in the [API V2 documentation](https://openapi.documenso.com/reference#tag/template/POST/template/use).

apps/documentation/providers/plausible.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 import NextPlausibleProvider from 'next-plausible';

apps/documentation/theme.config.tsx

@@ -19,6 +19,22 @@ const themeConfig: DocsThemeConfig = {
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            !function(){
+             if (location.hostname === 'localhost') return;
+              var e="6c236490c9a68c1",
+                  t=function(){Reo.init({ clientID: e })},
+                  n=document.createElement("script");
+              n.src="https://static.reo.dev/"+e+"/reo.js";
+              n.defer=true;
+              n.onload=t;
+              document.head.appendChild(n);
+            }();
+          `,
+          }}
+        />
       </>
     );
   },

apps/openpage-api/lib/add-zero-month.ts

@@ -0,0 +1,54 @@
+import { DateTime } from 'luxon';
+
+export interface TransformedData {
+  labels: string[];
+  datasets: Array<{
+    label: string;
+    data: number[];
+  }>;
+}
+
+export function addZeroMonth(transformedData: TransformedData): TransformedData {
+  const result = {
+    labels: [...transformedData.labels],
+    datasets: transformedData.datasets.map((dataset) => ({
+      label: dataset.label,
+      data: [...dataset.data],
+    })),
+  };
+
+  if (result.labels.length === 0) {
+    return result;
+  }
+
+  if (result.datasets.every((dataset) => dataset.data[0] === 0)) {
+    return result;
+  }
+
+  try {
+    let firstMonth = DateTime.fromFormat(result.labels[0], 'MMM yyyy');
+    if (!firstMonth.isValid) {
+      const formats = ['MMM yyyy', 'MMMM yyyy', 'MM/yyyy', 'yyyy-MM'];
+
+      for (const format of formats) {
+        firstMonth = DateTime.fromFormat(result.labels[0], format);
+        if (firstMonth.isValid) break;
+      }
+
+      if (!firstMonth.isValid) {
+        console.warn(`Could not parse date: "${result.labels[0]}"`);
+        return transformedData;
+      }
+    }
+
+    const zeroMonth = firstMonth.minus({ months: 1 }).toFormat('MMM yyyy');
+    result.labels.unshift(zeroMonth);
+    result.datasets.forEach((dataset) => {
+      dataset.data.unshift(0);
+    });
+
+    return result;
+  } catch (error) {
+    return transformedData;
+  }
+}

apps/openpage-api/lib/growth/get-monthly-completed-document.ts

@@ -3,6 +3,8 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
+import { addZeroMonth } from '../add-zero-month';
+
 export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('Document')
@@ -35,7 +37,7 @@ export const getCompletedDocumentsMonthly = async (type: 'count' | 'cumulative'
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetCompletedDocumentsMonthlyResult = Awaited<

apps/openpage-api/lib/growth/get-signer-conversion.ts

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
+import { addZeroMonth } from '../add-zero-month';
+
 export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('Recipient')
@@ -34,7 +36,7 @@ export const getSignerConversionMonthly = async (type: 'count' | 'cumulative' =
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetSignerConversionMonthlyResult = Awaited<

apps/openpage-api/lib/growth/get-user-monthly-growth.ts

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 
 import { kyselyPrisma, sql } from '@documenso/prisma';
 
+import { addZeroMonth } from '../add-zero-month';
+
 export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count') => {
   const qb = kyselyPrisma.$kysely
     .selectFrom('User')
@@ -32,7 +34,7 @@ export const getUserMonthlyGrowth = async (type: 'count' | 'cumulative' = 'count
     ],
   };
 
-  return transformedData;
+  return addZeroMonth(transformedData);
 };
 
 export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

apps/openpage-api/lib/transform-data.ts

@@ -1,5 +1,7 @@
 import { DateTime } from 'luxon';
 
+import { addZeroMonth } from './add-zero-month';
+
 type MetricKeys = {
   stars: number;
   forks: number;
@@ -37,31 +39,77 @@ export function transformData({
   data: DataEntry;
   metric: MetricKey;
 }): TransformData {
-  const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
-    const [yearA, monthA] = dateA.split('-').map(Number);
-    const [yearB, monthB] = dateB.split('-').map(Number);
+  try {
+    if (!data || Object.keys(data).length === 0) {
+      return {
+        labels: [],
+        datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
+      };
+    }
 
-    return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
-  });
+    const sortedEntries = Object.entries(data).sort(([dateA], [dateB]) => {
+      try {
+        const [yearA, monthA] = dateA.split('-').map(Number);
+        const [yearB, monthB] = dateB.split('-').map(Number);
 
-  const labels = sortedEntries.map(([date]) => {
-    const [year, month] = date.split('-');
-    const dateTime = DateTime.fromObject({
-      year: Number(year),
-      month: Number(month),
+        if (isNaN(yearA) || isNaN(monthA) || isNaN(yearB) || isNaN(monthB)) {
+          console.warn(`Invalid date format: ${dateA} or ${dateB}`);
+          return 0;
+        }
+
+        return DateTime.local(yearA, monthA).toMillis() - DateTime.local(yearB, monthB).toMillis();
+      } catch (error) {
+        console.error('Error sorting entries:', error);
+        return 0;
+      }
     });
-    return dateTime.toFormat('MMM yyyy');
-  });
 
-  return {
-    labels,
-    datasets: [
-      {
-        label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
-        data: sortedEntries.map(([_, stats]) => stats[metric]),
-      },
-    ],
-  };
+    const labels = sortedEntries.map(([date]) => {
+      try {
+        const [year, month] = date.split('-');
+
+        if (!year || !month || isNaN(Number(year)) || isNaN(Number(month))) {
+          console.warn(`Invalid date format: ${date}`);
+          return date;
+        }
+
+        const dateTime = DateTime.fromObject({
+          year: Number(year),
+          month: Number(month),
+        });
+
+        if (!dateTime.isValid) {
+          console.warn(`Invalid DateTime object for: ${date}`);
+          return date;
+        }
+
+        return dateTime.toFormat('MMM yyyy');
+      } catch (error) {
+        console.error('Error formatting date:', error, date);
+        return date;
+      }
+    });
+
+    const transformedData = {
+      labels,
+      datasets: [
+        {
+          label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`,
+          data: sortedEntries.map(([_, stats]) => {
+            const value = stats[metric];
+            return typeof value === 'number' && !isNaN(value) ? value : 0;
+          }),
+        },
+      ],
+    };
+
+    return addZeroMonth(transformedData);
+  } catch (error) {
+    return {
+      labels: [],
+      datasets: [{ label: `Total ${FRIENDLY_METRIC_NAMES[metric]}`, data: [] }],
+    };
+  }
 }
 
 // To be on the safer side

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.5.0",
-    "next": "14.2.6"
+    "next": "14.2.28"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
@@ -55,6 +57,8 @@ export function AssistantConfirmationDialog({
   allowDictateNextSigner = false,
   defaultNextSigner,
 }: ConfirmationDialogProps) {
+  const [isEditingNextSigner, setIsEditingNextSigner] = useState(false);
+
   const form = useForm<TNextSignerFormSchema>({
     resolver: zodResolver(ZNextSignerFormSchema),
     defaultValues: {
@@ -107,53 +111,72 @@ export function AssistantConfirmationDialog({
 
               <div className="mt-4 flex flex-col gap-4">
                 {allowDictateNextSigner && (
-                  <div className="my-2">
-                    <p className="text-muted-foreground mb-1 text-sm font-semibold">
-                      The next recipient to sign this document will be{' '}
-                    </p>
+                  <div className="mt-4 flex flex-col gap-4">
+                    {!isEditingNextSigner && (
+                      <div>
+                        <p className="text-muted-foreground text-sm">
+                          The next recipient to sign this document will be{' '}
+                          <span className="font-semibold">{form.watch('name')}</span> (
+                          <span className="font-semibold">{form.watch('email')}</span>).
+                        </p>
 
-                    <div className="flex flex-col gap-4 rounded-xl border p-4 md:flex-row">
-                      <FormField
-                        control={form.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Name</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                className="mt-2"
-                                placeholder="Enter the next signer's name"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
+                        <Button
+                          type="button"
+                          className="mt-2"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setIsEditingNextSigner((prev) => !prev)}
+                        >
+                          <Trans>Update Recipient</Trans>
+                        </Button>
+                      </div>
+                    )}
 
-                      <FormField
-                        control={form.control}
-                        name="email"
-                        render={({ field }) => (
-                          <FormItem className="flex-1">
-                            <FormLabel>
-                              <Trans>Email</Trans>
-                            </FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                type="email"
-                                className="mt-2"
-                                placeholder="Enter the next signer's email"
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
+                    {isEditingNextSigner && (
+                      <div className="flex flex-col gap-4 md:flex-row">
+                        <FormField
+                          control={form.control}
+                          name="name"
+                          render={({ field }) => (
+                            <FormItem className="flex-1">
+                              <FormLabel>
+                                <Trans>Name</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  className="mt-2"
+                                  placeholder="Enter the next signer's name"
+                                />
+                              </FormControl>
+
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name="email"
+                          render={({ field }) => (
+                            <FormItem className="flex-1">
+                              <FormLabel>
+                                <Trans>Email</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  {...field}
+                                  type="email"
+                                  className="mt-2"
+                                  placeholder="Enter the next signer's email"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    )}
                   </div>
                 )}
 

apps/remix/app/components/dialogs/document-move-to-folder-dialog.tsx

@@ -0,0 +1,216 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type DocumentMoveToFolderDialogProps = {
+  documentId: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentFolderId?: string;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZMoveDocumentFormSchema = z.object({
+  folderId: z.string().nullable().optional(),
+});
+
+type TMoveDocumentFormSchema = z.infer<typeof ZMoveDocumentFormSchema>;
+
+export const DocumentMoveToFolderDialog = ({
+  documentId,
+  open,
+  onOpenChange,
+  currentFolderId,
+  ...props
+}: DocumentMoveToFolderDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const team = useOptionalCurrentTeam();
+
+  const form = useForm<TMoveDocumentFormSchema>({
+    resolver: zodResolver(ZMoveDocumentFormSchema),
+    defaultValues: {
+      folderId: currentFolderId,
+    },
+  });
+
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
+    {
+      parentId: currentFolderId,
+      type: FolderType.DOCUMENT,
+    },
+    {
+      enabled: open,
+    },
+  );
+
+  const { mutateAsync: moveDocumentToFolder } = trpc.folder.moveDocumentToFolder.useMutation();
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    } else {
+      form.reset({ folderId: currentFolderId });
+    }
+  }, [open, currentFolderId, form]);
+
+  const onSubmit = async (data: TMoveDocumentFormSchema) => {
+    try {
+      await moveDocumentToFolder({
+        documentId,
+        folderId: data.folderId ?? null,
+      });
+
+      toast({
+        title: _(msg`Document moved`),
+        description: _(msg`The document has been moved successfully.`),
+        variant: 'default',
+      });
+
+      onOpenChange(false);
+
+      const documentsPath = formatDocumentsPath(team?.url);
+
+      if (data.folderId) {
+        void navigate(`${documentsPath}/f/${data.folderId}`);
+      } else {
+        void navigate(documentsPath);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`The folder you are trying to move the document to does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while moving the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Move Document to Folder</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Select a folder to move this document to.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="folderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Folder</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <div className="space-y-2">
+                      {isFoldersLoading ? (
+                        <div className="flex h-10 items-center justify-center">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      ) : (
+                        <>
+                          <Button
+                            type="button"
+                            variant={field.value === null ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(null)}
+                            disabled={currentFolderId === null}
+                          >
+                            <HomeIcon className="mr-2 h-4 w-4" />
+                            <Trans>Root (No Folder)</Trans>
+                          </Button>
+
+                          {folders?.data.map((folder) => (
+                            <Button
+                              key={folder.id}
+                              type="button"
+                              variant={field.value === folder.id ? 'default' : 'outline'}
+                              className="w-full justify-start"
+                              onClick={() => field.onChange(folder.id)}
+                              disabled={currentFolderId === folder.id}
+                            >
+                              <FolderIcon className="mr-2 h-4 w-4" />
+                              {folder.name}
+                            </Button>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                disabled={
+                  isFoldersLoading || form.formState.isSubmitting || currentFolderId === null
+                }
+              >
+                <Trans>Move</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -4,14 +4,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Team } from '@prisma/client';
-import { type Document, type Recipient, SigningStatus } from '@prisma/client';
+import { type Recipient, SigningStatus } from '@prisma/client';
 import { History } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -43,9 +43,7 @@ import { StackAvatar } from '../general/stack-avatar';
 const FORM_ID = 'resend-email';
 
 export type DocumentResendDialogProps = {
-  document: Document & {
-    team: Pick<Team, 'id' | 'url'> | null;
-  };
+  document: TDocumentRow;
   recipients: Recipient[];
 };
 

apps/remix/app/components/dialogs/folder-create-dialog.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderPlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+const ZCreateFolderFormSchema = z.object({
+  name: z.string().min(1, { message: 'Folder name is required' }),
+});
+
+type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
+
+export type CreateFolderDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const CreateFolderDialog = ({ trigger, ...props }: CreateFolderDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { folderId } = useParams();
+
+  const navigate = useNavigate();
+  const team = useOptionalCurrentTeam();
+
+  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
+
+  const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
+
+  const form = useForm<TCreateFolderFormSchema>({
+    resolver: zodResolver(ZCreateFolderFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const onSubmit = async (data: TCreateFolderFormSchema) => {
+    try {
+      const newFolder = await createFolder({
+        name: data.name,
+        parentId: folderId,
+        type: FolderType.DOCUMENT,
+      });
+
+      setIsCreateFolderOpen(false);
+
+      toast({
+        description: 'Folder created successfully',
+      });
+
+      const documentsPath = formatDocumentsPath(team?.url);
+
+      void navigate(`${documentsPath}/f/${newFolder.id}`);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        toast({
+          title: 'Failed to create folder',
+          description: _(msg`This folder name is already taken.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to create folder',
+        description: _(msg`An unknown error occurred while creating the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isCreateFolderOpen) {
+      form.reset();
+    }
+  }, [isCreateFolderOpen, form]);
+
+  return (
+    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="flex items-center space-x-2">
+            <FolderPlusIcon className="h-4 w-4" />
+            <span>Create Folder</span>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Folder</DialogTitle>
+          <DialogDescription>
+            Enter a name for your new folder. Folders help you organize your documents.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Folder Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Folder" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => setIsCreateFolderOpen(false)}
+              >
+                Cancel
+              </Button>
+
+              <Button type="submit">Create</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/folder-delete-dialog.tsx

@@ -0,0 +1,159 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type FolderDeleteDialogProps = {
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDeleteDialogProps) => {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
+
+  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
+
+  const ZDeleteFolderFormSchema = z.object({
+    confirmText: z.literal(deleteMessage, {
+      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
+    }),
+  });
+
+  type TDeleteFolderFormSchema = z.infer<typeof ZDeleteFolderFormSchema>;
+
+  const form = useForm<TDeleteFolderFormSchema>({
+    resolver: zodResolver(ZDeleteFolderFormSchema),
+    defaultValues: {
+      confirmText: '',
+    },
+  });
+
+  const onFormSubmit = async () => {
+    if (!folder) return;
+
+    try {
+      await deleteFolder({
+        id: folder.id,
+      });
+
+      onOpenChange(false);
+
+      toast({
+        title: 'Folder deleted successfully',
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to delete does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to delete folder',
+        description: _(msg`An unknown error occurred while deleting the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Folder</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this folder?
+            {folder && folder._count.documents > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.documents} document(s). Deleting it will also
+                delete all documents in the folder.
+              </span>
+            )}
+            {folder && folder._count.subfolders > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.subfolders} subfolder(s). Deleting it will
+                delete all subfolders and their contents.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="confirmText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={deleteMessage} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" type="submit" disabled={!form.formState.isValid}>
+                Delete
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/folder-move-dialog.tsx

@@ -0,0 +1,169 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type FolderMoveDialogProps = {
+  foldersData: TFolderWithSubfolders[] | undefined;
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZMoveFolderFormSchema = z.object({
+  targetFolderId: z.string().nullable(),
+});
+
+type TMoveFolderFormSchema = z.infer<typeof ZMoveFolderFormSchema>;
+
+export const FolderMoveDialog = ({
+  foldersData,
+  folder,
+  isOpen,
+  onOpenChange,
+}: FolderMoveDialogProps) => {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
+
+  const form = useForm<TMoveFolderFormSchema>({
+    resolver: zodResolver(ZMoveFolderFormSchema),
+    defaultValues: {
+      targetFolderId: folder?.parentId ?? null,
+    },
+  });
+
+  const onFormSubmit = async ({ targetFolderId }: TMoveFolderFormSchema) => {
+    if (!folder) return;
+
+    try {
+      await moveFolder({
+        id: folder.id,
+        parentId: targetFolderId || null,
+      });
+
+      onOpenChange(false);
+
+      toast({
+        title: 'Folder moved successfully',
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to move does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to move folder',
+        description: _(msg`An unknown error occurred while moving the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  // Filter out the current folder and only show folders of the same type
+  const filteredFolders = foldersData?.filter(
+    (f) => f.id !== folder?.id && f.type === folder?.type,
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Move Folder</DialogTitle>
+          <DialogDescription>Select a destination for this folder.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4 py-4">
+            <FormField
+              control={form.control}
+              name="targetFolderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="space-y-2">
+                      <Button
+                        type="button"
+                        variant={!field.value ? 'default' : 'outline'}
+                        className="w-full justify-start"
+                        disabled={!folder?.parentId}
+                        onClick={() => field.onChange(null)}
+                      >
+                        <HomeIcon className="mr-2 h-4 w-4" />
+                        Root
+                      </Button>
+
+                      {filteredFolders &&
+                        filteredFolders.map((f) => (
+                          <Button
+                            key={f.id}
+                            type="button"
+                            disabled={f.id === folder?.parentId}
+                            variant={field.value === f.id ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(f.id)}
+                          >
+                            <FolderIcon className="mr-2 h-4 w-4" />
+                            {f.name}
+                          </Button>
+                        ))}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Move Folder
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/folder-settings-dialog.tsx

@@ -0,0 +1,173 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type FolderSettingsDialogProps = {
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZUpdateFolderFormSchema = z.object({
+  name: z.string().min(1),
+  visibility: z.nativeEnum(DocumentVisibility).optional(),
+});
+
+export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
+
+export const FolderSettingsDialog = ({
+  folder,
+  isOpen,
+  onOpenChange,
+}: FolderSettingsDialogProps) => {
+  const { _ } = useLingui();
+  const team = useOptionalCurrentTeam();
+
+  const { toast } = useToast();
+  const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();
+
+  const isTeamContext = !!team;
+
+  const form = useForm<z.infer<typeof ZUpdateFolderFormSchema>>({
+    resolver: zodResolver(ZUpdateFolderFormSchema),
+    defaultValues: {
+      name: folder?.name ?? '',
+      visibility: folder?.visibility ?? DocumentVisibility.EVERYONE,
+    },
+  });
+
+  useEffect(() => {
+    if (folder) {
+      form.reset({
+        name: folder.name,
+        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
+      });
+    }
+  }, [folder, form]);
+
+  const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
+    if (!folder) return;
+
+    try {
+      await updateFolder({
+        id: folder.id,
+        name: data.name,
+        visibility: isTeamContext
+          ? (data.visibility ?? DocumentVisibility.EVERYONE)
+          : DocumentVisibility.EVERYONE,
+      });
+
+      toast({
+        title: _(msg`Folder updated successfully`),
+      });
+
+      onOpenChange(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: _(msg`Folder not found`),
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Folder Settings</DialogTitle>
+          <DialogDescription>Manage the settings for this folder.</DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isTeamContext && (
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Visibility</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select visibility" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
+                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                          Managers and above
+                        </SelectItem>
+                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <DialogFooter>
+              <Button type="submit">Save Changes</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button>
+          <Button variant="outline">
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -24,11 +24,11 @@ import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type TemplateCreateDialogProps = {
-  teamId?: number;
   templateRootPath: string;
+  folderId?: string;
 };
 
-export const TemplateCreateDialog = ({ templateRootPath }: TemplateCreateDialogProps) => {
+export const TemplateCreateDialog = ({ templateRootPath, folderId }: TemplateCreateDialogProps) => {
   const navigate = useNavigate();
 
   const { user } = useSession();
@@ -53,6 +53,7 @@ export const TemplateCreateDialog = ({ templateRootPath }: TemplateCreateDialogP
       const { id } = await createTemplate({
         title: file.name,
         templateDocumentDataId: response.id,
+        folderId: folderId,
       });
 
       toast({

apps/remix/app/components/dialogs/template-folder-create-dialog.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderPlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+const ZCreateFolderFormSchema = z.object({
+  name: z.string().min(1, { message: 'Folder name is required' }),
+});
+
+type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
+
+export type TemplateFolderCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TemplateFolderCreateDialog = ({
+  trigger,
+  ...props
+}: TemplateFolderCreateDialogProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+  const navigate = useNavigate();
+  const team = useOptionalCurrentTeam();
+  const { folderId } = useParams();
+
+  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
+
+  const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
+
+  const form = useForm<TCreateFolderFormSchema>({
+    resolver: zodResolver(ZCreateFolderFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const onSubmit = async (data: TCreateFolderFormSchema) => {
+    try {
+      const newFolder = await createFolder({
+        name: data.name,
+        parentId: folderId,
+        type: FolderType.TEMPLATE,
+      });
+
+      setIsCreateFolderOpen(false);
+
+      toast({
+        description: _(msg`Folder created successfully`),
+      });
+
+      const templatesPath = formatTemplatesPath(team?.url);
+
+      void navigate(`${templatesPath}/f/${newFolder.id}`);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        toast({
+          title: _(msg`Failed to create folder`),
+          description: _(msg`This folder name is already taken.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Failed to create folder`),
+        description: _(msg`An unknown error occurred while creating the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isCreateFolderOpen) {
+      form.reset();
+    }
+  }, [isCreateFolderOpen, form]);
+
+  return (
+    <Dialog {...props} open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="flex items-center space-x-2">
+            <FolderPlusIcon className="h-4 w-4" />
+            <span>Create Folder</span>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Folder</DialogTitle>
+          <DialogDescription>
+            Enter a name for your new folder. Folders help you organize your templates.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Folder Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Folder" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => setIsCreateFolderOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit">Create</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-folder-delete-dialog.tsx

@@ -0,0 +1,163 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TemplateFolderDeleteDialogProps = {
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TemplateFolderDeleteDialog = ({
+  folder,
+  isOpen,
+  onOpenChange,
+}: TemplateFolderDeleteDialogProps) => {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const { mutateAsync: deleteFolder } = trpc.folder.deleteFolder.useMutation();
+
+  const deleteMessage = _(msg`delete ${folder?.name ?? 'folder'}`);
+
+  const ZDeleteFolderFormSchema = z.object({
+    confirmText: z.literal(deleteMessage, {
+      errorMap: () => ({ message: _(msg`You must type '${deleteMessage}' to confirm`) }),
+    }),
+  });
+
+  type TDeleteFolderFormSchema = z.infer<typeof ZDeleteFolderFormSchema>;
+
+  const form = useForm<TDeleteFolderFormSchema>({
+    resolver: zodResolver(ZDeleteFolderFormSchema),
+    defaultValues: {
+      confirmText: '',
+    },
+  });
+
+  const onFormSubmit = async () => {
+    if (!folder) return;
+
+    try {
+      await deleteFolder({
+        id: folder.id,
+      });
+
+      onOpenChange(false);
+
+      toast({
+        title: 'Folder deleted successfully',
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to delete does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to delete folder',
+        description: _(msg`An unknown error occurred while deleting the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Folder</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this folder?
+            {folder && folder._count.documents > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.documents} document(s). Deleting it will also
+                delete all documents in the folder.
+              </span>
+            )}
+            {folder && folder._count.subfolders > 0 && (
+              <span className="text-destructive mt-2 block">
+                This folder contains {folder._count.subfolders} subfolder(s). Deleting it will
+                delete all subfolders and their contents.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="confirmText"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={deleteMessage} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" type="submit" disabled={!form.formState.isValid}>
+                Delete
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-folder-move-dialog.tsx

@@ -0,0 +1,175 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TemplateFolderMoveDialogProps = {
+  foldersData: TFolderWithSubfolders[] | undefined;
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZMoveFolderFormSchema = z.object({
+  targetFolderId: z.string().optional(),
+});
+
+type TMoveFolderFormSchema = z.infer<typeof ZMoveFolderFormSchema>;
+
+export const TemplateFolderMoveDialog = ({
+  foldersData,
+  folder,
+  isOpen,
+  onOpenChange,
+}: TemplateFolderMoveDialogProps) => {
+  const { _ } = useLingui();
+
+  const { toast } = useToast();
+  const { mutateAsync: moveFolder } = trpc.folder.moveFolder.useMutation();
+
+  const form = useForm<TMoveFolderFormSchema>({
+    resolver: zodResolver(ZMoveFolderFormSchema),
+    defaultValues: {
+      targetFolderId: folder?.parentId ?? '',
+    },
+  });
+
+  const onFormSubmit = async ({ targetFolderId }: TMoveFolderFormSchema) => {
+    if (!folder) return;
+
+    try {
+      await moveFolder({
+        id: folder.id,
+        parentId: targetFolderId ?? '',
+      });
+
+      onOpenChange(false);
+
+      toast({
+        title: 'Folder moved successfully',
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: 'Folder not found',
+          description: _(msg`The folder you are trying to move does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'Failed to move folder',
+        description: _(msg`An unknown error occurred while moving the folder.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  // Filter out the current folder and only show folders of the same type
+  const filteredFolders = foldersData?.filter(
+    (f) => f.id !== folder?.id && f.type === folder?.type,
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Move Folder</DialogTitle>
+          <DialogDescription>Select a destination for this folder.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4 py-4">
+            <FormField
+              control={form.control}
+              name="targetFolderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className="space-y-2">
+                      <Button
+                        type="button"
+                        variant={!field.value ? 'default' : 'outline'}
+                        className="w-full justify-start"
+                        disabled={!folder?.parentId}
+                        onClick={() => field.onChange(undefined)}
+                      >
+                        <HomeIcon className="mr-2 h-4 w-4" />
+                        Root
+                      </Button>
+
+                      {filteredFolders &&
+                        filteredFolders.map((f) => (
+                          <Button
+                            key={f.id}
+                            type="button"
+                            disabled={f.id === folder?.parentId}
+                            variant={field.value === f.id ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(f.id)}
+                          >
+                            <FolderIcon className="mr-2 h-4 w-4" />
+                            {f.name}
+                          </Button>
+                        ))}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  form.formState.isSubmitting ||
+                  form.getValues('targetFolderId') === folder?.parentId
+                }
+              >
+                Move Folder
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-folder-settings-dialog.tsx

@@ -0,0 +1,176 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { trpc } from '@documenso/trpc/react';
+import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type TemplateFolderSettingsDialogProps = {
+  folder: TFolderWithSubfolders | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const ZUpdateFolderFormSchema = z.object({
+  name: z.string().min(1),
+  visibility: z.nativeEnum(DocumentVisibility).optional(),
+});
+
+export type TUpdateFolderFormSchema = z.infer<typeof ZUpdateFolderFormSchema>;
+
+export const TemplateFolderSettingsDialog = ({
+  folder,
+  isOpen,
+  onOpenChange,
+}: TemplateFolderSettingsDialogProps) => {
+  const { _ } = useLingui();
+  const team = useOptionalCurrentTeam();
+
+  const { toast } = useToast();
+  const { mutateAsync: updateFolder } = trpc.folder.updateFolder.useMutation();
+
+  const isTeamContext = !!team;
+  const isTemplateFolder = folder?.type === FolderType.TEMPLATE;
+
+  const form = useForm<z.infer<typeof ZUpdateFolderFormSchema>>({
+    resolver: zodResolver(ZUpdateFolderFormSchema),
+    defaultValues: {
+      name: folder?.name ?? '',
+      visibility: folder?.visibility ?? DocumentVisibility.EVERYONE,
+    },
+  });
+
+  useEffect(() => {
+    if (folder) {
+      form.reset({
+        name: folder.name,
+        visibility: folder.visibility ?? DocumentVisibility.EVERYONE,
+      });
+    }
+  }, [folder, form]);
+
+  const onFormSubmit = async (data: TUpdateFolderFormSchema) => {
+    if (!folder) return;
+
+    try {
+      await updateFolder({
+        id: folder.id,
+        name: data.name,
+        visibility:
+          isTeamContext && !isTemplateFolder
+            ? (data.visibility ?? DocumentVisibility.EVERYONE)
+            : DocumentVisibility.EVERYONE,
+      });
+
+      toast({
+        title: _(msg`Folder updated successfully`),
+      });
+
+      onOpenChange(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: _(msg`Folder not found`),
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Folder Settings</DialogTitle>
+          <DialogDescription>Manage the settings for this folder.</DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isTeamContext && !isTemplateFolder && (
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Visibility</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select visibility" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value={DocumentVisibility.EVERYONE}>Everyone</SelectItem>
+                        <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                          Managers and above
+                        </SelectItem>
+                        <SelectItem value={DocumentVisibility.ADMIN}>Admins only</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <DialogFooter>
+              <Button type="submit">Save Changes</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-move-to-folder-dialog.tsx

@@ -0,0 +1,213 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type TemplateMoveToFolderDialogProps = {
+  templateId: number;
+  templateTitle: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentFolderId?: string | null;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZMoveTemplateFormSchema = z.object({
+  folderId: z.string().nullable().optional(),
+});
+
+type TMoveTemplateFormSchema = z.infer<typeof ZMoveTemplateFormSchema>;
+
+export function TemplateMoveToFolderDialog({
+  templateId,
+  templateTitle,
+  isOpen,
+  onOpenChange,
+  currentFolderId,
+  ...props
+}: TemplateMoveToFolderDialogProps) {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const team = useOptionalCurrentTeam();
+
+  const form = useForm<TMoveTemplateFormSchema>({
+    resolver: zodResolver(ZMoveTemplateFormSchema),
+    defaultValues: {
+      folderId: currentFolderId ?? null,
+    },
+  });
+
+  const { data: folders, isLoading: isFoldersLoading } = trpc.folder.findFolders.useQuery(
+    {
+      parentId: currentFolderId ?? null,
+      type: FolderType.TEMPLATE,
+    },
+    {
+      enabled: isOpen,
+    },
+  );
+
+  const { mutateAsync: moveTemplateToFolder } = trpc.folder.moveTemplateToFolder.useMutation();
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    } else {
+      form.reset({ folderId: currentFolderId ?? null });
+    }
+  }, [isOpen, currentFolderId, form]);
+
+  const onSubmit = async (data: TMoveTemplateFormSchema) => {
+    try {
+      await moveTemplateToFolder({
+        templateId,
+        folderId: data.folderId ?? null,
+      });
+
+      toast({
+        title: _(msg`Template moved`),
+        description: _(msg`The template has been moved successfully.`),
+        variant: 'default',
+      });
+
+      onOpenChange(false);
+
+      const templatesPath = formatTemplatesPath(team?.url);
+
+      if (data.folderId) {
+        void navigate(`${templatesPath}/f/${data.folderId}`);
+      } else {
+        void navigate(templatesPath);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.NOT_FOUND) {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`The folder you are trying to move the template to does not exist.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while moving the template.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog {...props} open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Move Template to Folder</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>Move &quot;{templateTitle}&quot; to a folder</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-4 flex flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="folderId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Folder</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <div className="space-y-2">
+                      {isFoldersLoading ? (
+                        <div className="flex h-10 items-center justify-center">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      ) : (
+                        <>
+                          <Button
+                            type="button"
+                            variant={field.value === null ? 'default' : 'outline'}
+                            className="w-full justify-start"
+                            onClick={() => field.onChange(null)}
+                            disabled={currentFolderId === null}
+                          >
+                            <HomeIcon className="mr-2 h-4 w-4" />
+                            <Trans>Root (No Folder)</Trans>
+                          </Button>
+
+                          {folders?.data?.map((folder) => (
+                            <Button
+                              key={folder.id}
+                              type="button"
+                              variant={field.value === folder.id ? 'default' : 'outline'}
+                              className="w-full justify-start"
+                              onClick={() => field.onChange(folder.id)}
+                              disabled={currentFolderId === folder.id}
+                            >
+                              <FolderIcon className="mr-2 h-4 w-4" />
+                              {folder.name}
+                            </Button>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" disabled={isFoldersLoading || form.formState.isSubmitting}>
+                <Trans>Move</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx

@@ -0,0 +1,355 @@
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentDistributionMethod } from '@prisma/client';
+import { InfoIcon } from 'lucide-react';
+import type { Control } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
+
+import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
+import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
+import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
+import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
+import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
+import { Combobox } from '@documenso/ui/primitives/combobox';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { useConfigureDocument } from './configure-document-context';
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+
+interface ConfigureDocumentAdvancedSettingsProps {
+  control: Control<TConfigureEmbedFormSchema>;
+  isSubmitting: boolean;
+}
+
+export const ConfigureDocumentAdvancedSettings = ({
+  control,
+  isSubmitting,
+}: ConfigureDocumentAdvancedSettingsProps) => {
+  const { _ } = useLingui();
+
+  const form = useFormContext<TConfigureEmbedFormSchema>();
+  const { features } = useConfigureDocument();
+
+  const { watch, setValue } = form;
+
+  // Lift watch() calls to reduce re-renders
+  const distributionMethod = watch('meta.distributionMethod');
+  const emailSettings = watch('meta.emailSettings');
+  const isEmailDistribution = distributionMethod === DocumentDistributionMethod.EMAIL;
+
+  return (
+    <div>
+      <h3 className="text-foreground mb-1 text-lg font-medium">
+        <Trans>Advanced Settings</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mb-6 text-sm">
+        <Trans>Configure additional options and preferences</Trans>
+      </p>
+
+      <Tabs defaultValue="general">
+        <TabsList className="mb-6 inline-flex">
+          <TabsTrigger value="general" className="px-4">
+            <Trans>General</Trans>
+          </TabsTrigger>
+
+          {features.allowConfigureCommunication && (
+            <TabsTrigger value="communication" className="px-4">
+              <Trans>Communication</Trans>
+            </TabsTrigger>
+          )}
+        </TabsList>
+
+        <TabsContent value="general" className="mt-0">
+          <div className="flex flex-col space-y-6">
+            {/* <FormField
+              control={control}
+              name="meta.externalId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex flex-row items-center">
+                    <Trans>External ID</Trans>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <InfoIcon className="mx-2 h-4 w-4" />
+                      </TooltipTrigger>
+                      <TooltipContent className="text-muted-foreground max-w-xs">
+                        <Trans>
+                          Add an external ID to the document. This can be used to identify the
+                          document in external systems.
+                        </Trans>
+                      </TooltipContent>
+                    </Tooltip>
+                  </FormLabel>
+                  <FormControl>
+                    <Input className="bg-background" {...field} disabled={isSubmitting} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            {features.allowConfigureSignatureTypes && (
+              <FormField
+                control={control}
+                name="meta.signatureTypes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Allowed Signature Types</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelectCombobox
+                        options={Object.values(DOCUMENT_SIGNATURE_TYPES).map((option) => ({
+                          label: _(option.label),
+                          value: option.value,
+                        }))}
+                        selectedValues={field.value}
+                        onChange={field.onChange}
+                        className="bg-background w-full"
+                        emptySelectionPlaceholder="Select signature types"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureLanguage && (
+              <FormField
+                control={control}
+                name="meta.language"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Language</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
+                        <SelectTrigger className="bg-background">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                            <SelectItem key={code} value={code}>
+                              {language.full}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureDateFormat && (
+              <FormField
+                control={control}
+                name="meta.dateFormat"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Date Format</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
+                        <SelectTrigger className="bg-background">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {DATE_FORMATS.map((format) => (
+                            <SelectItem key={format.key} value={format.value}>
+                              {format.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureTimezone && (
+              <FormField
+                control={control}
+                name="meta.timezone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Time Zone</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Combobox
+                        className="bg-background"
+                        options={TIME_ZONES}
+                        {...field}
+                        onChange={(value) => value && field.onChange(value)}
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {features.allowConfigureRedirectUrl && (
+              <FormField
+                control={control}
+                name="meta.redirectUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex flex-row items-center">
+                      <Trans>Redirect URL</Trans>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <InfoIcon className="mx-2 h-4 w-4" />
+                        </TooltipTrigger>
+                        <TooltipContent className="text-muted-foreground max-w-xs">
+                          <Trans>
+                            Add a URL to redirect the user to once the document is signed
+                          </Trans>
+                        </TooltipContent>
+                      </Tooltip>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} disabled={isSubmitting} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+        </TabsContent>
+
+        {features.allowConfigureCommunication && (
+          <TabsContent value="communication" className="mt-0">
+            <div className="flex flex-col space-y-6">
+              <FormField
+                control={control}
+                name="meta.distributionMethod"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Distribution Method</Trans>
+                    </FormLabel>
+
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange} disabled={isSubmitting}>
+                        <SelectTrigger className="bg-background">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value={DocumentDistributionMethod.EMAIL}>
+                            <Trans>Email</Trans>
+                          </SelectItem>
+                          <SelectItem value={DocumentDistributionMethod.NONE}>
+                            <Trans>None</Trans>
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>
+                        Choose how to distribute your document to recipients. Email will send
+                        notifications, None will generate signing links for manual distribution.
+                      </Trans>
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <fieldset
+                className="flex flex-col space-y-6 disabled:cursor-not-allowed disabled:opacity-60"
+                disabled={!isEmailDistribution}
+              >
+                <FormField
+                  control={control}
+                  name="meta.subject"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel htmlFor="subject">
+                        <Trans>
+                          Subject <span className="text-muted-foreground">(Optional)</span>
+                        </Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          id="subject"
+                          className="bg-background mt-2"
+                          disabled={isSubmitting || !isEmailDistribution}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={control}
+                  name="meta.message"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel htmlFor="message">
+                        <Trans>
+                          Message <span className="text-muted-foreground">(Optional)</span>
+                        </Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Textarea
+                          id="message"
+                          className="bg-background mt-2 h-32 resize-none"
+                          disabled={isSubmitting || !isEmailDistribution}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DocumentSendEmailMessageHelper />
+
+                <DocumentEmailCheckboxes
+                  className={`mt-2 ${!isEmailDistribution ? 'pointer-events-none' : ''}`}
+                  value={emailSettings}
+                  onChange={(value) => setValue('meta.emailSettings', value)}
+                />
+              </fieldset>
+            </div>
+          </TabsContent>
+        )}
+      </Tabs>
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-context.tsx

@@ -0,0 +1,68 @@
+import { createContext, useContext } from 'react';
+
+export type ConfigureDocumentContext = {
+  // General
+  isTemplate: boolean;
+  isPersisted: boolean;
+  // Features
+  features: {
+    allowConfigureSignatureTypes?: boolean;
+    allowConfigureLanguage?: boolean;
+    allowConfigureDateFormat?: boolean;
+    allowConfigureTimezone?: boolean;
+    allowConfigureRedirectUrl?: boolean;
+    allowConfigureCommunication?: boolean;
+  };
+};
+
+const ConfigureDocumentContext = createContext<ConfigureDocumentContext | null>(null);
+
+export type ConfigureDocumentProviderProps = {
+  isTemplate?: boolean;
+  isPersisted?: boolean;
+  features: {
+    allowConfigureSignatureTypes?: boolean;
+    allowConfigureLanguage?: boolean;
+    allowConfigureDateFormat?: boolean;
+    allowConfigureTimezone?: boolean;
+    allowConfigureRedirectUrl?: boolean;
+    allowConfigureCommunication?: boolean;
+  };
+  children: React.ReactNode;
+};
+
+export const ConfigureDocumentProvider = ({
+  isTemplate,
+  isPersisted,
+  features,
+  children,
+}: ConfigureDocumentProviderProps) => {
+  return (
+    <ConfigureDocumentContext.Provider
+      value={{
+        isTemplate: isTemplate ?? false,
+        isPersisted: isPersisted ?? false,
+        features: {
+          allowConfigureSignatureTypes: features.allowConfigureSignatureTypes ?? true,
+          allowConfigureLanguage: features.allowConfigureLanguage ?? true,
+          allowConfigureDateFormat: features.allowConfigureDateFormat ?? true,
+          allowConfigureTimezone: features.allowConfigureTimezone ?? true,
+          allowConfigureRedirectUrl: features.allowConfigureRedirectUrl ?? true,
+          allowConfigureCommunication: features.allowConfigureCommunication ?? true,
+        },
+      }}
+    >
+      {children}
+    </ConfigureDocumentContext.Provider>
+  );
+};
+
+export const useConfigureDocument = () => {
+  const context = useContext(ConfigureDocumentContext);
+
+  if (!context) {
+    throw new Error('useConfigureDocument must be used within a ConfigureDocumentProvider');
+  }
+
+  return context;
+};

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -0,0 +1,413 @@
+import { useCallback, useRef } from 'react';
+
+import type { DropResult, SensorAPI } from '@hello-pangea/dnd';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
+import { motion } from 'framer-motion';
+import { GripVertical, HelpCircle, Plus, Trash } from 'lucide-react';
+import { nanoid } from 'nanoid';
+import type { Control } from 'react-hook-form';
+import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
+
+import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { useConfigureDocument } from './configure-document-context';
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+
+// Define a type for signer items
+type SignerItem = TConfigureEmbedFormSchema['signers'][number];
+
+export interface ConfigureDocumentRecipientsProps {
+  control: Control<TConfigureEmbedFormSchema>;
+  isSubmitting: boolean;
+}
+
+export const ConfigureDocumentRecipients = ({
+  control,
+  isSubmitting,
+}: ConfigureDocumentRecipientsProps) => {
+  const { _ } = useLingui();
+  const { isTemplate } = useConfigureDocument();
+
+  const $sensorApi = useRef<SensorAPI | null>(null);
+
+  const {
+    fields: signers,
+    append: appendSigner,
+    remove: removeSigner,
+    replace,
+    move,
+  } = useFieldArray({
+    control,
+    name: 'signers',
+  });
+
+  const { getValues, watch, setValue } = useFormContext<TConfigureEmbedFormSchema>();
+
+  const signingOrder = watch('meta.signingOrder');
+
+  const { errors } = useFormState({
+    control,
+  });
+
+  const onAddSigner = useCallback(() => {
+    const signerNumber = signers.length + 1;
+    const recipientSigningOrder =
+      signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1;
+
+    appendSigner({
+      formId: nanoid(8),
+      name: isTemplate ? `Recipient ${signerNumber}` : '',
+      email: isTemplate ? `recipient.${signerNumber}@document.com` : '',
+      role: RecipientRole.SIGNER,
+      signingOrder:
+        signingOrder === DocumentSigningOrder.SEQUENTIAL ? recipientSigningOrder : undefined,
+    });
+  }, [appendSigner, signers]);
+
+  const isSigningOrderEnabled = signingOrder === DocumentSigningOrder.SEQUENTIAL;
+
+  const handleSigningOrderChange = useCallback(
+    (index: number, newOrderString: string) => {
+      const trimmedOrderString = newOrderString.trim();
+      if (!trimmedOrderString) {
+        return;
+      }
+
+      const newOrder = Number(trimmedOrderString);
+      if (!Number.isInteger(newOrder) || newOrder < 1) {
+        return;
+      }
+
+      // Get current form values to preserve unsaved input data
+      const currentSigners = getValues('signers') || [...signers];
+      const signer = currentSigners[index];
+
+      // Remove signer from current position and insert at new position
+      const remainingSigners = currentSigners.filter((_: unknown, idx: number) => idx !== index);
+      const newPosition = Math.min(Math.max(0, newOrder - 1), currentSigners.length - 1);
+      remainingSigners.splice(newPosition, 0, signer);
+
+      // Update signing order for each item
+      const updatedSigners = remainingSigners.map((s: SignerItem, idx: number) => ({
+        ...s,
+        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? idx + 1 : undefined,
+      }));
+
+      // Update the form
+      replace(updatedSigners);
+    },
+    [signers, replace, getValues],
+  );
+
+  const onDragEnd = useCallback(
+    (result: DropResult) => {
+      if (!result.destination) return;
+
+      // Use the move function from useFieldArray which preserves input values
+      move(result.source.index, result.destination.index);
+
+      // Update signing orders after move
+      const currentSigners = getValues('signers');
+      const updatedSigners = currentSigners.map((signer: SignerItem, index: number) => ({
+        ...signer,
+        signingOrder: signingOrder === DocumentSigningOrder.SEQUENTIAL ? index + 1 : undefined,
+      }));
+
+      // Update the form with new ordering
+      replace(updatedSigners);
+    },
+    [move, replace, getValues],
+  );
+
+  const onSigningOrderChange = (signingOrder: DocumentSigningOrder) => {
+    setValue('meta.signingOrder', signingOrder);
+
+    if (signingOrder === DocumentSigningOrder.SEQUENTIAL) {
+      signers.forEach((_signer, index) => {
+        setValue(`signers.${index}.signingOrder`, index + 1);
+      });
+    }
+  };
+
+  return (
+    <div>
+      <h3 className="text-foreground mb-1 text-lg font-medium">
+        <Trans>Recipients</Trans>
+      </h3>
+
+      <p className="text-muted-foreground mb-6 text-sm">
+        <Trans>Add signers and configure signing preferences</Trans>
+      </p>
+
+      <FormField
+        control={control}
+        name="meta.signingOrder"
+        render={({ field }) => (
+          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+            <FormControl>
+              <Checkbox
+                {...field}
+                id="signingOrder"
+                checked={field.value === DocumentSigningOrder.SEQUENTIAL}
+                onCheckedChange={(checked) =>
+                  onSigningOrderChange(
+                    checked ? DocumentSigningOrder.SEQUENTIAL : DocumentSigningOrder.PARALLEL,
+                  )
+                }
+                disabled={isSubmitting}
+              />
+            </FormControl>
+            <FormLabel
+              htmlFor="signingOrder"
+              className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              <Trans>Enable signing order</Trans>
+            </FormLabel>
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={control}
+        name="meta.allowDictateNextSigner"
+        render={({ field: { value, ...field } }) => (
+          <FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
+            <FormControl>
+              <Checkbox
+                {...field}
+                id="allowDictateNextSigner"
+                checked={value}
+                onCheckedChange={field.onChange}
+                disabled={isSubmitting || !isSigningOrderEnabled}
+              />
+            </FormControl>
+
+            <div className="flex items-center">
+              <FormLabel
+                htmlFor="allowDictateNextSigner"
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                <Trans>Allow signers to dictate next signer</Trans>
+              </FormLabel>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-muted-foreground ml-1 cursor-help">
+                    <HelpCircle className="h-3.5 w-3.5" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-80 p-4">
+                  <p>
+                    <Trans>
+                      When enabled, signers can choose who should sign next in the sequence instead
+                      of following the predefined order.
+                    </Trans>
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </FormItem>
+        )}
+      />
+
+      <DragDropContext
+        onDragEnd={onDragEnd}
+        sensors={[
+          (api: SensorAPI) => {
+            $sensorApi.current = api;
+          },
+        ]}
+      >
+        <Droppable droppableId="signers">
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-2">
+              {signers.map((signer, index) => (
+                <Draggable
+                  key={signer.id}
+                  draggableId={signer.id}
+                  index={index}
+                  isDragDisabled={!isSigningOrderEnabled || isSubmitting || signer.disabled}
+                >
+                  {(provided, snapshot) => (
+                    <fieldset
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      disabled={signer.disabled}
+                      className={cn('py-1', {
+                        'bg-widget-foreground pointer-events-none rounded-md pt-2':
+                          snapshot.isDragging,
+                      })}
+                    >
+                      <motion.div
+                        className={cn('flex items-end gap-2 pb-2', {
+                          'border-destructive/50': errors?.signers?.[index],
+                        })}
+                      >
+                        {isSigningOrderEnabled && (
+                          <FormField
+                            control={control}
+                            name={`signers.${index}.signingOrder`}
+                            render={({ field }) => (
+                              <FormItem
+                                className={cn('flex w-16 flex-none items-center gap-x-1', {
+                                  'mb-6':
+                                    errors?.signers?.[index] &&
+                                    !errors?.signers?.[index]?.signingOrder,
+                                })}
+                              >
+                                <GripVertical className="h-5 w-5 flex-shrink-0 opacity-40" />
+                                <FormControl>
+                                  <Input
+                                    type="number"
+                                    max={signers.length}
+                                    min={1}
+                                    className="w-full text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                    {...field}
+                                    disabled={isSubmitting || snapshot.isDragging}
+                                    onChange={(e) => {
+                                      field.onChange(e);
+                                    }}
+                                    onBlur={(e) => {
+                                      field.onBlur();
+                                      handleSigningOrderChange(index, e.target.value);
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        )}
+
+                        <FormField
+                          control={control}
+                          name={`signers.${index}.name`}
+                          render={({ field }) => (
+                            <FormItem
+                              className={cn('flex-1', {
+                                'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.name,
+                              })}
+                            >
+                              <FormLabel className="sr-only">
+                                <Trans>Name</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  placeholder={_(msg`Name`)}
+                                  className="w-full"
+                                  {...field}
+                                  disabled={isSubmitting || snapshot.isDragging}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={control}
+                          name={`signers.${index}.email`}
+                          render={({ field }) => (
+                            <FormItem
+                              className={cn('flex-1', {
+                                'mb-6':
+                                  errors?.signers?.[index] && !errors?.signers?.[index]?.email,
+                              })}
+                            >
+                              <FormLabel className="sr-only">
+                                <Trans>Email</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="email"
+                                  placeholder={_(msg`Email`)}
+                                  className="w-full"
+                                  {...field}
+                                  disabled={isSubmitting || snapshot.isDragging}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={control}
+                          name={`signers.${index}.role`}
+                          render={({ field }) => (
+                            <FormItem
+                              className={cn('flex-none', {
+                                'mb-6': errors?.signers?.[index] && !errors?.signers?.[index]?.role,
+                              })}
+                            >
+                              <FormLabel className="sr-only">
+                                <Trans>Role</Trans>
+                              </FormLabel>
+                              <FormControl>
+                                <RecipientRoleSelect
+                                  {...field}
+                                  isAssistantEnabled={isSigningOrderEnabled}
+                                  onValueChange={field.onChange}
+                                  disabled={isSubmitting || snapshot.isDragging || signer.disabled}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          disabled={
+                            isSubmitting ||
+                            signers.length === 1 ||
+                            snapshot.isDragging ||
+                            signer.disabled
+                          }
+                          onClick={() => removeSigner(index)}
+                        >
+                          <Trash className="h-4 w-4" />
+                        </Button>
+                      </motion.div>
+                    </fieldset>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+
+      <div className="mt-4 flex justify-end">
+        <Button
+          type="button"
+          variant="outline"
+          className="w-auto"
+          disabled={isSubmitting}
+          onClick={onAddSigner}
+        >
+          <Plus className="-ml-1 mr-2 h-5 w-5" />
+          <Trans>Add Signer</Trans>
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-upload.tsx

@@ -0,0 +1,238 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Cloud, FileText, Loader, X } from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
+import { useFormContext } from 'react-hook-form';
+
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useConfigureDocument } from './configure-document-context';
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+
+export interface ConfigureDocumentUploadProps {
+  isSubmitting?: boolean;
+}
+
+export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocumentUploadProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { isPersisted } = useConfigureDocument();
+
+  const form = useFormContext<TConfigureEmbedFormSchema>();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Watch the documentData field from the form
+  const documentData = form.watch('documentData');
+
+  const onFileDrop = async (acceptedFiles: File[]) => {
+    try {
+      const file = acceptedFiles[0];
+
+      if (!file) {
+        return;
+      }
+
+      setIsLoading(true);
+
+      // Convert file to UInt8Array
+      const arrayBuffer = await file.arrayBuffer();
+      const uint8Array = new Uint8Array(arrayBuffer);
+
+      // Store file metadata and UInt8Array in form data
+      form.setValue('documentData', {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        data: uint8Array, // Store as UInt8Array
+      });
+
+      // Auto-populate title if it's empty
+      const currentTitle = form.getValues('title');
+
+      if (!currentTitle) {
+        // Get filename without extension
+        const fileNameWithoutExtension = file.name.replace(/\.[^/.]+$/, '');
+        form.setValue('title', fileNameWithoutExtension);
+      }
+    } catch (error) {
+      console.error('Error uploading file', error);
+
+      toast({
+        title: _(msg`Error uploading file`),
+        description: _(msg`There was an error uploading your file. Please try again.`),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onDropRejected = () => {
+    toast({
+      title: _(msg`Your document failed to upload.`),
+      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  const onRemoveFile = () => {
+    if (isPersisted) {
+      toast({
+        title: _(msg`Cannot remove document`),
+        description: _(msg`The document is already saved and cannot be changed.`),
+        duration: 5000,
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    form.unregister('documentData');
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'application/pdf': ['.pdf'],
+    },
+    maxSize: APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024,
+    multiple: false,
+    disabled: isSubmitting || isLoading || isPersisted,
+    onDrop: (files) => {
+      void onFileDrop(files);
+    },
+    onDropRejected,
+  });
+
+  return (
+    <div>
+      <FormField
+        control={form.control}
+        name="documentData"
+        render={() => (
+          <FormItem>
+            <FormLabel required>
+              <Trans>Upload Document</Trans>
+            </FormLabel>
+
+            <div className="relative">
+              {!documentData ? (
+                <div className="relative">
+                  <FormControl>
+                    <div
+                      {...getRootProps()}
+                      className={cn(
+                        'border-border bg-background relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed transition',
+                        {
+                          'border-primary/50 bg-primary/5': isDragActive,
+                          'hover:bg-muted/30':
+                            !isDragActive && !isSubmitting && !isLoading && !isPersisted,
+                          'cursor-not-allowed opacity-60': isSubmitting || isLoading || isPersisted,
+                        },
+                      )}
+                    >
+                      <input {...getInputProps()} />
+
+                      <div className="flex flex-col items-center justify-center gap-y-2 px-4 py-4 text-center">
+                        <Cloud
+                          className={cn('h-10 w-10', {
+                            'text-primary': isDragActive,
+                            'text-muted-foreground': !isDragActive,
+                          })}
+                        />
+
+                        <div
+                          className={cn('flex flex-col space-y-1', {
+                            'text-primary': isDragActive,
+                            'text-muted-foreground': !isDragActive,
+                          })}
+                        >
+                          <p className="text-sm font-medium">
+                            {isDragActive ? (
+                              <Trans>Drop your document here</Trans>
+                            ) : isPersisted ? (
+                              <Trans>Document is already uploaded</Trans>
+                            ) : (
+                              <Trans>Drag and drop or click to upload</Trans>
+                            )}
+                          </p>
+                          <p className="text-xs">
+                            {isPersisted ? (
+                              <Trans>This document cannot be changed</Trans>
+                            ) : (
+                              <Trans>
+                                .PDF documents accepted (max {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB)
+                              </Trans>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </FormControl>
+
+                  {isLoading && (
+                    <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
+                      <Loader className="text-muted-foreground h-10 w-10 animate-spin" />
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="mt-2 rounded-lg border p-4">
+                  <div className="flex items-center gap-x-4">
+                    <div className="bg-primary/10 text-primary flex h-12 w-12 items-center justify-center rounded-md">
+                      <FileText className="h-6 w-6" />
+                    </div>
+
+                    <div className="flex-1">
+                      <div className="text-sm font-medium">{documentData.name}</div>
+                      <div className="text-muted-foreground text-xs">
+                        {formatFileSize(documentData.size)}
+                      </div>
+                    </div>
+
+                    {!isPersisted && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={onRemoveFile}
+                        disabled={isSubmitting}
+                        className="h-8 w-8 p-0"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-view.tsx

@@ -0,0 +1,137 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { DocumentDistributionMethod, DocumentSigningOrder, RecipientRole } from '@prisma/client';
+import { nanoid } from 'nanoid';
+import { useForm } from 'react-hook-form';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { ConfigureDocumentAdvancedSettings } from './configure-document-advanced-settings';
+import { useConfigureDocument } from './configure-document-context';
+import { ConfigureDocumentRecipients } from './configure-document-recipients';
+import { ConfigureDocumentUpload } from './configure-document-upload';
+import {
+  type TConfigureEmbedFormSchema,
+  ZConfigureEmbedFormSchema,
+} from './configure-document-view.types';
+
+export interface ConfigureDocumentViewProps {
+  onSubmit: (data: TConfigureEmbedFormSchema) => void | Promise<void>;
+  defaultValues?: Partial<TConfigureEmbedFormSchema>;
+  disableUpload?: boolean;
+  isSubmitting?: boolean;
+}
+
+export const ConfigureDocumentView = ({
+  onSubmit,
+  defaultValues,
+  disableUpload,
+}: ConfigureDocumentViewProps) => {
+  const { isTemplate } = useConfigureDocument();
+
+  const form = useForm<TConfigureEmbedFormSchema>({
+    resolver: zodResolver(ZConfigureEmbedFormSchema),
+    defaultValues: {
+      title: defaultValues?.title || '',
+      signers: defaultValues?.signers || [
+        {
+          formId: nanoid(8),
+          name: isTemplate ? `Recipient ${1}` : '',
+          email: isTemplate ? `recipient.${1}@document.com` : '',
+          role: RecipientRole.SIGNER,
+          signingOrder: 1,
+          disabled: false,
+        },
+      ],
+      meta: {
+        subject: defaultValues?.meta?.subject || '',
+        message: defaultValues?.meta?.message || '',
+        distributionMethod:
+          defaultValues?.meta?.distributionMethod || DocumentDistributionMethod.EMAIL,
+        emailSettings: defaultValues?.meta?.emailSettings || ZDocumentEmailSettingsSchema.parse({}),
+        dateFormat: defaultValues?.meta?.dateFormat || DEFAULT_DOCUMENT_DATE_FORMAT,
+        timezone: defaultValues?.meta?.timezone || DEFAULT_DOCUMENT_TIME_ZONE,
+        redirectUrl: defaultValues?.meta?.redirectUrl || '',
+        language: defaultValues?.meta?.language || 'en',
+        signatureTypes: defaultValues?.meta?.signatureTypes || [],
+        signingOrder: defaultValues?.meta?.signingOrder || DocumentSigningOrder.PARALLEL,
+        allowDictateNextSigner: defaultValues?.meta?.allowDictateNextSigner || false,
+        externalId: defaultValues?.meta?.externalId || '',
+      },
+      documentData: defaultValues?.documentData,
+    },
+  });
+
+  const { control, handleSubmit } = form;
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  return (
+    <div className="flex w-full flex-col space-y-8">
+      <div>
+        <h2 className="text-foreground mb-1 text-xl font-semibold">
+          {isTemplate ? <Trans>Configure Template</Trans> : <Trans>Configure Document</Trans>}
+        </h2>
+
+        <p className="text-muted-foreground text-sm">
+          {isTemplate ? (
+            <Trans>Set up your template properties and recipient information</Trans>
+          ) : (
+            <Trans>Set up your document properties and recipient information</Trans>
+          )}
+        </p>
+      </div>
+
+      <Form {...form}>
+        <div className="flex flex-col space-y-8">
+          <div>
+            <FormField
+              control={control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Title</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} disabled={isSubmitting} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          {!disableUpload && <ConfigureDocumentUpload isSubmitting={isSubmitting} />}
+          <ConfigureDocumentRecipients control={control} isSubmitting={isSubmitting} />
+          <ConfigureDocumentAdvancedSettings control={control} isSubmitting={isSubmitting} />
+
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              onClick={onFormSubmit}
+              disabled={isSubmitting}
+              className="w-full sm:w-auto"
+            >
+              <Trans>Continue</Trans>
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </div>
+  );
+};

apps/remix/app/components/embed/authoring/configure-document-view.types.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod';
+
+import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
+import {
+  ZDocumentMetaDateFormatSchema,
+  ZDocumentMetaLanguageSchema,
+} from '@documenso/trpc/server/document-router/schema';
+
+// Define the schema for configuration
+export type TConfigureEmbedFormSchema = z.infer<typeof ZConfigureEmbedFormSchema>;
+
+export const ZConfigureEmbedFormSchema = z.object({
+  title: z.string().min(1, { message: 'Title is required' }),
+  signers: z
+    .array(
+      z.object({
+        nativeId: z.number().optional(),
+        formId: z.string(),
+        name: z.string().min(1, { message: 'Name is required' }),
+        email: z.string().email('Invalid email address'),
+        role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
+        signingOrder: z.number().optional(),
+        disabled: z.boolean().optional(),
+      }),
+    )
+    .min(1, { message: 'At least one signer is required' }),
+  meta: z.object({
+    subject: z.string().optional(),
+    message: z.string().optional(),
+    distributionMethod: z.nativeEnum(DocumentDistributionMethod),
+    emailSettings: ZDocumentEmailSettingsSchema,
+    dateFormat: ZDocumentMetaDateFormatSchema.optional(),
+    timezone: z.string().min(1, 'Timezone is required'),
+    redirectUrl: z.string().optional(),
+    language: ZDocumentMetaLanguageSchema.optional(),
+    signatureTypes: z.array(z.string()).default([]),
+    signingOrder: z.enum(['SEQUENTIAL', 'PARALLEL']),
+    allowDictateNextSigner: z.boolean().default(false).optional(),
+    externalId: z.string().optional(),
+  }),
+  documentData: z
+    .object({
+      name: z.string(),
+      type: z.string(),
+      size: z.number(),
+      data: z.instanceof(Uint8Array), // UInt8Array can't be directly validated by zod
+    })
+    .optional(),
+});

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -0,0 +1,672 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentData, FieldType } from '@prisma/client';
+import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
+import { ChevronsUpDown } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { base64 } from '@documenso/lib/universal/base64';
+import { nanoid } from '@documenso/lib/universal/id';
+import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
+import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { FieldSelector } from '@documenso/ui/primitives/field-selector';
+import { Form } from '@documenso/ui/primitives/form/form';
+import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
+import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
+import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
+import type { TConfigureFieldsFormSchema } from './configure-fields-view.types';
+import { FieldAdvancedSettingsDrawer } from './field-advanced-settings-drawer';
+
+const MIN_HEIGHT_PX = 12;
+const MIN_WIDTH_PX = 36;
+
+const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
+const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
+
+export type ConfigureFieldsViewProps = {
+  configData: TConfigureEmbedFormSchema;
+  documentData?: DocumentData;
+  defaultValues?: Partial<TConfigureFieldsFormSchema>;
+  onBack: (data: TConfigureFieldsFormSchema) => void;
+  onSubmit: (data: TConfigureFieldsFormSchema) => void;
+};
+
+export const ConfigureFieldsView = ({
+  configData,
+  documentData,
+  defaultValues,
+  onBack,
+  onSubmit,
+}: ConfigureFieldsViewProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+
+  // Track if we're on a mobile device
+  const [isMobile, setIsMobile] = useState(false);
+
+  // State for managing the mobile drawer
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  // Check for mobile viewport on component mount and resize
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkIfMobile();
+
+    // Add resize listener
+    window.addEventListener('resize', checkIfMobile);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', checkIfMobile);
+    };
+  }, []);
+
+  const normalizedDocumentData = useMemo(() => {
+    if (documentData) {
+      return documentData;
+    }
+
+    if (!configData.documentData) {
+      return null;
+    }
+
+    const data = base64.encode(configData.documentData?.data);
+
+    return {
+      id: 'preview',
+      type: 'BYTES_64',
+      data,
+      initialData: data,
+    } satisfies DocumentData;
+  }, [configData.documentData]);
+
+  const recipients = useMemo(() => {
+    return configData.signers.map<Recipient>((signer, index) => ({
+      id: signer.nativeId || index,
+      name: signer.name || '',
+      email: signer.email || '',
+      role: signer.role,
+      signingOrder: signer.signingOrder || null,
+      documentId: null,
+      templateId: null,
+      token: '',
+      documentDeletedAt: null,
+      expired: null,
+      signedAt: null,
+      authOptions: null,
+      rejectionReason: null,
+      sendStatus: signer.disabled ? SendStatus.SENT : SendStatus.NOT_SENT,
+      readStatus: signer.disabled ? ReadStatus.OPENED : ReadStatus.NOT_OPENED,
+      signingStatus: signer.disabled ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+    }));
+  }, [configData.signers]);
+
+  const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
+    () => recipients.find((r) => r.signingStatus === SigningStatus.NOT_SIGNED) || null,
+  );
+  const [selectedField, setSelectedField] = useState<FieldType | null>(null);
+  const [isFieldWithinBounds, setIsFieldWithinBounds] = useState(false);
+  const [coords, setCoords] = useState({
+    x: 0,
+    y: 0,
+  });
+  const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
+  const [lastActiveField, setLastActiveField] = useState<
+    TConfigureFieldsFormSchema['fields'][0] | null
+  >(null);
+  const [fieldClipboard, setFieldClipboard] = useState<
+    TConfigureFieldsFormSchema['fields'][0] | null
+  >(null);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+  const [currentField, setCurrentField] = useState<TConfigureFieldsFormSchema['fields'][0] | null>(
+    null,
+  );
+
+  const fieldBounds = useRef({
+    height: DEFAULT_HEIGHT_PX,
+    width: DEFAULT_WIDTH_PX,
+  });
+
+  const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
+  const selectedRecipientStyles = useRecipientColors(
+    selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
+  );
+
+  const form = useForm<TConfigureFieldsFormSchema>({
+    defaultValues: {
+      fields: defaultValues?.fields ?? [],
+    },
+  });
+
+  const { control, handleSubmit } = form;
+
+  const onFormSubmit = handleSubmit(onSubmit);
+
+  const {
+    append,
+    remove,
+    update,
+    fields: localFields,
+  } = useFieldArray({
+    control: control,
+    name: 'fields',
+  });
+
+  const onFieldCopy = useCallback(
+    (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
+      const { duplicate = false, duplicateAll = false } = options ?? {};
+
+      if (lastActiveField) {
+        event?.preventDefault();
+
+        if (duplicate) {
+          const newField: TConfigureFieldsFormSchema['fields'][0] = {
+            ...structuredClone(lastActiveField),
+            nativeId: undefined,
+            formId: nanoid(12),
+            signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+            recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+            pageX: lastActiveField.pageX + 3,
+            pageY: lastActiveField.pageY + 3,
+          };
+
+          append(newField);
+
+          return;
+        }
+
+        if (duplicateAll) {
+          const pages = Array.from(document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR));
+
+          pages.forEach((_, index) => {
+            const pageNumber = index + 1;
+
+            if (pageNumber === lastActiveField.pageNumber) {
+              return;
+            }
+
+            const newField: TConfigureFieldsFormSchema['fields'][0] = {
+              ...structuredClone(lastActiveField),
+              nativeId: undefined,
+              formId: nanoid(12),
+              signerEmail: selectedRecipient?.email ?? lastActiveField.signerEmail,
+              recipientId: selectedRecipient?.id ?? lastActiveField.recipientId,
+              pageNumber,
+            };
+
+            append(newField);
+          });
+
+          return;
+        }
+
+        setFieldClipboard(lastActiveField);
+
+        toast({
+          title: 'Copied field',
+          description: 'Copied field to clipboard',
+        });
+      }
+    },
+    [append, lastActiveField, selectedRecipient?.email, selectedRecipient?.id, toast],
+  );
+
+  const onFieldPaste = useCallback(
+    (event: KeyboardEvent) => {
+      if (fieldClipboard) {
+        event.preventDefault();
+
+        const copiedField = structuredClone(fieldClipboard);
+
+        append({
+          ...copiedField,
+          nativeId: undefined,
+          formId: nanoid(12),
+          signerEmail: selectedRecipient?.email ?? copiedField.signerEmail,
+          recipientId: selectedRecipient?.id ?? copiedField.recipientId,
+          pageX: copiedField.pageX + 3,
+          pageY: copiedField.pageY + 3,
+        });
+      }
+    },
+    [append, fieldClipboard, selectedRecipient?.email, selectedRecipient?.id],
+  );
+
+  useHotkeys(['ctrl+c', 'meta+c'], (evt) => onFieldCopy(evt));
+  useHotkeys(['ctrl+v', 'meta+v'], (evt) => onFieldPaste(evt));
+  useHotkeys(['ctrl+d', 'meta+d'], (evt) => onFieldCopy(evt, { duplicate: true }));
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField) return;
+
+      setIsFieldWithinBounds(
+        isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        ),
+      );
+
+      setCoords({
+        x: event.clientX - fieldBounds.current.width / 2,
+        y: event.clientY - fieldBounds.current.height / 2,
+      });
+    },
+    [isWithinPageBounds, selectedField],
+  );
+
+  const onMouseClick = useCallback(
+    (event: MouseEvent) => {
+      if (!selectedField || !selectedRecipient) {
+        return;
+      }
+
+      const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
+
+      if (
+        !$page ||
+        !isWithinPageBounds(
+          event,
+          PDF_VIEWER_PAGE_SELECTOR,
+          fieldBounds.current.width,
+          fieldBounds.current.height,
+        )
+      ) {
+        return;
+      }
+
+      const { top, left, height, width } = getBoundingClientRect($page);
+
+      const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
+
+      // Calculate x and y as a percentage of the page width and height
+      let pageX = ((event.pageX - left) / width) * 100;
+      let pageY = ((event.pageY - top) / height) * 100;
+
+      // Get the bounds as a percentage of the page width and height
+      const fieldPageWidth = (fieldBounds.current.width / width) * 100;
+      const fieldPageHeight = (fieldBounds.current.height / height) * 100;
+
+      // And center it based on the bounds
+      pageX -= fieldPageWidth / 2;
+      pageY -= fieldPageHeight / 2;
+
+      const field = {
+        formId: nanoid(12),
+        type: selectedField,
+        pageNumber,
+        pageX,
+        pageY,
+        pageWidth: fieldPageWidth,
+        pageHeight: fieldPageHeight,
+        recipientId: selectedRecipient.id,
+        signerEmail: selectedRecipient.email,
+        fieldMeta: undefined,
+      };
+
+      append(field);
+
+      // Automatically open advanced settings for field types that need configuration
+      if (ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING.includes(selectedField)) {
+        setCurrentField(field);
+        setShowAdvancedSettings(true);
+      }
+
+      setSelectedField(null);
+    },
+    [append, getPage, isWithinPageBounds, selectedField, selectedRecipient],
+  );
+
+  const onFieldResize = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const {
+        x: pageX,
+        y: pageY,
+        width: pageWidth,
+        height: pageHeight,
+      } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+        pageWidth,
+        pageHeight,
+      });
+    },
+    [getFieldPosition, localFields, update],
+  );
+
+  const onFieldMove = useCallback(
+    (node: HTMLElement, index: number) => {
+      const field = localFields[index];
+
+      const $page = window.document.querySelector<HTMLElement>(
+        `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
+      );
+
+      if (!$page) {
+        return;
+      }
+
+      const { x: pageX, y: pageY } = getFieldPosition($page, node);
+
+      update(index, {
+        ...field,
+        pageX,
+        pageY,
+      });
+    },
+    [getFieldPosition, localFields, update],
+  );
+
+  const handleUpdateFieldMeta = useCallback(
+    (formId: string, fieldMeta: TFieldMetaSchema) => {
+      const fieldIndex = localFields.findIndex((field) => field.formId === formId);
+
+      if (fieldIndex !== -1) {
+        const parsedFieldMeta = ZFieldMetaSchema.parse(fieldMeta);
+
+        update(fieldIndex, {
+          ...localFields[fieldIndex],
+          fieldMeta: parsedFieldMeta,
+        });
+      }
+    },
+    [localFields, update],
+  );
+
+  useEffect(() => {
+    if (selectedField) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseClick);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseClick);
+    };
+  }, [onMouseClick, onMouseMove, selectedField]);
+
+  useEffect(() => {
+    const observer = new MutationObserver((_mutations) => {
+      const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+
+      if (!$page) {
+        return;
+      }
+
+      fieldBounds.current = {
+        height: Math.max(DEFAULT_HEIGHT_PX),
+        width: Math.max(DEFAULT_WIDTH_PX),
+      };
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // Close drawer when a field is selected on mobile
+  useEffect(() => {
+    if (isMobile && selectedField) {
+      setIsDrawerOpen(false);
+    }
+  }, [isMobile, selectedField]);
+
+  return (
+    <>
+      <div className="grid w-full grid-cols-12 gap-4">
+        {/* Desktop sidebar */}
+        {!isMobile && (
+          <div className="order-2 col-span-12 md:order-1 md:col-span-4">
+            <div className="bg-widget border-border sticky top-4 max-h-[calc(100vh-2rem)] rounded-lg border p-4 pb-6">
+              <h2 className="mb-1 text-lg font-medium">
+                <Trans>Configure Fields</Trans>
+              </h2>
+
+              <p className="text-muted-foreground mb-6 text-sm">
+                <Trans>Configure the fields you want to place on the document.</Trans>
+              </p>
+
+              <RecipientSelector
+                selectedRecipient={selectedRecipient}
+                onSelectedRecipientChange={setSelectedRecipient}
+                recipients={recipients}
+                className="w-full"
+              />
+
+              <hr className="my-6" />
+
+              <div className="space-y-2">
+                <FieldSelector
+                  selectedField={selectedField}
+                  onSelectedFieldChange={setSelectedField}
+                  className="w-full"
+                  disabled={!selectedRecipient}
+                />
+              </div>
+
+              <div className="mt-6 flex gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="flex-1"
+                  loading={form.formState.isSubmitting}
+                  onClick={() => onBack(form.getValues())}
+                >
+                  <Trans>Back</Trans>
+                </Button>
+
+                <Button
+                  className="flex-1"
+                  type="button"
+                  loading={form.formState.isSubmitting}
+                  disabled={!form.formState.isValid}
+                  onClick={async () => onFormSubmit()}
+                >
+                  <Trans>Save</Trans>
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className={cn('order-1 col-span-12 md:order-2', !isMobile && 'md:col-span-8')}>
+          <div className="relative">
+            {selectedField && (
+              <div
+                className={cn(
+                  'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
+                  selectedRecipientStyles.base,
+                  {
+                    '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
+                    'dark:text-black/60': isFieldWithinBounds,
+                  },
+                  selectedField === 'SIGNATURE' && 'font-signature',
+                )}
+                style={{
+                  top: coords.y,
+                  left: coords.x,
+                  height: fieldBounds.current.height,
+                  width: fieldBounds.current.width,
+                }}
+              >
+                <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+                  {_(FRIENDLY_FIELD_TYPE[selectedField])}
+                </span>
+              </div>
+            )}
+
+            <Form {...form}>
+              {normalizedDocumentData && (
+                <div>
+                  <PDFViewer documentData={normalizedDocumentData} />
+
+                  <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                    {localFields.map((field, index) => {
+                      const recipientIndex = recipients.findIndex(
+                        (r) => r.id === field.recipientId,
+                      );
+
+                      return (
+                        <FieldItem
+                          key={field.formId}
+                          field={field}
+                          minHeight={MIN_HEIGHT_PX}
+                          minWidth={MIN_WIDTH_PX}
+                          defaultHeight={DEFAULT_HEIGHT_PX}
+                          defaultWidth={DEFAULT_WIDTH_PX}
+                          onResize={(node) => onFieldResize(node, index)}
+                          onMove={(node) => onFieldMove(node, index)}
+                          onRemove={() => remove(index)}
+                          onDuplicate={() => onFieldCopy(null, { duplicate: true })}
+                          onDuplicateAllPages={() => onFieldCopy(null, { duplicateAll: true })}
+                          onFocus={() => setLastActiveField(field)}
+                          onBlur={() => setLastActiveField(null)}
+                          onAdvancedSettings={() => {
+                            setCurrentField(field);
+                            setShowAdvancedSettings(true);
+                          }}
+                          recipientIndex={recipientIndex}
+                          active={activeFieldId === field.formId}
+                          onFieldActivate={() => setActiveFieldId(field.formId)}
+                          onFieldDeactivate={() => setActiveFieldId(null)}
+                          disabled={selectedRecipient?.id !== field.recipientId}
+                        />
+                      );
+                    })}
+                  </ElementVisible>
+                </div>
+              )}
+            </Form>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Floating Action Bar and Drawer */}
+      {isMobile && (
+        <Sheet open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
+          <SheetTrigger asChild>
+            <div className="bg-widget border-border fixed bottom-6 left-6 right-6 z-50 flex items-center justify-between gap-2 rounded-lg border p-4">
+              <span className="text-lg font-medium">
+                <Trans>Configure Fields</Trans>
+              </span>
+
+              <button
+                type="button"
+                className="border-border text-muted-foreground inline-flex h-10 w-10 items-center justify-center rounded-lg border"
+              >
+                <ChevronsUpDown className="h-6 w-6" />
+              </button>
+            </div>
+          </SheetTrigger>
+
+          <SheetContent
+            position="bottom"
+            size="xl"
+            className="bg-widget h-fit max-h-[80vh] overflow-y-auto rounded-t-xl p-4"
+          >
+            <h2 className="mb-1 text-lg font-medium">
+              <Trans>Configure Fields</Trans>
+            </h2>
+
+            <p className="text-muted-foreground mb-6 text-sm">
+              <Trans>Configure the fields you want to place on the document.</Trans>
+            </p>
+
+            <RecipientSelector
+              selectedRecipient={selectedRecipient}
+              onSelectedRecipientChange={setSelectedRecipient}
+              recipients={recipients}
+              className="w-full"
+            />
+
+            <hr className="my-6" />
+
+            <div className="space-y-2">
+              <FieldSelector
+                selectedField={selectedField}
+                onSelectedFieldChange={(field) => {
+                  setSelectedField(field);
+                  if (field) {
+                    setIsDrawerOpen(false);
+                  }
+                }}
+                className="w-full"
+                disabled={!selectedRecipient}
+              />
+            </div>
+
+            <div className="mt-6 flex gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                className="flex-1"
+                loading={form.formState.isSubmitting}
+                onClick={() => onBack(form.getValues())}
+              >
+                <Trans>Back</Trans>
+              </Button>
+
+              <Button
+                className="flex-1"
+                type="button"
+                loading={form.formState.isSubmitting}
+                disabled={!form.formState.isValid}
+                onClick={async () => onFormSubmit()}
+              >
+                <Trans>Save</Trans>
+              </Button>
+            </div>
+          </SheetContent>
+        </Sheet>
+      )}
+
+      <FieldAdvancedSettingsDrawer
+        isOpen={showAdvancedSettings}
+        onOpenChange={setShowAdvancedSettings}
+        currentField={currentField}
+        fields={localFields}
+        onFieldUpdate={handleUpdateFieldMeta}
+      />
+    </>
+  );
+};

apps/remix/app/components/embed/authoring/configure-fields-view.types.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod';
+
+import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { FieldType } from '@documenso/prisma/client';
+
+export const ZConfigureFieldsFormSchema = z.object({
+  fields: z.array(
+    z.object({
+      nativeId: z.number().optional(),
+      formId: z.string().min(1),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      inserted: z.boolean().optional(),
+      recipientId: z.number().min(0),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+      fieldMeta: ZFieldMetaSchema.optional(),
+    }),
+  ),
+});
+
+export type TConfigureFieldsFormSchema = z.infer<typeof ZConfigureFieldsFormSchema>;
+
+export type TConfigureFieldsFormSchemaField = z.infer<
+  typeof ZConfigureFieldsFormSchema
+>['fields'][number];

apps/remix/app/components/embed/authoring/field-advanced-settings-drawer.tsx

@@ -0,0 +1,60 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+
+import { type TFieldMetaSchema as FieldMeta } from '@documenso/lib/types/field-meta';
+import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
+import { FieldAdvancedSettings } from '@documenso/ui/primitives/document-flow/field-item-advanced-settings';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { Sheet, SheetContent, SheetTitle } from '@documenso/ui/primitives/sheet';
+
+import type { TConfigureFieldsFormSchemaField } from './configure-fields-view.types';
+
+export type FieldAdvancedSettingsDrawerProps = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  currentField: TConfigureFieldsFormSchemaField | null;
+  fields: TConfigureFieldsFormSchemaField[];
+  onFieldUpdate: (formId: string, fieldMeta: FieldMeta) => void;
+};
+
+export const FieldAdvancedSettingsDrawer = ({
+  isOpen,
+  onOpenChange,
+  currentField,
+  fields,
+  onFieldUpdate,
+}: FieldAdvancedSettingsDrawerProps) => {
+  const { _ } = useLingui();
+
+  if (!currentField) {
+    return null;
+  }
+
+  return (
+    <Sheet open={isOpen} onOpenChange={onOpenChange}>
+      <SheetContent position="right" size="lg" className="w-9/12 max-w-sm overflow-y-auto">
+        <SheetTitle className="sr-only">
+          {parseMessageDescriptor(
+            _,
+            msg`Configure ${parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[currentField.type])} Field`,
+          )}
+        </SheetTitle>
+
+        <FieldAdvancedSettings
+          title={msg`Advanced settings`}
+          description={msg`Configure the ${parseMessageDescriptor(
+            _,
+            FRIENDLY_FIELD_TYPE[currentField.type],
+          )} field`}
+          field={currentField}
+          fields={fields}
+          onAdvancedSettings={() => onOpenChange(false)}
+          onSave={(fieldMeta) => {
+            onFieldUpdate(currentField.formId, fieldMeta);
+            onOpenChange(false);
+          }}
+        />
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -1,7 +1,11 @@
+import { Loader } from 'lucide-react';
+
 export const EmbedClientLoading = () => {
   return (
     <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
-      Loading...
+      <Loader className="mr-2 h-4 w-4 animate-spin" />
+
+      <span>Loading...</span>
     </div>
   );
 };

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -332,7 +332,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -15,10 +15,12 @@ import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -47,6 +49,7 @@ export type EmbedSignDocumentClientPageProps = {
   documentData: DocumentData;
   recipient: RecipientWithFields;
   fields: Field[];
+  completedFields: DocumentField[];
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
@@ -60,6 +63,7 @@ export const EmbedSignDocumentClientPage = ({
   documentData,
   recipient,
   fields,
+  completedFields,
   metadata,
   isCompleted,
   hidePoweredBy = false,
@@ -85,6 +89,8 @@ export const EmbedSignDocumentClientPage = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+  const [showOtherRecipientsCompletedFields, setShowOtherRecipientsCompletedFields] =
+    useState(false);
 
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
 
@@ -202,6 +208,7 @@ export const EmbedSignDocumentClientPage = ({
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
       setAllowDocumentRejection(!!data.allowDocumentRejection);
+      setShowOtherRecipientsCompletedFields(!!data.showOtherRecipientsCompletedFields);
 
       if (data.darkModeDisabled) {
         document.documentElement.classList.add('dark-mode-disabled');
@@ -283,7 +290,7 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
             <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
@@ -468,6 +475,9 @@ export const EmbedSignDocumentClientPage = ({
 
           {/* Fields */}
           <EmbedDocumentFields fields={fields} metadata={metadata} />
+
+          {/* Completed fields */}
+          <DocumentReadOnlyFields documentMeta={metadata || undefined} fields={completedFields} />
         </div>
 
         {!hidePoweredBy && (

apps/remix/app/components/embed/multisign/multi-sign-document-list.tsx

@@ -0,0 +1,182 @@
+import { Trans } from '@lingui/react/macro';
+import { ReadStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { ArrowRight, EyeIcon, XCircle } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import type { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Progress } from '@documenso/ui/primitives/progress';
+
+// Get the return type from getRecipientByToken
+type RecipientWithFields = Awaited<ReturnType<typeof getRecipientByToken>>;
+
+interface DocumentEnvelope {
+  document: DocumentAndSender;
+  recipient: RecipientWithFields;
+}
+
+interface MultiSignDocumentListProps {
+  envelopes: DocumentEnvelope[];
+  onDocumentSelect: (document: DocumentEnvelope['document']) => void;
+}
+
+export function MultiSignDocumentList({ envelopes, onDocumentSelect }: MultiSignDocumentListProps) {
+  // Calculate progress
+  const completedDocuments = envelopes.filter(
+    (envelope) => envelope.recipient.signingStatus === SigningStatus.SIGNED,
+  );
+  const totalDocuments = envelopes.length;
+  const progressPercentage = (completedDocuments.length / totalDocuments) * 100;
+
+  // Find next document to sign (first one that's not signed and not rejected)
+  const nextDocumentToSign = envelopes.find(
+    (envelope) =>
+      envelope.recipient.signingStatus !== SigningStatus.SIGNED &&
+      envelope.recipient.signingStatus !== SigningStatus.REJECTED,
+  );
+
+  const allDocumentsCompleted = completedDocuments.length === totalDocuments;
+
+  const hasAssistantOrCcRecipient = envelopes.some(
+    (envelope) =>
+      envelope.recipient.role === RecipientRole.ASSISTANT ||
+      envelope.recipient.role === RecipientRole.CC,
+  );
+
+  function handleView(doc: DocumentEnvelope['document']) {
+    onDocumentSelect(doc);
+  }
+
+  function handleNextDocument() {
+    if (nextDocumentToSign) {
+      onDocumentSelect(nextDocumentToSign.document);
+    }
+  }
+
+  if (hasAssistantOrCcRecipient) {
+    return (
+      <div className="mx-auto mt-16 flex w-full max-w-lg flex-col md:mt-16 md:rounded-2xl md:border md:px-8 md:py-16 md:shadow-lg">
+        <div className="flex items-center justify-center">
+          <XCircle className="text-destructive h-16 w-16 md:h-24 md:w-24" strokeWidth={1.2} />
+        </div>
+
+        <h2 className="mt-12 text-xl font-bold md:text-2xl">
+          <Trans>It looks like we ran into an issue!</Trans>
+        </h2>
+
+        <p className="text-muted-foreground mt-6">
+          <Trans>
+            One of the documents in the current bundle has a signing role that is not compatible
+            with the current signing experience.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2">
+          <Trans>
+            Assistants and Copy roles are currently not compatible with the multi-sign experience.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2">
+          <Trans>Please contact the site owner for further assistance.</Trans>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-background mx-auto w-full max-w-lg md:my-12 md:rounded-2xl md:border md:p-8 md:shadow-lg">
+      <h2 className="text-foreground mb-1 text-lg font-semibold">
+        <Trans>Sign Documents</Trans>
+      </h2>
+
+      <p className="text-muted-foreground text-sm">
+        <Trans>
+          You have been requested to sign the following documents. Review each document carefully
+          and complete the signing process.
+        </Trans>
+      </p>
+
+      {/* Progress Section */}
+      <div className="mt-6">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground font-medium">
+            <Trans>Progress</Trans>
+          </span>
+          <span className="text-muted-foreground">
+            {completedDocuments.length} of {totalDocuments} completed
+          </span>
+        </div>
+
+        <div className="mt-4">
+          <Progress value={progressPercentage} className="h-2" />
+        </div>
+      </div>
+
+      <div className="mt-6 flex flex-col gap-4">
+        {envelopes.map((envelope) => (
+          <div
+            key={envelope.document.id}
+            className="border-border flex items-center gap-4 rounded-lg border px-4 py-2"
+          >
+            <span className="text-foreground flex-1 truncate text-sm font-medium">
+              {envelope.document.title}
+            </span>
+
+            {match(envelope.recipient)
+              .with({ signingStatus: SigningStatus.SIGNED }, () => (
+                <Badge size="small" variant="default">
+                  <Trans>Completed</Trans>
+                </Badge>
+              ))
+              .with({ signingStatus: SigningStatus.REJECTED }, () => (
+                <Badge size="small" variant="destructive">
+                  <Trans>Rejected</Trans>
+                </Badge>
+              ))
+              .with({ readStatus: ReadStatus.OPENED }, () => (
+                <Badge size="small" variant="neutral">
+                  <Trans>Viewed</Trans>
+                </Badge>
+              ))
+              .otherwise(() => null)}
+
+            <Button
+              className="-mr-2"
+              variant="outline"
+              size="sm"
+              onClick={() => handleView(envelope.document)}
+            >
+              <EyeIcon className="mr-1 h-4 w-4" />
+              <Trans>View</Trans>
+            </Button>
+          </div>
+        ))}
+      </div>
+
+      {/* Next Document Button */}
+      {!allDocumentsCompleted && nextDocumentToSign && (
+        <div className="mt-6">
+          <Button onClick={handleNextDocument} className="w-full" size="lg">
+            <Trans>View next document</Trans>
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {allDocumentsCompleted && (
+        <Alert className="mt-6 text-center">
+          <AlertTitle>
+            <Trans>All documents have been completed!</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            <Trans>Thank you for completing the signing process.</Trans>
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -0,0 +1,396 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus, FieldType, SigningStatus } from '@prisma/client';
+import { Loader, LucideChevronDown, LucideChevronUp, X } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import PDFViewer from '@documenso/ui/primitives/pdf-viewer';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningContext } from '../../general/document-signing/document-signing-provider';
+import { DocumentSigningRejectDialog } from '../../general/document-signing/document-signing-reject-dialog';
+import { EmbedDocumentFields } from '../embed-document-fields';
+
+interface MultiSignDocumentSigningViewProps {
+  token: string;
+  recipientId: number;
+  onBack: () => void;
+  onDocumentCompleted?: (data: { token: string; documentId: number; recipientId: number }) => void;
+  onDocumentRejected?: (data: {
+    token: string;
+    documentId: number;
+    recipientId: number;
+    reason: string;
+  }) => void;
+  onDocumentError?: () => void;
+  onDocumentReady?: () => void;
+  isNameLocked?: boolean;
+  allowDocumentRejection?: boolean;
+}
+
+export const MultiSignDocumentSigningView = ({
+  token,
+  recipientId,
+  onBack,
+  onDocumentCompleted,
+  onDocumentRejected,
+  onDocumentError,
+  onDocumentReady,
+  isNameLocked = false,
+  allowDocumentRejection = false,
+}: MultiSignDocumentSigningViewProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { fullName, email, signature, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
+
+  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+
+  const { data: document, isLoading } = trpc.embeddingPresign.getMultiSignDocument.useQuery(
+    { token },
+    {
+      staleTime: 0,
+    },
+  );
+
+  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
+  const { mutateAsync: removeSignedFieldWithToken } =
+    trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const { mutateAsync: completeDocumentWithToken } =
+    trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const hasSignatureField = document?.fields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const [pendingFields, completedFields] = [
+    document?.fields.filter((field) => field.recipient.signingStatus !== SigningStatus.SIGNED) ??
+      [],
+    document?.fields.filter((field) => field.recipient.signingStatus === SigningStatus.SIGNED) ??
+      [],
+  ];
+
+  const uninsertedFields = document?.fields.filter((field) => !field.inserted);
+
+  const onSignField = async (payload: TSignFieldWithTokenMutationSchema) => {
+    try {
+      await signFieldWithToken(payload);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onUnsignField = async (payload: TRemovedSignedFieldWithTokenMutationSchema) => {
+    try {
+      await removeSignedFieldWithToken(payload);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+    }
+  };
+
+  const onDocumentComplete = async () => {
+    try {
+      setIsSubmitting(true);
+
+      await completeDocumentWithToken({
+        documentId: document!.id,
+        token,
+      });
+
+      onBack();
+
+      onDocumentCompleted?.({
+        token,
+        documentId: document!.id,
+        recipientId,
+      });
+    } catch (err) {
+      onDocumentError?.();
+
+      toast({
+        title: 'Error',
+        description: 'Failed to complete the document. Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const onNextFieldClick = () => {
+    setShowPendingFieldTooltip(true);
+
+    setIsExpanded(false);
+  };
+
+  const onRejected = (reason: string) => {
+    if (onDocumentRejected && document) {
+      onDocumentRejected({
+        token,
+        documentId: document.id,
+        recipientId,
+        reason,
+      });
+    }
+  };
+
+  return (
+    <div className="bg-background min-h-screen overflow-hidden">
+      <div id="document-field-portal-root" className="relative h-full w-full overflow-y-auto p-8">
+        {match({ isLoading, document })
+          .with({ isLoading: true }, () => (
+            <div className="flex min-h-[400px] w-full items-center justify-center">
+              <div className="flex flex-col items-center gap-4">
+                <Loader className="text-primary h-8 w-8 animate-spin" />
+                <p className="text-muted-foreground text-sm">
+                  <Trans>Loading document...</Trans>
+                </p>
+              </div>
+            </div>
+          ))
+          .with({ isLoading: false, document: undefined }, () => (
+            <div className="flex min-h-[400px] w-full items-center justify-center">
+              <p className="text-muted-foreground text-sm">
+                <Trans>Failed to load document</Trans>
+              </p>
+            </div>
+          ))
+          .with({ document: P.nonNullable }, ({ document }) => (
+            <>
+              <div className="mx-auto flex w-full max-w-screen-xl items-baseline justify-between">
+                <div className="flex items-center gap-4">
+                  <h1 className="text-2xl font-semibold">{document.title}</h1>
+                </div>
+
+                <Button variant="ghost" size="sm" onClick={onBack} className="p-2">
+                  <X className="h-5 w-5" />
+                </Button>
+              </div>
+
+              {allowDocumentRejection && (
+                <div className="embed--Actions mb-4 mt-8 flex w-full flex-row-reverse items-baseline justify-between">
+                  <DocumentSigningRejectDialog
+                    document={document}
+                    token={token}
+                    onRejected={onRejected}
+                  />
+                </div>
+              )}
+
+              <div className="embed--DocumentContainer relative mx-auto mt-8 flex w-full max-w-screen-xl flex-col gap-x-6 gap-y-12 md:flex-row">
+                <div
+                  className={cn('embed--DocumentViewer flex-1', {
+                    'md:mx-auto md:max-w-2xl': document.status === DocumentStatus.COMPLETED,
+                  })}
+                >
+                  <PDFViewer
+                    documentData={document.documentData}
+                    onDocumentLoad={() => {
+                      setHasDocumentLoaded(true);
+                      onDocumentReady?.();
+                    }}
+                  />
+                </div>
+
+                {/* Widget */}
+                {document.status !== DocumentStatus.COMPLETED && (
+                  <div
+                    key={isExpanded ? 'expanded' : 'collapsed'}
+                    className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:bottom-[unset] md:top-0 md:z-auto md:w-[350px] md:px-0"
+                    data-expanded={isExpanded || undefined}
+                  >
+                    <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+                      {/* Header */}
+                      <div className="embed--DocumentWidgetHeader">
+                        <div className="flex items-center justify-between gap-x-2">
+                          <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                            <Trans>Sign document</Trans>
+                          </h3>
+
+                          <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                            {isExpanded ? (
+                              <LucideChevronDown
+                                className="text-muted-foreground h-5 w-5"
+                                onClick={() => setIsExpanded(false)}
+                              />
+                            ) : (
+                              <LucideChevronUp
+                                className="text-muted-foreground h-5 w-5"
+                                onClick={() => setIsExpanded(true)}
+                              />
+                            )}
+                          </Button>
+                        </div>
+                      </div>
+
+                      <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
+                        <p className="text-muted-foreground mt-2 text-sm">
+                          <Trans>Sign the document to complete the process.</Trans>
+                        </p>
+
+                        <hr className="border-border mb-8 mt-4" />
+                      </div>
+
+                      {/* Form */}
+                      <div className="embed--DocumentWidgetForm -mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+                        <div className="flex flex-1 flex-col gap-y-4">
+                          {
+                            <>
+                              <div>
+                                <Label htmlFor="full-name">
+                                  <Trans>Full Name</Trans>
+                                </Label>
+
+                                <Input
+                                  type="text"
+                                  id="full-name"
+                                  className="bg-background mt-2"
+                                  disabled={isNameLocked}
+                                  value={fullName}
+                                  onChange={(e) => !isNameLocked && setFullName(e.target.value)}
+                                />
+                              </div>
+
+                              <div>
+                                <Label htmlFor="email">
+                                  <Trans>Email</Trans>
+                                </Label>
+
+                                <Input
+                                  type="email"
+                                  id="email"
+                                  className="bg-background mt-2"
+                                  value={email}
+                                  disabled
+                                />
+                              </div>
+
+                              {hasSignatureField && (
+                                <div>
+                                  <Label htmlFor="Signature">
+                                    <Trans>Signature</Trans>
+                                  </Label>
+
+                                  <SignaturePadDialog
+                                    className="mt-2"
+                                    disabled={isSubmitting}
+                                    disableAnimation
+                                    value={signature ?? ''}
+                                    onChange={(v) => setSignature(v ?? '')}
+                                    typedSignatureEnabled={
+                                      document.documentMeta?.typedSignatureEnabled
+                                    }
+                                    uploadSignatureEnabled={
+                                      document.documentMeta?.uploadSignatureEnabled
+                                    }
+                                    drawSignatureEnabled={
+                                      document.documentMeta?.drawSignatureEnabled
+                                    }
+                                  />
+                                </div>
+                              )}
+                            </>
+                          }
+                        </div>
+                      </div>
+
+                      <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
+
+                      <div className="embed--DocumentWidgetFooter mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+                        {uninsertedFields.length > 0 ? (
+                          <Button className="col-start-2" onClick={onNextFieldClick}>
+                            <Trans>Next</Trans>
+                          </Button>
+                        ) : (
+                          <Button
+                            className="col-span-2"
+                            loading={isSubmitting}
+                            onClick={onDocumentComplete}
+                          >
+                            <Trans>Complete</Trans>
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {hasDocumentLoaded && (
+                <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+                  {showPendingFieldTooltip && pendingFields.length > 0 && (
+                    <FieldToolTip
+                      key={pendingFields[0].id}
+                      field={pendingFields[0]}
+                      color="warning"
+                    >
+                      <Trans>Click to insert field</Trans>
+                    </FieldToolTip>
+                  )}
+                </ElementVisible>
+              )}
+
+              {/* Fields */}
+              {hasDocumentLoaded && (
+                <EmbedDocumentFields
+                  fields={pendingFields}
+                  metadata={document.documentMeta}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              )}
+
+              {/* Completed fields */}
+              {document.status !== DocumentStatus.COMPLETED && (
+                <DocumentReadOnlyFields
+                  documentMeta={document.documentMeta ?? undefined}
+                  fields={completedFields}
+                />
+              )}
+            </>
+          ))
+          .otherwise(() => null)}
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx

@@ -9,6 +9,10 @@ import { z } from 'zod';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TTemplate } from '@documenso/lib/types/template';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '@documenso/ui/components/document/document-read-only-fields';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -16,7 +20,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import {
   Form,
@@ -97,14 +100,16 @@ export const DirectTemplateConfigureForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          directTemplateRecipient.fields.map((field, index) => (
-            <ShowFieldItem
-              key={index}
-              field={field}
-              recipients={recipientsWithBlankDirectRecipientEmail}
-            />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            fields={mapFieldsWithRecipients(
+              directTemplateRecipient.fields,
+              recipientsWithBlankDirectRecipientEmail,
+            )}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            showRecipientColors={true}
+          />
+        )}
 
         <Form {...form}>
           <fieldset
@@ -125,7 +130,7 @@ export const DirectTemplateConfigureForm = ({
                       {...field}
                       disabled={
                         field.disabled ||
-                        derivedRecipientAccessAuth !== null ||
+                        derivedRecipientAccessAuth.length > 0 ||
                         user?.email !== undefined
                       }
                       placeholder="recipient@documenso.com"

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -8,6 +8,7 @@ import { useNavigate, useSearchParams } from 'react-router';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TTemplate } from '@documenso/lib/types/template';
+import { isRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
@@ -103,11 +104,17 @@ export const DirectTemplatePageView = ({
         directRecipientEmail: recipient.email,
         templateUpdatedAt: template.updatedAt,
         signedFieldValues: fields.map((field) => {
-          if (!field.signedValue) {
+          if (isRequiredField(field) && !field.signedValue) {
             throw new Error('Invalid configuration');
           }
 
-          return field.signedValue;
+          return {
+            token: field.signedValue?.token ?? '',
+            fieldId: field.signedValue?.fieldId ?? 0,
+            value: field.signedValue?.value,
+            isBase64: field.signedValue?.isBase64,
+            authOptions: field.signedValue?.authOptions,
+          };
         }),
       });
 

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -17,6 +17,7 @@ import {
   ZTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import type { TTemplate } from '@documenso/lib/types/template';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
@@ -78,6 +79,10 @@ export const DirectTemplateSigningForm = ({
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const fieldsRequiringValidation = useMemo(() => {
+    return localFields.filter((field) => isFieldUnsignedAndRequired(field));
+  }, [localFields]);
+
   const { currentStep, totalSteps, previousStep } = useStep();
 
   const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
@@ -134,18 +139,18 @@ export const DirectTemplateSigningForm = ({
   };
 
   const uninsertedFields = useMemo(() => {
-    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
+    return sortFieldsByPosition(fieldsRequiringValidation);
   }, [localFields]);
 
   const fieldsValidated = () => {
     setValidateUninsertedFields(true);
-    validateFieldsInserted(localFields);
+    validateFieldsInserted(fieldsRequiringValidation);
   };
 
   const handleSubmit = async () => {
     setValidateUninsertedFields(true);
 
-    const isFieldsValid = validateFieldsInserted(localFields);
+    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
 
     if (!isFieldsValid) {
       return;

apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx

@@ -1,5 +1,8 @@
+import { useState } from 'react';
+
 import { Trans } from '@lingui/react/macro';
 import type { FieldType } from '@prisma/client';
+import { ChevronLeftIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import {
@@ -7,6 +10,7 @@ import {
   type TRecipientActionAuth,
   type TRecipientActionAuthTypes,
 } from '@documenso/lib/types/document-auth';
+import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
@@ -18,11 +22,12 @@ import {
 import { DocumentSigningAuth2FA } from './document-signing-auth-2fa';
 import { DocumentSigningAuthAccount } from './document-signing-auth-account';
 import { DocumentSigningAuthPasskey } from './document-signing-auth-passkey';
+import { DocumentSigningAuthPassword } from './document-signing-auth-password';
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 
 export type DocumentSigningAuthDialogProps = {
   title?: string;
-  documentAuthType: TRecipientActionAuthTypes;
+  availableAuthTypes: TRecipientActionAuthTypes[];
   description?: string;
   actionTarget: FieldType | 'DOCUMENT';
   open: boolean;
@@ -37,54 +42,158 @@ export type DocumentSigningAuthDialogProps = {
 export const DocumentSigningAuthDialog = ({
   title,
   description,
-  documentAuthType,
+  availableAuthTypes,
   open,
   onOpenChange,
   onReauthFormSubmit,
 }: DocumentSigningAuthDialogProps) => {
   const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
 
+  // Filter out EXPLICIT_NONE from available auth types for the chooser
+  const validAuthTypes = availableAuthTypes.filter(
+    (authType) => authType !== DocumentAuth.EXPLICIT_NONE,
+  );
+
+  const [selectedAuthType, setSelectedAuthType] = useState<TRecipientActionAuthTypes | null>(() => {
+    // Auto-select if there's only one valid option
+    if (validAuthTypes.length === 1) {
+      return validAuthTypes[0];
+    }
+    // Return null if multiple options - show chooser
+    return null;
+  });
+
   const handleOnOpenChange = (value: boolean) => {
     if (isCurrentlyAuthenticating) {
       return;
     }
 
+    // Reset selected auth type when dialog closes
+    if (!value) {
+      setSelectedAuthType(() => {
+        if (validAuthTypes.length === 1) {
+          return validAuthTypes[0];
+        }
+
+        return null;
+      });
+    }
+
     onOpenChange(value);
   };
 
+  const handleBackToChooser = () => {
+    setSelectedAuthType(null);
+  };
+
+  // If no valid auth types available, don't render anything
+  if (validAuthTypes.length === 0) {
+    return null;
+  }
+
   return (
     <Dialog open={open} onOpenChange={handleOnOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{title || <Trans>Sign field</Trans>}</DialogTitle>
+          <DialogTitle>
+            {selectedAuthType && validAuthTypes.length > 1 && (
+              <div className="flex items-center gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleBackToChooser}
+                  className="h-6 w-6 p-0"
+                >
+                  <ChevronLeftIcon className="h-4 w-4" />
+                </Button>
+                <span>{title || <Trans>Sign field</Trans>}</span>
+              </div>
+            )}
+            {(!selectedAuthType || validAuthTypes.length === 1) &&
+              (title || <Trans>Sign field</Trans>)}
+          </DialogTitle>
 
           <DialogDescription>
             {description || <Trans>Reauthentication is required to sign this field</Trans>}
           </DialogDescription>
         </DialogHeader>
 
-        {match({ documentAuthType, user })
-          .with(
-            { documentAuthType: DocumentAuth.ACCOUNT },
-            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
-            () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
-          )
-          .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
-            <DocumentSigningAuthPasskey
-              open={open}
-              onOpenChange={onOpenChange}
-              onReauthFormSubmit={onReauthFormSubmit}
-            />
-          ))
-          .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
-            <DocumentSigningAuth2FA
-              open={open}
-              onOpenChange={onOpenChange}
-              onReauthFormSubmit={onReauthFormSubmit}
-            />
-          ))
-          .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
-          .exhaustive()}
+        {/* Show chooser if no auth type is selected and there are multiple options */}
+        {!selectedAuthType && validAuthTypes.length > 1 && (
+          <div className="space-y-4">
+            <p className="text-muted-foreground text-sm">
+              <Trans>Choose your preferred authentication method:</Trans>
+            </p>
+            <div className="grid gap-2">
+              {validAuthTypes.map((authType) => (
+                <Button
+                  key={authType}
+                  type="button"
+                  variant="outline"
+                  className="h-auto justify-start p-4"
+                  onClick={() => setSelectedAuthType(authType)}
+                >
+                  <div className="text-left">
+                    <div className="font-medium">
+                      {match(authType)
+                        .with(DocumentAuth.ACCOUNT, () => <Trans>Account</Trans>)
+                        .with(DocumentAuth.PASSKEY, () => <Trans>Passkey</Trans>)
+                        .with(DocumentAuth.TWO_FACTOR_AUTH, () => <Trans>2FA</Trans>)
+                        .with(DocumentAuth.PASSWORD, () => <Trans>Password</Trans>)
+                        .exhaustive()}
+                    </div>
+
+                    <div className="text-muted-foreground text-sm">
+                      {match(authType)
+                        .with(DocumentAuth.ACCOUNT, () => <Trans>Sign in to your account</Trans>)
+                        .with(DocumentAuth.PASSKEY, () => (
+                          <Trans>Use your passkey for authentication</Trans>
+                        ))
+                        .with(DocumentAuth.TWO_FACTOR_AUTH, () => (
+                          <Trans>Enter your 2FA code</Trans>
+                        ))
+                        .with(DocumentAuth.PASSWORD, () => <Trans>Enter your password</Trans>)
+                        .exhaustive()}
+                    </div>
+                  </div>
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Show the selected auth component */}
+        {selectedAuthType &&
+          match({ documentAuthType: selectedAuthType, user })
+            .with(
+              { documentAuthType: DocumentAuth.ACCOUNT },
+              { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+              () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
+            )
+            .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
+              <DocumentSigningAuthPasskey
+                open={open}
+                onOpenChange={onOpenChange}
+                onReauthFormSubmit={onReauthFormSubmit}
+              />
+            ))
+            .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
+              <DocumentSigningAuth2FA
+                open={open}
+                onOpenChange={onOpenChange}
+                onReauthFormSubmit={onReauthFormSubmit}
+              />
+            ))
+            .with({ documentAuthType: DocumentAuth.PASSWORD }, () => (
+              <DocumentSigningAuthPassword
+                open={open}
+                onOpenChange={onOpenChange}
+                onReauthFormSubmit={onReauthFormSubmit}
+              />
+            ))
+            .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
+            .exhaustive()}
       </DialogContent>
     </Dialog>
   );

apps/remix/app/components/general/document-signing/document-signing-auth-password.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthPasswordProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+const ZPasswordAuthFormSchema = z.object({
+  password: z
+    .string()
+    .min(1, { message: 'Password is required' })
+    .max(72, { message: 'Password must be at most 72 characters long' }),
+});
+
+type TPasswordAuthFormSchema = z.infer<typeof ZPasswordAuthFormSchema>;
+
+export const DocumentSigningAuthPassword = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onReauthFormSubmit,
+  open,
+  onOpenChange,
+}: DocumentSigningAuthPasswordProps) => {
+  const { recipient, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
+    useRequiredDocumentSigningAuthContext();
+
+  const form = useForm<TPasswordAuthFormSchema>({
+    resolver: zodResolver(ZPasswordAuthFormSchema),
+    defaultValues: {
+      password: '',
+    },
+  });
+
+  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+
+  const onFormSubmit = async ({ password }: TPasswordAuthFormSchema) => {
+    try {
+      setIsCurrentlyAuthenticating(true);
+
+      await onReauthFormSubmit({
+        type: DocumentAuth.PASSWORD,
+        password,
+      });
+
+      setIsCurrentlyAuthenticating(false);
+
+      onOpenChange(false);
+    } catch (err) {
+      setIsCurrentlyAuthenticating(false);
+
+      const error = AppError.parseError(err);
+      setFormErrorCode(error.code);
+
+      // Todo: Alert.
+    }
+  };
+
+  useEffect(() => {
+    form.reset({
+      password: '',
+    });
+
+    setFormErrorCode(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={isCurrentlyAuthenticating}>
+          <div className="space-y-4">
+            {formErrorCode && (
+              <Alert variant="destructive">
+                <AlertTitle>
+                  <Trans>Unauthorized</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>
+                    We were unable to verify your details. Please try again or contact support
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Password</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Enter your password"
+                      {...field}
+                      autoComplete="current-password"
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isCurrentlyAuthenticating}>
+                <Trans>Sign</Trans>
+              </Button>
+            </DialogFooter>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -1,7 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 import { type Document, FieldType, type Passkey, type Recipient } from '@prisma/client';
-import { match } from 'ts-pattern';
 
 import type { SessionUser } from '@documenso/auth/server/lib/session/session';
 import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
@@ -33,8 +32,8 @@ export type DocumentSigningAuthContextValue = {
   recipient: Recipient;
   recipientAuthOption: TRecipientAuthOptions;
   setRecipient: (_value: Recipient) => void;
-  derivedRecipientAccessAuth: TRecipientAccessAuthTypes | null;
-  derivedRecipientActionAuth: TRecipientActionAuthTypes | null;
+  derivedRecipientAccessAuth: TRecipientAccessAuthTypes[];
+  derivedRecipientActionAuth: TRecipientActionAuthTypes[];
   isAuthRedirectRequired: boolean;
   isCurrentlyAuthenticating: boolean;
   setIsCurrentlyAuthenticating: (_value: boolean) => void;
@@ -100,7 +99,7 @@ export const DocumentSigningAuthProvider = ({
     },
     {
       placeholderData: (previousData) => previousData,
-      enabled: derivedRecipientActionAuth === DocumentAuth.PASSKEY,
+      enabled: derivedRecipientActionAuth?.includes(DocumentAuth.PASSKEY) ?? false,
     },
   );
 
@@ -121,21 +120,28 @@ export const DocumentSigningAuthProvider = ({
    * Will be `null` if the user still requires authentication, or if they don't need
    * authentication.
    */
-  const preCalculatedActionAuthOptions = match(derivedRecipientActionAuth)
-    .with(DocumentAuth.ACCOUNT, () => {
-      if (recipient.email !== user?.email) {
-        return null;
-      }
+  const preCalculatedActionAuthOptions = useMemo(() => {
+    if (
+      !derivedRecipientActionAuth ||
+      derivedRecipientActionAuth.length === 0 ||
+      derivedRecipientActionAuth.includes(DocumentAuth.EXPLICIT_NONE)
+    ) {
+      return {
+        type: DocumentAuth.EXPLICIT_NONE,
+      };
+    }
 
+    if (
+      derivedRecipientActionAuth.includes(DocumentAuth.ACCOUNT) &&
+      user?.email == recipient.email
+    ) {
       return {
         type: DocumentAuth.ACCOUNT,
       };
-    })
-    .with(DocumentAuth.EXPLICIT_NONE, () => ({
-      type: DocumentAuth.EXPLICIT_NONE,
-    }))
-    .with(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, null, () => null)
-    .exhaustive();
+    }
+
+    return null;
+  }, [derivedRecipientActionAuth, user, recipient]);
 
   const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
     // Directly run callback if no auth required.
@@ -170,7 +176,8 @@ export const DocumentSigningAuthProvider = ({
   // Assume that a user must be logged in for any auth requirements.
   const isAuthRedirectRequired = Boolean(
     derivedRecipientActionAuth &&
-      derivedRecipientActionAuth !== DocumentAuth.EXPLICIT_NONE &&
+      derivedRecipientActionAuth.length > 0 &&
+      !derivedRecipientActionAuth.includes(DocumentAuth.EXPLICIT_NONE) &&
       user?.email !== recipient.email,
   );
 
@@ -208,7 +215,7 @@ export const DocumentSigningAuthProvider = ({
           onOpenChange={() => setDocumentAuthDialogPayload(null)}
           onReauthFormSubmit={documentAuthDialogPayload.onReauthFormSubmit}
           actionTarget={documentAuthDialogPayload.actionTarget}
-          documentAuthType={derivedRecipientActionAuth}
+          availableAuthTypes={derivedRecipientActionAuth}
         />
       )}
     </DocumentSigningAuthContext.Provider>
@@ -217,7 +224,7 @@ export const DocumentSigningAuthProvider = ({
 
 type ExecuteActionAuthProcedureOptions = Omit<
   DocumentSigningAuthDialogProps,
-  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole'
+  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole' | 'availableAuthTypes'
 >;
 
 DocumentSigningAuthProvider.displayName = 'DocumentSigningAuthProvider';

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -44,6 +44,7 @@ const AUTO_SIGNABLE_FIELD_TYPES: string[] = [
 // other field types.
 const NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES: string[] = [
   DocumentAuth.PASSKEY,
+  DocumentAuth.PASSWORD,
   DocumentAuth.TWO_FACTOR_AUTH,
 ];
 
@@ -96,8 +97,8 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     return true;
   });
 
-  const actionAuthAllowsAutoSign = !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(
-    derivedRecipientActionAuth ?? '',
+  const actionAuthAllowsAutoSign = derivedRecipientActionAuth.every(
+    (actionAuth) => !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(actionAuth),
   );
 
   const onSubmit = async () => {
@@ -110,16 +111,16 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
           .with(FieldType.DATE, () => new Date().toISOString())
           .otherwise(() => '');
 
-        const authOptions = match(derivedRecipientActionAuth)
+        const authOptions = match(derivedRecipientActionAuth.at(0))
           .with(DocumentAuth.ACCOUNT, () => ({
             type: DocumentAuth.ACCOUNT,
           }))
           .with(DocumentAuth.EXPLICIT_NONE, () => ({
             type: DocumentAuth.EXPLICIT_NONE,
           }))
-          .with(null, () => undefined)
+          .with(undefined, () => undefined)
           .with(
-            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH),
+            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, DocumentAuth.PASSWORD),
             // This is a bit dirty, but the sentinel value used here is incredibly short-lived.
             () => 'NOT_SUPPORTED' as const,
           )

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -97,6 +97,12 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
+      // Do nothing, this should only happen when the user clicks the field, but
+      // misses the checkbox which triggers this callback.
+      if (checkedValues.length === 0) {
+        return;
+      }
+
       if (!isLengthConditionMet) {
         return;
       }
@@ -270,21 +276,26 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div className="z-50 flex flex-col gap-y-2">
+          <div className="z-50 my-0.5 flex flex-col gap-y-1">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
               return (
-                <div key={index} className="flex items-center gap-x-1.5">
+                <div key={index} className="flex items-center">
                   <Checkbox
-                    className="h-4 w-4"
-                    id={`checkbox-${index}`}
+                    className="h-3 w-3"
+                    id={`checkbox-${field.id}-${item.id}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  <Label htmlFor={`checkbox-${index}`}>
-                    {item.value.includes('empty-value-') ? '' : item.value}
-                  </Label>
+                  {!item.value.includes('empty-value-') && item.value && (
+                    <Label
+                      htmlFor={`checkbox-${field.id}-${item.id}`}
+                      className="text-foreground ml-1.5 text-xs font-normal"
+                    >
+                      {item.value}
+                    </Label>
+                  )}
                 </div>
               );
             })}
@@ -293,22 +304,27 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="flex flex-col gap-y-1">
+        <div className="my-0.5 flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
             return (
-              <div key={index} className="flex items-center gap-x-1.5">
+              <div key={index} className="flex items-center">
                 <Checkbox
                   className="h-3 w-3"
-                  id={`checkbox-${index}`}
+                  id={`checkbox-${field.id}-${item.id}`}
                   checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
-                  {item.value.includes('empty-value-') ? '' : item.value}
-                </Label>
+                {!item.value.includes('empty-value-') && item.value && (
+                  <Label
+                    htmlFor={`checkbox-${field.id}-${item.id}`}
+                    className="text-foreground ml-1.5 text-xs font-normal"
+                  >
+                    {item.value}
+                  </Label>
+                )}
               </div>
             );
           })}

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -92,8 +92,6 @@ export const DocumentSigningCompleteDialog = ({
   };
 
   const onFormSubmit = async (data: TNextSignerFormSchema) => {
-    console.log('data', data);
-    console.log('form.formState.errors', form.formState.errors);
     try {
       if (allowDictateNextSigner && data.name && data.email) {
         await onSignatureComplete({ name: data.name, email: data.email });
@@ -281,7 +279,7 @@ export const DocumentSigningCompleteDialog = ({
                 <div className="flex w-full flex-1 flex-nowrap gap-4">
                   <Button
                     type="button"
-                    className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                    className="flex-1"
                     variant="secondary"
                     onClick={() => setShowDialog(false)}
                     disabled={form.formState.isSubmitting}

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -142,7 +142,7 @@ export const DocumentSigningDateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           <Trans>Date</Trans>
         </p>
       )}
@@ -151,12 +151,10 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-foreground w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -177,15 +177,11 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-foreground flex flex-col items-center justify-center duration-200">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
-                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
-                  {
-                    'hover:text-red-300': parsedFieldMeta.required,
-                    'hover:text-yellow-300': !parsedFieldMeta.required,
-                  },
+                  'text-foreground z-10 h-full w-full border-none ring-0 focus:border-none focus:ring-0',
                 )}
               >
                 <SelectValue
@@ -205,7 +201,7 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          <p className="text-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -1,7 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -14,10 +13,14 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -120,34 +123,18 @@ export const DocumentSigningEmailField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Email</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
     </DocumentSigningFieldContainer>
   );

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
+import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { X } from 'lucide-react';
 
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
@@ -128,57 +130,51 @@ export const DocumentSigningFieldContainer = ({
   };
 
   return (
-    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
-      <FieldRootContainer field={field}>
+    <div className={cn('[container-type:size]')}>
+      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
-            className="absolute inset-0 z-10 h-full w-full rounded-md border"
+            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
             onClick={async () => handleInsertField()}
           />
         )}
 
         {readOnlyField && (
           <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
-            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
+            <span className="bg-foreground/50 text-background rounded-xl p-2">
               <Trans>Read only field</Trans>
             </span>
           </button>
         )}
 
-        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <button
-                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-                onClick={onRemoveSignedFieldClick}
-              >
-                <Trans>Remove</Trans>
-              </button>
-            </TooltipTrigger>
-
-            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
-          </Tooltip>
-        )}
-
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
-            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
             onClick={() => void onClearCheckBoxValues(type)}
           >
-            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+            <span className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
               <X className="h-4 w-4" />
             </span>
           </button>
         )}
 
-        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
-          <button
-            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-            onClick={onRemoveSignedFieldClick}
-          >
-            <Trans>Remove</Trans>
-          </button>
+        {type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button className="absolute inset-0 z-10" onClick={onRemoveSignedFieldClick}></button>
+            </TooltipTrigger>
+
+            <TooltipContent
+              className="border-0 bg-orange-300 fill-orange-300 text-orange-900"
+              sideOffset={2}
+            >
+              {tooltipText && <p>{tooltipText}</p>}
+
+              <Trans>Remove</Trans>
+              <TooltipArrow />
+            </TooltipContent>
+          </Tooltip>
         )}
 
         {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&

apps/remix/app/components/general/document-signing/document-signing-fields.tsx

@@ -0,0 +1,51 @@
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export const DocumentSigningFieldsLoader = () => {
+  return (
+    <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+      <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+    </div>
+  );
+};
+
+export const DocumentSigningFieldsUninserted = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+      {children}
+    </p>
+  );
+};
+
+type DocumentSigningFieldsInsertedProps = {
+  children: React.ReactNode;
+
+  /**
+   * The text alignment of the field.
+   *
+   * Defaults to left.
+   */
+  textAlign?: 'left' | 'center' | 'right';
+};
+
+export const DocumentSigningFieldsInserted = ({
+  children,
+  textAlign = 'left',
+}: DocumentSigningFieldsInsertedProps) => {
+  return (
+    <div className="flex h-full w-full items-center">
+      <p
+        className={cn(
+          'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+          {
+            '!text-center': textAlign === 'center',
+            '!text-right': textAlign === 'right',
+          },
+        )}
+      >
+        {children}
+      </p>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -1,12 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZInitialsFieldMeta } from '@documenso/lib/types/field-meta';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -17,6 +17,11 @@ import type {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -50,6 +55,9 @@ export const DocumentSigningInitialsField = ({
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
+  const safeFieldMeta = ZInitialsFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = initials ?? '';
@@ -122,22 +130,18 @@ export const DocumentSigningInitialsField = ({
       onRemove={onRemove}
       type="Initials"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Initials</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
           {field.customText}
-        </p>
+        </DocumentSigningFieldsInserted>
       )}
     </DocumentSigningFieldContainer>
   );

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -16,7 +15,6 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -25,6 +23,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -166,34 +169,18 @@ export const DocumentSigningNameField = ({
       onRemove={onRemove}
       type="Name"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Name</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
@@ -202,7 +189,7 @@ export const DocumentSigningNameField = ({
             <Trans>
               Sign as
               <div>
-                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
+                {recipient.name} <div className="text-foreground">({recipient.email})</div>
               </div>
             </Trans>
           </DialogTitle>
@@ -224,7 +211,7 @@ export const DocumentSigningNameField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowFullNameModal(false);

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Hash, Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@@ -25,6 +24,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type ValidationErrors = {
@@ -245,45 +249,16 @@ export const DocumentSigningNumberField = ({
       onRemove={onRemove}
       type="Number"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p
-          className={cn(
-            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
-            {
-              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
-              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
-            },
-          )}
-        >
-          <span className="flex items-center justify-center gap-x-1">
-            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
-            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
-          </span>
-        </p>
+        <DocumentSigningFieldsUninserted>{fieldDisplayName}</DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showNumberModal} onOpenChange={setShowNumberModal}>
@@ -339,7 +314,7 @@ export const DocumentSigningNumberField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowNumberModal(false);

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

@@ -19,6 +19,7 @@ import {
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -36,7 +37,6 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
@@ -157,7 +157,11 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields fields={completedFields} />
+        <DocumentReadOnlyFields
+          documentMeta={documentMeta || undefined}
+          fields={completedFields}
+          showRecipientTooltip={true}
+        />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -21,6 +20,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { DocumentSigningFieldsLoader } from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningRadioFieldProps = {
@@ -150,44 +150,52 @@ export const DocumentSigningRadioField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
-      {isLoading && (
-        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
+        <RadioGroup
+          onValueChange={(value) => handleSelectItem(value)}
+          className="z-10 my-0.5 gap-y-1"
+        >
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
+            <div key={index} className="flex items-center">
               <RadioGroupItem
-                className="h-4 w-4 shrink-0"
+                className="h-3 w-3 shrink-0"
                 value={item.value}
-                id={`option-${index}`}
+                id={`option-${field.id}-${item.id}`}
                 checked={item.checked}
               />
-
-              <Label htmlFor={`option-${index}`}>
-                {item.value.includes('empty-value-') ? '' : item.value}
-              </Label>
+              {!item.value.includes('empty-value-') && item.value && (
+                <Label
+                  htmlFor={`option-${field.id}-${item.id}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
             </div>
           ))}
         </RadioGroup>
       )}
 
       {field.inserted && (
-        <RadioGroup className="gap-y-1">
+        <RadioGroup className="my-0.5 gap-y-1">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
+            <div key={index} className="flex items-center">
               <RadioGroupItem
                 className="h-3 w-3"
                 value={item.value}
-                id={`option-${index}`}
+                id={`option-${field.id}-${item.id}`}
                 checked={item.value === field.customText}
               />
-              <Label htmlFor={`option-${index}`} className="text-xs">
-                {item.value.includes('empty-value-') ? '' : item.value}
-              </Label>
+              {!item.value.includes('empty-value-') && item.value && (
+                <Label
+                  htmlFor={`option-${field.id}-${item.id}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
             </div>
           ))}
         </RadioGroup>

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -242,7 +242,7 @@ export const DocumentSigningSignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary font-signature text-muted-foreground group-hover:text-recipient-green text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200">
           <Trans>Signature</Trans>
         </p>
       )}
@@ -259,7 +259,7 @@ export const DocumentSigningSignatureField = ({
         <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
           <p
             ref={signatureRef}
-            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
+            className="font-signature text-muted-foreground w-full overflow-hidden break-all text-center leading-tight duration-200"
             style={{ fontSize: `${fontSize}rem` }}
           >
             {signature?.typedSignature}
@@ -291,7 +291,7 @@ export const DocumentSigningSignatureField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowSignatureModal(false);

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
-import { Loader, Type } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
@@ -25,6 +24,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningTextFieldProps = {
@@ -248,49 +252,20 @@ export const DocumentSigningTextField = ({
       onRemove={onRemove}
       type="Text"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p
-          className={cn(
-            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
-            {
-              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
-              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
-            },
-          )}
-        >
-          <span className="flex items-center justify-center gap-x-1">
-            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
-            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
-              {fieldDisplayName || <Trans>Text</Trans>}
-            </span>
-          </span>
-        </p>
+        <DocumentSigningFieldsUninserted>
+          {fieldDisplayName || <Trans>Text</Trans>}
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText.length < 20
-              ? field.customText
-              : field.customText.substring(0, 20) + '...'}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText.length < 20
+            ? field.customText
+            : field.customText.substring(0, 20) + '...'}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
@@ -304,11 +279,9 @@ export const DocumentSigningTextField = ({
               id="custom-text"
               placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
               className={cn('mt-2 w-full rounded-md', {
-                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
                   userInputHasErrors,
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-center': parsedFieldMeta?.textAlign === 'center',
                 'text-right': parsedFieldMeta?.textAlign === 'right',
               })}
               value={localText}
@@ -354,8 +327,8 @@ export const DocumentSigningTextField = ({
             <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
+                className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
                   setLocalCustomText('');

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import type { DocumentData } from '@prisma/client';
+import { DateTime } from 'luxon';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+
+import { ShareDocumentDownloadButton } from '../share-document-download-button';
+
+export type DocumentCertificateQRViewProps = {
+  documentId: number;
+  title: string;
+  documentData: DocumentData;
+  password?: string | null;
+  recipientCount?: number;
+  completedDate?: Date;
+};
+
+export const DocumentCertificateQRView = ({
+  documentId,
+  title,
+  documentData,
+  password,
+  recipientCount = 0,
+  completedDate,
+}: DocumentCertificateQRViewProps) => {
+  const { data: documentUrl } = trpc.shareLink.getDocumentInternalUrlForQRCode.useQuery({
+    documentId,
+  });
+
+  const [isDialogOpen, setIsDialogOpen] = useState(() => !!documentUrl);
+
+  const formattedDate = completedDate
+    ? DateTime.fromJSDate(completedDate).toLocaleString(DateTime.DATETIME_MED)
+    : '';
+
+  useEffect(() => {
+    if (documentUrl) {
+      setIsDialogOpen(true);
+    }
+  }, [documentUrl]);
+
+  return (
+    <div className="mx-auto w-full max-w-screen-md">
+      {/* Dialog for internal document link */}
+      {documentUrl && (
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Document found in your account</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>
+                  This document is available in your Documenso account. You can view more details,
+                  recipients, and audit logs there.
+                </Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter className="flex flex-row justify-end gap-2">
+              <Button asChild>
+                <a href={documentUrl} target="_blank" rel="noopener noreferrer">
+                  <Trans>Go to document</Trans>
+                </a>
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
+        <div className="space-y-1">
+          <h1 className="text-xl font-medium">{title}</h1>
+          <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
+            <p>
+              <Trans>{recipientCount} recipients</Trans>
+            </p>
+
+            <p>
+              <Trans>Completed on {formattedDate}</Trans>
+            </p>
+          </div>
+        </div>
+
+        <ShareDocumentDownloadButton title={title} documentData={documentData} />
+      </div>
+
+      <div className="mt-12 w-full">
+        <PDFViewer key={documentData.id} documentData={documentData} password={password} />
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -0,0 +1,192 @@
+import { type ReactNode, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { useDropzone } from 'react-dropzone';
+import { Link, useNavigate, useParams } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export interface DocumentDropZoneWrapperProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZoneWrapperProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+  const { folderId } = useParams();
+
+  const team = useOptionalCurrentTeam();
+
+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const userTimezone =
+    TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
+    DEFAULT_DOCUMENT_TIME_ZONE;
+
+  const { quota, remaining, refreshLimits } = useLimits();
+
+  const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
+
+  const isUploadDisabled = remaining.documents === 0 || !user.emailVerified;
+
+  const onFileDrop = async (file: File) => {
+    if (isUploadDisabled && IS_BILLING_ENABLED()) {
+      await navigate('/settings/billing');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const response = await putPdfFile(file);
+
+      const { id } = await createDocument({
+        title: file.name,
+        documentDataId: response.id,
+        timezone: userTimezone,
+        folderId: folderId ?? undefined,
+      });
+
+      void refreshLimits();
+
+      toast({
+        title: _(msg`Document uploaded`),
+        description: _(msg`Your document has been uploaded successfully.`),
+        duration: 5000,
+      });
+
+      analytics.capture('App: Document Uploaded', {
+        userId: user.id,
+        documentId: id,
+        timestamp: new Date().toISOString(),
+      });
+
+      await navigate(
+        folderId
+          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
+          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
+      );
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with('INVALID_DOCUMENT_FILE', () => msg`You cannot upload encrypted PDFs`)
+        .with(
+          AppErrorCode.LIMIT_EXCEEDED,
+          () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
+        )
+        .otherwise(() => msg`An error occurred while uploading your document.`);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onFileDropRejected = () => {
+    toast({
+      title: _(msg`Your document failed to upload.`),
+      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'application/pdf': ['.pdf'],
+    },
+    //disabled: isUploadDisabled,
+    multiple: false,
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
+    onDrop: ([acceptedFile]) => {
+      if (acceptedFile) {
+        void onFileDrop(acceptedFile);
+      }
+    },
+    onDropRejected: () => {
+      void onFileDropRejected();
+    },
+    noClick: true,
+    noDragEventsBubbling: true,
+  });
+
+  return (
+    <div {...getRootProps()} className={cn('relative min-h-screen', className)}>
+      <input {...getInputProps()} />
+      {children}
+
+      {isDragActive && (
+        <div className="bg-muted/60 fixed left-0 top-0 z-[9999] h-full w-full backdrop-blur-[4px]">
+          <div className="pointer-events-none flex h-full w-full flex-col items-center justify-center">
+            <h2 className="text-foreground text-2xl font-semibold">
+              <Trans>Upload Document</Trans>
+            </h2>
+
+            <p className="text-muted-foreground text-md mt-4">
+              <Trans>Drag and drop your PDF file here</Trans>
+            </p>
+
+            {isUploadDisabled && IS_BILLING_ENABLED() && (
+              <Link
+                to="/settings/billing"
+                className="mt-4 text-sm text-amber-500 hover:underline dark:text-amber-400"
+              >
+                <Trans>Upgrade your plan to upload more documents</Trans>
+              </Link>
+            )}
+
+            {!isUploadDisabled &&
+              team?.id === undefined &&
+              remaining.documents > 0 &&
+              Number.isFinite(remaining.documents) && (
+                <p className="text-muted-foreground/80 mt-4 text-sm">
+                  <Trans>
+                    {remaining.documents} of {quota.documents} documents remaining this month.
+                  </Trans>
+                </p>
+              )}
+          </div>
+        </div>
+      )}
+
+      {isLoading && (
+        <div className="bg-muted/30 absolute inset-0 z-50 backdrop-blur-[2px]">
+          <div className="pointer-events-none flex h-1/2 w-full flex-col items-center justify-center">
+            <Loader className="text-primary h-12 w-12 animate-spin" />
+            <p className="text-foreground mt-8 font-medium">
+              <Trans>Uploading document...</Trans>
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -183,8 +183,8 @@ export const DocumentEditForm = ({
           title: data.title,
           externalId: data.externalId || null,
           visibility: data.visibility,
-          globalAccessAuth: data.globalAccessAuth ?? null,
-          globalActionAuth: data.globalActionAuth ?? null,
+          globalAccessAuth: data.globalAccessAuth ?? [],
+          globalActionAuth: data.globalActionAuth ?? [],
         },
         meta: {
           timezone,
@@ -229,7 +229,7 @@ export const DocumentEditForm = ({
           recipients: data.signers.map((signer) => ({
             ...signer,
             // Explicitly set to null to indicate we want to remove auth if required.
-            actionAuth: signer.actionAuth || null,
+            actionAuth: signer.actionAuth ?? [],
           })),
         }),
       ]);

apps/remix/app/components/general/document/document-history-sheet.tsx

@@ -81,11 +81,15 @@ export const DocumentHistorySheet = ({
    * @param text The text to format
    * @returns The formatted text
    */
-  const formatGenericText = (text?: string | null) => {
+  const formatGenericText = (text?: string | string[] | null): string => {
     if (!text) {
       return '';
     }
 
+    if (Array.isArray(text)) {
+      return text.map((t) => formatGenericText(t)).join(', ');
+    }
+
     return (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()).replaceAll('_', ' ');
   };
 
@@ -245,11 +249,19 @@ export const DocumentHistorySheet = ({
                         values={[
                           {
                             key: 'Old',
-                            value: DOCUMENT_AUTH_TYPES[data.from || '']?.value || 'None',
+                            value: Array.isArray(data.from)
+                              ? data.from
+                                  .map((f) => DOCUMENT_AUTH_TYPES[f]?.value || 'None')
+                                  .join(', ')
+                              : DOCUMENT_AUTH_TYPES[data.from || '']?.value || 'None',
                           },
                           {
                             key: 'New',
-                            value: DOCUMENT_AUTH_TYPES[data.to || '']?.value || 'None',
+                            value: Array.isArray(data.to)
+                              ? data.to
+                                  .map((f) => DOCUMENT_AUTH_TYPES[f]?.value || 'None')
+                                  .join(', ')
+                              : DOCUMENT_AUTH_TYPES[data.to || '']?.value || 'None',
                           },
                         ]}
                       />

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

@@ -38,6 +38,9 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
   const role = recipient?.role;
 
   const documentsPath = formatDocumentsPath(document.team?.url);
+  const formatPath = document.folderId
+    ? `${documentsPath}/f/${document.folderId}/${document.id}/edit`
+    : `${documentsPath}/${document.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -101,7 +104,7 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
     ))
     .with({ isComplete: false }, () => (
       <Button className="w-full" asChild>
-        <Link to={`${documentsPath}/${document.id}/edit`}>
+        <Link to={formatPath}>
           <Trans>Edit</Trans>
         </Link>
       </Button>

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

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
 import type { Document, Recipient, Team, User } from '@prisma/client';
+import { DocumentStatus } from '@prisma/client';
 import {
   Copy,
   Download,
@@ -15,8 +15,7 @@ import {
   Share,
   Trash2,
 } from 'lucide-react';
-import { Link } from 'react-router';
-import { useNavigate } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -99,6 +98,35 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
     }
   };
 
+  const onDownloadOriginalClick = async () => {
+    try {
+      const documentWithData = await trpcClient.document.getDocumentById.query(
+        {
+          documentId: document.id,
+        },
+        {
+          context: {
+            teamId: team?.id?.toString(),
+          },
+        },
+      );
+
+      const documentData = documentWithData?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: document.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const nonSignedRecipients = document.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -128,6 +156,11 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
+        <DropdownMenuItem onClick={onDownloadOriginalClick}>
+          <Download className="mr-2 h-4 w-4" />
+          <Trans>Download Original</Trans>
+        </DropdownMenuItem>
+
         <DropdownMenuItem asChild>
           <Link to={`${documentsPath}/${document.id}/logs`}>
             <ScrollTextIcon className="mr-2 h-4 w-4" />

apps/remix/app/components/general/document/document-read-only-fields.tsx

@@ -1,171 +0,0 @@
-import { useState } from 'react';
-
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta } from '@prisma/client';
-import { FieldType, SigningStatus } from '@prisma/client';
-import { Clock, EyeOffIcon } from 'lucide-react';
-import { P, match } from 'ts-pattern';
-
-import {
-  DEFAULT_DOCUMENT_DATE_FORMAT,
-  convertToLocalSystemFormat,
-} from '@documenso/lib/constants/date-formats';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
-import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { FieldRootContainer } from '@documenso/ui/components/field/field';
-import { SignatureIcon } from '@documenso/ui/icons/signature';
-import { cn } from '@documenso/ui/lib/utils';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PopoverHover } from '@documenso/ui/primitives/popover';
-
-export type DocumentReadOnlyFieldsProps = {
-  fields: DocumentField[];
-  documentMeta?: DocumentMeta;
-  showFieldStatus?: boolean;
-};
-
-export const DocumentReadOnlyFields = ({
-  documentMeta,
-  fields,
-  showFieldStatus = true,
-}: DocumentReadOnlyFieldsProps) => {
-  const { _ } = useLingui();
-
-  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
-
-  const handleHideField = (fieldId: string) => {
-    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
-  };
-
-  return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-      {fields.map(
-        (field) =>
-          !hiddenFieldIds[field.secondaryId] && (
-            <FieldRootContainer
-              field={field}
-              key={field.id}
-              cardClassName="border-gray-300/50 !shadow-none backdrop-blur-[1px] bg-gray-50 ring-0 ring-offset-0"
-            >
-              <div className="absolute -right-3 -top-3">
-                <PopoverHover
-                  trigger={
-                    <Avatar className="dark:border-foreground h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
-                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
-                        {extractInitials(field.recipient.name || field.recipient.email)}
-                      </AvatarFallback>
-                    </Avatar>
-                  }
-                  contentProps={{
-                    className: 'relative flex w-fit flex-col p-4 text-sm',
-                  }}
-                >
-                  {showFieldStatus && (
-                    <Badge
-                      className="mx-auto mb-1 py-0.5"
-                      variant={
-                        field.recipient.signingStatus === SigningStatus.SIGNED
-                          ? 'default'
-                          : 'secondary'
-                      }
-                    >
-                      {field.recipient.signingStatus === SigningStatus.SIGNED ? (
-                        <>
-                          <SignatureIcon className="mr-1 h-3 w-3" />
-                          <Trans>Signed</Trans>
-                        </>
-                      ) : (
-                        <>
-                          <Clock className="mr-1 h-3 w-3" />
-                          <Trans>Pending</Trans>
-                        </>
-                      )}
-                    </Badge>
-                  )}
-
-                  <p className="text-center font-semibold">
-                    <span>{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field</span>
-                  </p>
-
-                  <p className="text-muted-foreground mt-1 text-center text-xs">
-                    {field.recipient.name
-                      ? `${field.recipient.name} (${field.recipient.email})`
-                      : field.recipient.email}{' '}
-                  </p>
-
-                  <button
-                    className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
-                    onClick={() => handleHideField(field.secondaryId)}
-                    title="Hide field"
-                  >
-                    <EyeOffIcon className="h-3 w-3" />
-                  </button>
-                </PopoverHover>
-              </div>
-
-              <div className="text-muted-foreground dark:text-background/70 break-all text-sm">
-                {field.recipient.signingStatus === SigningStatus.SIGNED &&
-                  match(field)
-                    .with({ type: FieldType.SIGNATURE }, (field) =>
-                      field.signature?.signatureImageAsBase64 ? (
-                        <img
-                          src={field.signature.signatureImageAsBase64}
-                          alt="Signature"
-                          className="h-full w-full object-contain dark:invert"
-                        />
-                      ) : (
-                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl">
-                          {field.signature?.typedSignature}
-                        </p>
-                      ),
-                    )
-                    .with(
-                      {
-                        type: P.union(
-                          FieldType.NAME,
-                          FieldType.INITIALS,
-                          FieldType.EMAIL,
-                          FieldType.NUMBER,
-                          FieldType.RADIO,
-                          FieldType.CHECKBOX,
-                          FieldType.DROPDOWN,
-                        ),
-                      },
-                      () => field.customText,
-                    )
-                    .with({ type: FieldType.TEXT }, () => field.customText.substring(0, 20) + '...')
-                    .with({ type: FieldType.DATE }, () =>
-                      convertToLocalSystemFormat(
-                        field.customText,
-                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
-                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-                      ),
-                    )
-                    .with({ type: FieldType.FREE_SIGNATURE }, () => null)
-                    .exhaustive()}
-
-                {field.recipient.signingStatus === SigningStatus.NOT_SIGNED && (
-                  <p
-                    className={cn('text-muted-foreground text-lg duration-200', {
-                      'font-signature sm:text-xl md:text-2xl':
-                        field.type === FieldType.SIGNATURE ||
-                        field.type === FieldType.FREE_SIGNATURE,
-                    })}
-                  >
-                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
-                  </p>
-                )}
-              </div>
-            </FieldRootContainer>
-          ),
-      )}
-    </ElementVisible>
-  );
-};

apps/remix/app/components/general/document/document-upload.tsx

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useNavigate } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -17,7 +17,13 @@ import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
@@ -30,6 +36,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
+  const { folderId } = useParams();
 
   const team = useOptionalCurrentTeam();
 
@@ -69,6 +76,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         title: file.name,
         documentDataId: response.id,
         timezone: userTimezone,
+        folderId: folderId ?? undefined,
       });
 
       void refreshLimits();
@@ -85,7 +93,11 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         timestamp: new Date().toISOString(),
       });
 
-      await navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
+      await navigate(
+        folderId
+          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
+          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
+      );
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -121,25 +133,31 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
   return (
     <div className={cn('relative', className)}>
-      <DocumentDropzone
-        className="h-[min(400px,50vh)]"
-        disabled={remaining.documents === 0 || !user.emailVerified}
-        disabledMessage={disabledMessage}
-        onDrop={onFileDrop}
-        onDropRejected={onFileDropRejected}
-      />
-
-      <div className="absolute -bottom-6 right-0">
-        {team?.id === undefined &&
-          remaining.documents > 0 &&
-          Number.isFinite(remaining.documents) && (
-            <p className="text-muted-foreground/60 text-xs">
-              <Trans>
-                {remaining.documents} of {quota.documents} documents remaining this month.
-              </Trans>
-            </p>
-          )}
-      </div>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <DocumentDropzone
+                disabled={remaining.documents === 0 || !user.emailVerified}
+                disabledMessage={disabledMessage}
+                onDrop={onFileDrop}
+                onDropRejected={onFileDropRejected}
+              />
+            </div>
+          </TooltipTrigger>
+          {team?.id === undefined &&
+            remaining.documents > 0 &&
+            Number.isFinite(remaining.documents) && (
+              <TooltipContent>
+                <p className="text-sm">
+                  <Trans>
+                    {remaining.documents} of {quota.documents} documents remaining this month.
+                  </Trans>
+                </p>
+              </TooltipContent>
+            )}
+        </Tooltip>
+      </TooltipProvider>
 
       {isLoading && (
         <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">

apps/remix/app/components/general/folder/folder-card.tsx

@@ -0,0 +1,88 @@
+import { FolderIcon, PinIcon } from 'lucide-react';
+
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatFolderCount } from '@documenso/lib/utils/format-folder-count';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type FolderCardProps = {
+  folder: TFolderWithSubfolders;
+  onNavigate: (folderId: string) => void;
+  onMove: (folder: TFolderWithSubfolders) => void;
+  onPin: (folderId: string) => void;
+  onUnpin: (folderId: string) => void;
+  onSettings: (folder: TFolderWithSubfolders) => void;
+  onDelete: (folder: TFolderWithSubfolders) => void;
+};
+
+export const FolderCard = ({
+  folder,
+  onNavigate,
+  onMove,
+  onPin,
+  onUnpin,
+  onSettings,
+  onDelete,
+}: FolderCardProps) => {
+  return (
+    <div
+      key={folder.id}
+      className="border-border hover:border-muted-foreground/40 group relative flex flex-col rounded-lg border p-4 transition-all hover:shadow-sm"
+    >
+      <div className="flex items-start justify-between">
+        <button
+          className="flex items-center space-x-2 text-left"
+          onClick={() => onNavigate(folder.id)}
+        >
+          <FolderIcon className="text-documenso h-6 w-6" />
+          <div>
+            <div className="flex items-center gap-2">
+              <h3 className="font-medium">{folder.name}</h3>
+              {folder.pinned && <PinIcon className="text-documenso h-3 w-3" />}
+            </div>
+            <div className="mt-1 flex space-x-2 text-xs text-gray-500">
+              <span>
+                {formatFolderCount(
+                  folder.type === FolderType.TEMPLATE
+                    ? folder._count.templates
+                    : folder._count.documents,
+                  folder.type === FolderType.TEMPLATE ? 'template' : 'document',
+                  folder.type === FolderType.TEMPLATE ? 'templates' : 'documents',
+                )}
+              </span>
+              <span>•</span>
+              <span>{formatFolderCount(folder._count.subfolders, 'folder', 'folders')}</span>
+            </div>
+          </div>
+        </button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="opacity-0 group-hover:opacity-100">
+              •••
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onMove(folder)}>Move</DropdownMenuItem>
+            {folder.pinned ? (
+              <DropdownMenuItem onClick={() => onUnpin(folder.id)}>Unpin</DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem onClick={() => onPin(folder.id)}>Pin</DropdownMenuItem>
+            )}
+            <DropdownMenuItem onClick={() => onSettings(folder)}>Settings</DropdownMenuItem>
+            <DropdownMenuItem className="text-red-500" onClick={() => onDelete(folder)}>
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/legacy-field-warning-popover.tsx

@@ -0,0 +1,112 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AlertCircle } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type LegacyFieldWarningPopoverProps = {
+  type?: 'document' | 'template';
+  documentId?: number;
+  templateId?: number;
+};
+
+export const LegacyFieldWarningPopover = ({
+  type = 'document',
+  documentId,
+  templateId,
+}: LegacyFieldWarningPopoverProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const revalidator = useRevalidator();
+
+  const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
+    trpc.template.updateTemplate.useMutation();
+  const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
+    trpc.document.updateDocument.useMutation();
+
+  const onUpdateFieldsClick = async () => {
+    if (type === 'document') {
+      if (!documentId) {
+        return;
+      }
+
+      await updateDocument({
+        documentId,
+        data: {
+          useLegacyFieldInsertion: false,
+        },
+      });
+    }
+
+    if (type === 'template') {
+      if (!templateId) {
+        return;
+      }
+
+      await updateTemplate({
+        templateId,
+        data: {
+          useLegacyFieldInsertion: false,
+        },
+      });
+    }
+
+    void revalidator.revalidate();
+
+    toast({
+      title: _(msg`Fields updated`),
+      description: _(
+        msg`The fields have been updated to the new field insertion method successfully`,
+      ),
+    });
+  };
+
+  return (
+    <PopoverHover
+      side="bottom"
+      trigger={
+        <Button variant="outline" className="h-9 w-9 p-0">
+          <span className="sr-only">
+            {type === 'document' ? (
+              <Trans>Document is using legacy field insertion</Trans>
+            ) : (
+              <Trans>Template is using legacy field insertion</Trans>
+            )}
+          </span>
+          <AlertCircle className="h-5 w-5" />
+        </Button>
+      }
+    >
+      <p className="text-muted-foreground text-sm">
+        {type === 'document' ? (
+          <Trans>
+            This document is using legacy field insertion, we recommend using the new field
+            insertion method for more accurate results.
+          </Trans>
+        ) : (
+          <Trans>
+            This template is using legacy field insertion, we recommend using the new field
+            insertion method for more accurate results.
+          </Trans>
+        )}
+      </p>
+
+      <div className="mt-2 flex w-full items-center justify-end">
+        <Button
+          type="button"
+          size="sm"
+          loading={isUpdatingDocument || isUpdatingTemplate}
+          onClick={onUpdateFieldsClick}
+        >
+          <Trans>Update Fields</Trans>
+        </Button>
+      </div>
+    </PopoverHover>
+  );
+};

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

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Download } from 'lucide-react';
+
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
+import type { DocumentData } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type ShareDocumentDownloadButtonProps = {
+  title: string;
+  documentData: DocumentData;
+};
+
+export const ShareDocumentDownloadButton = ({
+  title,
+  documentData,
+}: ShareDocumentDownloadButtonProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const onDownloadClick = async () => {
+    try {
+      setIsDownloading(true);
+
+      await new Promise((resolve) => {
+        setTimeout(resolve, 4000);
+      });
+
+      await downloadPDF({ documentData, fileName: title });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <Button loading={isDownloading} onClick={onDownloadClick}>
+      {!isDownloading && <Download className="mr-2 h-4 w-4" />}
+      <Trans>Download</Trans>
+    </Button>
+  );
+};

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

@@ -134,8 +134,8 @@ export const TemplateEditForm = ({
           title: data.title,
           externalId: data.externalId || null,
           visibility: data.visibility,
-          globalAccessAuth: data.globalAccessAuth ?? null,
-          globalActionAuth: data.globalActionAuth ?? null,
+          globalAccessAuth: data.globalAccessAuth ?? [],
+          globalActionAuth: data.globalActionAuth ?? [],
         },
         meta: {
           ...data.meta,
@@ -208,7 +208,11 @@ export const TemplateEditForm = ({
         duration: 5000,
       });
 
-      await navigate(templateRootPath);
+      const templatePath = template.folderId
+        ? `${templateRootPath}/f/${template.folderId}`
+        : templateRootPath;
+
+      await navigate(templatePath);
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/webhook-multiselect-combobox.tsx

@@ -1,96 +1,47 @@
-import { useEffect, useState } from 'react';
-
-import { Plural, Trans } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
 import { WebhookTriggerEvents } from '@prisma/client';
-import { Check, ChevronsUpDown } from 'lucide-react';
 
 import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
-
-import { truncateTitle } from '~/utils/truncate-title';
+import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
 
 type WebhookMultiSelectComboboxProps = {
   listValues: string[];
   onChange: (_values: string[]) => void;
 };
 
+const triggerEvents = Object.values(WebhookTriggerEvents).map((event) => ({
+  value: event,
+  label: toFriendlyWebhookEventName(event),
+}));
+
 export const WebhookMultiSelectCombobox = ({
   listValues,
   onChange,
 }: WebhookMultiSelectComboboxProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const { _ } = useLingui();
 
-  const triggerEvents = Object.values(WebhookTriggerEvents);
+  const value = listValues.map((event) => ({
+    value: event,
+    label: toFriendlyWebhookEventName(event),
+  }));
 
-  useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allEvents = [...new Set([...triggerEvents, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
-    setIsOpen(false);
+  const onMutliSelectChange = (options: Option[]) => {
+    onChange(options.map((option) => option.value));
   };
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={isOpen}
-          className="w-[200px] justify-between"
-        >
-          <Plural value={selectedValues.length} zero="Select values" other="# selected..." />
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="z-9999 w-full max-w-[280px] p-0">
-        <Command>
-          <CommandInput
-            placeholder={truncateTitle(
-              selectedValues.map((v) => toFriendlyWebhookEventName(v)).join(', '),
-              15,
-            )}
-          />
-          <CommandEmpty>
-            <Trans>No value found.</Trans>
-          </CommandEmpty>
-          <CommandGroup>
-            {allEvents.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
-                />
-                {toFriendlyWebhookEventName(value)}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <MultiSelect
+      commandProps={{
+        label: _(msg`Select triggers`),
+      }}
+      defaultOptions={triggerEvents}
+      value={value}
+      onChange={onMutliSelectChange}
+      placeholder={_(msg`Select triggers`)}
+      hideClearAllButton
+      hidePlaceholderWhenSelected
+      emptyIndicator={<p className="text-center text-sm">No triggers available</p>}
+    />
   );
 };

apps/remix/app/components/tables/admin-leaderboard-table.tsx

@@ -14,9 +14,13 @@ import { Input } from '@documenso/ui/primitives/input';
 export type SigningVolume = {
   id: number;
   name: string;
+  email: string;
   signingVolume: number;
   createdAt: Date;
   planId: string;
+  userId?: number | null;
+  teamId?: number | null;
+  isTeam: boolean;
 };
 
 type LeaderboardTableProps = {

apps/remix/app/components/tables/documents-table-action-button.tsx

@@ -1,7 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, Edit, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
@@ -9,6 +8,7 @@ import { match } from 'ts-pattern';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
@@ -18,11 +18,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionButtonProps = {
-  row: Document & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
-    team: Pick<Team, 'id' | 'url'> | null;
-  };
+  row: TDocumentRow;
 };
 
 export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonProps) => {
@@ -44,6 +40,9 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const isCurrentTeamDocument = team && row.team?.url === team.url;
 
   const documentsPath = formatDocumentsPath(team?.url);
+  const formatPath = row.folderId
+    ? `${documentsPath}/f/${row.folderId}/${row.id}/edit`
+    : `${documentsPath}/${row.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -96,7 +95,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
       isOwner ? { isDraft: true, isOwner: true } : { isDraft: true, isCurrentTeamDocument: true },
       () => (
         <Button className="w-32" asChild>
-          <Link to={`${documentsPath}/${row.id}/edit`}>
+          <Link to={formatPath}>
             <Edit className="-ml-1 mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Document, Recipient, Team, User } from '@prisma/client';
 import { DocumentStatus, RecipientRole } from '@prisma/client';
 import {
   CheckCircle,
@@ -11,6 +10,8 @@ import {
   Download,
   Edit,
   EyeIcon,
+  FileDown,
+  FolderInput,
   Loader,
   MoreHorizontal,
   MoveRight,
@@ -22,6 +23,7 @@ import { Link } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc as trpcClient } from '@documenso/trpc/client';
@@ -43,14 +45,14 @@ import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/d
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionDropdownProps = {
-  row: Document & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
-    team: Pick<Team, 'id' | 'url'> | null;
-  };
+  row: TDocumentRow;
+  onMoveDocument?: () => void;
 };
 
-export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdownProps) => {
+export const DocumentsTableActionDropdown = ({
+  row,
+  onMoveDocument,
+}: DocumentsTableActionDropdownProps) => {
   const { user } = useSession();
   const team = useOptionalCurrentTeam();
 
@@ -73,6 +75,9 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
   const documentsPath = formatDocumentsPath(team?.url);
+  const formatPath = row.folderId
+    ? `${documentsPath}/f/${row.folderId}/${row.id}/edit`
+    : `${documentsPath}/${row.id}/edit`;
 
   const onDownloadClick = async () => {
     try {
@@ -100,6 +105,32 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
     }
   };
 
+  const onDownloadOriginalClick = async () => {
+    try {
+      const document = !recipient
+        ? await trpcClient.document.getDocumentById.query({
+            documentId: row.id,
+          })
+        : await trpcClient.document.getDocumentByToken.query({
+            token: recipient.token,
+          });
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title, version: 'original' });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`An error occurred while downloading your document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const nonSignedRecipients = row.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -141,7 +172,7 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
         )}
 
         <DropdownMenuItem disabled={!canManageDocument || isComplete} asChild>
-          <Link to={`${documentsPath}/${row.id}/edit`}>
+          <Link to={formatPath}>
             <Edit className="mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>
@@ -152,6 +183,11 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
           <Trans>Download</Trans>
         </DropdownMenuItem>
 
+        <DropdownMenuItem onClick={onDownloadOriginalClick}>
+          <FileDown className="mr-2 h-4 w-4" />
+          <Trans>Download Original</Trans>
+        </DropdownMenuItem>
+
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           <Trans>Duplicate</Trans>
@@ -165,6 +201,13 @@ export const DocumentsTableActionDropdown = ({ row }: DocumentsTableActionDropdo
           </DropdownMenuItem>
         )}
 
+        {onMoveDocument && (
+          <DropdownMenuItem onClick={onMoveDocument} onSelect={(e) => e.preventDefault()}>
+            <FolderInput className="mr-2 h-4 w-4" />
+            <Trans>Move to Folder</Trans>
+          </DropdownMenuItem>
+        )}
+
         {/* No point displaying this if there's no functionality. */}
         {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />

apps/remix/app/components/tables/documents-table-title.tsx

@@ -1,16 +1,12 @@
-import type { Document, Recipient, Team, User } from '@prisma/client';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 export type DataTableTitleProps = {
-  row: Document & {
-    user: Pick<User, 'id' | 'name' | 'email'>;
-    team: Pick<Team, 'url'> | null;
-    recipients: Recipient[];
-  };
+  row: TDocumentRow;
   teamUrl?: string;
 };
 

apps/remix/app/components/tables/documents-table.tsx

@@ -29,11 +29,17 @@ export type DocumentsTableProps = {
   data?: TFindDocumentsResponse;
   isLoading?: boolean;
   isLoadingError?: boolean;
+  onMoveDocument?: (documentId: number) => void;
 };
 
 type DocumentsTableRow = TFindDocumentsResponse['data'][number];
 
-export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTableProps) => {
+export const DocumentsTable = ({
+  data,
+  isLoading,
+  isLoadingError,
+  onMoveDocument,
+}: DocumentsTableProps) => {
   const { _, i18n } = useLingui();
 
   const team = useOptionalCurrentTeam();
@@ -80,12 +86,15 @@ export const DocumentsTable = ({ data, isLoading, isLoadingError }: DocumentsTab
           (!row.original.deletedAt || isDocumentCompleted(row.original.status)) && (
             <div className="flex items-center gap-x-4">
               <DocumentsTableActionButton row={row.original} />
-              <DocumentsTableActionDropdown row={row.original} />
+              <DocumentsTableActionDropdown
+                row={row.original}
+                onMoveDocument={onMoveDocument ? () => onMoveDocument(row.original.id) : undefined}
+              />
             </div>
           ),
       },
     ] satisfies DataTableColumnDef<DocumentsTableRow>[];
-  }, [team]);
+  }, [team, onMoveDocument]);
 
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
@@ -171,6 +180,9 @@ const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   const isCurrentTeamDocument = teamUrl && row.team?.url === teamUrl;
 
   const documentsPath = formatDocumentsPath(isCurrentTeamDocument ? teamUrl : undefined);
+  const formatPath = row.folderId
+    ? `${documentsPath}/f/${row.folderId}/${row.id}`
+    : `${documentsPath}/${row.id}`;
 
   return match({
     isOwner,
@@ -179,7 +191,7 @@ const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   })
     .with({ isOwner: true }, { isCurrentTeamDocument: true }, () => (
       <Link
-        to={`${documentsPath}/${row.id}`}
+        to={formatPath}
         title={row.title}
         className="block max-w-[10rem] truncate font-medium hover:underline md:max-w-[20rem]"
       >

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -2,7 +2,16 @@ import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
-import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2, Upload } from 'lucide-react';
+import {
+  Copy,
+  Edit,
+  FolderIcon,
+  MoreHorizontal,
+  MoveRight,
+  Share2Icon,
+  Trash2,
+  Upload,
+} from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -19,6 +28,7 @@ import { TemplateDeleteDialog } from '../dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '../dialogs/template-direct-link-dialog';
 import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
 import { TemplateMoveDialog } from '../dialogs/template-move-dialog';
+import { TemplateMoveToFolderDialog } from '../dialogs/template-move-to-folder-dialog';
 
 export type TemplatesTableActionDropdownProps = {
   row: Template & {
@@ -50,13 +60,18 @@ export const TemplatesTableActionDropdown = ({
   const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
+  const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
 
   const isOwner = row.userId === user.id;
   const isTeamTemplate = row.teamId === teamId;
 
+  const formatPath = row.folderId
+    ? `${templateRootPath}/f/${row.folderId}/${row.id}/edit`
+    : `${templateRootPath}/${row.id}/edit`;
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
+      <DropdownMenuTrigger data-testid="template-table-action-btn">
         <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
@@ -64,7 +79,7 @@ export const TemplatesTableActionDropdown = ({
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
         <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
-          <Link to={`${templateRootPath}/${row.id}/edit`}>
+          <Link to={formatPath}>
             <Edit className="mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>
@@ -83,6 +98,11 @@ export const TemplatesTableActionDropdown = ({
           <Trans>Direct link</Trans>
         </DropdownMenuItem>
 
+        <DropdownMenuItem onClick={() => setMoveToFolderDialogOpen(true)}>
+          <FolderIcon className="mr-2 h-4 w-4" />
+          <Trans>Move to Folder</Trans>
+        </DropdownMenuItem>
+
         {!teamId && !row.teamId && (
           <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
             <MoveRight className="mr-2 h-4 w-4" />
@@ -135,6 +155,14 @@ export const TemplatesTableActionDropdown = ({
         onOpenChange={setDeleteDialogOpen}
         onDelete={onDelete}
       />
+
+      <TemplateMoveToFolderDialog
+        templateId={row.id}
+        templateTitle={row.title}
+        isOpen={isMoveToFolderDialogOpen}
+        onOpenChange={setMoveToFolderDialogOpen}
+        currentFolderId={row.folderId}
+      />
     </DropdownMenu>
   );
 };

apps/remix/app/components/tables/templates-table.tsx

@@ -54,6 +54,11 @@ export const TemplatesTable = ({
   const formatTemplateLink = (row: TemplatesTableRow) => {
     const isCurrentTeamTemplate = team?.url && row.team?.url === team?.url;
     const path = formatTemplatesPath(isCurrentTeamTemplate ? team?.url : undefined);
+
+    if (row.folderId) {
+      return `${path}/f/${row.folderId}/${row.id}`;
+    }
+
     return `${path}/${row.id}`;
   };
 

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -90,7 +90,7 @@ export default function AdminDocumentsPage() {
               <TooltipTrigger>
                 <Link to={`/admin/users/${row.original.user.id}`}>
                   <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                    <AvatarFallback className="text-xs text-gray-400">
+                    <AvatarFallback className="text-muted-foreground text-xs">
                       {avatarFallbackText}
                     </AvatarFallback>
                   </Avatar>
@@ -99,7 +99,7 @@ export default function AdminDocumentsPage() {
 
               <TooltipContent className="flex max-w-xs items-center gap-2">
                 <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                  <AvatarFallback className="text-xs text-gray-400">
+                  <AvatarFallback className="text-muted-foreground text-xs">
                     {avatarFallbackText}
                   </AvatarFallback>
                 </Avatar>

apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx

@@ -2,7 +2,10 @@ import { Trans } from '@lingui/react/macro';
 
 import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
 
-import { AdminLeaderboardTable } from '~/components/tables/admin-leaderboard-table';
+import {
+  AdminLeaderboardTable,
+  type SigningVolume,
+} from '~/components/tables/admin-leaderboard-table';
 
 import type { Route } from './+types/leaderboard';
 
@@ -25,7 +28,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const perPage = Number(url.searchParams.get('perPage')) || 10;
   const search = url.searchParams.get('search') || '';
 
-  const { leaderboard: signingVolume, totalPages } = await getSigningVolume({
+  const { leaderboard, totalPages } = await getSigningVolume({
     search,
     page,
     perPage,
@@ -33,8 +36,14 @@ export async function loader({ request }: Route.LoaderArgs) {
     sortOrder,
   });
 
+  const typedSigningVolume: SigningVolume[] = leaderboard.map((item) => ({
+    ...item,
+    name: item.name || '',
+    createdAt: item.createdAt || new Date(),
+  }));
+
   return {
-    signingVolume,
+    signingVolume: typedSigningVolume,
     totalPages,
     page,
     perPage,
@@ -48,9 +57,11 @@ export default function Leaderboard({ loaderData }: Route.ComponentProps) {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">
-        <Trans>Signing Volume</Trans>
-      </h2>
+      <div className="flex items-center">
+        <h2 className="text-4xl font-semibold">
+          <Trans>Signing Volume</Trans>
+        </h2>
+      </div>
       <div className="mt-8">
         <AdminLeaderboardTable
           signingVolume={signingVolume}

apps/remix/app/routes/_authenticated+/documents.$id._index.tsx

@@ -13,6 +13,7 @@ import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/g
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -24,7 +25,6 @@ import { DocumentPageViewDropdown } from '~/components/general/document/document
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import {
   DocumentStatus as DocumentStatusComponent,
@@ -64,6 +64,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
+  if (document?.folderId) {
+    throw redirect(documentRootPath);
+  }
+
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
@@ -200,8 +204,14 @@ export default function DocumentPage() {
           </CardContent>
         </Card>
 
-        {document.status === DocumentStatus.PENDING && (
-          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
+        {document.status !== DocumentStatus.COMPLETED && (
+          <DocumentReadOnlyFields
+            fields={fields}
+            documentMeta={documentMeta || undefined}
+            showRecipientTooltip={true}
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+          />
         )}
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">

apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx

@@ -14,6 +14,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
 import { DocumentStatus } from '~/components/general/document/document-status';
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
@@ -48,6 +49,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
+  if (document?.folderId) {
+    throw redirect(documentRootPath);
+  }
+
   const documentVisibility = document?.visibility;
   const currentTeamMemberRole = team?.currentTeamMember?.role;
   const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
@@ -82,7 +87,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
   });
 
   return superLoaderJson({
-    document,
+    document: {
+      ...document,
+      folder: null,
+    },
     documentRootPath,
     isDocumentEnterprise,
   });
@@ -100,29 +108,43 @@ export default function DocumentEditPage() {
         <Trans>Documents</Trans>
       </Link>
 
-      <h1
-        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-        title={document.title}
-      >
-        {document.title}
-      </h1>
+      <div className="mt-4 flex w-full items-end justify-between">
+        <div className="flex-1">
+          <h1
+            className="block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={document.title}
+          >
+            {document.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatus
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
 
-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
+            {recipients.length > 0 && (
+              <div className="text-muted-foreground flex items-center">
+                <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip
-              recipients={recipients}
-              documentStatus={document.status}
-              position="bottom"
-            >
-              <span>
-                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
-              </span>
-            </StackAvatarsWithTooltip>
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
+                  <span>
+                    <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+                  </span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {document.useLegacyFieldInsertion && (
+          <div>
+            <LegacyFieldWarningPopover type="document" documentId={document.id} />
           </div>
         )}
       </div>

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

@@ -43,24 +43,26 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
-  // Todo: Get full document instead?
-  const [document, recipients] = await Promise.all([
-    getDocumentById({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-    }).catch(() => null),
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-    }),
-  ]);
+  const document = await getDocumentById({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
 
   if (!document || !document.documentData) {
     throw redirect(documentRootPath);
   }
 
+  if (document.folderId) {
+    throw redirect(documentRootPath);
+  }
+
+  const recipients = await getRecipientsForDocument({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+  });
+
   return {
     document,
     documentRootPath,

apps/remix/app/routes/_authenticated+/documents._index.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { useSearchParams } from 'react-router';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 import { z } from 'zod';
 
+import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
@@ -14,12 +16,21 @@ import {
   type TFindDocumentsInternalResponse,
   ZFindDocumentsInternalRequestSchema,
 } from '@documenso/trpc/server/document-router/schema';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
+import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
 import { DocumentSearch } from '~/components/general/document/document-search';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
+import { FolderCard } from '~/components/general/folder/folder-card';
 import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
@@ -43,9 +54,22 @@ const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
 
 export default function DocumentsPage() {
   const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [isMovingDocument, setIsMovingDocument] = useState(false);
+  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
 
   const team = useOptionalCurrentTeam();
 
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
   const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
     [ExtendedDocumentStatus.DRAFT]: 0,
     [ExtendedDocumentStatus.PENDING]: 0,
@@ -66,9 +90,18 @@ export default function DocumentsPage() {
     },
   );
 
-  // Refetch the documents when the team URL changes.
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    type: FolderType.DOCUMENT,
+    parentId: null,
+  });
+
   useEffect(() => {
     void refetch();
+    void refetchFolders();
   }, [team?.url]);
 
   const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
@@ -93,76 +126,265 @@ export default function DocumentsPage() {
     }
   }, [data?.stats]);
 
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team?.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  const handleViewAllFolders = () => {
+    void navigate(`${formatDocumentsPath(team?.url)}/folders`);
+  };
+
   return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <DocumentUploadDropzone />
+    <DocumentDropZoneWrapper>
+      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-1 items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+              onClick={() => navigateToFolder(null)}
+            >
+              <HomeIcon className="h-4 w-4" />
+              <span>Home</span>
+            </Button>
 
-      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
-        <div className="flex flex-row items-center">
-          {team && (
-            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-              <AvatarFallback className="text-xs text-gray-400">
-                {team.name.slice(0, 1)}
-              </AvatarFallback>
-            </Avatar>
-          )}
-
-          <h1 className="text-4xl font-semibold">
-            <Trans>Documents</Trans>
-          </h1>
-        </div>
-
-        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
-            <TabsList>
-              {[
-                ExtendedDocumentStatus.INBOX,
-                ExtendedDocumentStatus.PENDING,
-                ExtendedDocumentStatus.COMPLETED,
-                ExtendedDocumentStatus.DRAFT,
-                ExtendedDocumentStatus.ALL,
-              ].map((value) => (
-                <TabsTrigger
-                  key={value}
-                  className="hover:text-foreground min-w-[60px]"
-                  value={value}
-                  asChild
+            {foldersData?.breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center space-x-2">
+                <span>/</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                  onClick={() => navigateToFolder(folder.id)}
                 >
-                  <Link to={getTabHref(value)} preventScrollReset>
-                    <DocumentStatus status={value} />
-
-                    {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
-                    )}
-                  </Link>
-                </TabsTrigger>
-              ))}
-            </TabsList>
-          </Tabs>
-
-          {team && <DocumentsTableSenderFilter teamId={team.id} />}
-
-          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-            <PeriodSelector />
+                  <FolderIcon className="h-4 w-4" />
+                  <span>{folder.name}</span>
+                </Button>
+              </div>
+            ))}
           </div>
-          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-            <DocumentSearch initialValue={findDocumentSearchParams.query} />
+
+          <div className="flex gap-4 sm:flex-row sm:justify-end">
+            <DocumentUploadDropzone />
+            <CreateFolderDialog />
           </div>
         </div>
-      </div>
 
-      <div className="mt-8">
-        <div>
-          {data && data.count === 0 ? (
-            <DocumentsTableEmptyState
-              status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
-            />
-          ) : (
-            <DocumentsTable data={data} isLoading={isLoading} isLoadingError={isLoadingError} />
-          )}
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  ?.filter((folder) => !folder.pinned)
+                  .slice(0, 12)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+
+              <div className="mt-6 flex items-center justify-center">
+                {foldersData && foldersData.folders?.length > 12 && (
+                  <Button
+                    variant="link"
+                    size="sm"
+                    className="text-muted-foreground hover:text-foreground"
+                    onClick={() => void handleViewAllFolders()}
+                  >
+                    View all folders
+                  </Button>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+          <div className="flex flex-row items-center">
+            {team && (
+              <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+                {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+                <AvatarFallback className="text-muted-foreground text-xs">
+                  {team.name.slice(0, 1)}
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            <h2 className="text-4xl font-semibold">
+              <Trans>Documents</Trans>
+            </h2>
+          </div>
+
+          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+              <TabsList>
+                {[
+                  ExtendedDocumentStatus.INBOX,
+                  ExtendedDocumentStatus.PENDING,
+                  ExtendedDocumentStatus.COMPLETED,
+                  ExtendedDocumentStatus.DRAFT,
+                  ExtendedDocumentStatus.ALL,
+                ].map((value) => (
+                  <TabsTrigger
+                    key={value}
+                    className="hover:text-foreground min-w-[60px]"
+                    value={value}
+                    asChild
+                  >
+                    <Link to={getTabHref(value)} preventScrollReset>
+                      <DocumentStatus status={value} />
+
+                      {value !== ExtendedDocumentStatus.ALL && (
+                        <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
+                      )}
+                    </Link>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            {team && <DocumentsTableSenderFilter teamId={team.id} />}
+
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <PeriodSelector />
+            </div>
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <DocumentSearch initialValue={findDocumentSearchParams.query} />
+            </div>
+          </div>
         </div>
+
+        <div className="mt-8">
+          <div>
+            {data &&
+            data.count === 0 &&
+            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
+              <DocumentsTableEmptyState
+                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+              />
+            ) : (
+              <DocumentsTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                onMoveDocument={(documentId) => {
+                  setDocumentToMove(documentId);
+                  setIsMovingDocument(true);
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {documentToMove && (
+          <DocumentMoveToFolderDialog
+            documentId={documentToMove}
+            open={isMovingDocument}
+            onOpenChange={(open) => {
+              setIsMovingDocument(open);
+
+              if (!open) {
+                setDocumentToMove(null);
+              }
+            }}
+          />
+        )}
+
+        <FolderMoveDialog
+          foldersData={foldersData?.folders}
+          folder={folderToMove}
+          isOpen={isMovingFolder}
+          onOpenChange={(open) => {
+            setIsMovingFolder(open);
+
+            if (!open) {
+              setFolderToMove(null);
+            }
+          }}
+        />
+
+        <FolderSettingsDialog
+          folder={folderToSettings}
+          isOpen={isSettingsFolderOpen}
+          onOpenChange={(open) => {
+            setIsSettingsFolderOpen(open);
+
+            if (!open) {
+              setFolderToSettings(null);
+            }
+          }}
+        />
+
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open) => {
+            setIsDeletingFolder(open);
+
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
       </div>
-    </div>
+    </DocumentDropZoneWrapper>
   );
 }

apps/remix/app/routes/_authenticated+/documents.f.$folderId.$id._index.tsx

@@ -0,0 +1,272 @@
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import { DocumentStatus, TeamMemberRole } from '@prisma/client';
+import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useSession } from '@documenso/lib/client-only/providers/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 { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+
+import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
+import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
+import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
+import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
+import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
+import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/documents.f.$folderId.$id._index';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  let team: TGetTeamByUrlResponse | null = null;
+
+  if (params.teamUrl) {
+    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+  }
+
+  const { id, folderId } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || !folderId) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  const document = await getDocumentById({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+    folderId,
+  }).catch(() => null);
+
+  if (document?.teamId && !team?.url) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  const documentVisibility = document?.visibility;
+  const currentTeamMemberRole = team?.currentTeamMember?.role;
+  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
+  let canAccessDocument = true;
+
+  if (team && !isRecipient && document?.userId !== user.id) {
+    canAccessDocument = match([documentVisibility, currentTeamMemberRole])
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MEMBER], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.ADMIN, TeamMemberRole.ADMIN], () => true)
+      .otherwise(() => false);
+  }
+
+  if (!document || !document.documentData || (team && !canAccessDocument)) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  if (team && !canAccessDocument) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  if (document.folderId !== folderId) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  // Todo: Get full document instead?
+  const [recipients, fields] = await Promise.all([
+    getRecipientsForDocument({
+      documentId,
+      teamId: team?.id,
+      userId: user.id,
+    }),
+    getFieldsForDocument({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }),
+  ]);
+
+  const documentWithRecipients = {
+    ...document,
+    recipients,
+  };
+
+  return superLoaderJson({
+    document: documentWithRecipients,
+    documentRootPath,
+    fields,
+    folderId,
+  });
+}
+
+export default function DocumentPage() {
+  const loaderData = useSuperLoaderData<typeof loader>();
+
+  const { _ } = useLingui();
+  const { user } = useSession();
+
+  const { document, documentRootPath, fields, folderId } = loaderData;
+
+  const { recipients, documentData, documentMeta } = document;
+
+  // This was a feature flag. Leave to false since it's not ready.
+  const isDocumentHistoryEnabled = false;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      {document.status === DocumentStatus.PENDING && (
+        <DocumentRecipientLinkCopyDialog recipients={recipients} />
+      )}
+
+      <Link
+        to={folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath}
+        className="flex items-center text-[#7AC455] hover:opacity-80"
+      >
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Documents</Trans>
+      </Link>
+
+      <div className="flex flex-row justify-between truncate">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] 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"
+            />
+
+            {recipients.length > 0 && (
+              <div className="text-muted-foreground flex items-center">
+                <Users2 className="mr-2 h-5 w-5" />
+
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
+                  <span>
+                    <Trans>{recipients.length} Recipient(s)</Trans>
+                  </span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
+
+            {document.deletedAt && (
+              <Badge variant="destructive">
+                <Trans>Document deleted</Trans>
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {isDocumentHistoryEnabled && (
+          <div className="self-end">
+            <DocumentHistorySheet documentId={document.id} userId={user.id}>
+              <Button variant="outline">
+                <Clock9 className="mr-1.5 h-4 w-4" />
+                <Trans>Document history</Trans>
+              </Button>
+            </DocumentHistorySheet>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <PDFViewer document={document} key={documentData.id} documentData={documentData} />
+          </CardContent>
+        </Card>
+
+        {document.status === DocumentStatus.PENDING && (
+          <DocumentReadOnlyFields fields={fields} documentMeta={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">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  {_(FRIENDLY_STATUS_MAP[document.status].labelExtended)}
+                </h3>
+
+                <DocumentPageViewDropdown document={document} />
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm">
+                {match(document.status)
+                  .with(DocumentStatus.COMPLETED, () => (
+                    <Trans>This document has been signed by all recipients</Trans>
+                  ))
+                  .with(DocumentStatus.REJECTED, () => (
+                    <Trans>This document has been rejected by a recipient</Trans>
+                  ))
+                  .with(DocumentStatus.DRAFT, () => (
+                    <Trans>This document is currently a draft and has not been sent</Trans>
+                  ))
+                  .with(DocumentStatus.PENDING, () => {
+                    const pendingRecipients = recipients.filter(
+                      (recipient) => recipient.signingStatus === 'NOT_SIGNED',
+                    );
+
+                    return (
+                      <Plural
+                        value={pendingRecipients.length}
+                        one="Waiting on 1 recipient"
+                        other="Waiting on # recipients"
+                      />
+                    );
+                  })
+                  .exhaustive()}
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <DocumentPageViewButton document={document} />
+              </div>
+            </section>
+
+            {/* Document information section. */}
+            <DocumentPageViewInformation document={document} userId={user.id} />
+
+            {/* Recipients section. */}
+            <DocumentPageViewRecipients document={document} documentRootPath={documentRootPath} />
+
+            {/* Recent activity section. */}
+            <DocumentPageViewRecentActivity documentId={document.id} userId={user.id} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents.f.$folderId.$id.edit.tsx

@@ -0,0 +1,155 @@
+import { Plural, Trans } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
+import { ChevronLeft, Users2 } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
+import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+
+import { DocumentEditForm } from '~/components/general/document/document-edit-form';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/documents.$id.edit';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  let team: TGetTeamByUrlResponse | null = null;
+
+  if (params.teamUrl) {
+    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+  }
+
+  const { id, folderId } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    throw redirect(documentRootPath);
+  }
+
+  if (!folderId) {
+    throw redirect(documentRootPath);
+  }
+
+  const document = await getDocumentWithDetailsById({
+    documentId,
+    userId: user.id,
+    teamId: team?.id,
+    folderId,
+  }).catch(() => null);
+
+  if (document?.teamId && !team?.url) {
+    throw redirect(documentRootPath);
+  }
+
+  const documentVisibility = document?.visibility;
+  const currentTeamMemberRole = team?.currentTeamMember?.role;
+  const isRecipient = document?.recipients.find((recipient) => recipient.email === user.email);
+  let canAccessDocument = true;
+
+  if (!isRecipient && document?.userId !== user.id) {
+    canAccessDocument = match([documentVisibility, currentTeamMemberRole])
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.EVERYONE, TeamMemberRole.MEMBER], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.ADMIN], () => true)
+      .with([DocumentVisibility.MANAGER_AND_ABOVE, TeamMemberRole.MANAGER], () => true)
+      .with([DocumentVisibility.ADMIN, TeamMemberRole.ADMIN], () => true)
+      .otherwise(() => false);
+  }
+
+  if (!document) {
+    throw redirect(documentRootPath);
+  }
+
+  if (team && !canAccessDocument) {
+    throw redirect(documentRootPath);
+  }
+
+  if (document.folderId !== folderId) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  if (isDocumentCompleted(document.status)) {
+    throw redirect(`${documentRootPath}/${documentId}`);
+  }
+
+  const isDocumentEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  return superLoaderJson({
+    document: {
+      ...document,
+      folder: null,
+    },
+    documentRootPath,
+    isDocumentEnterprise,
+    folderId,
+  });
+}
+
+export default function DocumentEditPage() {
+  const { document, documentRootPath, isDocumentEnterprise, folderId } =
+    useSuperLoaderData<typeof loader>();
+
+  const { recipients } = document;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link
+        to={`${documentRootPath}/f/${folderId}`}
+        className="flex items-center text-[#7AC455] hover:opacity-80"
+      >
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Documents</Trans>
+      </Link>
+
+      <h1
+        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+        title={document.title}
+      >
+        {document.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
+
+            <StackAvatarsWithTooltip
+              recipients={recipients}
+              documentStatus={document.status}
+              position="bottom"
+            >
+              <span>
+                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+              </span>
+            </StackAvatarsWithTooltip>
+          </div>
+        )}
+      </div>
+
+      <DocumentEditForm
+        className="mt-6"
+        initialDocument={document}
+        documentRootPath={documentRootPath}
+        isDocumentEnterprise={isDocumentEnterprise}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents.f.$folderId.$id.logs.tsx

@@ -0,0 +1,199 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { ChevronLeft } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { Link, redirect } from 'react-router';
+
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { DocumentAuditLogDownloadButton } from '~/components/general/document/document-audit-log-download-button';
+import { DocumentCertificateDownloadButton } from '~/components/general/document/document-certificate-download-button';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/general/document/document-status';
+import { DocumentLogsTable } from '~/components/tables/document-logs-table';
+
+import type { Route } from './+types/documents.f.$folderId.$id.logs';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  let team: TGetTeamByUrlResponse | null = null;
+
+  if (params.teamUrl) {
+    team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+  }
+
+  const { id, folderId } = params;
+
+  const documentId = Number(id);
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  if (!folderId) {
+    throw redirect(documentRootPath);
+  }
+
+  // Todo: Get full document instead?
+  const [document, recipients] = await Promise.all([
+    getDocumentById({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+      folderId,
+    }).catch(() => null),
+    getRecipientsForDocument({
+      documentId,
+      userId: user.id,
+      teamId: team?.id,
+    }),
+  ]);
+
+  if (!document || !document.documentData) {
+    throw redirect(folderId ? `${documentRootPath}/f/${folderId}` : documentRootPath);
+  }
+
+  if (document.folderId !== folderId) {
+    throw redirect(documentRootPath);
+  }
+
+  return {
+    document,
+    documentRootPath,
+    recipients,
+    folderId,
+  };
+}
+
+export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps) {
+  const { document, documentRootPath, recipients, folderId } = loaderData;
+
+  const { _, i18n } = useLingui();
+
+  const documentInformation: { description: MessageDescriptor; value: string }[] = [
+    {
+      description: msg`Document title`,
+      value: document.title,
+    },
+    {
+      description: msg`Document ID`,
+      value: document.id.toString(),
+    },
+    {
+      description: msg`Document status`,
+      value: _(FRIENDLY_STATUS_MAP[document.status].label),
+    },
+    {
+      description: msg`Created by`,
+      value: document.user.name
+        ? `${document.user.name} (${document.user.email})`
+        : document.user.email,
+    },
+    {
+      description: msg`Date created`,
+      value: DateTime.fromJSDate(document.createdAt)
+        .setLocale(i18n.locales?.[0] || i18n.locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+    },
+    {
+      description: msg`Last updated`,
+      value: DateTime.fromJSDate(document.updatedAt)
+        .setLocale(i18n.locales?.[0] || i18n.locale)
+        .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
+    },
+    {
+      description: msg`Time zone`,
+      value: document.documentMeta?.timezone ?? 'N/A',
+    },
+  ];
+
+  const formatRecipientText = (recipient: Recipient) => {
+    let text = recipient.email;
+
+    if (recipient.name) {
+      text = `${recipient.name} (${recipient.email})`;
+    }
+
+    return `[${recipient.role}] ${text}`;
+  };
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link
+        to={`${documentRootPath}/f/${folderId}/${document.id}`}
+        className="flex items-center text-[#7AC455] hover:opacity-80"
+      >
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Document</Trans>
+      </Link>
+
+      <div className="flex flex-col">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={document.title}
+          >
+            {document.title}
+          </h1>
+        </div>
+        <div className="mt-1 flex flex-col justify-between sm:flex-row">
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatusComponent
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
+          </div>
+          <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
+            <DocumentCertificateDownloadButton
+              className="mr-2"
+              documentId={document.id}
+              documentStatus={document.status}
+            />
+
+            <DocumentAuditLogDownloadButton documentId={document.id} />
+          </div>
+        </div>
+      </div>
+
+      <section className="mt-6">
+        <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
+          {documentInformation.map((info, i) => (
+            <div className="text-foreground text-sm" key={i}>
+              <h3 className="font-semibold">{_(info.description)}</h3>
+              <p className="text-muted-foreground truncate">{info.value}</p>
+            </div>
+          ))}
+
+          <div className="text-foreground text-sm">
+            <h3 className="font-semibold">Recipients</h3>
+            <ul className="text-muted-foreground list-inside list-disc">
+              {recipients.map((recipient) => (
+                <li key={`recipient-${recipient.id}`}>
+                  <span className="-ml-2">{formatRecipientText(recipient)}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Card>
+      </section>
+
+      <section className="mt-6">
+        <DocumentLogsTable documentId={document.id} />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/documents.f.$folderId._index.tsx

@@ -0,0 +1,374 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
+
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { trpc } from '@documenso/trpc/react';
+import {
+  type TFindDocumentsInternalResponse,
+  ZFindDocumentsInternalRequestSchema,
+} from '@documenso/trpc/server/document-router/schema';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentMoveToFolderDialog } from '~/components/dialogs/document-move-to-folder-dialog';
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { DocumentDropZoneWrapper } from '~/components/general/document/document-drop-zone-wrapper';
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
+import { FolderCard } from '~/components/general/folder/folder-card';
+import { PeriodSelector } from '~/components/general/period-selector';
+import { DocumentsTable } from '~/components/tables/documents-table';
+import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
+import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
+import { useOptionalCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Documents');
+}
+
+const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
+  status: true,
+  period: true,
+  page: true,
+  perPage: true,
+  query: true,
+}).extend({
+  senderIds: z.string().transform(parseToIntegerArray).optional().catch([]),
+});
+
+export default function DocumentsPage() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [isMovingDocument, setIsMovingDocument] = useState(false);
+  const [documentToMove, setDocumentToMove] = useState<number | null>(null);
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { folderId } = useParams();
+
+  const team = useOptionalCurrentTeam();
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const [stats, setStats] = useState<TFindDocumentsInternalResponse['stats']>({
+    [ExtendedDocumentStatus.DRAFT]: 0,
+    [ExtendedDocumentStatus.PENDING]: 0,
+    [ExtendedDocumentStatus.COMPLETED]: 0,
+    [ExtendedDocumentStatus.REJECTED]: 0,
+    [ExtendedDocumentStatus.INBOX]: 0,
+    [ExtendedDocumentStatus.ALL]: 0,
+  });
+
+  const findDocumentSearchParams = useMemo(
+    () => ZSearchParamsSchema.safeParse(Object.fromEntries(searchParams.entries())).data || {},
+    [searchParams],
+  );
+
+  const { data, isLoading, isLoadingError, refetch } = trpc.document.findDocumentsInternal.useQuery(
+    {
+      ...findDocumentSearchParams,
+      folderId,
+    },
+  );
+
+  const {
+    data: foldersData,
+    isLoading: isFoldersLoading,
+    refetch: refetchFolders,
+  } = trpc.folder.getFolders.useQuery({
+    parentId: folderId,
+  });
+
+  useEffect(() => {
+    void refetch();
+    void refetchFolders();
+  }, [team?.url]);
+
+  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (value === ExtendedDocumentStatus.ALL) {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    return `${formatDocumentsPath(team?.url)}/f/${folderId}?${params.toString()}`;
+  };
+
+  useEffect(() => {
+    if (data?.stats) {
+      setStats(data.stats);
+    }
+  }, [data?.stats]);
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath(team?.url);
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  return (
+    <DocumentDropZoneWrapper>
+      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-1 items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+              onClick={() => navigateToFolder(null)}
+            >
+              <HomeIcon className="h-4 w-4" />
+              <span>Home</span>
+            </Button>
+
+            {foldersData?.breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center space-x-2">
+                <span>/</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 pl-1 hover:bg-transparent"
+                  onClick={() => navigateToFolder(folder.id)}
+                >
+                  <FolderIcon className="h-4 w-4" />
+                  <span>{folder.name}</span>
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex gap-4 sm:flex-row sm:justify-end">
+            <DocumentUploadDropzone />
+            <CreateFolderDialog />
+          </div>
+        </div>
+
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-6">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+          <div className="flex flex-row items-center">
+            {team && (
+              <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+                {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+                <AvatarFallback className="text-muted-foreground text-xs">
+                  {team.name.slice(0, 1)}
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            <h2 className="text-4xl font-semibold">
+              <Trans>Documents</Trans>
+            </h2>
+          </div>
+
+          <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
+            <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
+              <TabsList>
+                {[
+                  ExtendedDocumentStatus.INBOX,
+                  ExtendedDocumentStatus.PENDING,
+                  ExtendedDocumentStatus.COMPLETED,
+                  ExtendedDocumentStatus.DRAFT,
+                  ExtendedDocumentStatus.ALL,
+                ].map((value) => (
+                  <TabsTrigger
+                    key={value}
+                    className="hover:text-foreground min-w-[60px]"
+                    value={value}
+                    asChild
+                  >
+                    <Link to={getTabHref(value)} preventScrollReset>
+                      <DocumentStatus status={value} />
+
+                      {value !== ExtendedDocumentStatus.ALL && (
+                        <span className="ml-1 inline-block opacity-50">{stats[value]}</span>
+                      )}
+                    </Link>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            {team && <DocumentsTableSenderFilter teamId={team.id} />}
+
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <PeriodSelector />
+            </div>
+            <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+              <DocumentSearch initialValue={findDocumentSearchParams.query} />
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <div>
+            {data &&
+            data.count === 0 &&
+            (!foldersData?.folders.length || foldersData.folders.length === 0) ? (
+              <DocumentsTableEmptyState
+                status={findDocumentSearchParams.status || ExtendedDocumentStatus.ALL}
+              />
+            ) : (
+              <DocumentsTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                onMoveDocument={(documentId) => {
+                  setDocumentToMove(documentId);
+                  setIsMovingDocument(true);
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        {documentToMove && (
+          <DocumentMoveToFolderDialog
+            documentId={documentToMove}
+            open={isMovingDocument}
+            onOpenChange={(open) => {
+              setIsMovingDocument(open);
+
+              if (!open) {
+                setDocumentToMove(null);
+              }
+            }}
+            currentFolderId={folderId}
+          />
+        )}
+
+        <FolderMoveDialog
+          foldersData={foldersData?.folders}
+          folder={folderToMove}
+          isOpen={isMovingFolder}
+          onOpenChange={(open) => {
+            setIsMovingFolder(open);
+
+            if (!open) {
+              setFolderToMove(null);
+            }
+          }}
+        />
+
+        <FolderSettingsDialog
+          folder={folderToSettings}
+          isOpen={isSettingsFolderOpen}
+          onOpenChange={(open) => {
+            setIsSettingsFolderOpen(open);
+
+            if (!open) {
+              setFolderToSettings(null);
+            }
+          }}
+        />
+
+        <FolderDeleteDialog
+          folder={folderToDelete}
+          isOpen={isDeletingFolder}
+          onOpenChange={(open) => {
+            setIsDeletingFolder(open);
+
+            if (!open) {
+              setFolderToDelete(null);
+            }
+          }}
+        />
+      </div>
+    </DocumentDropZoneWrapper>
+  );
+}

apps/remix/app/routes/_authenticated+/documents.folders._index.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { HomeIcon, Loader2 } from 'lucide-react';
+import { useNavigate } from 'react-router';
+
+import { FolderType } from '@documenso/lib/types/folder-type';
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { CreateFolderDialog } from '~/components/dialogs/folder-create-dialog';
+import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
+import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
+import { FolderSettingsDialog } from '~/components/dialogs/folder-settings-dialog';
+import { FolderCard } from '~/components/general/folder/folder-card';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Documents');
+}
+
+export default function DocumentsFoldersPage() {
+  const navigate = useNavigate();
+  const [isMovingFolder, setIsMovingFolder] = useState(false);
+  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
+  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
+  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
+  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
+
+  const { data: foldersData, isLoading: isFoldersLoading } = trpc.folder.getFolders.useQuery({
+    type: FolderType.DOCUMENT,
+    parentId: null,
+  });
+
+  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
+  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
+
+  const navigateToFolder = (folderId?: string | null) => {
+    const documentsPath = formatDocumentsPath();
+
+    if (folderId) {
+      void navigate(`${documentsPath}/f/${folderId}`);
+    } else {
+      void navigate(documentsPath);
+    }
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-1 items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
+            onClick={() => navigateToFolder(null)}
+          >
+            <HomeIcon className="h-4 w-4" />
+            <span>Home</span>
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-y-4 sm:flex-row sm:justify-end sm:gap-x-4">
+          <CreateFolderDialog />
+        </div>
+      </div>
+
+      <div className="mt-6">
+        {isFoldersLoading ? (
+          <div className="mt-6 flex justify-center">
+            <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          </div>
+        ) : (
+          <>
+            {foldersData?.folders?.some((folder) => folder.pinned) && (
+              <div className="mt-6">
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                  {foldersData.folders
+                    .filter((folder) => folder.pinned)
+                    .map((folder) => (
+                      <FolderCard
+                        key={folder.id}
+                        folder={folder}
+                        onNavigate={navigateToFolder}
+                        onMove={(folder) => {
+                          setFolderToMove(folder);
+                          setIsMovingFolder(true);
+                        }}
+                        onPin={(folderId) => void pinFolder({ folderId })}
+                        onUnpin={(folderId) => void unpinFolder({ folderId })}
+                        onSettings={(folder) => {
+                          setFolderToSettings(folder);
+                          setIsSettingsFolderOpen(true);
+                        }}
+                        onDelete={(folder) => {
+                          setFolderToDelete(folder);
+                          setIsDeletingFolder(true);
+                        }}
+                      />
+                    ))}
+                </div>
+              </div>
+            )}
+
+            <div className="mt-12">
+              <h1 className="truncate text-2xl font-semibold md:text-3xl">
+                <Trans>All Folders</Trans>
+              </h1>
+
+              <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {foldersData?.folders
+                  .filter((folder) => !folder.pinned)
+                  .map((folder) => (
+                    <FolderCard
+                      key={folder.id}
+                      folder={folder}
+                      onNavigate={navigateToFolder}
+                      onMove={(folder) => {
+                        setFolderToMove(folder);
+                        setIsMovingFolder(true);
+                      }}
+                      onPin={(folderId) => void pinFolder({ folderId })}
+                      onUnpin={(folderId) => void unpinFolder({ folderId })}
+                      onSettings={(folder) => {
+                        setFolderToSettings(folder);
+                        setIsSettingsFolderOpen(true);
+                      }}
+                      onDelete={(folder) => {
+                        setFolderToDelete(folder);
+                        setIsDeletingFolder(true);
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      <FolderMoveDialog
+        foldersData={foldersData?.folders}
+        folder={folderToMove}
+        isOpen={isMovingFolder}
+        onOpenChange={(open) => {
+          setIsMovingFolder(open);
+
+          if (!open) {
+            setFolderToMove(null);
+          }
+        }}
+      />
+
+      <FolderSettingsDialog
+        folder={folderToSettings}
+        isOpen={isSettingsFolderOpen}
+        onOpenChange={(open) => {
+          setIsSettingsFolderOpen(open);
+
+          if (!open) {
+            setFolderToSettings(null);
+          }
+        }}
+      />
+
+      <FolderDeleteDialog
+        folder={folderToDelete}
+        isOpen={isDeletingFolder}
+        onOpenChange={(open) => {
+          setIsDeletingFolder(open);
+
+          if (!open) {
+            setFolderToDelete(null);
+          }
+        }}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.f.$folderId.$id._index.tsx

@@ -0,0 +1,5 @@
+import DocumentPage, { loader } from '~/routes/_authenticated+/documents.f.$folderId.$id._index';
+
+export { loader };
+
+export default DocumentPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.f.$folderId.$id.edit.tsx

@@ -0,0 +1,5 @@
+import DocumentEditPage, { loader } from '~/routes/_authenticated+/documents.f.$folderId.$id.edit';
+
+export { loader };
+
+export default DocumentEditPage;