v2.9.0

Some PDFs have CropBox or MediaBox entries stored as a PDFDict
instead of the expected PDFArray, causing pdf-lib to throw during
lookup.

Wrap both box lookups in try-catch and fall back to A4 dimensions
when neither can be parsed

.agents/plans/bright-emerald-flower-bullmq-background-jobs.md

@@ -0,0 +1,239 @@
+---
+date: 2026-03-26
+title: Bullmq Background Jobs
+---
+
+## Context
+
+The codebase has a well-designed background job provider abstraction (`BaseJobProvider`) with two existing implementations:
+
+- **InngestJobProvider** — cloud/SaaS provider, externally hosted
+- **LocalJobProvider** — database-backed (Postgres via Prisma), uses HTTP self-calls to dispatch
+
+The goal is to add a third provider backed by a proper job queue library for self-hosted deployments that need more reliability than the Local provider offers.
+
+### Current Architecture
+
+All code lives in `packages/lib/jobs/`:
+
+- `client/base.ts` — Abstract `BaseJobProvider` with 4 methods: `defineJob()`, `triggerJob()`, `getApiHandler()`, `startCron()`
+- `client/client.ts` — `JobClient` facade, selects provider via `NEXT_PRIVATE_JOBS_PROVIDER` env var
+- `client/inngest.ts` — Inngest implementation
+- `client/local.ts` — Local/Postgres implementation
+- `client/_internal/job.ts` — Core types: `JobDefinition`, `JobRunIO`, `SimpleTriggerJobOptions`
+- `definitions/` — 19 job definitions (15 event-triggered, 4 cron)
+
+The `JobRunIO` interface provided to handlers includes:
+
+- `runTask(cacheKey, callback)` — idempotent task execution (cached via `BackgroundJobTask` table)
+- `triggerJob(cacheKey, options)` — chain jobs from within handlers
+- `wait(cacheKey, ms)` — delay/sleep (not implemented in Local provider)
+- `logger` — structured logging
+
+### Local Provider Limitations
+
+The current Local provider has several issues that motivate this work:
+
+1. `io.wait()` throws "Not implemented"
+2. HTTP self-call with 150ms fire-and-forget `Promise.race` is fragile
+3. No concurrency control — jobs run in the web server process
+4. No real retry backoff (immediate re-dispatch)
+5. No monitoring/visibility into job status
+6. Jobs compete for resources with HTTP request handling
+
+---
+
+## Provider Evaluation
+
+Three alternatives were evaluated against the existing provider interface and project requirements.
+
+### BullMQ (Redis-backed) — Recommended
+
+| Attribute           | Detail                     |
+| ------------------- | -------------------------- |
+| Backend             | Redis 7.x                  |
+| npm downloads/month | ~15M                       |
+| TypeScript          | Native                     |
+| Delayed jobs        | Yes (ms precision)         |
+| Cron/repeatable     | Yes (`upsertJobScheduler`) |
+| Retries + backoff   | Yes (exponential, custom)  |
+| Concurrency control | Yes (per-worker)           |
+| Rate limiting       | Yes (per-queue, per-group) |
+| Dashboard           | Bull Board (mature)        |
+| New infrastructure  | Yes — Redis required       |
+
+**Why BullMQ**: Most mature and widely-adopted Node.js queue. Native delayed jobs solve the `io.wait()` gap. Redis is purpose-built for queue workloads and keeps Postgres clean for application data. Bull Board gives immediate operational visibility. The provider abstraction already exists so wrapping BullMQ is straightforward.
+
+**Trade-off**: Requires Redis, which is additional infrastructure. However, Redis is a single Docker Compose service or a free Upstash tier, and the operational benefit is significant.
+
+### pg-boss (PostgreSQL-backed) — Strong Alternative
+
+| Attribute           | Detail                        |
+| ------------------- | ----------------------------- |
+| Backend             | PostgreSQL (existing)         |
+| npm downloads/month | ~1.4M                         |
+| TypeScript          | Native                        |
+| Delayed jobs        | Yes (`startAfter`)            |
+| Cron/repeatable     | Yes (`schedule()`)            |
+| New infrastructure  | No — reuses existing Postgres |
+
+**Why it could work**: Zero new infrastructure since the project already uses Postgres. API maps well to existing patterns.
+
+**Why it's second choice**: Polling-based (no LISTEN/NOTIFY), adds write amplification to the primary database, smaller ecosystem, no dashboard. At scale, queue operations on the primary database become a concern.
+
+### Graphile Worker (PostgreSQL-backed) — Less Suitable
+
+Uses LISTEN/NOTIFY for instant pickup but has a file-based task convention and separate schema that don't mesh well with the existing Prisma-centric architecture. Would require more adapter work.
+
+### Improving the Local Provider — Not Recommended
+
+Fixing the Local provider's issues (wait support, replacing HTTP self-calls, adding concurrency control, backoff) essentially means rebuilding a queue library from scratch with less robustness and no community maintenance.
+
+---
+
+## Recommendation
+
+**Proceed with BullMQ.** It's the most capable option, maps cleanly to the existing provider interface, and is the standard choice for production Node.js applications. Redis is lightweight infrastructure with managed options available at every cloud provider.
+
+**If Redis is a hard blocker**, pg-boss is the clear fallback — but the plan below assumes BullMQ.
+
+---
+
+## Implementation Plan
+
+### Phase 1: BullMQ Provider Core
+
+**File: `packages/lib/jobs/client/bullmq.ts`**
+
+Create `BullMQJobProvider extends BaseJobProvider` with singleton pattern matching the existing providers.
+
+Key implementation details:
+
+1. **Constructor / `getInstance()`**
+   - Initialize a Redis `IORedis` connection using new env var: `NEXT_PRIVATE_REDIS_URL`
+   - Create a single `Queue` instance for dispatching jobs, using `NEXT_PRIVATE_REDIS_PREFIX` as the BullMQ `prefix` option (defaults to `documenso` if unset). This namespaces all Redis keys so multiple environments (worktrees, branches, developers) sharing the same Redis instance don't collide.
+   - Create a single `Worker` instance for processing jobs (in-process, same prefix)
+   - Store job definitions in a `_jobDefinitions` record (same pattern as Local provider)
+
+2. **`defineJob()`**
+   - Store definition in `_jobDefinitions` keyed by ID
+   - If the definition has a `trigger.cron`, register it via `queue.upsertJobScheduler()` with the cron expression
+
+3. **`triggerJob(options)`**
+   - Find eligible definitions by `trigger.name` (same lookup as Local provider)
+   - For each, call `queue.add(jobDefinitionId, payload)` with appropriate options
+   - Support `options.id` for deduplication via BullMQ's `jobId` option
+
+4. **`getApiHandler()`**
+   - Return a minimal health-check / queue-status handler. Unlike the Local provider, BullMQ workers don't need an HTTP endpoint to receive jobs — they pull from Redis directly. The API handler can return queue metrics for monitoring.
+
+5. **`startCron()`**
+   - No-op — cron is handled by BullMQ's `upsertJobScheduler` registered during `defineJob()`
+
+6. **Worker setup**
+   - Single worker processes all job types by dispatching to the correct handler from `_jobDefinitions`
+   - Configure concurrency with a default of 10 (overridable via `NEXT_PRIVATE_BULLMQ_CONCURRENCY` env var for those who need to tune it)
+   - Configure retry with exponential backoff: `backoff: { type: 'exponential', delay: 1000 }`
+   - Default 3 retries (matching current Local provider behavior)
+
+7. **`createJobRunIO(jobId)`** — Implement `JobRunIO`:
+   - `runTask()`: Reuse the existing `BackgroundJobTask` Prisma table for idempotent task tracking (same pattern as Local provider)
+   - `triggerJob()`: Delegate to `this.triggerJob()`
+   - `wait()`: Throw "Not implemented" (same as Local provider). No handler uses `io.wait()` so this has zero impact
+   - `logger`: Same console-based logger pattern as Local provider
+
+### Phase 2: Provider Registration
+
+**File: `packages/lib/jobs/client/client.ts`**
+
+Add `'bullmq'` case to the provider match:
+
+```typescript
+this._provider = match(env('NEXT_PRIVATE_JOBS_PROVIDER'))
+  .with('inngest', () => InngestJobProvider.getInstance())
+  .with('bullmq', () => BullMQJobProvider.getInstance())
+  .otherwise(() => LocalJobProvider.getInstance());
+```
+
+**File: `packages/tsconfig/process-env.d.ts`**
+
+Add `'bullmq'` to the `NEXT_PRIVATE_JOBS_PROVIDER` type union and add Redis env var types:
+
+```typescript
+NEXT_PRIVATE_JOBS_PROVIDER?: 'inngest' | 'local' | 'bullmq';
+NEXT_PRIVATE_REDIS_URL?: string;
+NEXT_PRIVATE_REDIS_PREFIX?: string;
+NEXT_PRIVATE_BULLMQ_CONCURRENCY?: string;
+```
+
+**File: `.env.example`**
+
+Add Redis configuration examples:
+
+```env
+NEXT_PRIVATE_JOBS_PROVIDER="local"  # Options: local, inngest, bullmq
+NEXT_PRIVATE_REDIS_URL="redis://localhost:63790"
+NEXT_PRIVATE_REDIS_PREFIX="documenso"  # Namespace for Redis keys (useful when sharing a Redis instance)
+```
+
+**File: `turbo.json`**
+
+Add `NEXT_PRIVATE_REDIS_URL`, `NEXT_PRIVATE_REDIS_PREFIX`, and `NEXT_PRIVATE_BULLMQ_CONCURRENCY` to the env vars list for cache invalidation.
+
+### Phase 3: Infrastructure & Dependencies
+
+**File: `packages/lib/package.json`**
+
+Add dependencies:
+
+- `bullmq` — the queue library
+- `ioredis` — Redis client (peer dependency of BullMQ, but explicit is better)
+
+**File: `docker-compose.yml` (or equivalent)**
+
+Add Redis service for local development:
+
+```yaml
+redis:
+  image: redis:7-alpine
+  ports:
+    - '6379:6379'
+```
+
+### Phase 4: Optional Enhancements
+
+These are not required for the initial implementation but worth considering for follow-up:
+
+1. **Bull Board integration** — Add a `/api/jobs/dashboard` route that serves Bull Board UI for monitoring. Gate behind an admin auth check.
+
+2. **Separate worker process** — Add an `apps/worker` entry point that runs BullMQ workers without the web server, for deployments that want to isolate job processing from request handling.
+
+3. **Graceful shutdown** — Register `SIGTERM`/`SIGINT` handlers to call `worker.close()` and `queue.close()` for clean shutdown.
+
+4. **BackgroundJob table integration** — Optionally continue writing to the `BackgroundJob` Prisma table for audit/history, using BullMQ events (`completed`, `failed`) to update status. This preserves the existing database-level visibility.
+
+---
+
+## Files to Create/Modify
+
+| File                                 | Action     | Description                              |
+| ------------------------------------ | ---------- | ---------------------------------------- |
+| `packages/lib/jobs/client/bullmq.ts` | **Create** | BullMQ provider implementation           |
+| `packages/lib/jobs/client/client.ts` | Modify     | Add `'bullmq'` provider case             |
+| `packages/tsconfig/process-env.d.ts` | Modify     | Add type for `'bullmq'` + Redis env vars |
+| `.env.example`                       | Modify     | Add Redis config example                 |
+| `turbo.json`                         | Modify     | Add Redis env var to cache keys          |
+| `packages/lib/package.json`          | Modify     | Add `bullmq` + `ioredis` dependencies    |
+| `docker-compose.yml`                 | Modify     | Add Redis service                        |
+
+---
+
+## Open Questions
+
+1. **Should the BullMQ provider also write to the `BackgroundJob` Prisma table?** This would maintain audit history and allow existing admin tooling to query job status. Trade-off is dual-write complexity.
+
+2. **Redis connection resilience**: Should the provider gracefully degrade if Redis is unavailable (e.g., fall back to Local provider), or fail hard? Failing hard is simpler and more predictable.
+
+## Resolved Questions
+
+- **`io.wait()`**: Not a concern. Only Inngest implements it (via `step.sleep`), the Local provider throws "Not implemented", and no job handler calls `io.wait()`. The BullMQ provider can throw "Not implemented" identically to the Local provider.

.env.example

@@ -35,6 +35,8 @@ NEXT_PRIVATE_OIDC_PROMPT="login"
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
+# OPTIONAL: Comma-separated hostnames or IPs whose webhooks are allowed to resolve to private/loopback addresses. (e.g., internal.example.com,192.168.1.5).
+NEXT_PRIVATE_WEBHOOK_SSRF_BYPASS_HOSTS=
 
 # [[SERVER]]
 # OPTIONAL: The port the server will listen on. Defaults to 3000.
@@ -143,8 +145,15 @@ NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 
 # [[BACKGROUND JOBS]]
+# Available options: local (default) | inngest | bullmq
 NEXT_PRIVATE_JOBS_PROVIDER="local"
 NEXT_PRIVATE_INNGEST_EVENT_KEY=
+# OPTIONAL: Redis URL for the BullMQ jobs provider.
+NEXT_PRIVATE_REDIS_URL="redis://localhost:63790"
+# OPTIONAL: Key prefix for Redis to namespace queues (useful when sharing a Redis instance).
+NEXT_PRIVATE_REDIS_PREFIX="documenso"
+# OPTIONAL: Number of concurrent jobs to process. Defaults to 10.
+# NEXT_PRIVATE_BULLMQ_CONCURRENCY=10
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
@@ -173,6 +182,14 @@ GOOGLE_VERTEX_LOCATION="global"
 # https://console.cloud.google.com/vertex-ai/studio/settings/api-keys
 GOOGLE_VERTEX_API_KEY=""
 
+# [[CLOUDFLARE TURNSTILE]]
+# OPTIONAL: Cloudflare Turnstile site key (public). When configured, Turnstile challenges
+# will be shown on sign-up (visible) and sign-in (invisible) pages.
+# See: https://developers.cloudflare.com/turnstile/
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=
+# OPTIONAL: Cloudflare Turnstile secret key (server-side verification).
+NEXT_PRIVATE_TURNSTILE_SECRET_KEY=
+
 # [[E2E Tests]]
 E2E_TEST_AUTHENTICATE_USERNAME="Test User"
 E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"

.github/labeler.yml

@@ -1,5 +1,8 @@
 'apps: web':
-  - apps/web/**
+  - apps/remix/**
+
+'type: documentation':
+  - apps/docs/**
 
 'version bump 👀':
   - '**/package.json'

ARCHITECTURE.md

@@ -235,6 +235,7 @@ Processes async jobs.
 | Provider | Description           | Env Value         |
 | -------- | --------------------- | ----------------- |
 | Local    | Database-backed queue | `local` (default) |
+| BullMQ   | Redis-backed queue    | `bullmq`          |
 | Inngest  | Managed cloud service | `inngest`         |
 
 **Config**: `NEXT_PRIVATE_JOBS_PROVIDER`

README.md

@@ -182,6 +182,9 @@ git clone https://github.com/<your-username>/documenso
 - Optional: Seed the database using `npm run prisma:seed -w @documenso/prisma` to create a test user and document.
 - Optional: Create your own signing certificate.
   - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL), see **[Create your own signing certificate](./SIGNING.md)**.
+- Optional: Configure job provider for document reminders.
+  - The default local job provider does not support scheduled jobs required for document reminders.
+  - To enable reminders, set `NEXT_PRIVATE_JOBS_PROVIDER=inngest` and provide `NEXT_PRIVATE_INNGEST_EVENT_KEY` in your `.env` file.
 
 ### Run in Gitpod
 

apps/docs/content/docs/developers/api/developer-mode.mdx

@@ -1,17 +1,22 @@
 ---
 title: Developer Mode
-description: Advanced development tools for debugging field coordinates and integrating with the Documenso API.
+description: Advanced development tools for debugging field IDs, recipient IDs, coordinates and integrating with the Documenso API.
 ---
 
 ## Overview
 
 Developer mode provides additional tools and features to help you integrate and debug Documenso.
 
-## Field Coordinates
+## Field Information
 
-Field coordinates represent the position of a field in a document. They are returned in the `pageX`, `pageY`, `width` and `height` properties of the field.
+When enabled, developer mode displays the following information for each field:
 
-To enable field coordinates, add the `devmode=true` query parameter to the editor URL.
+- **Field ID** - The unique identifier of the field
+- **Recipient ID** - The ID of the recipient assigned to the field
+- **Pos X / Pos Y** - The position of the field on the page
+- **Width / Height** - The dimensions of the field
+
+To enable developer mode, add the `devmode=true` query parameter to the editor URL.
 
 ```bash
 # Legacy editor

apps/docs/content/docs/developers/embedding/authoring/v1.mdx

@@ -141,6 +141,7 @@ const TemplateEditor = ({ presignToken, templateId }) => {
 | `css`              | `string`  | No       | Custom CSS string (Platform Plan)                        |
 | `cssVars`          | `object`  | No       | [CSS variable](/docs/developers/embedding/css-variables) overrides (Platform Plan) |
 | `darkModeDisabled` | `boolean` | No       | Disable dark mode (Platform Plan)                        |
+| `language`         | `string`  | No       | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts) |
 | `className`        | `string`  | No       | CSS class for the iframe                                 |
 | `features`         | `object`  | No       | Feature toggles for the authoring experience             |
 

apps/docs/content/docs/developers/embedding/authoring/v2.mdx

@@ -110,6 +110,7 @@ const EnvelopeEditor = ({ presignToken, envelopeId }) => {
 | `css`              | `string`  | No       | Custom CSS string (Platform Plan)                        |
 | `cssVars`          | `object`  | No       | [CSS variable](/docs/developers/embedding/css-variables) overrides (Platform Plan) |
 | `darkModeDisabled` | `boolean` | No       | Disable dark mode (Platform Plan)                        |
+| `language`         | `string`  | No       | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts) |
 | `className`        | `string`  | No       | CSS class for the iframe                                 |
 | `features`         | `object`  | No       | Feature toggles for the authoring experience             |
 
@@ -202,6 +203,7 @@ Controls how envelope items (individual files within the envelope) can be manage
 | `allowConfigureOrder`  | `boolean` | `true`  | Allow reordering items               |
 | `allowUpload`          | `boolean` | `true`  | Allow uploading new items            |
 | `allowDelete`          | `boolean` | `true`  | Allow deleting items                 |
+| `allowReplace`         | `boolean` | `true`  | Allow replacing an item's PDF        |
 
 ### Recipients
 

apps/docs/content/docs/developers/embedding/index.mdx

@@ -161,6 +161,7 @@ If you prefer not to use any SDK, you can embed signing using [Direct Links](/do
 | `css`                 | `string`   | Custom CSS string (Platform Plan).                               |
 | `cssVars`             | `object`   | CSS variable overrides for theming (Platform Plan).              |
 | `darkModeDisabled`    | `boolean`  | Disable dark mode in the embed (Platform Plan).                  |
+| `language`            | `string`   | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts). |
 | `onDocumentReady`     | `function` | Called when the document is loaded and ready.                    |
 | `onDocumentCompleted` | `function` | Called when signing is completed.                                |
 | `onDocumentError`     | `function` | Called when an error occurs.                                     |
@@ -175,6 +176,7 @@ If you prefer not to use any SDK, you can embed signing using [Direct Links](/do
 | `host`                | `string`   | Documenso instance URL. Defaults to `https://app.documenso.com`. |
 | `name`                | `string`   | Pre-fill the signer's name.                                      |
 | `lockName`            | `boolean`  | Prevent the signer from changing their name.                     |
+| `language`            | `string`   | Set the UI language. See [Supported Languages](https://github.com/documenso/documenso/tree/main/packages/lib/constants/locales.ts). |
 | `onDocumentReady`     | `function` | Called when the document is loaded and ready.                    |
 | `onDocumentCompleted` | `function` | Called when signing is completed.                                |
 | `onDocumentError`     | `function` | Called when an error occurs.                                     |

apps/docs/content/docs/self-hosting/configuration/background-jobs.mdx

@@ -0,0 +1,187 @@
+---
+title: Background Jobs
+description: Configure how Documenso processes background tasks like email delivery, document processing, and webhook dispatch.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Overview
+
+Documenso processes background jobs for email delivery, document sealing, webhook dispatch, and scheduled maintenance tasks. Three providers are available:
+
+| Provider | Backend    | Best For                                        | Infrastructure |
+| -------- | ---------- | ----------------------------------------------- | -------------- |
+| Inngest  | Managed    | Production with zero ops overhead               | None           |
+| BullMQ   | Redis      | Self-hosted production with full control         | Redis          |
+| Local    | PostgreSQL | Development and small self-hosted deployments   | None           |
+
+Select a provider with the `NEXT_PRIVATE_JOBS_PROVIDER` environment variable:
+
+```bash
+NEXT_PRIVATE_JOBS_PROVIDER=inngest  # or bullmq, local
+```
+
+<Callout type="info">
+  The default provider is `local`. It requires no additional infrastructure and works well for development and small deployments, but is not recommended for production workloads.
+</Callout>
+
+---
+
+## Inngest (Recommended)
+
+[Inngest](https://www.inngest.com/) is a managed background job service. It handles scheduling, retries, concurrency, and observability without any infrastructure to manage. This is the recommended provider for production deployments.
+
+### Setup
+
+{/* prettier-ignore */}
+1. Create an account at [inngest.com](https://www.inngest.com/)
+2. Create an app and obtain your event key and signing key
+3. Configure the environment variables:
+
+```bash
+NEXT_PRIVATE_JOBS_PROVIDER=inngest
+NEXT_PRIVATE_INNGEST_EVENT_KEY=your-event-key
+INNGEST_SIGNING_KEY=your-signing-key
+```
+
+### Environment Variables
+
+| Variable                         | Description                                  | Required |
+| -------------------------------- | -------------------------------------------- | -------- |
+| `NEXT_PRIVATE_INNGEST_EVENT_KEY` | Inngest event key                            | Yes      |
+| `INNGEST_EVENT_KEY`              | Alternative Inngest event key                | No       |
+| `INNGEST_SIGNING_KEY`            | Inngest signing key for webhook verification | Yes      |
+| `NEXT_PRIVATE_INNGEST_APP_ID`    | Custom Inngest app ID                        | No       |
+
+### Advantages
+
+- No infrastructure to manage
+- Built-in monitoring dashboard
+- Automatic retries with backoff
+- Cron scheduling handled externally
+- Scales automatically
+
+---
+
+## BullMQ
+
+[BullMQ](https://docs.bullmq.io/) is a Redis-backed job queue that runs inside the Documenso process. It provides higher throughput than the local provider, configurable concurrency, and a built-in dashboard for monitoring jobs.
+
+### Requirements
+
+- **Redis 6.2+** - any Redis-compatible service works (Redis, KeyDB, Dragonfly, AWS ElastiCache, Upstash, etc.)
+
+### Setup
+
+```bash
+NEXT_PRIVATE_JOBS_PROVIDER=bullmq
+NEXT_PRIVATE_REDIS_URL=redis://localhost:6379
+```
+
+### Environment Variables
+
+| Variable                           | Description                                                                | Default     |
+| ---------------------------------- | -------------------------------------------------------------------------- | ----------- |
+| `NEXT_PRIVATE_REDIS_URL`           | Redis connection URL                                                       | _(required)_ |
+| `NEXT_PRIVATE_REDIS_PREFIX`        | Key prefix for Redis queues (useful when sharing an instance)              | `documenso` |
+| `NEXT_PRIVATE_BULLMQ_CONCURRENCY` | Number of concurrent jobs to process                                       | `10`        |
+
+### Dashboard
+
+BullMQ includes a job monitoring dashboard at `/api/jobs/board`. In production, only admin users can access the dashboard. In development, it is open to all users.
+
+The dashboard provides visibility into queued, active, completed, and failed jobs.
+
+### Docker Compose with Redis
+
+If you're using Docker Compose, add a Redis service:
+
+```yaml
+services:
+  redis:
+    image: redis:8-alpine
+    ports:
+      - '6379:6379'
+    volumes:
+      - redis_data:/data
+
+volumes:
+  redis_data:
+```
+
+Then set `NEXT_PRIVATE_REDIS_URL=redis://redis:6379` in your Documenso environment.
+
+### Advantages
+
+- Self-hosted with no external service dependencies beyond Redis
+- Configurable concurrency
+- Built-in job monitoring dashboard
+- Reliable retries with exponential backoff
+- Queue namespacing for shared Redis instances
+
+---
+
+## Local
+
+The local provider uses your PostgreSQL database as a job queue. Jobs are stored in the `BackgroundJob` table and processed via internal HTTP requests that Documenso sends to itself.
+
+### Setup
+
+No configuration required. The local provider is the default when `NEXT_PRIVATE_JOBS_PROVIDER` is unset or set to `local`.
+
+```bash
+# Optional - this is the default
+NEXT_PRIVATE_JOBS_PROVIDER=local
+```
+
+### Internal URL
+
+Background jobs in the local provider work by Documenso sending HTTP requests to itself. If your reverse proxy or network setup causes issues with the app reaching its own public URL, set the internal URL:
+
+```bash
+NEXT_PRIVATE_INTERNAL_WEBAPP_URL=http://localhost:3000
+```
+
+This tells the job system to use the internal address instead of `NEXT_PUBLIC_WEBAPP_URL` for self-requests.
+
+<Callout type="warn">
+  The local provider is suitable for development and small deployments. For production workloads, use Inngest or BullMQ.
+</Callout>
+
+### Limitations
+
+- No concurrency control - jobs are processed one at a time per request cycle
+- No built-in monitoring
+- Depends on the application being able to reach itself over HTTP
+- Not suitable for high-throughput workloads
+
+---
+
+## Choosing a Provider
+
+<Tabs items={['Managed hosting', 'Self-hosted production', 'Development']}>
+<Tab value="Managed hosting">
+
+Use **Inngest**. Zero infrastructure, automatic scaling, and built-in observability. The simplest path to reliable background jobs in production.
+
+</Tab>
+<Tab value="Self-hosted production">
+
+Use **BullMQ**. Add a Redis instance to your infrastructure and get reliable job processing with a monitoring dashboard. Good fit if you already run Redis or want to keep everything self-hosted.
+
+</Tab>
+<Tab value="Development">
+
+Use **Local** (the default). No additional setup required. Works out of the box with just PostgreSQL.
+
+</Tab>
+</Tabs>
+
+---
+
+## See Also
+
+- [Environment Variables](/docs/self-hosting/configuration/environment) - Complete configuration reference
+- [Requirements](/docs/self-hosting/getting-started/requirements) - Infrastructure requirements
+- [Docker Compose](/docs/self-hosting/deployment/docker-compose) - Deploy with Docker Compose

apps/docs/content/docs/self-hosting/configuration/environment.mdx

@@ -268,20 +268,40 @@ AI features must also be enabled in organisation/team settings after configurati
 
 ## Background Jobs
 
-Documenso uses a PostgreSQL-based job queue by default. Jobs (email delivery, document processing, webhook dispatch) are stored in the `BackgroundJob` table and processed via internal HTTP requests. No external queue service like Redis is required.
+Documenso supports multiple background job providers for processing emails, documents, webhooks, and scheduled tasks.
 
-| Variable                     | Description                                                                    | Default |
-| ---------------------------- | ------------------------------------------------------------------------------ | ------- |
-| `NEXT_PRIVATE_JOBS_PROVIDER` | Jobs provider: `local` (PostgreSQL-based queue) or `inngest` (managed service) | `local` |
+### Provider Selection
 
-### Inngest Configuration
+| Variable                     | Description                                                                            | Default |
+| ---------------------------- | -------------------------------------------------------------------------------------- | ------- |
+| `NEXT_PRIVATE_JOBS_PROVIDER` | Jobs provider: `local` (PostgreSQL), `bullmq` (Redis), or `inngest` (managed service) | `local` |
 
-| Variable                         | Description                                  |
-| -------------------------------- | -------------------------------------------- |
-| `NEXT_PRIVATE_INNGEST_EVENT_KEY` | Inngest event key                            |
-| `INNGEST_EVENT_KEY`              | Alternative Inngest event key                |
-| `INNGEST_SIGNING_KEY`            | Inngest signing key for webhook verification |
-| `NEXT_PRIVATE_INNGEST_APP_ID`    | Custom Inngest app ID                        |
+### Local (local)
+
+No additional configuration required. Jobs are stored in PostgreSQL and processed via internal HTTP requests.
+
+| Variable                           | Description                                                  | Default                          |
+| ---------------------------------- | ------------------------------------------------------------ | -------------------------------- |
+| `NEXT_PRIVATE_INTERNAL_WEBAPP_URL` | Internal URL for the app to send job requests to itself      | Same as `NEXT_PUBLIC_WEBAPP_URL` |
+
+### BullMQ (bullmq)
+
+| Variable                           | Required | Description                                                   | Default     |
+| ---------------------------------- | -------- | ------------------------------------------------------------- | ----------- |
+| `NEXT_PRIVATE_REDIS_URL`           | Yes      | Redis connection URL (e.g., `redis://localhost:6379`)         |             |
+| `NEXT_PRIVATE_REDIS_PREFIX`        | No       | Key prefix for Redis queues (useful when sharing an instance) | `documenso` |
+| `NEXT_PRIVATE_BULLMQ_CONCURRENCY` | No       | Number of concurrent jobs to process                          | `10`        |
+
+### Inngest (inngest)
+
+| Variable                         | Required | Description                                  |
+| -------------------------------- | -------- | -------------------------------------------- |
+| `NEXT_PRIVATE_INNGEST_EVENT_KEY` | Yes      | Inngest event key                            |
+| `INNGEST_EVENT_KEY`              | No       | Alternative Inngest event key                |
+| `INNGEST_SIGNING_KEY`            | Yes      | Inngest signing key for webhook verification |
+| `NEXT_PRIVATE_INNGEST_APP_ID`    | No       | Custom Inngest app ID                        |
+
+For setup guides and provider recommendations, see [Background Jobs](/docs/self-hosting/configuration/background-jobs).
 
 ---
 

apps/docs/content/docs/self-hosting/configuration/meta.json

@@ -5,6 +5,7 @@
     "database",
     "email",
     "storage",
+    "background-jobs",
     "signing-certificate",
     "telemetry",
     "advanced"

apps/docs/content/docs/self-hosting/getting-started/requirements.mdx

@@ -85,9 +85,13 @@ See [Storage Configuration](/docs/self-hosting/configuration/storage) for setup
 
 ### Background Jobs
 
-Documenso processes background jobs (email delivery, document processing) using a PostgreSQL-based queue. No additional services like Redis are required: the job queue is built into the application and uses your existing database.
+Documenso processes background jobs (email delivery, document processing) using a PostgreSQL-based queue by default. No additional services are required: the job queue is built into the application and uses your existing database.
 
-For high-throughput deployments, Documenso optionally supports [Inngest](https://www.inngest.com/) as an alternative job provider. Set `NEXT_PRIVATE_JOBS_PROVIDER=inngest` and configure `INNGEST_EVENT_KEY` and `INNGEST_SIGNING_KEY`. Most self-hosted instances do not need this.
+For production deployments that need higher throughput or more reliable job processing, Documenso supports [BullMQ](https://docs.bullmq.io/) as an alternative provider. BullMQ requires a **Redis** instance (v6.2+). Set `NEXT_PRIVATE_JOBS_PROVIDER=bullmq` and configure `NEXT_PRIVATE_REDIS_URL`.
+
+For managed/cloud deployments, [Inngest](https://www.inngest.com/) is also supported as a job provider. Set `NEXT_PRIVATE_JOBS_PROVIDER=inngest` and configure `INNGEST_EVENT_KEY` and `INNGEST_SIGNING_KEY`.
+
+See [Background Jobs Configuration](/docs/self-hosting/configuration/background-jobs) for full details.
 
 ---
 

apps/docs/content/docs/self-hosting/getting-started/tips.mdx

@@ -144,19 +144,13 @@ See [Storage Configuration](/docs/self-hosting/configuration/storage) for full s
 
 ---
 
-## Background Jobs Don't Need Redis
+## Background Jobs
 
-Documenso uses a PostgreSQL-based job queue by default. No Redis, no external message broker. The job system uses your existing database to store and process background tasks like email delivery and document processing.
+Documenso uses a PostgreSQL-based job queue by default (`local` provider). No Redis or external message broker is required for basic deployments.
 
-For high-throughput deployments, Documenso optionally supports [Inngest](https://www.inngest.com/) as an alternative job provider:
+For production workloads, consider switching to **Inngest** (managed) or **BullMQ** (self-hosted with Redis) for better reliability and throughput.
 
-```bash
-NEXT_PRIVATE_JOBS_PROVIDER=inngest
-INNGEST_EVENT_KEY=your-event-key
-INNGEST_SIGNING_KEY=your-signing-key
-```
-
-Most self-hosted instances do not need Inngest.
+See [Background Jobs Configuration](/docs/self-hosting/configuration/background-jobs) for setup instructions and provider comparison.
 
 ---
 

apps/docs/content/docs/users/documents/advanced/index.mdx

@@ -24,4 +24,9 @@ description: Advanced document features including PDF placeholders, AI detection
     description="Control who can see documents within a team."
     href="/docs/users/documents/advanced/document-visibility"
   />
+  <Card
+    title="Recipient Expiration"
+    description="Set a signing deadline so document links expire after a configurable period."
+    href="/docs/users/documents/advanced/recipient-expiration"
+  />
 </Cards>

apps/docs/content/docs/users/documents/advanced/meta.json

@@ -5,6 +5,7 @@
     "pdf-placeholders",
     "ai-detection",
     "default-recipients",
-    "document-visibility"
+    "document-visibility",
+    "recipient-expiration"
   ]
 }

apps/docs/content/docs/users/documents/advanced/recipient-expiration.mdx

@@ -0,0 +1,183 @@
+---
+title: Recipient Expiration
+description: Set a signing deadline for recipients so document links expire after a configurable period.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+## Overview
+
+Recipient expiration lets you set a deadline for how long recipients have to sign a document after it is sent. Once the deadline passes, the recipient can no longer access the signing link and the document owner is notified.
+
+This is useful when:
+
+- A business deal is contingent on being signed within a specific time frame
+- A document is no longer relevant after a certain date
+- You want to ensure recipients act promptly rather than leaving documents unsigned indefinitely
+
+Expiration is tracked **per recipient**, not per document. If one recipient's deadline passes, other recipients can still sign. The document stays in a pending state so the owner can decide whether to resend or cancel.
+
+## Default Behaviour
+
+Every organisation has a default expiration period of **3 months**. This means that when you send a document, each recipient has 3 months from the time the document is sent to complete their signing.
+
+You can change this default at the organisation or team level, or override it per document.
+
+## Settings Cascade
+
+Expiration settings follow a three-level cascade: **Organisation → Team → Document**. Each level can override the one above it.
+
+<Tabs items={['Organisation', 'Team', 'Document']}>
+<Tab value="Organisation">
+
+Sets the default for all teams in the organisation. Options are a **custom duration** or **never expires**.
+
+To configure, navigate to **Organisation Settings > Preferences > Document** and find **Default Envelope Expiration**.
+
+</Tab>
+<Tab value="Team">
+
+Overrides the organisation default for documents created within this team. Options are a **custom duration**, **never expires**, or **inherit from organisation**.
+
+New teams default to **inherit from organisation**.
+
+To configure, navigate to **Team Settings > Preferences > Document** and find **Default Envelope Expiration**.
+
+</Tab>
+<Tab value="Document">
+
+Overrides the team or organisation default for a single document. Options are a **custom duration** or **never expires**.
+
+If you do not change the expiration when editing a document, the team or organisation default applies.
+
+</Tab>
+</Tabs>
+
+## Set Expiration for a Document
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Open the document settings
+
+In the document editor, open the **Settings** dialog and go to the **General** tab.
+
+</Step>
+<Step>
+
+### Configure the expiration
+
+Find the **Expiration** field. Choose one of:
+
+- **Custom duration** — enter a number and select a unit (days, weeks, months, or years)
+- **Never expires** — the recipient can sign at any time
+
+If you leave it unchanged, the team or organisation default applies.
+
+![Recipient Expiration Screenshot](/recipient-expiration/configure-expiration.webp)
+
+</Step>
+<Step>
+
+### Send the document
+
+When you send the document, the expiration deadline is calculated from that moment. For example, if you set a 7-day expiration and send the document on March 1st, the recipient has until March 8th to sign.
+
+</Step>
+</Steps>
+
+<Callout type="info">
+  You cannot change the expiration period after the document has been sent. To extend a recipient's
+  deadline, resend the document to them — this resets the clock.
+</Callout>
+
+## Set a Default Expiration Period
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Navigate to document preferences
+
+Go to **Organisation Settings > Preferences > Document** (or **Team Settings > Preferences > Document** for team-level overrides).
+
+</Step>
+<Step>
+
+### Configure the default
+
+Find **Default Envelope Expiration** and choose:
+
+- **Custom duration** — enter a number and unit
+- **Never expires** — no deadline for recipients
+- **Inherit from organisation** (team level only) — use whatever the organisation has configured
+
+</Step>
+<Step>
+
+### Save
+
+Click **Save** to apply. New documents created after this change use the updated default.
+
+</Step>
+</Steps>
+
+<Callout type="info">
+  Changing the default expiration does not affect documents that have already been sent. Only new
+  documents use the updated setting.
+</Callout>
+
+## What Happens When a Recipient Expires
+
+When a recipient's signing deadline passes:
+
+1. The recipient can no longer access the signing link. They see a message explaining that the signing deadline has expired and to contact the document owner.
+2. The document owner receives an email notification with a link to view the document.
+3. An audit log entry is created recording the expiration.
+4. The document remains in a **pending** state — other recipients who have not expired can still sign.
+
+![Recipient Expired Signing Page](/recipient-expiration/recipient-expired.webp)
+
+## Resending to Extend a Deadline
+
+If a recipient's deadline has passed (or is about to), you can resend the document to them. Resending recalculates the expiration from the current time, effectively extending the deadline.
+
+{/* prettier-ignore */}
+<Steps>
+<Step>
+
+### Open the document
+
+Navigate to the document page and find the recipient whose deadline has expired. Expired recipients are marked with an **Expired** badge.
+
+</Step>
+<Step>
+
+### Resend
+
+Click the resend option for the recipient. This sends a new signing link and resets the expiration clock based on the document's configured expiration period.
+
+</Step>
+</Steps>
+
+## Expiration Options Reference
+
+| Unit   | Example         | Description                                 |
+| ------ | --------------- | ------------------------------------------- |
+| Days   | 7 days          | Recipient has 7 days from when the document is sent |
+| Weeks  | 2 weeks         | Recipient has 2 weeks from when the document is sent |
+| Months | 3 months        | Recipient has 3 months from when the document is sent (default) |
+| Years  | 1 year          | Recipient has 1 year from when the document is sent |
+
+You can also set expiration to **never expires**, which means the signing link remains valid indefinitely.
+
+---
+
+## See Also
+
+- [Send Documents](/docs/users/documents/send) - Send documents for signing
+- [Document Preferences](/docs/users/organisations/preferences/document) - Configure default document settings
+- [Add Recipients](/docs/users/documents/add-recipients) - Add signers and other recipients to a document

apps/docs/content/docs/users/organisations/preferences/document.mdx

@@ -32,6 +32,7 @@ To access the preferences, navigate to either the organisation or teams settings
 | **Include the Signing Certificate**  | Whether the signing certificate is embedded in signed PDFs. The certificate is always available separately from the logs page.  |
 | **Include the Audit Logs**           | Whether the audit logs are embedded in the document when downloaded. The audit logs are always available separately from the logs page. |
 | **Default Recipients**               | Recipients that are automatically added to new documents. Can be overridden per document.                                       |
+| **Default Envelope Expiration**      | How long recipients have to sign before the signing link expires. See [recipient expiration](/docs/users/documents/advanced/recipient-expiration). |
 | **Delegate Document Ownership**      | Allow team API tokens to delegate document ownership to another team member.                                                    |
 | **AI Features**                      | Enable AI-powered features such as automatic recipient detection. Only shown if AI features are configured on the instance.     |
 

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

@@ -5,6 +5,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { zEmail } from '@documenso/lib/utils/zod';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -43,7 +44,7 @@ type ConfirmationDialogProps = {
 
 const ZNextSignerFormSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
+  email: zEmail('Invalid email address'),
 });
 
 type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
@@ -115,7 +116,7 @@ export function AssistantConfirmationDialog({
                   <div className="mt-4 flex flex-col gap-4">
                     {!isEditingNextSigner && (
                       <div>
-                        <p className="text-muted-foreground text-sm">
+                        <p className="text-sm text-muted-foreground">
                           <Trans>
                             The next recipient to sign this document will be{' '}
                             <span className="font-semibold">{form.watch('name')}</span> (

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

@@ -1,201 +0,0 @@
-import { useEffect, 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 { P, match } from 'ts-pattern';
-
-import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type DocumentDeleteDialogProps = {
-  id: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-  onDelete?: () => Promise<void> | void;
-  status: DocumentStatus;
-  documentTitle: string;
-  canManageDocument: boolean;
-};
-
-export const DocumentDeleteDialog = ({
-  id,
-  open,
-  onOpenChange,
-  onDelete,
-  status,
-  documentTitle,
-  canManageDocument,
-}: DocumentDeleteDialogProps) => {
-  const { toast } = useToast();
-  const { refreshLimits } = useLimits();
-  const { _ } = useLingui();
-
-  const deleteMessage = msg`delete`;
-
-  const [inputValue, setInputValue] = useState('');
-  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
-
-  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.delete.useMutation({
-    onSuccess: async () => {
-      void refreshLimits();
-
-      toast({
-        title: _(msg`Document deleted`),
-        description: _(msg`"${documentTitle}" has been successfully deleted`),
-        duration: 5000,
-      });
-
-      await onDelete?.();
-
-      onOpenChange(false);
-    },
-    onError: () => {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This document could not be deleted at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    },
-  });
-
-  useEffect(() => {
-    if (open) {
-      setInputValue('');
-      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
-    }
-  }, [open, status]);
-
-  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
-    setIsDeleteEnabled(event.target.value === _(deleteMessage));
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Are you sure?</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            {canManageDocument ? (
-              <Trans>
-                You are about to delete <strong>"{documentTitle}"</strong>
-              </Trans>
-            ) : (
-              <Trans>
-                You are about to hide <strong>"{documentTitle}"</strong>
-              </Trans>
-            )}
-          </DialogDescription>
-        </DialogHeader>
-
-        {canManageDocument ? (
-          <Alert variant="warning" className="-mt-1">
-            {match(status)
-              .with(DocumentStatus.DRAFT, () => (
-                <AlertDescription>
-                  <Trans>
-                    Please note that this action is <strong>irreversible</strong>. Once confirmed,
-                    this document will be permanently deleted.
-                  </Trans>
-                </AlertDescription>
-              ))
-              .with(DocumentStatus.PENDING, () => (
-                <AlertDescription>
-                  <p>
-                    <Trans>
-                      Please note that this action is <strong>irreversible</strong>.
-                    </Trans>
-                  </p>
-
-                  <p className="mt-1">
-                    <Trans>Once confirmed, the following will occur:</Trans>
-                  </p>
-
-                  <ul className="mt-0.5 list-inside list-disc">
-                    <li>
-                      <Trans>Document will be permanently deleted</Trans>
-                    </li>
-                    <li>
-                      <Trans>Document signing process will be cancelled</Trans>
-                    </li>
-                    <li>
-                      <Trans>All inserted signatures will be voided</Trans>
-                    </li>
-                    <li>
-                      <Trans>All recipients will be notified</Trans>
-                    </li>
-                  </ul>
-                </AlertDescription>
-              ))
-              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
-                <AlertDescription>
-                  <p>
-                    <Trans>By deleting this document, the following will occur:</Trans>
-                  </p>
-
-                  <ul className="mt-0.5 list-inside list-disc">
-                    <li>
-                      <Trans>The document will be hidden from your account</Trans>
-                    </li>
-                    <li>
-                      <Trans>Recipients will still retain their copy of the document</Trans>
-                    </li>
-                  </ul>
-                </AlertDescription>
-              ))
-              .exhaustive()}
-          </Alert>
-        ) : (
-          <Alert variant="warning" className="-mt-1">
-            <AlertDescription>
-              <Trans>Please contact support if you would like to revert this action.</Trans>
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {status !== DocumentStatus.DRAFT && canManageDocument && (
-          <Input
-            type="text"
-            value={inputValue}
-            onChange={onInputChange}
-            placeholder={_(msg`Please type ${`'${_(deleteMessage)}'`} to confirm`)}
-          />
-        )}
-
-        <DialogFooter>
-          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-            <Trans>Cancel</Trans>
-          </Button>
-
-          <Button
-            type="button"
-            loading={isPending}
-            onClick={() => void deleteDocument({ documentId: id })}
-            disabled={!isDeleteEnabled && canManageDocument}
-            variant="destructive"
-          >
-            {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,103 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { useNavigate } from 'react-router';
-
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { useCurrentTeam } from '~/providers/team';
-
-type DocumentDuplicateDialogProps = {
-  id: string;
-  token?: string;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const DocumentDuplicateDialog = ({
-  id,
-  token,
-  open,
-  onOpenChange,
-}: DocumentDuplicateDialogProps) => {
-  const navigate = useNavigate();
-
-  const { toast } = useToast();
-  const { _ } = useLingui();
-
-  const team = useCurrentTeam();
-
-  const documentsPath = formatDocumentsPath(team.url);
-
-  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
-    trpcReact.envelope.duplicate.useMutation({
-      onSuccess: async ({ id }) => {
-        toast({
-          title: _(msg`Document Duplicated`),
-          description: _(msg`Your document has been successfully duplicated.`),
-          duration: 5000,
-        });
-
-        await navigate(`${documentsPath}/${id}/edit`);
-        onOpenChange(false);
-      },
-    });
-
-  const onDuplicate = async () => {
-    try {
-      await duplicateEnvelope({ envelopeId: id });
-    } catch {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This document could not be duplicated at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Duplicate</Trans>
-          </DialogTitle>
-        </DialogHeader>
-
-        <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              <Trans>Cancel</Trans>
-            </Button>
-
-            <Button
-              type="button"
-              disabled={isDuplicating}
-              loading={isDuplicating}
-              onClick={onDuplicate}
-              className="flex-1"
-            >
-              <Trans>Duplicate</Trans>
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -4,13 +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 Recipient, SigningStatus, type Team, type User } from '@prisma/client';
+import { SigningStatus, type Team, type User } from '@prisma/client';
 import { History } from 'lucide-react';
 import { useForm, useWatch } 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 { TRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Document } from '@documenso/prisma/types/document-legacy-schema';
 import { trpc as trpcReact } from '@documenso/trpc/react';
@@ -45,10 +46,10 @@ const FORM_ID = 'resend-email';
 export type DocumentResendDialogProps = {
   document: Pick<Document, 'id' | 'userId' | 'teamId' | 'status'> & {
     user: Pick<User, 'id' | 'name' | 'email'>;
-    recipients: Recipient[];
+    recipients: TRecipientLite[];
     team: Pick<Team, 'id' | 'url'> | null;
   };
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
 };
 
 export const ZResendDocumentFormSchema = z.object({
@@ -183,7 +184,7 @@ export const DocumentResendDialog = ({ document, recipients }: DocumentResendDia
             <DialogClose asChild>
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
                 variant="secondary"
                 disabled={isSubmitting}
               >

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

@@ -52,13 +52,23 @@ export const EnvelopeDeleteDialog = ({
   const [inputValue, setInputValue] = useState('');
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
+  const isDocument = type === EnvelopeType.DOCUMENT;
+
   const { mutateAsync: deleteEnvelope, isPending } = trpcReact.envelope.delete.useMutation({
     onSuccess: async () => {
       void refreshLimits();
 
       toast({
-        title: t`Document deleted`,
-        description: t`"${title}" has been successfully deleted`,
+        title: canManageDocument
+          ? isDocument
+            ? t`Document deleted`
+            : t`Template deleted`
+          : isDocument
+            ? t`Document hidden`
+            : t`Template hidden`,
+        description: canManageDocument
+          ? t`"${title}" has been successfully deleted`
+          : t`"${title}" has been successfully hidden`,
         duration: 5000,
       });
 
@@ -69,7 +79,9 @@ export const EnvelopeDeleteDialog = ({
     onError: () => {
       toast({
         title: t`Something went wrong`,
-        description: t`This document could not be deleted at this time. Please try again.`,
+        description: isDocument
+          ? t`This document could not be deleted at this time. Please try again.`
+          : t`This template could not be deleted at this time. Please try again.`,
         variant: 'destructive',
         duration: 7500,
       });

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -16,6 +16,7 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { getRecipientsWithMissingFields } from '@documenso/lib/utils/recipients';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
 import { cn } from '@documenso/ui/lib/utils';
@@ -62,10 +63,7 @@ export type EnvelopeDistributeDialogProps = {
 export const ZEnvelopeDistributeFormSchema = z.object({
   meta: z.object({
     emailId: z.string().nullable(),
-    emailReplyTo: z.preprocess(
-      (val) => (val === '' ? undefined : val),
-      z.string().email().optional(),
-    ),
+    emailReplyTo: z.preprocess((val) => (val === '' ? undefined : val), zEmail().optional()),
     subject: z.string(),
     message: z.string(),
     distributionMethod: z

apps/remix/app/components/dialogs/envelope-duplicate-dialog.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { useNavigate } from 'react-router';
 
@@ -10,6 +9,7 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -41,19 +41,20 @@ export const EnvelopeDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
+  const isDocument = envelopeType === EnvelopeType.DOCUMENT;
+
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpc.envelope.duplicate.useMutation({
       onSuccess: async ({ id }) => {
         toast({
-          title: t`Envelope Duplicated`,
-          description: t`Your envelope has been successfully duplicated.`,
+          title: isDocument ? t`Document Duplicated` : t`Template Duplicated`,
+          description: isDocument
+            ? t`Your document has been successfully duplicated.`
+            : t`Your template has been successfully duplicated.`,
           duration: 5000,
         });
 
-        const path =
-          envelopeType === EnvelopeType.DOCUMENT
-            ? formatDocumentsPath(team.url)
-            : formatTemplatesPath(team.url);
+        const path = isDocument ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
 
         await navigate(`${path}/${id}/edit`);
         setOpen(false);
@@ -66,7 +67,9 @@ export const EnvelopeDuplicateDialog = ({
     } catch {
       toast({
         title: t`Something went wrong`,
-        description: t`This document could not be duplicated at this time. Please try again.`,
+        description: isDocument
+          ? t`This document could not be duplicated at this time. Please try again.`
+          : t`This template could not be duplicated at this time. Please try again.`,
         variant: 'destructive',
         duration: 7500,
       });
@@ -78,30 +81,25 @@ export const EnvelopeDuplicateDialog = ({
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
 
       <DialogContent>
-        {envelopeType === EnvelopeType.DOCUMENT ? (
-          <DialogHeader>
-            <DialogTitle>
-              <Trans>Duplicate Document</Trans>
-            </DialogTitle>
-            <DialogDescription>
+        <DialogHeader>
+          <DialogTitle>
+            {isDocument ? <Trans>Duplicate Document</Trans> : <Trans>Duplicate Template</Trans>}
+          </DialogTitle>
+          <DialogDescription>
+            {isDocument ? (
               <Trans>This document will be duplicated.</Trans>
-            </DialogDescription>
-          </DialogHeader>
-        ) : (
-          <DialogHeader>
-            <DialogTitle>
-              <Trans>Duplicate Template</Trans>
-            </DialogTitle>
-            <DialogDescription>
+            ) : (
               <Trans>This template will be duplicated.</Trans>
-            </DialogDescription>
-          </DialogHeader>
-        )}
+            )}
+          </DialogDescription>
+        </DialogHeader>
 
         <DialogFooter>
-          <Button type="button" variant="secondary" disabled={isDuplicating}>
-            <Trans>Cancel</Trans>
-          </Button>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isDuplicating}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
 
           <Button type="button" loading={isDuplicating} onClick={onDuplicate}>
             <Trans>Duplicate</Trans>

apps/remix/app/components/dialogs/envelope-item-edit-dialog.tsx

@@ -0,0 +1,368 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { AlertTriangleIcon, FileIcon, UploadIcon, XIcon } from 'lucide-react';
+import { type FileRejection, useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { trpc } from '@documenso/trpc/react';
+import { ZDocumentTitleSchema } from '@documenso/trpc/server/document-router/schema';
+import type { TReplaceEnvelopeItemPdfPayload } from '@documenso/trpc/server/envelope-router/replace-envelope-item-pdf.types';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  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';
+
+const ZEditEnvelopeItemFormSchema = z.object({
+  title: ZDocumentTitleSchema,
+});
+
+type TEditEnvelopeItemFormSchema = z.infer<typeof ZEditEnvelopeItemFormSchema>;
+
+/**
+ * Note: This should only be visible if the envelope item is editable.
+ */
+export type EnvelopeItemEditDialogProps = {
+  envelopeItem: { id: string; title: string };
+  allowConfigureTitle: boolean;
+  trigger: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopeItemEditDialog = ({
+  envelopeItem,
+  allowConfigureTitle,
+  trigger,
+  ...props
+}: EnvelopeItemEditDialogProps) => {
+  const { t, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const { envelope, editorFields, setLocalEnvelope, isEmbedded } = useCurrentEnvelopeEditor();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [replacementFile, setReplacementFile] = useState<{ file: File; pageCount: number } | null>(
+    null,
+  );
+  const [isDropping, setIsDropping] = useState(false);
+
+  const form = useForm<TEditEnvelopeItemFormSchema>({
+    resolver: zodResolver(ZEditEnvelopeItemFormSchema),
+    defaultValues: {
+      title: envelopeItem.title,
+    },
+  });
+
+  const { mutateAsync: replaceEnvelopeItemPdf } = trpc.envelope.item.replacePdf.useMutation({
+    onSuccess: ({ data, fields }) => {
+      setLocalEnvelope({
+        envelopeItems: envelope.envelopeItems.map((item) =>
+          item.id === data.id
+            ? { ...item, documentDataId: data.documentDataId, title: data.title }
+            : item,
+        ),
+      });
+
+      if (fields) {
+        setLocalEnvelope({ fields });
+        editorFields.resetForm(fields);
+      }
+    },
+  });
+
+  const fieldsOnExcessPages =
+    replacementFile !== null
+      ? envelope.fields.filter(
+          (field) =>
+            field.envelopeItemId === envelopeItem.id && field.page > replacementFile.pageCount,
+        )
+      : [];
+
+  const onFileDropRejected = (fileRejections: FileRejection[]) => {
+    toast({
+      title: t`Upload failed`,
+      description: i18n._(buildDropzoneRejectionDescription(fileRejections)),
+      duration: 5000,
+      variant: 'destructive',
+    });
+  };
+
+  const onFileDrop = async (files: File[]) => {
+    const file = files[0];
+
+    if (!file || isDropping) {
+      return;
+    }
+
+    setIsDropping(true);
+
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const fileData = new Uint8Array(arrayBuffer.slice(0));
+      const { PDF } = await import('@libpdf/core');
+      const pdfDoc = await PDF.load(fileData);
+
+      setReplacementFile({
+        file,
+        pageCount: pdfDoc.getPageCount(),
+      });
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: t`Failed to read file`,
+        description: t`The file is not a valid PDF.`,
+        variant: 'destructive',
+      });
+    }
+
+    setIsDropping(false);
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: { 'application/pdf': ['.pdf'] },
+    maxFiles: 1,
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
+    disabled: form.formState.isSubmitting,
+    onDrop: (files) => void onFileDrop(files),
+    onDropRejected: onFileDropRejected,
+  });
+
+  const onSubmit = async (data: TEditEnvelopeItemFormSchema) => {
+    if (isDropping || !replacementFile) {
+      return;
+    }
+
+    try {
+      const { file, pageCount } = replacementFile;
+
+      if (isEmbedded) {
+        const arrayBuffer = await file.arrayBuffer();
+        const fileData = new Uint8Array(arrayBuffer.slice(0));
+
+        const remainingFields = envelope.fields.filter(
+          (field) => field.envelopeItemId !== envelopeItem.id || field.page <= pageCount,
+        );
+
+        setLocalEnvelope({
+          envelopeItems: envelope.envelopeItems.map((item) =>
+            item.id === envelopeItem.id ? { ...item, title: data.title, data: fileData } : item,
+          ),
+          fields: remainingFields,
+        });
+
+        editorFields.resetForm(remainingFields);
+      } else {
+        const payload = {
+          envelopeId: envelope.id,
+          envelopeItemId: envelopeItem.id,
+          title: data.title,
+        } satisfies TReplaceEnvelopeItemPdfPayload;
+
+        const formData = new FormData();
+        formData.append('payload', JSON.stringify(payload));
+        formData.append('file', file);
+
+        await replaceEnvelopeItemPdf(formData);
+      }
+
+      setIsOpen(false);
+    } catch {
+      toast({
+        title: t`Failed to update item`,
+        description: t`Something went wrong while updating the envelope item.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset({ title: envelopeItem.title });
+      setReplacementFile(null);
+      setIsDropping(false);
+    }
+  }, [isOpen, form, envelopeItem.title]);
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) {
+      return `${bytes} B`;
+    }
+
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={isOpen}
+      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Edit Item</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Update the title or replace the PDF file.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Document Title</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        data-testid="envelope-item-edit-title-input"
+                        placeholder={t`Document Title`}
+                        disabled={!allowConfigureTitle}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <FormLabel>
+                  <Trans>Replace PDF</Trans>
+                </FormLabel>
+
+                {replacementFile ? (
+                  <div className="mt-1.5 space-y-2">
+                    <div
+                      data-testid="envelope-item-edit-selected-file"
+                      className="flex items-center justify-between rounded-md border border-border bg-muted/50 px-3 py-2"
+                    >
+                      <div className="flex min-w-0 items-center space-x-2">
+                        <FileIcon className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                        <div className="min-w-0">
+                          <p className="truncate text-sm font-medium">
+                            {replacementFile.file.name}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatFileSize(replacementFile.file.size)}
+                            {isDropping ? ' · …' : ' · '}
+                            {!isDropping && replacementFile.pageCount !== null && (
+                              <Plural
+                                one="1 page"
+                                other="# pages"
+                                value={replacementFile.pageCount}
+                              />
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        data-testid="envelope-item-edit-clear-file"
+                        onClick={() => {
+                          setReplacementFile(null);
+                        }}
+                      >
+                        <XIcon className="h-4 w-4" />
+                      </Button>
+                    </div>
+
+                    {fieldsOnExcessPages.length > 0 && (
+                      <Alert variant="warning" padding="tight">
+                        <AlertTriangleIcon className="h-4 w-4" />
+                        <AlertDescription data-testid="envelope-item-edit-field-warning">
+                          <Plural
+                            one="1 field will be deleted because the new PDF has fewer pages than the current one."
+                            other="# fields will be deleted because the new PDF has fewer pages than the current one."
+                            value={fieldsOnExcessPages.length}
+                          />
+                        </AlertDescription>
+                      </Alert>
+                    )}
+                  </div>
+                ) : (
+                  <div
+                    data-testid="envelope-item-edit-dropzone"
+                    {...getRootProps()}
+                    className={cn(
+                      'mt-1.5 flex cursor-pointer items-center justify-center rounded-md border border-dashed border-border px-4 py-4 transition-colors',
+                      isDragActive
+                        ? 'border-primary/50 bg-primary/5'
+                        : 'hover:border-muted-foreground/50 hover:bg-muted/50',
+                    )}
+                  >
+                    <input {...getInputProps()} />
+                    <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                      <UploadIcon className="h-4 w-4" />
+                      <span>
+                        <Trans>Drop PDF here or click to select</Trans>
+                      </span>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    <Trans>Cancel</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button
+                  type="submit"
+                  loading={form.formState.isSubmitting}
+                  disabled={isDropping || !replacementFile}
+                  data-testid="envelope-item-edit-update-button"
+                >
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx

@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, EnvelopeType, type Recipient, SigningStatus } from '@prisma/client';
+import { DocumentStatus, EnvelopeType, SigningStatus } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
+import type { TEnvelopeRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,7 +39,7 @@ import { StackAvatar } from '../general/stack-avatar';
 
 export type EnvelopeRedistributeDialogProps = {
   envelope: Pick<TEnvelope, 'id' | 'userId' | 'teamId' | 'status' | 'type' | 'documentMeta'> & {
-    recipients: Recipient[];
+    recipients: TEnvelopeRecipientLite[];
   };
   trigger?: React.ReactNode;
 };

apps/remix/app/components/dialogs/envelope-rename-dialog.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { DOCUMENT_TITLE_MAX_LENGTH } from '@documenso/trpc/server/document-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type EnvelopeRenameDialogProps = {
+  id: string;
+  initialTitle: string;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  onSuccess?: () => Promise<void>;
+  envelopeType?: 'document' | 'template';
+};
+
+export const EnvelopeRenameDialog = ({
+  id,
+  initialTitle,
+  open,
+  onOpenChange,
+  onSuccess,
+  envelopeType = 'document',
+}: EnvelopeRenameDialogProps) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const [title, setTitle] = useState(initialTitle);
+
+  useEffect(() => {
+    if (open) {
+      setTitle(initialTitle);
+    }
+  }, [open, initialTitle]);
+
+  const isTemplate = envelopeType === 'template';
+
+  const { mutate: updateEnvelope, isPending } = trpcReact.envelope.update.useMutation({
+    onSuccess: async () => {
+      await onSuccess?.();
+
+      toast({
+        title: isTemplate ? t`Template Renamed` : t`Document Renamed`,
+        description: isTemplate
+          ? t`Your template has been successfully renamed.`
+          : t`Your document has been successfully renamed.`,
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        description: t`Something went wrong. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  const trimmedTitle = title.trim();
+
+  const onRename = () => {
+    if (!trimmedTitle || trimmedTitle === initialTitle) {
+      onOpenChange(false);
+      return;
+    }
+
+    updateEnvelope({
+      envelopeId: id,
+      data: {
+        title: trimmedTitle,
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isTemplate ? <Trans>Rename Template</Trans> : <Trans>Rename Document</Trans>}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="py-2">
+          <Label htmlFor="title" className="sr-only">
+            <Trans>Title</Trans>
+          </Label>
+          <Input
+            id="title"
+            value={title}
+            placeholder={t`Enter a new title`}
+            onChange={(e) => setTitle(e.target.value)}
+            disabled={isPending}
+            maxLength={DOCUMENT_TITLE_MAX_LENGTH}
+            className="w-full"
+            autoFocus
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="button"
+            disabled={isPending || !trimmedTitle || trimmedTitle === initialTitle}
+            loading={isPending}
+            onClick={() => void onRename()}
+          >
+            <Trans>Rename</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-save-as-template-dialog.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+type EnvelopeSaveAsTemplateDialogProps = {
+  envelopeId: string;
+  trigger?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const EnvelopeSaveAsTemplateDialog = ({
+  envelopeId,
+  trigger,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: EnvelopeSaveAsTemplateDialogProps) => {
+  const navigate = useNavigate();
+
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = controlledOnOpenChange ?? setInternalOpen;
+
+  const { toast } = useToast();
+  const { t } = useLingui();
+
+  const team = useCurrentTeam();
+
+  const templatesPath = formatTemplatesPath(team.url);
+
+  const form = useForm({
+    defaultValues: {
+      includeRecipients: true,
+      includeFields: true,
+    },
+  });
+
+  const includeRecipients = form.watch('includeRecipients');
+
+  const { mutateAsync: saveAsTemplate, isPending } = trpc.envelope.saveAsTemplate.useMutation({
+    onSuccess: async ({ id }) => {
+      toast({
+        title: t`Template Created`,
+        description: t`Your document has been saved as a template.`,
+        duration: 5000,
+      });
+
+      await navigate(`${templatesPath}/${id}/edit`);
+      setOpen(false);
+    },
+  });
+
+  const onSubmit = async () => {
+    const { includeRecipients, includeFields } = form.getValues();
+
+    try {
+      await saveAsTemplate({
+        envelopeId,
+        includeRecipients,
+        includeFields: includeRecipients && includeFields,
+      });
+    } catch {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be saved as a template at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (isPending) {
+          return;
+        }
+
+        setOpen(value);
+
+        if (!value) {
+          form.reset();
+        }
+      }}
+    >
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Save as Template</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Create a template from this document.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Controller
+            control={form.control}
+            name="includeRecipients"
+            render={({ field }) => (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="envelopeIncludeRecipients"
+                  checked={field.value}
+                  onCheckedChange={(checked) => {
+                    field.onChange(checked === true);
+
+                    if (!checked) {
+                      form.setValue('includeFields', false);
+                    }
+                  }}
+                />
+                <Label htmlFor="envelopeIncludeRecipients">
+                  <Trans>Include Recipients</Trans>
+                </Label>
+              </div>
+            )}
+          />
+
+          <Controller
+            control={form.control}
+            name="includeFields"
+            render={({ field }) => (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="envelopeIncludeFields"
+                  checked={field.value}
+                  disabled={!includeRecipients}
+                  onCheckedChange={(checked) => field.onChange(checked === true)}
+                />
+                <Label
+                  htmlFor="envelopeIncludeFields"
+                  className={!includeRecipients ? 'opacity-50' : ''}
+                >
+                  <Trans>Include Fields</Trans>
+                </Label>
+              </div>
+            )}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isPending}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" loading={isPending} onClick={onSubmit}>
+            <Trans>Save as Template</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -40,13 +40,21 @@ type TCreateFolderFormSchema = z.infer<typeof ZCreateFolderFormSchema>;
 export type FolderCreateDialogProps = {
   type: FolderType;
   trigger?: React.ReactNode;
+  parentFolderId?: string | null;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
-export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDialogProps) => {
+export const FolderCreateDialog = ({
+  type,
+  trigger,
+  parentFolderId,
+  ...props
+}: FolderCreateDialogProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
   const { folderId } = useParams();
 
+  const parentId = parentFolderId ?? folderId;
+
   const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
 
   const { mutateAsync: createFolder } = trpc.folder.createFolder.useMutation();
@@ -62,7 +70,7 @@ export const FolderCreateDialog = ({ type, trigger, ...props }: FolderCreateDial
     try {
       await createFolder({
         name: data.name,
-        parentId: folderId,
+        parentId,
         type,
       });
 

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -17,6 +17,7 @@ import { IS_BILLING_ENABLED, SUPPORT_EMAIL } from '@documenso/lib/constants/app'
 import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateOrganisationMemberInvitesRequestSchema } from '@documenso/trpc/server/organisation-router/create-organisation-member-invites.types';
 import { cn } from '@documenso/ui/lib/utils';
@@ -94,7 +95,7 @@ type TabTypes = 'INDIVIDUAL' | 'BULK';
 
 const ZImportOrganisationMemberSchema = z.array(
   z.object({
-    email: z.string().email(),
+    email: zEmail(),
     organisationRole: z.nativeEnum(OrganisationMemberRole),
   }),
 );
@@ -329,12 +330,12 @@ export const OrganisationMemberInviteDialog = ({
             onValueChange={(value) => setInvitationType(value as TabTypes)}
           >
             <TabsList className="w-full">
-              <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
+              <TabsTrigger value="INDIVIDUAL" className="w-full hover:text-foreground">
                 <MailIcon size={20} className="mr-2" />
                 <Trans>Invite Members</Trans>
               </TabsTrigger>
 
-              <TabsTrigger value="BULK" className="hover:text-foreground w-full">
+              <TabsTrigger value="BULK" className="w-full hover:text-foreground">
                 <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
               </TabsTrigger>
             </TabsList>
@@ -382,7 +383,7 @@ export const OrganisationMemberInviteDialog = ({
                                 )}
                                 <FormControl>
                                   <Select {...field} onValueChange={field.onChange}>
-                                    <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                    <SelectTrigger className="max-w-[200px] text-muted-foreground">
                                       <SelectValue />
                                     </SelectTrigger>
 
@@ -447,7 +448,7 @@ export const OrganisationMemberInviteDialog = ({
               <div className="mt-4 space-y-4">
                 <Card gradient className="h-32">
                   <CardContent
-                    className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
+                    className="flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 text-muted-foreground/80 transition-colors hover:text-muted-foreground/90"
                     onClick={() => fileInputRef.current?.click()}
                   >
                     <Upload className="h-5 w-5" />

apps/remix/app/components/dialogs/sign-field-email-dialog.tsx

@@ -5,6 +5,7 @@ import { createCallable } from 'react-call';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { zEmail } from '@documenso/lib/utils/zod';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -24,10 +25,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 
 const ZSignFieldEmailFormSchema = z.object({
-  email: z
-    .string()
-    .email()
-    .min(1, { message: msg`Email is required`.id }),
+  email: zEmail().min(1, { message: msg`Email is required`.id }),
 });
 
 type TSignFieldEmailFormSchema = z.infer<typeof ZSignFieldEmailFormSchema>;

apps/remix/app/components/dialogs/team-member-create-dialog.tsx

@@ -10,8 +10,10 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { TEAM_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/teams';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -73,8 +75,14 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
   const { toast } = useToast();
 
   const team = useCurrentTeam();
+  const organisation = useCurrentOrganisation();
   const utils = trpc.useUtils();
 
+  const canInviteOrganisationMembers = canExecuteOrganisationAction(
+    'MANAGE_ORGANISATION',
+    organisation.currentOrganisationRole,
+  );
+
   const form = useForm<TAddTeamMembersFormSchema>({
     resolver: zodResolver(ZAddTeamMembersFormSchema),
     defaultValues: {
@@ -106,7 +114,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
 
   const onFormSubmit = async ({ members }: TAddTeamMembersFormSchema) => {
     if (members.length === 0) {
-      if (hasNoAvailableMembers) {
+      if (hasNoAvailableMembers && canInviteOrganisationMembers) {
         setInviteDialogOpen(true);
         return;
       }
@@ -231,7 +239,7 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
             onKeyDown={(e) => {
               if (e.key === 'Enter' && form.getValues('members').length === 0) {
                 e.preventDefault();
-                if (hasNoAvailableMembers) {
+                if (hasNoAvailableMembers && canInviteOrganisationMembers) {
                   setInviteDialogOpen(true);
                 }
                 // Don't show toast - the disabled Next button already communicates this
@@ -260,21 +268,32 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                                 <Trans>No organisation members available</Trans>
                               </h3>
                               <p className="mb-6 max-w-sm text-sm text-muted-foreground">
-                                <Trans>
-                                  To add members to this team, you must first add them to the
-                                  organisation.
-                                </Trans>
+                                {canInviteOrganisationMembers ? (
+                                  <Trans>
+                                    To add members to this team, you must first add them to the
+                                    organisation.
+                                  </Trans>
+                                ) : (
+                                  <Trans>
+                                    To add members to this team, they must first be invited to the
+                                    organisation. Only organisation admins and managers can invite
+                                    new members — please contact one of them to invite members on
+                                    your behalf.
+                                  </Trans>
+                                )}
                               </p>
-                              <OrganisationMemberInviteDialog
-                                open={inviteDialogOpen}
-                                onOpenChange={setInviteDialogOpen}
-                                trigger={
-                                  <Button type="button" variant="default">
-                                    <UserPlusIcon className="mr-2 h-4 w-4" />
-                                    <Trans>Invite organisation members</Trans>
-                                  </Button>
-                                }
-                              />
+                              {canInviteOrganisationMembers && (
+                                <OrganisationMemberInviteDialog
+                                  open={inviteDialogOpen}
+                                  onOpenChange={setInviteDialogOpen}
+                                  trigger={
+                                    <Button type="button" variant="default">
+                                      <UserPlusIcon className="mr-2 h-4 w-4" />
+                                      <Trans>Invite organisation members</Trans>
+                                    </Button>
+                                  }
+                                />
+                              )}
                             </div>
                           ) : (
                             <MultiSelectCombobox
@@ -310,30 +329,32 @@ export const TeamMemberCreateDialog = ({ trigger, ...props }: TeamMemberCreateDi
                               <Trans>Select members to add to this team</Trans>
                             </FormDescription>
 
-                            <Alert
-                              variant="neutral"
-                              className="mt-2 flex items-center gap-2 space-y-0"
-                            >
-                              <div>
-                                <UserPlusIcon className="h-5 w-5 text-muted-foreground" />
-                              </div>
-                              <AlertDescription className="mt-0 flex-1">
-                                <Trans>Can't find someone?</Trans>{' '}
-                                <OrganisationMemberInviteDialog
-                                  open={inviteDialogOpen}
-                                  onOpenChange={setInviteDialogOpen}
-                                  trigger={
-                                    <Button
-                                      type="button"
-                                      variant="link"
-                                      className="h-auto p-0 text-sm font-medium text-documenso-700 hover:text-documenso-600"
-                                    >
-                                      <Trans>Invite them to the organisation first</Trans>
-                                    </Button>
-                                  }
-                                />
-                              </AlertDescription>
-                            </Alert>
+                            {canInviteOrganisationMembers && (
+                              <Alert
+                                variant="neutral"
+                                className="mt-2 flex items-center gap-2 space-y-0"
+                              >
+                                <div>
+                                  <UserPlusIcon className="h-5 w-5 text-muted-foreground" />
+                                </div>
+                                <AlertDescription className="mt-0 flex-1">
+                                  <Trans>Can't find someone?</Trans>{' '}
+                                  <OrganisationMemberInviteDialog
+                                    open={inviteDialogOpen}
+                                    onOpenChange={setInviteDialogOpen}
+                                    trigger={
+                                      <Button
+                                        type="button"
+                                        variant="link"
+                                        className="h-auto p-0 text-sm font-medium text-documenso-700 hover:text-documenso-600"
+                                      >
+                                        <Trans>Invite them to the organisation first</Trans>
+                                      </Button>
+                                    }
+                                  />
+                                </AlertDescription>
+                              </Alert>
+                            )}
                           </>
                         )}
                       </FormItem>

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

@@ -1,93 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type TemplateDeleteDialogProps = {
-  id: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-  onDelete?: () => Promise<void> | void;
-};
-
-export const TemplateDeleteDialog = ({
-  id,
-  open,
-  onOpenChange,
-  onDelete,
-}: TemplateDeleteDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
-    onSuccess: async () => {
-      await onDelete?.();
-
-      toast({
-        title: _(msg`Template deleted`),
-        description: _(msg`Your template has been successfully deleted.`),
-        duration: 5000,
-      });
-
-      onOpenChange(false);
-    },
-    onError: () => {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This template could not be deleted at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    },
-  });
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Do you want to delete this template?</Trans>
-          </DialogTitle>
-
-          <DialogDescription>
-            <Trans>
-              Please note that this action is irreversible. Once confirmed, your template will be
-              permanently deleted.
-            </Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={isPending}
-            onClick={() => onOpenChange(false)}
-          >
-            <Trans>Cancel</Trans>
-          </Button>
-
-          <Button
-            type="button"
-            variant="destructive"
-            loading={isPending}
-            onClick={async () => deleteTemplate({ templateId: id })}
-          >
-            <Trans>Delete</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type Recipient, RecipientRole, type TemplateDirectLink } from '@prisma/client';
+import { RecipientRole, type TemplateDirectLink } from '@prisma/client';
 import {
   CircleDotIcon,
   CircleIcon,
@@ -21,6 +21,7 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
@@ -52,7 +53,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 type TemplateDirectLinkDialogProps = {
   templateId: number;
   directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
   trigger?: React.ReactNode;
   onCreateSuccess?: () => Promise<void> | void;
   onDeleteSuccess?: () => Promise<void> | void;

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

@@ -1,89 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc as trpcReact } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-type TemplateDuplicateDialogProps = {
-  id: number;
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const TemplateDuplicateDialog = ({
-  id,
-  open,
-  onOpenChange,
-}: TemplateDuplicateDialogProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: duplicateTemplate, isPending } =
-    trpcReact.template.duplicateTemplate.useMutation({
-      onSuccess: () => {
-        toast({
-          title: _(msg`Template duplicated`),
-          description: _(msg`Your template has been duplicated successfully.`),
-          duration: 5000,
-        });
-
-        onOpenChange(false);
-      },
-      onError: () => {
-        toast({
-          title: _(msg`Error`),
-          description: _(msg`An error occurred while duplicating template.`),
-          variant: 'destructive',
-        });
-      },
-    });
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            <Trans>Do you want to duplicate this template?</Trans>
-          </DialogTitle>
-
-          <DialogDescription className="pt-2">
-            <Trans>Your template will be duplicated.</Trans>
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <Button
-            type="button"
-            disabled={isPending}
-            variant="secondary"
-            onClick={() => onOpenChange(false)}
-          >
-            <Trans>Cancel</Trans>
-          </Button>
-
-          <Button
-            type="button"
-            loading={isPending}
-            onClick={async () =>
-              duplicateTemplate({
-                templateId: id,
-              })
-            }
-          >
-            <Trans>Duplicate</Trans>
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -4,7 +4,6 @@ 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 { Recipient } from '@prisma/client';
 import { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/client';
 import { FileTextIcon, InfoIcon, Plus, UploadCloudIcon, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
@@ -21,7 +20,7 @@ import {
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
 import { AppError } from '@documenso/lib/errors/app-error';
-import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
+import { type TRecipientLite, ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -79,7 +78,7 @@ export type TemplateUseDialogProps = {
   envelopeId: string;
   templateId: number;
   templateSigningOrder?: DocumentSigningOrder | null;
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
   documentDistributionMethod?: DocumentDistributionMethod;
   documentRootPath: string;
   trigger?: React.ReactNode;

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

@@ -60,11 +60,11 @@ export const ConfigureDocumentAdvancedSettings = ({
 
   return (
     <div>
-      <h3 className="text-foreground mb-1 text-lg font-medium">
+      <h3 className="mb-1 text-lg font-medium text-foreground">
         <Trans>Advanced Settings</Trans>
       </h3>
 
-      <p className="text-muted-foreground mb-6 text-sm">
+      <p className="mb-6 text-sm text-muted-foreground">
         <Trans>Configure additional options and preferences</Trans>
       </p>
 
@@ -100,7 +100,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         }))}
                         selectedValues={field.value}
                         onChange={field.onChange}
-                        className="bg-background w-full"
+                        className="w-full bg-background"
                         emptySelectionPlaceholder={t`Select signature types`}
                       />
                     </FormControl>
@@ -204,7 +204,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                         <TooltipTrigger>
                           <InfoIcon className="mx-2 h-4 w-4" />
                         </TooltipTrigger>
-                        <TooltipContent className="text-muted-foreground max-w-xs">
+                        <TooltipContent className="max-w-xs text-muted-foreground">
                           <Trans>
                             Add a URL to redirect the user to once the document is signed
                           </Trans>
@@ -279,7 +279,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                       <FormControl>
                         <Input
                           id="subject"
-                          className="bg-background mt-2"
+                          className="mt-2 bg-background"
                           disabled={isSubmitting || !isEmailDistribution}
                           {...field}
                         />
@@ -302,7 +302,7 @@ export const ConfigureDocumentAdvancedSettings = ({
                       <FormControl>
                         <Textarea
                           id="message"
-                          className="bg-background mt-2 h-32 resize-none"
+                          className="mt-2 h-32 resize-none bg-background"
                           disabled={isSubmitting || !isEmailDistribution}
                           {...field}
                         />

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

@@ -4,10 +4,11 @@ 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 { type FileRejection, useDropzone } from 'react-dropzone';
 import { useFormContext } from 'react-hook-form';
 
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -82,10 +83,10 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
     }
   };
 
-  const onDropRejected = () => {
+  const onDropRejected = (fileRejections: FileRejection[]) => {
     toast({
       title: _(msg`Your document failed to upload.`),
-      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      description: _(buildDropzoneRejectionDescription(fileRejections)),
       duration: 5000,
       variant: 'destructive',
     });
@@ -144,7 +145,7 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                     <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',
+                        'relative flex min-h-[160px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-background transition',
                         {
                           'border-primary/50 bg-primary/5': isDragActive,
                           'hover:bg-muted/30':
@@ -193,21 +194,21 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
                   </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 className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/50">
+                      <Loader className="h-10 w-10 animate-spin text-muted-foreground" />
                     </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">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
                       <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">
+                      <div className="text-xs text-muted-foreground">
                         {formatFileSize(documentData.size)}
                       </div>
                     </div>

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

@@ -6,6 +6,7 @@ import {
   ZDocumentMetaLanguageSchema,
 } from '@documenso/lib/types/document-meta';
 import { ZRecipientEmailSchema } from '@documenso/lib/types/recipient';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { DocumentDistributionMethod } from '@documenso/prisma/generated/types';
 
 // Define the schema for configuration
@@ -19,7 +20,7 @@ export const ZConfigureEmbedFormSchema = z.object({
         nativeId: z.number().optional(),
         formId: z.string(),
         name: z.string(),
-        email: z.string().email('Invalid email address'),
+        email: zEmail('Invalid email address'),
         role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
         signingOrder: z.number().optional(),
         disabled: z.boolean().optional(),

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

@@ -4,7 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { EnvelopeItem, FieldType } from '@prisma/client';
-import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
+import { ReadStatus, SendStatus, SigningStatus } from '@prisma/client';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,6 +13,7 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR, getPdfPagesCount } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
@@ -105,7 +106,7 @@ export const ConfigureFieldsView = ({
   }, [configData.documentData, envelopeItem, presignToken]);
 
   const recipients = useMemo(() => {
-    return configData.signers.map<Recipient>((signer, index) => ({
+    return configData.signers.map<TRecipientLite>((signer, index) => ({
       id: signer.nativeId || index,
       name: signer.name || '',
       email: signer.email || '',
@@ -128,7 +129,7 @@ export const ConfigureFieldsView = ({
     }));
   }, [configData.signers]);
 
-  const [selectedRecipient, setSelectedRecipient] = useState<Recipient | null>(
+  const [selectedRecipient, setSelectedRecipient] = useState<TRecipientLite | null>(
     () => recipients.find((r) => r.signingStatus === SigningStatus.NOT_SIGNED) || null,
   );
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);

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

@@ -3,7 +3,7 @@ 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">
+    <div className="fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center bg-background">
       <Loader className="mr-2 h-4 w-4 animate-spin" />
 
       <span>

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

@@ -17,6 +17,7 @@ import { useSearchParams } from 'react-router';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { ZDirectTemplateEmbedDataSchema } from '@documenso/lib/types/embed-direct-template-schema';
@@ -26,6 +27,8 @@ import {
 } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import { trpc } from '@documenso/trpc/react';
 import type {
@@ -33,6 +36,7 @@ import type {
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
 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';
@@ -92,6 +96,7 @@ export const EmbedDirectTemplateClientPage = ({
   const [isNameLocked, setIsNameLocked] = useState(false);
 
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+  const [emailError, setEmailError] = useState<string | null>(null);
 
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
@@ -205,6 +210,14 @@ export const EmbedDirectTemplateClientPage = ({
         return;
       }
 
+      const { success: isEmailValid } = zEmail().safeParse(email);
+
+      if (!isEmailValid) {
+        setEmailError(_(msg`A valid email is required`));
+        setIsExpanded(true);
+        return;
+      }
+
       let directTemplateExternalId = searchParams?.get('externalId') || undefined;
 
       if (directTemplateExternalId) {
@@ -290,12 +303,19 @@ export const EmbedDirectTemplateClientPage = ({
           cssVars: data.cssVars,
         });
       }
+
+      if (data.language && data.language !== APP_I18N_OPTIONS.sourceLang) {
+        void dynamicActivate(data.language).finally(() => {
+          setHasFinishedInit(true);
+        });
+      } else {
+        setHasFinishedInit(true);
+      }
     } catch (err) {
       console.error(err);
+      setHasFinishedInit(true);
     }
 
-    setHasFinishedInit(true);
-
     // !: While the two setters are stable we still want to ensure we're avoiding
     // !: re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -433,11 +453,23 @@ export const EmbedDirectTemplateClientPage = ({
                   <Input
                     type="email"
                     id="email"
-                    className="mt-2 bg-background"
+                    className={cn(
+                      'mt-2 bg-background',
+                      emailError && 'border-destructive ring-2 ring-destructive/20',
+                    )}
                     disabled={isEmailLocked}
                     value={email}
-                    onChange={(e) => !isEmailLocked && setEmail(e.target.value.trim())}
+                    onChange={(e) => {
+                      if (!isEmailLocked) {
+                        setEmail(e.target.value.trim());
+                        setEmailError(null);
+                      }
+                    }}
                   />
+
+                  {emailError && (
+                    <p className="mt-2 text-xs font-medium text-destructive">{emailError}</p>
+                  )}
                 </div>
 
                 {hasSignatureField && (

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

@@ -8,11 +8,13 @@ import { type Field, RecipientRole, SigningStatus } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
 import { isSignatureFieldType } from '@documenso/prisma/guards/is-signature-field';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
@@ -232,12 +234,19 @@ export const EmbedSignDocumentV1ClientPage = ({
           cssVars: data.cssVars,
         });
       }
+
+      if (data.language && data.language !== APP_I18N_OPTIONS.sourceLang) {
+        void dynamicActivate(data.language).finally(() => {
+          setHasFinishedInit(true);
+        });
+      } else {
+        setHasFinishedInit(true);
+      }
     } catch (err) {
       console.error(err);
+      setHasFinishedInit(true);
     }
 
-    setHasFinishedInit(true);
-
     // !: While the two setters are stable we still want to ensure we're avoiding
     // !: re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -3,8 +3,10 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { useLingui } from '@lingui/react';
 import { EnvelopeType } from '@prisma/client';
 
+import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
 
 import { injectCss } from '~/utils/css-vars';
 
@@ -162,12 +164,19 @@ export const EmbedSignDocumentV2ClientPage = ({
           cssVars: data.cssVars,
         });
       }
+
+      if (data.language && data.language !== APP_I18N_OPTIONS.sourceLang) {
+        void dynamicActivate(data.language).finally(() => {
+          setHasFinishedInit(true);
+        });
+      } else {
+        setHasFinishedInit(true);
+      }
     } catch (err) {
       console.error(err);
+      setHasFinishedInit(true);
     }
 
-    setHasFinishedInit(true);
-
     // !: While the setters are stable we still want to ensure we're avoiding
     // !: re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -98,7 +98,7 @@ export function BrandingPreferencesForm({
             ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
             : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
 
-        setPreviewUrl(logoUrl);
+        setPreviewUrl(logoUrl + '?v=' + Date.now());
         setHasLoadedPreview(true);
       }
     }
@@ -173,7 +173,7 @@ export function BrandingPreferencesForm({
           />
 
           <div className="relative flex w-full flex-col gap-y-4">
-            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9998]" />}
+            {!isBrandingEnabled && <div className="absolute inset-0 z-[9998] bg-background/60" />}
 
             <FormField
               control={form.control}
@@ -185,7 +185,7 @@ export function BrandingPreferencesForm({
                   </FormLabel>
 
                   <div className="flex flex-col gap-4">
-                    <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
+                    <div className="relative h-48 w-full overflow-hidden rounded-lg border border-border bg-background">
                       {previewUrl ? (
                         <img
                           src={previewUrl}
@@ -193,12 +193,12 @@ export function BrandingPreferencesForm({
                           className="h-full w-full object-contain p-4"
                         />
                       ) : (
-                        <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
+                        <div className="relative flex h-full w-full items-center justify-center bg-muted/20 text-sm text-muted-foreground dark:bg-muted">
                           <Trans>Please upload a logo</Trans>
 
                           {!hasLoadedPreview && (
-                            <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
-                              <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+                            <div className="absolute inset-0 z-[999] flex items-center justify-center bg-muted dark:bg-muted">
+                              <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
                             </div>
                           )}
                         </div>
@@ -243,7 +243,7 @@ export function BrandingPreferencesForm({
                           type="button"
                           variant="link"
                           size="sm"
-                          className="text-destructive text-xs"
+                          className="text-xs text-destructive"
                           onClick={() => {
                             setPreviewUrl('');
                             onChange(null);

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -15,6 +15,10 @@ import {
   type TEnvelopeExpirationPeriod,
   ZEnvelopeExpirationPeriod,
 } from '@documenso/lib/constants/envelope-expiration';
+import {
+  type TEnvelopeReminderSettings,
+  ZEnvelopeReminderSettings,
+} from '@documenso/lib/constants/envelope-reminder';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
@@ -32,6 +36,7 @@ import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter'
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
+import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -76,6 +81,7 @@ export type TDocumentPreferencesFormSchema = {
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
   envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
+  reminderSettings: TEnvelopeReminderSettings | null;
 };
 
 type SettingsSubset = Pick<
@@ -94,6 +100,7 @@ type SettingsSubset = Pick<
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
   | 'envelopeExpirationPeriod'
+  | 'reminderSettings'
 >;
 
 export type DocumentPreferencesFormProps = {
@@ -134,6 +141,7 @@ export const DocumentPreferencesForm = ({
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
     envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
+    reminderSettings: ZEnvelopeReminderSettings.nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -155,6 +163,7 @@ export const DocumentPreferencesForm = ({
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
       envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
+      reminderSettings: settings.reminderSettings ?? null,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -707,6 +716,35 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="reminderSettings"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Signing Reminders</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <ReminderSettingsPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls when and how often reminder emails are sent to recipients who have not
+                    yet completed signing.
+                  </Trans>
+                </FormDescription>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           {isAiFeaturesConfigured && (
             <FormField
               control={form.control}

apps/remix/app/components/forms/email-preferences-form.tsx

@@ -10,6 +10,7 @@ import {
   DEFAULT_DOCUMENT_EMAIL_SETTINGS,
   ZDocumentEmailSettingsSchema,
 } from '@documenso/lib/types/document-email';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
 import { Button } from '@documenso/ui/primitives/button';
@@ -33,7 +34,7 @@ import {
 
 const ZEmailPreferencesFormSchema = z.object({
   emailId: z.string().nullable(),
-  emailReplyTo: z.string().email().nullable(),
+  emailReplyTo: zEmail().nullable(),
   // emailReplyToName: z.string(),
   emailDocumentSettings: ZDocumentEmailSettingsSchema.nullable(),
 });
@@ -219,7 +220,8 @@ export const EmailPreferencesForm = ({
 
                 <FormDescription>
                   <Trans>
-                    Controls the default email settings when new documents or templates are created
+                    Controls the default email settings when new documents or templates are created.
+                    Updating these settings will not affect existing documents or templates.
                   </Trans>
                 </FormDescription>
               </FormItem>

apps/remix/app/components/forms/forgot-password.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -21,7 +22,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZForgotPasswordFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
 });
 
 export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;

apps/remix/app/components/forms/send-confirmation-email.tsx

@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -20,7 +21,7 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZSendConfirmationEmailFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
 });
 
 export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;

apps/remix/app/components/forms/signin.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 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 { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
 import { KeyRoundIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
@@ -16,7 +18,9 @@ import { z } from 'zod';
 
 import { authClient } from '@documenso/auth/client';
 import { AuthenticationErrorCode } from '@documenso/auth/server/lib/errors/error-codes';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -58,7 +62,7 @@ const handleFallbackErrorMessages = (code: string) => {
 const LOGIN_REDIRECT_PATH = '/';
 
 export const ZSignInFormSchema = z.object({
-  email: z.string().email().min(1),
+  email: zEmail().min(1),
   password: ZCurrentPasswordSchema,
   totpCode: z.string().trim().optional(),
   backupCode: z.string().trim().optional(),
@@ -100,6 +104,10 @@ export const SignInForm = ({
 
   const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
 
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
   const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
 
   const redirectPath = useMemo(() => {
@@ -216,6 +224,7 @@ export const SignInForm = ({
         password,
         totpCode,
         backupCode,
+        captchaToken: captchaToken ?? undefined,
         redirectPath,
       });
     } catch (err) {
@@ -250,6 +259,10 @@ export const SignInForm = ({
           AuthenticationErrorCode.InvalidTwoFactorCode,
           () => msg`The two-factor authentication code provided is incorrect.`,
         )
+        .with(
+          AppErrorCode.INVALID_CAPTCHA,
+          () => msg`We were unable to verify that you're human. Please try again.`,
+        )
         .otherwise(() => handleFallbackErrorMessages(error.code));
 
       toast({
@@ -257,6 +270,9 @@ export const SignInForm = ({
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
+      setCaptchaToken(null);
     }
   };
 
@@ -377,6 +393,18 @@ export const SignInForm = ({
             )}
           />
 
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              onSuccess={setCaptchaToken}
+              onExpire={() => setCaptchaToken(null)}
+              options={{
+                size: 'invisible',
+              }}
+            />
+          )}
+
           <Button
             type="submit"
             size="lg"

apps/remix/app/components/forms/signup.tsx

@@ -1,10 +1,12 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 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 { TurnstileInstance } from '@marsidev/react-turnstile';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { useForm } from 'react-hook-form';
 import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
@@ -15,6 +17,8 @@ import communityCardsImage from '@documenso/assets/images/community-cards.png';
 import { authClient } from '@documenso/auth/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { env } from '@documenso/lib/utils/env';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -39,7 +43,7 @@ export const ZSignUpFormSchema = z
       .string()
       .trim()
       .min(1, { message: msg`Please enter a valid name.`.id }),
-    email: z.string().email().min(1),
+    email: zEmail().min(1),
     password: ZPasswordSchema,
     signature: z.string().min(1, { message: msg`We need your signature to sign documents`.id }),
   })
@@ -88,6 +92,11 @@ export const SignUpForm = ({
 
   const utmSrc = searchParams.get('utm_source') ?? null;
 
+  const turnstileSiteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const turnstileRef = useRef<TurnstileInstance>(null);
+
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
   const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
 
   const form = useForm<TSignUpFormSchema>({
@@ -110,6 +119,7 @@ export const SignUpForm = ({
         email,
         password,
         signature,
+        captchaToken: captchaToken ?? undefined,
       });
 
       await navigate(returnTo ? returnTo : '/unverified-account');
@@ -138,6 +148,9 @@ export const SignUpForm = ({
         description: _(errorMessage),
         variant: 'destructive',
       });
+
+      turnstileRef.current?.reset();
+      setCaptchaToken(null);
     }
   };
 
@@ -245,13 +258,7 @@ export const SignUpForm = ({
             className="flex w-full flex-1 flex-col gap-y-4"
             onSubmit={form.handleSubmit(onFormSubmit)}
           >
-            <fieldset
-              className={cn(
-                'flex h-[550px] w-full flex-col gap-y-4',
-                hasSocialAuthEnabled && 'h-[650px]',
-              )}
-              disabled={isSubmitting}
-            >
+            <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
               <FormField
                 control={form.control}
                 name="name"
@@ -323,6 +330,19 @@ export const SignUpForm = ({
                 )}
               />
 
+              {turnstileSiteKey && (
+                <Turnstile
+                  ref={turnstileRef}
+                  siteKey={turnstileSiteKey}
+                  onSuccess={setCaptchaToken}
+                  onExpire={() => setCaptchaToken(null)}
+                  options={{
+                    size: 'flexible',
+                    appearance: 'interaction-only',
+                  }}
+                />
+              )}
+
               {hasSocialAuthEnabled && (
                 <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
                   <div className="h-px flex-1 bg-border" />

apps/remix/app/components/general/admin-details.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type DetailsCardProps = {
+  label: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
+};
+
+export const DetailsCard = ({ label, action, children }: DetailsCardProps) => {
+  return (
+    <div className="rounded-md border bg-muted/30 px-3 py-2">
+      <div className="flex min-h-9 items-center justify-between gap-3">
+        <span className="text-muted-foreground">{label}</span>
+        {action ?? null}
+      </div>
+      <div className="mt-2 min-h-9">{children}</div>
+    </div>
+  );
+};
+
+export type DetailsValueProps = {
+  children: ReactNode;
+  isMono?: boolean;
+  isSelectable?: boolean;
+};
+
+export const DetailsValue = ({
+  children,
+  isMono = true,
+  isSelectable = false,
+}: DetailsValueProps) => {
+  return (
+    <div
+      className={cn(
+        'flex min-h-10 items-center break-all rounded-md bg-muted px-3 py-2 text-xs text-muted-foreground',
+        isMono && 'font-mono',
+        isSelectable && 'select-all',
+      )}
+    >
+      {children}
+    </div>
+  );
+};

apps/remix/app/components/general/admin-global-settings-section.tsx

@@ -0,0 +1,163 @@
+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 { OrganisationGlobalSettings, TeamGlobalSettings } from '@prisma/client';
+
+import { DOCUMENT_VISIBILITY } from '@documenso/lib/constants/document-visibility';
+import {
+  type TDocumentEmailSettings,
+  ZDocumentEmailSettingsSchema,
+} from '@documenso/lib/types/document-email';
+
+import { DetailsCard, DetailsValue } from '~/components/general/admin-details';
+
+const EMAIL_SETTINGS_LABELS: Record<keyof TDocumentEmailSettings, MessageDescriptor> = {
+  recipientSigningRequest: msg`Recipient signing request`,
+  recipientRemoved: msg`Recipient removed`,
+  recipientSigned: msg`Recipient signed`,
+  documentPending: msg`Document pending`,
+  documentCompleted: msg`Document completed`,
+  documentDeleted: msg`Document deleted`,
+  ownerDocumentCompleted: msg`Owner document completed`,
+  ownerRecipientExpired: msg`Owner recipient expired`,
+  ownerDocumentCreated: msg`Owner document created`,
+};
+
+const emailSettingsKeys = Object.keys(EMAIL_SETTINGS_LABELS) as (keyof TDocumentEmailSettings)[];
+
+type AdminGlobalSettingsSectionProps = {
+  settings: TeamGlobalSettings | OrganisationGlobalSettings | null;
+  isTeam?: boolean;
+};
+
+export const AdminGlobalSettingsSection = ({
+  settings,
+  isTeam = false,
+}: AdminGlobalSettingsSectionProps) => {
+  const { _ } = useLingui();
+  const notSetLabel = isTeam ? <Trans>Inherited</Trans> : <Trans>Not set</Trans>;
+
+  if (!settings) {
+    return null;
+  }
+
+  const textValue = (value: string | null | undefined) => {
+    if (value === null || value === undefined) {
+      return notSetLabel;
+    }
+
+    return value;
+  };
+
+  const brandingTextValue = (value: string | null | undefined) => {
+    if (value === null || value === undefined || value.trim() === '') {
+      return notSetLabel;
+    }
+
+    return value;
+  };
+
+  const booleanValue = (value: boolean | null | undefined) => {
+    if (value === null || value === undefined) {
+      return notSetLabel;
+    }
+
+    return value ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>;
+  };
+
+  const parsedEmailSettings = ZDocumentEmailSettingsSchema.safeParse(
+    settings.emailDocumentSettings,
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
+      <DetailsCard label={<Trans>Document visibility</Trans>}>
+        <DetailsValue>
+          {settings.documentVisibility != null
+            ? _(DOCUMENT_VISIBILITY[settings.documentVisibility].value)
+            : notSetLabel}
+        </DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Document language</Trans>}>
+        <DetailsValue>{textValue(settings.documentLanguage)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Document timezone</Trans>}>
+        <DetailsValue>{textValue(settings.documentTimezone)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Date format</Trans>}>
+        <DetailsValue>{textValue(settings.documentDateFormat)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Include sender details</Trans>}>
+        <DetailsValue>{booleanValue(settings.includeSenderDetails)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Include signing certificate</Trans>}>
+        <DetailsValue>{booleanValue(settings.includeSigningCertificate)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Include audit log</Trans>}>
+        <DetailsValue>{booleanValue(settings.includeAuditLog)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Delegate document ownership</Trans>}>
+        <DetailsValue>{booleanValue(settings.delegateDocumentOwnership)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Typed signature</Trans>}>
+        <DetailsValue>{booleanValue(settings.typedSignatureEnabled)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Upload signature</Trans>}>
+        <DetailsValue>{booleanValue(settings.uploadSignatureEnabled)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Draw signature</Trans>}>
+        <DetailsValue>{booleanValue(settings.drawSignatureEnabled)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Branding</Trans>}>
+        <DetailsValue>{booleanValue(settings.brandingEnabled)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Branding logo</Trans>}>
+        <DetailsValue>{brandingTextValue(settings.brandingLogo)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Branding URL</Trans>}>
+        <DetailsValue>{brandingTextValue(settings.brandingUrl)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Branding company details</Trans>}>
+        <DetailsValue>{brandingTextValue(settings.brandingCompanyDetails)}</DetailsValue>
+      </DetailsCard>
+
+      <DetailsCard label={<Trans>Email reply-to</Trans>}>
+        <DetailsValue>{textValue(settings.emailReplyTo)}</DetailsValue>
+      </DetailsCard>
+
+      {isTeam && parsedEmailSettings.success && (
+        <DetailsCard label={<Trans>Email document settings</Trans>}>
+          <div className="mt-1 space-y-1 pb-2 pr-3 text-xs">
+            {emailSettingsKeys.map((key) => (
+              <div key={key} className="flex items-center justify-between gap-2">
+                <span className="text-muted-foreground">{_(EMAIL_SETTINGS_LABELS[key])}</span>
+                <span>
+                  {parsedEmailSettings.data[key] ? <Trans>On</Trans> : <Trans>Off</Trans>}
+                </span>
+              </div>
+            ))}
+          </div>
+        </DetailsCard>
+      )}
+
+      <DetailsCard label={<Trans>AI features</Trans>}>
+        <DetailsValue>{booleanValue(settings.aiFeaturesEnabled)}</DetailsValue>
+      </DetailsCard>
+    </div>
+  );
+};

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -97,13 +97,13 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           {menuNavigationLinks.map(({ href, text }) => (
             <Link
               key={href}
-              className="text-foreground hover:text-foreground/80 flex items-center gap-2 text-2xl font-semibold"
+              className="flex items-center gap-2 text-2xl font-semibold text-foreground hover:text-foreground/80"
               to={href}
               onClick={() => handleMenuItemClick()}
             >
               {text}
               {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="bg-primary text-primary-foreground flex h-6 min-w-[1.5rem] items-center justify-center rounded-full px-1.5 text-xs font-semibold">
+                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground">
                   {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
                 </span>
               )}
@@ -111,7 +111,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           ))}
 
           <button
-            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            className="text-2xl font-semibold text-foreground hover:text-foreground/80"
             onClick={async () => authClient.signOut()}
           >
             <Trans>Sign Out</Trans>
@@ -123,7 +123,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
             <ThemeSwitcher />
           </div>
 
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             © {new Date().getFullYear()} Documenso, Inc.
             <br />
             <Trans>All rights reserved.</Trans>

apps/remix/app/components/general/avatar-with-recipient.tsx

@@ -1,12 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import type { Recipient } from '@prisma/client';
 import { DocumentStatus } from '@prisma/client';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -14,7 +14,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { StackAvatar } from './stack-avatar';
 
 export type AvatarWithRecipientProps = {
-  recipient: Recipient;
+  recipient: TRecipientLite;
   documentStatus: DocumentStatus;
 };
 

apps/remix/app/components/general/claim-account.tsx

@@ -9,6 +9,7 @@ import { z } from 'zod';
 import { authClient } from '@documenso/auth/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError } from '@documenso/lib/errors/app-error';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -37,7 +38,7 @@ export const ZClaimAccountFormSchema = z
       .string()
       .trim()
       .min(1, { message: msg`Please enter a valid name.`.id }),
-    email: z.string().email().min(1),
+    email: zEmail().min(1),
     password: ZPasswordSchema,
   })
   .refine(

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

@@ -7,6 +7,7 @@ import { z } from 'zod';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TTemplate } from '@documenso/lib/types/template';
+import { zEmail } from '@documenso/lib/utils/zod';
 import {
   DocumentReadOnlyFields,
   mapFieldsWithRecipients,
@@ -33,7 +34,7 @@ import { useStep } from '@documenso/ui/primitives/stepper';
 import { useRequiredDocumentSigningAuthContext } from '~/components/general/document-signing/document-signing-auth-provider';
 
 const ZDirectTemplateConfigureFormSchema = z.object({
-  email: z.string().email('Email is invalid'),
+  email: zEmail('Email is invalid'),
 });
 
 export type TDirectTemplateConfigureFormSchema = z.infer<typeof ZDirectTemplateConfigureFormSchema>;

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

@@ -141,7 +141,7 @@ export const DocumentSigningAuthProvider = ({
 
     if (
       derivedRecipientActionAuth.includes(DocumentAuth.ACCOUNT) &&
-      user?.email == recipient.email
+      user?.email === recipient.email
     ) {
       return {
         type: DocumentAuth.ACCOUNT,

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

@@ -167,7 +167,7 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
           </DialogTitle>
         </DialogHeader>
 
-        <div className="text-muted-foreground max-w-[50ch]">
+        <div className="max-w-[50ch] text-muted-foreground">
           <p>
             <Trans>
               When you sign a document, we can automatically fill in and sign the following fields

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

@@ -14,6 +14,7 @@ import {
   ZDocumentAccessAuthSchema,
 } from '@documenso/lib/types/document-auth';
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -68,7 +69,7 @@ export type DocumentSigningCompleteDialogProps = {
 
 const ZNextSignerFormSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email address'),
+  email: zEmail('Invalid email address'),
   accessAuthOptions: ZDocumentAccessAuthSchema.optional(),
 });
 
@@ -76,7 +77,7 @@ type TNextSignerFormSchema = z.infer<typeof ZNextSignerFormSchema>;
 
 const ZDirectRecipientFormSchema = z.object({
   name: z.string(),
-  email: z.string().email('Invalid email address'),
+  email: zEmail('Invalid email address'),
 });
 
 type TDirectRecipientFormSchema = z.infer<typeof ZDirectRecipientFormSchema>;

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

@@ -131,16 +131,16 @@ export const DocumentSigningFieldContainer = ({
 
   return (
     <FieldRootContainer
-        color={getRecipientColorStyles(field.fieldMeta?.readOnly ? 'readOnly' : 0)}
-        field={field}
-      >
-        {!field.inserted && !loading && !readOnlyField && (
-          <button
-            type="submit"
-            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
-            onClick={async () => handleInsertField()}
-          />
-        )}
+      color={getRecipientColorStyles(field.fieldMeta?.readOnly ? 'readOnly' : 0)}
+      field={field}
+    >
+      {!field.inserted && !loading && !readOnlyField && (
+        <button
+          type="submit"
+          className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
+          onClick={async () => handleInsertField()}
+        />
+      )}
 
       {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
         <button

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

@@ -8,9 +8,12 @@ import {
   RecipientRole,
   SigningStatus,
 } from '@prisma/client';
+import { DateTime } from 'luxon';
 import { prop, sortBy } from 'remeda';
 
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -83,6 +86,54 @@ export interface EnvelopeSigningProviderProps {
   children: React.ReactNode;
 }
 
+/**
+ * Inject prefilled date fields for the current recipient.
+ *
+ * The dates are filled in correctly when the recipient "completes" the document.
+ */
+const prefillDateFields = (data: EnvelopeForSigningResponse): EnvelopeForSigningResponse => {
+  const { timezone, dateFormat } = data.envelope.documentMeta;
+
+  const formattedDate = DateTime.now()
+    .setZone(timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+    .toFormat(dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+
+  const prefillField = <
+    T extends { type: FieldType; inserted: boolean; customText: string; fieldMeta: unknown },
+  >(
+    field: T,
+  ): T => {
+    if (field.type !== FieldType.DATE || field.inserted) {
+      return field;
+    }
+
+    return {
+      ...field,
+      customText: formattedDate,
+      inserted: true,
+      fieldMeta: {
+        ...(typeof field.fieldMeta === 'object' ? field.fieldMeta : {}),
+        readOnly: true,
+      },
+    };
+  };
+
+  return {
+    ...data,
+    envelope: {
+      ...data.envelope,
+      recipients: data.envelope.recipients.map((recipient) => ({
+        ...recipient,
+        fields: recipient.fields.map(prefillField),
+      })),
+    },
+    recipient: {
+      ...data.recipient,
+      fields: data.recipient.fields.map(prefillField),
+    },
+  };
+};
+
 export const EnvelopeSigningProvider = ({
   fullName: initialFullName,
   email: initialEmail,
@@ -90,7 +141,7 @@ export const EnvelopeSigningProvider = ({
   envelopeData: initialEnvelopeData,
   children,
 }: EnvelopeSigningProviderProps) => {
-  const [envelopeData, setEnvelopeData] = useState(initialEnvelopeData);
+  const [envelopeData, setEnvelopeData] = useState(() => prefillDateFields(initialEnvelopeData));
 
   const { envelope, recipient } = envelopeData;
 

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

@@ -1,14 +1,15 @@
 import { useState } from 'react';
 
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
+import { DocumentStatus, EnvelopeType } from '@prisma/client';
 import {
   Copy,
   Download,
   Edit,
+  FileOutputIcon,
   Loader,
   MoreHorizontal,
+  Pencil,
   ScrollTextIcon,
   Share,
   Trash2,
@@ -18,8 +19,12 @@ import { Link, useNavigate } from 'react-router';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+import {
+  getEnvelopeItemPermissions,
+  mapSecondaryIdToDocumentId,
+} from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
@@ -28,12 +33,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
-import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
+import { EnvelopeRenameDialog } from '~/components/dialogs/envelope-rename-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -43,14 +49,14 @@ export type DocumentPageViewDropdownProps = {
 
 export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownProps) => {
   const { user } = useSession();
-  const { toast } = useToast();
-  const { _ } = useLingui();
 
   const navigate = useNavigate();
   const team = useCurrentTeam();
 
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+  const trpcUtils = trpcReact.useUtils();
+
+  const [isRenameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [isSaveAsTemplateDialogOpen, setSaveAsTemplateDialogOpen] = useState(false);
 
   const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);
 
@@ -62,14 +68,16 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
   const isCurrentTeamDocument = team && envelope.teamId === team.id;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
+  const { canTitleBeChanged } = getEnvelopeItemPermissions(envelope, []);
+
   const documentsPath = formatDocumentsPath(team.url);
 
   const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+      <DropdownMenuTrigger data-testid="document-page-view-action-btn">
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="end" forceMount>
@@ -86,6 +94,13 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
+        {canManageDocument && canTitleBeChanged && (
+          <DropdownMenuItem onClick={() => setRenameDialogOpen(true)}>
+            <Pencil className="mr-2 h-4 w-4" />
+            <Trans>Rename</Trans>
+          </DropdownMenuItem>
+        )}
+
         <EnvelopeDownloadDialog
           envelopeId={envelope.id}
           envelopeStatus={envelope.status}
@@ -108,15 +123,42 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
-          <Copy className="mr-2 h-4 w-4" />
-          <Trans>Duplicate</Trans>
+        <EnvelopeDuplicateDialog
+          envelopeId={envelope.id}
+          envelopeType={EnvelopeType.DOCUMENT}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <Copy className="mr-2 h-4 w-4" />
+                <Trans>Duplicate</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
+
+        <DropdownMenuItem onClick={() => setSaveAsTemplateDialogOpen(true)}>
+          <FileOutputIcon className="mr-2 h-4 w-4" />
+          <Trans>Save as Template</Trans>
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={isDeleted}>
-          <Trash2 className="mr-2 h-4 w-4" />
-          <Trans>Delete</Trans>
-        </DropdownMenuItem>
+        <EnvelopeDeleteDialog
+          id={envelope.id}
+          type={EnvelopeType.DOCUMENT}
+          status={envelope.status}
+          title={envelope.title}
+          canManageDocument={canManageDocument}
+          onDelete={() => {
+            void navigate(documentsPath);
+          }}
+          trigger={
+            <DropdownMenuItem asChild disabled={isDeleted} onSelect={(e) => e.preventDefault()}>
+              <div>
+                <Trash2 className="mr-2 h-4 w-4" />
+                <Trans>Delete</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
 
         <DropdownMenuLabel>
           <Trans>Share</Trans>
@@ -159,26 +201,21 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
         />
       </DropdownMenuContent>
 
-      <DocumentDeleteDialog
-        id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
-        status={envelope.status}
-        documentTitle={envelope.title}
-        open={isDeleteDialogOpen}
-        canManageDocument={canManageDocument}
-        onOpenChange={setDeleteDialogOpen}
-        onDelete={() => {
-          void navigate(documentsPath);
-        }}
+      <EnvelopeSaveAsTemplateDialog
+        envelopeId={envelope.id}
+        open={isSaveAsTemplateDialogOpen}
+        onOpenChange={setSaveAsTemplateDialogOpen}
       />
 
-      {isDuplicateDialogOpen && (
-        <DocumentDuplicateDialog
-          id={envelope.id}
-          token={recipient?.token}
-          open={isDuplicateDialogOpen}
-          onOpenChange={setDuplicateDialogOpen}
-        />
-      )}
+      <EnvelopeRenameDialog
+        id={envelope.id}
+        initialTitle={envelope.title}
+        open={isRenameDialogOpen}
+        onOpenChange={setRenameDialogOpen}
+        onSuccess={async () => {
+          await trpcUtils.envelope.get.invalidate();
+        }}
+      />
     </DropdownMenu>
   );
 };

apps/remix/app/components/general/document/document-recipient-link-copy-dialog.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 type { Recipient } from '@prisma/client';
 import { RecipientRole } from '@prisma/client';
 import { useSearchParams } from 'react-router';
 
@@ -11,6 +10,7 @@ import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -29,7 +29,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentRecipientLinkCopyDialogProps = {
   trigger?: React.ReactNode;
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
 };
 
 export const DocumentRecipientLinkCopyDialog = ({
@@ -88,7 +88,7 @@ export const DocumentRecipientLinkCopyDialog = ({
           </DialogDescription>
         </DialogHeader>
 
-        <ul className="text-muted-foreground divide-y rounded-lg border">
+        <ul className="divide-y rounded-lg border text-muted-foreground">
           {recipients.length === 0 && (
             <li className="flex flex-col items-center justify-center py-6 text-sm">
               <Trans>No recipients</Trans>
@@ -99,9 +99,9 @@ export const DocumentRecipientLinkCopyDialog = ({
             <li key={recipient.id} className="flex items-center justify-between px-4 py-3 text-sm">
               <AvatarWithText
                 avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
-                primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
+                primaryText={<p className="text-sm text-muted-foreground">{recipient.email}</p>}
                 secondaryText={
-                  <p className="text-muted-foreground/70 text-xs">
+                  <p className="text-xs text-muted-foreground/70">
                     {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                   </p>
                 }

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

@@ -4,6 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
+import type { FileRejection } from 'react-dropzone';
 import { useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -11,13 +12,13 @@ import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } 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 { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import type { TCreateTemplatePayloadSchema } from '@documenso/trpc/server/template-router/schema';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentUploadButton as DocumentUploadButtonPrimitive } from '@documenso/ui/primitives/document-upload-button';
 import {
@@ -162,10 +163,10 @@ export const DocumentUploadButtonLegacy = ({
     }
   };
 
-  const onFileDropRejected = () => {
+  const onFileDropRejected = (fileRejections: FileRejection[]) => {
     toast({
       title: _(msg`Your document failed to upload.`),
-      description: _(msg`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`),
+      description: _(buildDropzoneRejectionDescription(fileRejections)),
       duration: 5000,
       variant: 'destructive',
     });

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -5,7 +5,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { FileTextIcon, SparklesIcon } from 'lucide-react';
+import { FileTextIcon, PencilIcon, SparklesIcon } from 'lucide-react';
 import { useRevalidator, useSearchParams } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
@@ -28,14 +28,17 @@ import {
   type TSignatureFieldMeta,
   type TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
+import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
 
 import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
 import { AiFieldDetectionDialog } from '~/components/dialogs/ai-field-detection-dialog';
+import { EnvelopeItemEditDialog } from '~/components/dialogs/envelope-item-edit-dialog';
 import { EditorFieldCheckboxForm } from '~/components/forms/editor/editor-field-checkbox-form';
 import { EditorFieldDateForm } from '~/components/forms/editor/editor-field-date-form';
 import { EditorFieldDropdownForm } from '~/components/forms/editor/editor-field-dropdown-form';
@@ -85,6 +88,11 @@ export const EnvelopeEditorFieldsPage = () => {
   const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
   const { revalidate } = useRevalidator();
 
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
+    [envelope, envelope.recipients],
+  );
+
   const selectedField = useMemo(
     () => structuredClone(editorFields.selectedField),
     [editorFields.selectedField],
@@ -157,7 +165,39 @@ export const EnvelopeEditorFieldsPage = () => {
         ref={scrollableContainerRef}
       >
         {/* Horizontal envelope item selector */}
-        <EnvelopeRendererFileSelector className="px-0" fields={editorFields.localFields} />
+        <EnvelopeRendererFileSelector
+          className="px-0"
+          fields={editorFields.localFields}
+          renderItemAction={
+            editorConfig.envelopeItems !== null &&
+            editorConfig.envelopeItems.allowReplace &&
+            envelopeItemPermissions.canFileBeChanged
+              ? (item) => (
+                  <div className="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
+                    <div
+                      className={cn(
+                        'h-2 w-2 rounded-full transition-opacity duration-150 group-hover:opacity-0',
+                        { 'bg-green-500': currentEnvelopeItem?.id === item.id },
+                      )}
+                    />
+                    <EnvelopeItemEditDialog
+                      envelopeItem={item}
+                      allowConfigureTitle={editorConfig.envelopeItems?.allowConfigureTitle ?? false}
+                      trigger={
+                        <span
+                          className="absolute inset-0 flex cursor-pointer items-center justify-center opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+                          onClick={(e) => e.stopPropagation()}
+                          data-testid={`envelope-item-edit-button-${item.id}`}
+                        >
+                          <PencilIcon className="h-3.5 w-3.5" />
+                        </span>
+                      }
+                    />
+                  </div>
+                )
+              : undefined
+          }
+        />
 
         {/* Document View */}
         <div className="mt-4 flex h-full flex-col items-center justify-center">
@@ -297,32 +337,42 @@ export const EnvelopeEditorFieldsPage = () => {
                       </h3>
 
                       <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
+                        {selectedField.id && (
+                          <p>
+                            <span className="min-w-12 text-muted-foreground">
+                              <Trans>Field ID:</Trans>
+                            </span>{' '}
+                            {selectedField.id}
+                          </p>
+                        )}
+                        <p>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Recipient ID:</Trans>
+                          </span>{' '}
+                          {selectedField.recipientId}
+                        </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Pos X:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Pos Y:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Width:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
                           <span className="min-w-12 text-muted-foreground">
                             <Trans>Height:</Trans>
-                          </span>
-                          &nbsp;
+                          </span>{' '}
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus, EnvelopeType, TemplateType } from '@prisma/client';
 import {
@@ -13,7 +15,10 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import {
+  getEnvelopeItemPermissions,
+  mapSecondaryIdToTemplateId,
+} from '@documenso/lib/utils/envelope';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -50,6 +55,11 @@ export default function EnvelopeEditorHeader() {
     actions: { allowAttachments, allowDistributing },
   } = editorConfig;
 
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
+    [envelope, envelope.recipients],
+  );
+
   const handleCreateEmbeddedEnvelope = async () => {
     const latestEnvelope = await flushAutosave();
 
@@ -81,7 +91,8 @@ export default function EnvelopeEditorHeader() {
 
           <div className="flex items-center space-x-2">
             <EnvelopeItemTitleInput
-              disabled={envelope.status !== DocumentStatus.DRAFT || !allowConfigureEnvelopeTitle}
+              dataTestId="envelope-title-input"
+              disabled={!envelopeItemPermissions.canTitleBeChanged || !allowConfigureEnvelopeTitle}
               value={envelope.title}
               onChange={(title) => {
                 updateEnvelope({

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -8,11 +8,12 @@ import {
   DocumentDistributionMethod,
   DocumentVisibility,
   EnvelopeType,
+  RecipientRole,
   SendStatus,
   TemplateType,
 } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
-import { InfoIcon, MailIcon, SettingsIcon, ShieldIcon } from 'lucide-react';
+import { BellRingIcon, InfoIcon, MailIcon, SettingsIcon, ShieldIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
@@ -25,6 +26,7 @@ import {
   DOCUMENT_SIGNATURE_TYPES,
 } from '@documenso/lib/constants/document';
 import { ZEnvelopeExpirationPeriod } from '@documenso/lib/constants/envelope-expiration';
+import { ZEnvelopeReminderSettings } from '@documenso/lib/constants/envelope-reminder';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
@@ -50,6 +52,7 @@ import {
   canAccessTeamDocument,
   extractTeamSignatureSettings,
 } from '@documenso/lib/utils/teams';
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
 import {
@@ -67,6 +70,7 @@ import {
   DocumentVisibilityTooltip,
 } from '@documenso/ui/components/document/document-visibility-select';
 import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
+import { ReminderSettingsPicker } from '@documenso/ui/components/document/reminder-settings-picker';
 import {
   TemplateTypeSelect,
   TemplateTypeTooltip,
@@ -137,19 +141,17 @@ export const ZAddSettingsFormSchema = z.object({
       .optional()
       .default('en'),
     emailId: z.string().nullable(),
-    emailReplyTo: z.preprocess(
-      (val) => (val === '' ? undefined : val),
-      z.string().email().optional(),
-    ),
+    emailReplyTo: z.preprocess((val) => (val === '' ? undefined : val), zEmail().optional()),
     emailSettings: ZDocumentEmailSettingsSchema,
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
     envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullish(),
+    reminderSettings: ZEnvelopeReminderSettings.nullish(),
   }),
 });
 
-type EnvelopeEditorSettingsTabType = 'general' | 'email' | 'security';
+type EnvelopeEditorSettingsTabType = 'general' | 'reminders' | 'email' | 'security';
 
 const tabs = [
   {
@@ -158,6 +160,12 @@ const tabs = [
     icon: SettingsIcon,
     description: msg`Configure document settings and options before sending.`,
   },
+  {
+    id: 'reminders',
+    title: msg`Reminders`,
+    icon: BellRingIcon,
+    description: msg`Configure signing reminder settings for the document.`,
+  },
   {
     id: 'email',
     title: msg`Email`,
@@ -223,6 +231,7 @@ export const EnvelopeEditorSettingsDialog = ({
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
         envelopeExpirationPeriod: envelope.documentMeta?.envelopeExpirationPeriod ?? null,
+        reminderSettings: envelope.documentMeta?.reminderSettings ?? null,
       },
     };
   };
@@ -234,7 +243,10 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const envelopeHasBeenSent =
     envelope.type === EnvelopeType.DOCUMENT &&
-    envelope.recipients.some((recipient) => recipient.sendStatus === SendStatus.SENT);
+    envelope.recipients.some(
+      (recipient) =>
+        recipient.role !== RecipientRole.CC && recipient.sendStatus === SendStatus.SENT,
+    );
 
   const emailSettings = form.watch('meta.emailSettings');
 
@@ -268,6 +280,7 @@ export const EnvelopeEditorSettingsDialog = ({
       subject,
       emailReplyTo,
       envelopeExpirationPeriod,
+      reminderSettings,
     } = data.meta;
 
     const parsedGlobalAccessAuth = z
@@ -298,6 +311,7 @@ export const EnvelopeEditorSettingsDialog = ({
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
           envelopeExpirationPeriod,
+          reminderSettings,
         },
       });
 
@@ -379,6 +393,10 @@ export const EnvelopeEditorSettingsDialog = ({
                 return null;
               }
 
+              if (tab.id === 'reminders' && !settings.allowConfigureReminders) {
+                return null;
+              }
+
               return (
                 <Button
                   key={tab.id}
@@ -749,6 +767,44 @@ export const EnvelopeEditorSettingsDialog = ({
                       )}
                     </>
                   ))
+                  .with(
+                    { activeTab: 'reminders', settings: { allowConfigureReminders: true } },
+                    () => (
+                      <FormField
+                        control={form.control}
+                        name="meta.reminderSettings"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="flex flex-row items-center">
+                              <Trans>Signing Reminders</Trans>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="mx-2 h-4 w-4" />
+                                </TooltipTrigger>
+
+                                <TooltipContent className="max-w-xs text-muted-foreground">
+                                  <Trans>
+                                    Configure when and how often reminder emails are sent to
+                                    recipients who have not yet completed signing. Uses the team
+                                    default when set to inherit.
+                                  </Trans>
+                                </TooltipContent>
+                              </Tooltip>
+                            </FormLabel>
+
+                            <FormControl>
+                              <ReminderSettingsPicker
+                                value={field.value}
+                                onChange={field.onChange}
+                              />
+                            </FormControl>
+
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    ),
+                  )
                   .with(
                     { activeTab: 'email', settings: { allowConfigureDistribution: true } },
                     () => (

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -4,10 +4,8 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { DropResult } from '@hello-pangea/dnd';
 import { msg, plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
-import { FileWarningIcon, GripVerticalIcon, Loader2 } from 'lucide-react';
-import { X } from 'lucide-react';
-import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
+import { FileWarningIcon, GripVerticalIcon, Loader2Icon, PencilIcon, XIcon } from 'lucide-react';
+import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useEnvelopeAutosave } from '@documenso/lib/client-only/hooks/use-envelope-autosave';
@@ -16,10 +14,13 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
 import { nanoid } from '@documenso/lib/universal/id';
+import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 import { PRESIGNED_ENVELOPE_ITEM_ID_PREFIX } from '@documenso/lib/utils/embed-config';
-import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
+import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
+import type { TReplaceEnvelopeItemPdfPayload } from '@documenso/trpc/server/envelope-router/replace-envelope-item-pdf.types';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Card,
@@ -41,13 +42,14 @@ type LocalFile = {
   title: string;
   envelopeItemId: string | null;
   isUploading: boolean;
+  isReplacing: boolean;
   isError: boolean;
 };
 
 export const EnvelopeEditorUploadPage = () => {
   const organisation = useCurrentOrganisation();
 
-  const { t } = useLingui();
+  const { t, i18n } = useLingui();
   const { maximumEnvelopeItemCount, remaining } = useLimits();
   const { toast } = useToast();
 
@@ -72,10 +74,36 @@ export const EnvelopeEditorUploadPage = () => {
         title: item.title,
         envelopeItemId: item.id,
         isUploading: false,
+        isReplacing: false,
         isError: false,
       })),
   );
 
+  const replacingItemIdRef = useRef<string | null>(null);
+
+  const { open: openReplaceFilePicker, getInputProps: getReplaceInputProps } = useDropzone({
+    accept: { 'application/pdf': ['.pdf'] },
+    maxFiles: 1,
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
+    multiple: false,
+    noClick: true,
+    noKeyboard: true,
+    noDrag: true,
+    onDrop: (acceptedFiles) => {
+      const file = acceptedFiles[0];
+      const replacingItemId = replacingItemIdRef.current;
+
+      if (file && replacingItemId) {
+        void onReplacePdf(replacingItemId, file);
+        replacingItemIdRef.current = null;
+      }
+    },
+    onDropRejected: (fileRejections) => void onFileDropRejected(fileRejections),
+    onFileDialogCancel: () => {
+      replacingItemIdRef.current = null;
+    },
+  });
+
   const { mutateAsync: createEnvelopeItems, isPending: isCreatingEnvelopeItems } =
     trpc.envelope.item.createMany.useMutation({
       onSuccess: ({ data }) => {
@@ -108,11 +136,29 @@ export const EnvelopeEditorUploadPage = () => {
     },
   });
 
-  const canItemsBeModified = useMemo(
-    () => canEnvelopeItemsBeModified(envelope, envelope.recipients),
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
     [envelope, envelope.recipients],
   );
 
+  const { mutateAsync: replaceEnvelopeItemPdf } = trpc.envelope.item.replacePdf.useMutation({
+    onSuccess: ({ data, fields }) => {
+      // Update the envelope item with the new documentDataId.
+      setLocalEnvelope({
+        envelopeItems: envelope.envelopeItems.map((item) =>
+          item.id === data.id ? { ...item, documentDataId: data.documentDataId } : item,
+        ),
+      });
+
+      // When fields were created or deleted during the replacement,
+      // the server returns the full updated field list.
+      if (fields) {
+        setLocalEnvelope({ fields });
+        editorFields.resetForm(fields);
+      }
+    },
+  });
+
   const onFileDrop = async (files: File[]) => {
     const newUploadingFiles: (LocalFile & {
       file: File;
@@ -125,6 +171,7 @@ export const EnvelopeEditorUploadPage = () => {
           title: file.name,
           file,
           isUploading: isEmbedded ? false : true,
+          isReplacing: false,
           // Clone the buffer so it can be read multiple times (File.arrayBuffer() consumes the stream once)
           data: isEmbedded ? new Uint8Array((await file.arrayBuffer()).slice(0)) : null,
           isError: false,
@@ -197,12 +244,77 @@ export const EnvelopeEditorUploadPage = () => {
           envelopeItemId: item.id,
           title: item.title,
           isUploading: false,
+          isReplacing: false,
           isError: false,
         })),
       );
     });
   };
 
+  const onReplacePdf = async (envelopeItemId: string, file: File) => {
+    setLocalFiles((prev) =>
+      prev.map((f) => (f.envelopeItemId === envelopeItemId ? { ...f, isReplacing: true } : f)),
+    );
+
+    try {
+      if (isEmbedded) {
+        // For embedded mode, store the file data locally on the envelope item.
+        // The actual replacement will happen when the embed flow submits.
+        const arrayBuffer = await file.arrayBuffer();
+        const data = new Uint8Array(arrayBuffer.slice(0));
+
+        // Count pages in the new PDF to remove out-of-bounds fields.
+        const { PDF } = await import('@libpdf/core');
+        const pdfDoc = await PDF.load(data);
+        const newPageCount = pdfDoc.getPageCount();
+
+        // Remove fields that are on pages beyond the new PDF's page count.
+        const remainingFields = envelope.fields.filter(
+          (field) => field.envelopeItemId !== envelopeItemId || field.page <= newPageCount,
+        );
+
+        setLocalEnvelope({
+          envelopeItems: envelope.envelopeItems.map((item) =>
+            item.id === envelopeItemId ? { ...item, data } : item,
+          ),
+          fields: remainingFields,
+        });
+
+        editorFields.resetForm(remainingFields);
+
+        return;
+      }
+
+      // Normal mode: upload immediately via tRPC.
+      const payload = {
+        envelopeId: envelope.id,
+        envelopeItemId,
+      } satisfies TReplaceEnvelopeItemPdfPayload;
+
+      const formData = new FormData();
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const replacePromise = replaceEnvelopeItemPdf(formData);
+      registerPendingMutation(replacePromise);
+
+      await replacePromise;
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: t`Replace failed`,
+        description: t`Something went wrong while replacing the PDF`,
+        duration: 5000,
+        variant: 'destructive',
+      });
+    } finally {
+      setLocalFiles((prev) =>
+        prev.map((f) => (f.envelopeItemId === envelopeItemId ? { ...f, isReplacing: false } : f)),
+      );
+    }
+  };
+
   /**
    * Hide the envelope item from the list on deletion.
    */
@@ -305,7 +417,7 @@ export const EnvelopeEditorUploadPage = () => {
   };
 
   const dropzoneDisabledMessage = useMemo(() => {
-    if (!canItemsBeModified) {
+    if (!envelopeItemPermissions.canFileBeChanged) {
       return msg`Cannot upload items after the document has been sent`;
     }
 
@@ -346,7 +458,7 @@ export const EnvelopeEditorUploadPage = () => {
 
     toast({
       title: t`Upload failed`,
-      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      description: i18n._(buildDropzoneRejectionDescription(fileRejections)),
       duration: 5000,
       variant: 'destructive',
     });
@@ -354,6 +466,7 @@ export const EnvelopeEditorUploadPage = () => {
 
   return (
     <div className="mx-auto max-w-4xl space-y-6 p-8">
+      <input {...getReplaceInputProps()} />
       <Card backdropBlur={false} className="border">
         <CardHeader className="pb-3">
           <CardTitle>
@@ -395,7 +508,8 @@ export const EnvelopeEditorUploadPage = () => {
                         key={localFile.id}
                         isDragDisabled={
                           isCreatingEnvelopeItems ||
-                          !canItemsBeModified ||
+                          !envelopeItemPermissions.canOrderBeChanged ||
+                          localFile.isReplacing ||
                           !uploadConfig?.allowConfigureOrder
                         }
                         draggableId={localFile.id}
@@ -426,8 +540,9 @@ export const EnvelopeEditorUploadPage = () => {
                                 {localFile.envelopeItemId !== null ? (
                                   <EnvelopeItemTitleInput
                                     disabled={
-                                      envelope.status !== DocumentStatus.DRAFT ||
-                                      !uploadConfig?.allowConfigureTitle
+                                      !envelopeItemPermissions.canTitleBeChanged ||
+                                      !uploadConfig?.allowConfigureTitle ||
+                                      localFile.isReplacing
                                     }
                                     value={localFile.title}
                                     dataTestId={`envelope-item-title-input-${localFile.id}`}
@@ -445,15 +560,14 @@ export const EnvelopeEditorUploadPage = () => {
                                     <Trans>Uploading</Trans>
                                   ) : localFile.isError ? (
                                     <Trans>Something went wrong while uploading this file</Trans>
-                                  ) : // <div className="text-xs text-gray-500">2.4 MB • 3 pages</div>
-                                  null}
+                                  ) : null}
                                 </div>
                               </div>
                             </div>
                             <div className="flex items-center space-x-2">
                               {localFile.isUploading && (
                                 <div className="flex h-6 w-10 items-center justify-center">
-                                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                  <Loader2Icon className="h-4 w-4 animate-spin text-muted-foreground" />
                                 </div>
                               )}
 
@@ -463,8 +577,28 @@ export const EnvelopeEditorUploadPage = () => {
                                 </div>
                               )}
 
-                              {!localFile.isUploading &&
-                                localFile.envelopeItemId &&
+                              {localFile.envelopeItemId &&
+                                envelopeItemPermissions.canFileBeChanged &&
+                                uploadConfig?.allowReplace && (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    data-testid={`envelope-item-replace-button-${localFile.id}`}
+                                    disabled={localFile.isReplacing || localFile.isUploading}
+                                    onClick={() => {
+                                      replacingItemIdRef.current = localFile.envelopeItemId;
+                                      openReplaceFilePicker();
+                                    }}
+                                  >
+                                    {localFile.isReplacing ? (
+                                      <Loader2Icon className="h-4 w-4 animate-spin text-muted-foreground" />
+                                    ) : (
+                                      <PencilIcon className="h-4 w-4" />
+                                    )}
+                                  </Button>
+                                )}
+
+                              {localFile.envelopeItemId &&
                                 uploadConfig?.allowDelete &&
                                 (isEmbedded ? (
                                   <Button
@@ -472,12 +606,13 @@ export const EnvelopeEditorUploadPage = () => {
                                     size="sm"
                                     data-testid={`envelope-item-remove-button-${localFile.id}`}
                                     onClick={() => onFileDelete(localFile.envelopeItemId!)}
+                                    disabled={localFile.isReplacing || localFile.isUploading}
                                   >
-                                    <X className="h-4 w-4" />
+                                    <XIcon className="h-4 w-4" />
                                   </Button>
                                 ) : (
                                   <EnvelopeItemDeleteDialog
-                                    canItemBeDeleted={canItemsBeModified}
+                                    canItemBeDeleted={envelopeItemPermissions.canFileBeChanged}
                                     envelopeId={envelope.id}
                                     envelopeItemId={localFile.envelopeItemId}
                                     envelopeItemTitle={localFile.title}
@@ -487,8 +622,9 @@ export const EnvelopeEditorUploadPage = () => {
                                         variant="ghost"
                                         size="sm"
                                         data-testid={`envelope-item-remove-button-${localFile.id}`}
+                                        disabled={localFile.isReplacing || localFile.isUploading}
                                       >
-                                        <X className="h-4 w-4" />
+                                        <XIcon className="h-4 w-4" />
                                       </Button>
                                     }
                                   />

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -10,6 +10,7 @@ import {
   CopyPlusIcon,
   DownloadCloudIcon,
   EyeIcon,
+  FileOutputIcon,
   LinkIcon,
   type LucideIcon,
   MousePointerIcon,
@@ -35,6 +36,7 @@ import { EnvelopeDistributeDialog } from '~/components/dialogs/envelope-distribu
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
 import { EnvelopeRedistributeDialog } from '~/components/dialogs/envelope-redistribute-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
 import { EnvelopeEditorSettingsDialog } from '~/components/general/envelope-editor/envelope-editor-settings-dialog';
 
@@ -101,6 +103,7 @@ export const EnvelopeEditor = () => {
       allowDistributing,
       allowDirectLink,
       allowDuplication,
+      allowSaveAsTemplate,
       allowDownloadPDF,
       allowDeletion,
     },
@@ -466,6 +469,28 @@ export const EnvelopeEditor = () => {
               />
             )}
 
+            {allowSaveAsTemplate && isDocument && (
+              <EnvelopeSaveAsTemplateDialog
+                envelopeId={envelope.id}
+                trigger={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full justify-start"
+                    title={t(msg`Save as Template`)}
+                  >
+                    <FileOutputIcon className="h-4 w-4" />
+
+                    {!minimizeLeftSidebar && (
+                      <span className="ml-2">
+                        <Trans>Save as Template</Trans>
+                      </span>
+                    )}
+                  </Button>
+                }
+              />
+            )}
+
             {allowDownloadPDF && (
               <EnvelopeDownloadDialog
                 envelopeId={envelope.id}

apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx

@@ -9,6 +9,7 @@ type EnvelopeItemSelectorProps = {
   secondaryText: React.ReactNode;
   isSelected: boolean;
   buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  actionSlot?: React.ReactNode;
 };
 
 export const EnvelopeItemSelector = ({
@@ -17,11 +18,12 @@ export const EnvelopeItemSelector = ({
   secondaryText,
   isSelected,
   buttonProps,
+  actionSlot,
 }: EnvelopeItemSelectorProps) => {
   return (
     <button
       title={typeof primaryText === 'string' ? primaryText : undefined}
-      className={`flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
+      className={`group flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
         isSelected
           ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
           : 'border-border bg-muted/50 hover:bg-muted/70'
@@ -39,11 +41,13 @@ export const EnvelopeItemSelector = ({
         <div className="truncate text-sm font-medium">{primaryText}</div>
         <div className="text-xs text-gray-500">{secondaryText}</div>
       </div>
-      <div
-        className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
-          'bg-green-500': isSelected,
-        })}
-      ></div>
+      {actionSlot ?? (
+        <div
+          className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
+            'bg-green-500': isSelected,
+          })}
+        />
+      )}
     </button>
   );
 };
@@ -52,12 +56,14 @@ type EnvelopeRendererFileSelectorProps = {
   fields: { envelopeItemId: string }[];
   className?: string;
   secondaryOverride?: React.ReactNode;
+  renderItemAction?: (item: { id: string; title: string }) => React.ReactNode;
 };
 
 export const EnvelopeRendererFileSelector = ({
   fields,
   className,
   secondaryOverride,
+  renderItemAction,
 }: EnvelopeRendererFileSelectorProps) => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -86,6 +92,7 @@ export const EnvelopeRendererFileSelector = ({
           buttonProps={{
             onClick: () => setCurrentEnvelopeItem(doc.id),
           }}
+          actionSlot={renderItemAction?.(doc)}
         />
       ))}
     </div>

apps/remix/app/components/general/envelope-editor/envelope-recipient-selector.tsx

@@ -4,12 +4,13 @@ import type { I18n } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import type { Field, Recipient } from '@prisma/client';
+import type { Field } from '@prisma/client';
 import { RecipientRole, SendStatus } from '@prisma/client';
 import { Check, ChevronsUpDown, Info } from 'lucide-react';
 import { sortBy } from 'remeda';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TEnvelopeRecipientLite } from '@documenso/lib/types/recipient';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
@@ -26,9 +27,9 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 
 export interface EnvelopeRecipientSelectorProps {
   className?: string;
-  selectedRecipient: Recipient | null;
-  onSelectedRecipientChange: (recipient: Recipient) => void;
-  recipients: Recipient[];
+  selectedRecipient: TEnvelopeRecipientLite | null;
+  onSelectedRecipientChange: (recipient: TEnvelopeRecipientLite) => void;
+  recipients: TEnvelopeRecipientLite[];
   fields: Field[];
   align?: 'center' | 'end' | 'start';
 }
@@ -46,7 +47,7 @@ export const EnvelopeRecipientSelector = ({
   const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
   const getRecipientLabel = useCallback(
-    (recipient: Recipient) => extractRecipientLabel(recipient, recipients, i18n),
+    (recipient: TEnvelopeRecipientLite) => extractRecipientLabel(recipient, recipients, i18n),
     [recipients],
   );
 
@@ -91,9 +92,9 @@ export const EnvelopeRecipientSelector = ({
 
 interface EnvelopeRecipientSelectorCommandProps {
   className?: string;
-  selectedRecipient: Recipient | null;
-  onSelectedRecipientChange: (recipient: Recipient) => void;
-  recipients: Recipient[];
+  selectedRecipient: TEnvelopeRecipientLite | null;
+  onSelectedRecipientChange: (recipient: TEnvelopeRecipientLite) => void;
+  recipients: TEnvelopeRecipientLite[];
   fields: Field[];
   placeholder?: string;
 }
@@ -109,7 +110,7 @@ export const EnvelopeRecipientSelectorCommand = ({
   const { t, i18n } = useLingui();
 
   const recipientsByRole = useCallback(() => {
-    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+    const recipientsByRole: Record<RecipientRole, TEnvelopeRecipientLite[]> = {
       CC: [],
       VIEWER: [],
       SIGNER: [],
@@ -141,7 +142,7 @@ export const EnvelopeRecipientSelectorCommand = ({
               [(r) => r.signingOrder || Number.MAX_SAFE_INTEGER, 'asc'],
               [(r) => r.id, 'asc'],
             ),
-          ] as [RecipientRole, Recipient[]],
+          ] as [RecipientRole, TEnvelopeRecipientLite[]],
       );
   }, [recipientsByRole]);
 
@@ -156,7 +157,7 @@ export const EnvelopeRecipientSelectorCommand = ({
   );
 
   const getRecipientLabel = useCallback(
-    (recipient: Recipient) => extractRecipientLabel(recipient, recipients, i18n),
+    (recipient: TEnvelopeRecipientLite) => extractRecipientLabel(recipient, recipients, i18n),
     [recipients],
   );
 
@@ -247,7 +248,11 @@ export const EnvelopeRecipientSelectorCommand = ({
   );
 };
 
-const extractRecipientLabel = (recipient: Recipient, recipients: Recipient[], i18n: I18n) => {
+const extractRecipientLabel = (
+  recipient: TEnvelopeRecipientLite,
+  recipients: TEnvelopeRecipientLite[],
+  i18n: I18n,
+) => {
   if (recipient.name && recipient.email) {
     return `${recipient.name} (${recipient.email})`;
   }

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

@@ -5,12 +5,7 @@ import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { Loader } from 'lucide-react';
-import {
-  ErrorCode as DropzoneErrorCode,
-  ErrorCode,
-  type FileRejection,
-  useDropzone,
-} from 'react-dropzone';
+import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 import { Link, useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -25,6 +20,7 @@ import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -41,7 +37,7 @@ export const EnvelopeDropZoneWrapper = ({
   type,
   className,
 }: EnvelopeDropZoneWrapperProps) => {
-  const { t } = useLingui();
+  const { t, i18n } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
   const { folderId } = useParams();
@@ -167,42 +163,9 @@ export const EnvelopeDropZoneWrapper = ({
       return;
     }
 
-    // Since users can only upload only one file (no multi-upload), we only handle the first file rejection
-    const { file, errors } = fileRejections[0];
-
-    if (!errors.length) {
-      return;
-    }
-
-    const errorNodes = errors.map((error, index) => (
-      <span key={index} className="block">
-        {match(error.code)
-          .with(ErrorCode.FileTooLarge, () => (
-            <Trans>File is larger than {APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB</Trans>
-          ))
-          .with(ErrorCode.FileInvalidType, () => <Trans>Only PDF files are allowed</Trans>)
-          .with(ErrorCode.FileTooSmall, () => <Trans>File is too small</Trans>)
-          .with(ErrorCode.TooManyFiles, () => (
-            <Trans>Only one file can be uploaded at a time</Trans>
-          ))
-          .otherwise(() => (
-            <Trans>Unknown error</Trans>
-          ))}
-      </span>
-    ));
-
-    const description = (
-      <>
-        <span className="font-medium">
-          <Trans>{file.name} couldn't be uploaded:</Trans>
-        </span>
-        {errorNodes}
-      </>
-    );
-
     toast({
       title: t`Upload failed`,
-      description,
+      description: i18n._(buildDropzoneRejectionDescription(fileRejections)),
       duration: 5000,
       variant: 'destructive',
     });

apps/remix/app/components/general/envelope/envelope-upload-button.tsx

@@ -11,12 +11,12 @@ import { match } from 'ts-pattern';
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
+import { buildDropzoneRejectionDescription } from '@documenso/ui/lib/handle-dropzone-rejection';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentUploadButton } from '@documenso/ui/primitives/document-upload-button';
 import {
@@ -39,7 +39,7 @@ export type EnvelopeUploadButtonProps = {
  * Upload an envelope
  */
 export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUploadButtonProps) => {
-  const { t } = useLingui();
+  const { t, i18n } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
 
@@ -168,7 +168,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
 
     toast({
       title: t`Upload failed`,
-      description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
+      description: i18n._(buildDropzoneRejectionDescription(fileRejections)),
       duration: 5000,
       variant: 'destructive',
     });

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

@@ -53,6 +53,10 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
     const rootPath =
       type === FolderType.DOCUMENT ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
 
+    if (parentId) {
+      return `${rootPath}/folders?parentId=${parentId}`;
+    }
+
     return `${rootPath}/folders`;
   };
 
@@ -189,13 +193,13 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
               </div>
             )}
 
-            {foldersData.folders.length > 12 && (
+            {unpinnedFolders.length > 12 && (
               <div className="mt-2 flex items-center justify-center">
                 <Link
                   className="text-sm font-medium text-muted-foreground hover:text-foreground"
                   to={formatViewAllFoldersPath()}
                 >
-                  View all folders
+                  <Trans>View all folders</Trans>
                 </Link>
               </div>
             )}

apps/remix/app/components/general/stack-avatars-with-tooltip.tsx

@@ -2,10 +2,11 @@ import { useMemo } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentStatus, type Recipient } from '@prisma/client';
+import type { DocumentStatus } from '@prisma/client';
 
 import { RecipientStatusType, getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { PopoverHover } from '@documenso/ui/primitives/popover';
 
@@ -15,7 +16,7 @@ import { StackAvatars } from './stack-avatars';
 
 export type StackAvatarsWithTooltipProps = {
   documentStatus: DocumentStatus;
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
   position?: 'top' | 'bottom';
   children?: React.ReactNode;
 };
@@ -74,7 +75,7 @@ export const StackAvatarsWithTooltip = ({
           <h1 className="text-base font-medium">
             <Trans>Completed</Trans>
           </h1>
-          {completedRecipients.map((recipient: Recipient) => (
+          {completedRecipients.map((recipient) => (
             <div key={recipient.id} className="my-1 flex items-center gap-2">
               <StackAvatar
                 first={true}
@@ -98,7 +99,7 @@ export const StackAvatarsWithTooltip = ({
           <h1 className="text-base font-medium">
             <Trans>Rejected</Trans>
           </h1>
-          {rejectedRecipients.map((recipient: Recipient) => (
+          {rejectedRecipients.map((recipient) => (
             <div key={recipient.id} className="my-1 flex items-center gap-2">
               <StackAvatar
                 first={true}
@@ -122,7 +123,7 @@ export const StackAvatarsWithTooltip = ({
           <h1 className="text-base font-medium">
             <Trans>Waiting</Trans>
           </h1>
-          {waitingRecipients.map((recipient: Recipient) => (
+          {waitingRecipients.map((recipient) => (
             <AvatarWithRecipient
               key={recipient.id}
               recipient={recipient}
@@ -137,7 +138,7 @@ export const StackAvatarsWithTooltip = ({
           <h1 className="text-base font-medium">
             <Trans>Opened</Trans>
           </h1>
-          {openedRecipients.map((recipient: Recipient) => (
+          {openedRecipients.map((recipient) => (
             <AvatarWithRecipient
               key={recipient.id}
               recipient={recipient}
@@ -152,7 +153,7 @@ export const StackAvatarsWithTooltip = ({
           <h1 className="text-base font-medium">
             <Trans>Uncompleted</Trans>
           </h1>
-          {uncompletedRecipients.map((recipient: Recipient) => (
+          {uncompletedRecipients.map((recipient) => (
             <AvatarWithRecipient
               key={recipient.id}
               recipient={recipient}

apps/remix/app/components/general/stack-avatars.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
 
-import type { Recipient } from '@prisma/client';
-
 import {
   getExtraRecipientsType,
   getRecipientType,
 } from '@documenso/lib/client-only/recipient-type';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 
 import { StackAvatar } from './stack-avatar';
 
-export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
-  const renderStackAvatars = (recipients: Recipient[]) => {
+export function StackAvatars({ recipients }: { recipients: TRecipientLite[] }) {
+  const renderStackAvatars = (recipients: TRecipientLite[]) => {
     const zIndex = 50;
     const itemsToRender = recipients.slice(0, 5);
     const remainingItems = recipients.length - itemsToRender.length;
 
-    return itemsToRender.map((recipient: Recipient, index: number) => {
+    return itemsToRender.map((recipient, index: number) => {
       const first = index === 0;
 
       if (index === 4 && remainingItems > 0) {

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

@@ -1,17 +1,17 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Recipient } from '@prisma/client';
 import { PenIcon, PlusIcon } from 'lucide-react';
 import { Link } from 'react-router';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { isTemplateRecipientEmailPlaceholder } from '@documenso/lib/constants/template';
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 
 export type TemplatePageViewRecipientsProps = {
-  recipients: Recipient[];
+  recipients: TRecipientLite[];
   envelopeId: string;
   templateRootPath: string;
   readOnly?: boolean;

apps/remix/app/components/general/user-profile-skeleton.tsx

@@ -21,17 +21,17 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
   return (
     <div
       className={cn(
-        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        'flex flex-col items-center rounded-xl bg-neutral-100 p-4 dark:bg-background',
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm lowercase">
+      <div className="inline-block max-w-full truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-sm lowercase text-muted-foreground">
         {baseUrl.host}/u/{user.url}
       </div>
 
       <div className="mt-4">
-        <div className="bg-primary/10 rounded-full p-1.5">
-          <div className="bg-background flex h-20 w-20 items-center justify-center rounded-full border-2">
+        <div className="rounded-full bg-primary/10 p-1.5">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full border-2 bg-background">
             <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
           </div>
         </div>
@@ -41,16 +41,16 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         <div className="flex items-center justify-center gap-x-2">
           <h2 className="max-w-[12rem] truncate text-2xl font-semibold">{user.name}</h2>
 
-          <VerifiedIcon className="text-primary h-8 w-8" />
+          <VerifiedIcon className="h-8 w-8 text-primary" />
         </div>
 
-        <div className="dark:bg-foreground/30 mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300" />
-        <div className="dark:bg-foreground/20 mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200" />
+        <div className="mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300 dark:bg-foreground/30" />
+        <div className="mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200 dark:bg-foreground/20" />
       </div>
 
       <div className="mt-8 w-full">
-        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
-          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+        <div className="divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
+          <div className="bg-neutral-50 p-4 font-medium text-muted-foreground dark:bg-foreground/20">
             <Trans>Documents</Trans>
           </div>
 
@@ -59,14 +59,14 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
             .map((_, index) => (
               <div
                 key={index}
-                className="bg-background flex items-center justify-between gap-x-6 p-4"
+                className="flex items-center justify-between gap-x-6 bg-background p-4"
               >
                 <div className="flex items-center gap-x-2">
-                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+                  <File className="h-8 w-8 text-muted-foreground/80" strokeWidth={1.5} />
 
                   <div className="space-y-2">
-                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
-                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                    <div className="h-1.5 w-24 rounded-full bg-neutral-300 md:w-36 dark:bg-foreground/30" />
+                    <div className="h-1.5 w-16 rounded-full bg-neutral-200 md:w-24 dark:bg-foreground/20" />
                   </div>
                 </div>
 

apps/remix/app/components/tables/admin-document-recipient-item-table.tsx

@@ -14,6 +14,7 @@ import { useForm } from 'react-hook-form';
 import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
+import { zEmail } from '@documenso/lib/utils/zod';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
@@ -46,7 +47,7 @@ const RECIPIENT_ROLE_LABELS: Record<RecipientRole, string> = {
 
 const ZAdminUpdateRecipientFormSchema = z.object({
   name: z.string().min(1),
-  email: z.string().email(),
+  email: zEmail(),
   role: z.nativeEnum(RecipientRole),
 });
 

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

@@ -7,6 +7,7 @@ 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 { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { findRecipientByEmail } from '@documenso/lib/utils/recipients';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -23,7 +24,11 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
 
   const team = useCurrentTeam();
 
-  const recipient = row.recipients.find((recipient) => recipient.email === user.email);
+  const recipient = findRecipientByEmail({
+    recipients: row.recipients,
+    userEmail: user.email,
+    teamEmail: team.teamEmail?.email,
+  });
 
   const isOwner = row.user.id === user.id;
   const isRecipient = !!recipient;

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

@@ -3,13 +3,14 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, RecipientRole } from '@prisma/client';
+import { DocumentStatus, EnvelopeType, RecipientRole } from '@prisma/client';
 import {
   CheckCircle,
   Copy,
   Download,
   Edit,
   EyeIcon,
+  FileOutputIcon,
   FolderInput,
   Loader,
   MoreHorizontal,
@@ -22,7 +23,10 @@ import { Link } from 'react-router';
 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 { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
+import { findRecipientByEmail } from '@documenso/lib/utils/recipients';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
   DropdownMenu,
@@ -32,13 +36,15 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
-import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
+import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
+import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
 import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
+import { EnvelopeRenameDialog } from '../dialogs/envelope-rename-dialog';
 
 export type DocumentsTableActionDropdownProps = {
   row: TDocumentRow;
@@ -53,11 +59,16 @@ export const DocumentsTableActionDropdown = ({
   const team = useCurrentTeam();
 
   const { _ } = useLingui();
+  const trpcUtils = trpcReact.useUtils();
 
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+  const [isRenameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [isSaveAsTemplateDialogOpen, setSaveAsTemplateDialogOpen] = useState(false);
 
-  const recipient = row.recipients.find((recipient) => recipient.email === user.email);
+  const recipient = findRecipientByEmail({
+    recipients: row.recipients,
+    userEmail: user.email,
+    teamEmail: team.teamEmail?.email,
+  });
 
   const isOwner = row.user.id === user.id;
   // const isRecipient = !!recipient;
@@ -68,6 +79,16 @@ export const DocumentsTableActionDropdown = ({
   const isCurrentTeamDocument = team && row.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
+  const { canTitleBeChanged } = getEnvelopeItemPermissions(
+    {
+      completedAt: row.completedAt,
+      deletedAt: row.deletedAt,
+      type: EnvelopeType.DOCUMENT,
+      status: row.status,
+    },
+    [],
+  );
+
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
@@ -76,7 +97,7 @@ export const DocumentsTableActionDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger data-testid="document-table-action-btn">
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
@@ -121,6 +142,13 @@ export const DocumentsTableActionDropdown = ({
           </Link>
         </DropdownMenuItem>
 
+        {canManageDocument && canTitleBeChanged && (
+          <DropdownMenuItem onClick={() => setRenameDialogOpen(true)}>
+            <Pencil className="mr-2 h-4 w-4" />
+            <Trans>Rename</Trans>
+          </DropdownMenuItem>
+        )}
+
         <EnvelopeDownloadDialog
           envelopeId={row.envelopeId}
           envelopeStatus={row.status}
@@ -135,9 +163,22 @@ export const DocumentsTableActionDropdown = ({
           }
         />
 
-        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
-          <Copy className="mr-2 h-4 w-4" />
-          <Trans>Duplicate</Trans>
+        <EnvelopeDuplicateDialog
+          envelopeId={row.envelopeId}
+          envelopeType={EnvelopeType.DOCUMENT}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <Copy className="mr-2 h-4 w-4" />
+                <Trans>Duplicate</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
+
+        <DropdownMenuItem onClick={() => setSaveAsTemplateDialogOpen(true)}>
+          <FileOutputIcon className="mr-2 h-4 w-4" />
+          <Trans>Save as Template</Trans>
         </DropdownMenuItem>
 
         {onMoveDocument && canManageDocument && (
@@ -153,10 +194,21 @@ export const DocumentsTableActionDropdown = ({
           Void
         </DropdownMenuItem> */}
 
-        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
-          <Trash2 className="mr-2 h-4 w-4" />
-          {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
-        </DropdownMenuItem>
+        <EnvelopeDeleteDialog
+          id={row.envelopeId}
+          type={EnvelopeType.DOCUMENT}
+          status={row.status}
+          title={row.title}
+          canManageDocument={canManageDocument}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <Trash2 className="mr-2 h-4 w-4" />
+                {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
+              </div>
+            </DropdownMenuItem>
+          }
+        />
 
         <DropdownMenuLabel>
           <Trans>Share</Trans>
@@ -192,20 +244,20 @@ export const DocumentsTableActionDropdown = ({
         />
       </DropdownMenuContent>
 
-      <DocumentDeleteDialog
-        id={row.id}
-        status={row.status}
-        documentTitle={row.title}
-        open={isDeleteDialogOpen}
-        onOpenChange={setDeleteDialogOpen}
-        canManageDocument={canManageDocument}
+      <EnvelopeSaveAsTemplateDialog
+        envelopeId={row.envelopeId}
+        open={isSaveAsTemplateDialogOpen}
+        onOpenChange={setSaveAsTemplateDialogOpen}
       />
 
-      <DocumentDuplicateDialog
+      <EnvelopeRenameDialog
         id={row.envelopeId}
-        token={recipient?.token}
-        open={isDuplicateDialogOpen}
-        onOpenChange={setDuplicateDialogOpen}
+        initialTitle={row.title}
+        open={isRenameDialogOpen}
+        onOpenChange={setRenameDialogOpen}
+        onSuccess={async () => {
+          await trpcUtils.document.findDocumentsInternal.invalidate();
+        }}
       />
     </DropdownMenu>
   );

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

@@ -3,8 +3,11 @@ 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 { findRecipientByEmail } from '@documenso/lib/utils/recipients';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
+import { useCurrentTeam } from '~/providers/team';
+
 export type DataTableTitleProps = {
   row: TDocumentRow;
   teamUrl: string;
@@ -12,8 +15,13 @@ export type DataTableTitleProps = {
 
 export const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
   const { user } = useSession();
+  const team = useCurrentTeam();
 
-  const recipient = row.recipients.find((recipient) => recipient.email === user.email);
+  const recipient = findRecipientByEmail({
+    recipients: row.recipients,
+    userEmail: user.email,
+    teamEmail: team.teamEmail?.email,
+  });
 
   const isOwner = row.user.id === user.id;
   const isRecipient = !!recipient;

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

@@ -10,6 +10,7 @@ import { match } from 'ts-pattern';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { findRecipientByEmail } from '@documenso/lib/utils/recipients';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { TFindDocumentsResponse } from '@documenso/trpc/server/document-router/find-documents.types';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
@@ -91,7 +92,13 @@ export const DocumentsTable = ({
       },
       {
         header: _(msg`Title`),
-        cell: ({ row }) => <DataTableTitle row={row.original} teamUrl={team?.url} />,
+        cell: ({ row }) => (
+          <DataTableTitle
+            row={row.original}
+            teamUrl={team?.url}
+            teamEmail={team?.teamEmail?.email}
+          />
+        ),
       },
       {
         id: 'sender',
@@ -213,12 +220,17 @@ export const DocumentsTable = ({
 type DataTableTitleProps = {
   row: DocumentsTableRow;
   teamUrl: string;
+  teamEmail?: string;
 };
 
-const DataTableTitle = ({ row, teamUrl }: DataTableTitleProps) => {
+const DataTableTitle = ({ row, teamUrl, teamEmail }: DataTableTitleProps) => {
   const { user } = useSession();
 
-  const recipient = row.recipients.find((recipient) => recipient.email === user.email);
+  const recipient = findRecipientByEmail({
+    recipients: row.recipients,
+    userEmail: user.email,
+    teamEmail,
+  });
 
   const isOwner = row.user.id === user.id;
   const isRecipient = !!recipient;

apps/remix/app/components/tables/organisation-insights-table.tsx

@@ -62,7 +62,14 @@ export const OrganisationInsightsTable = ({
     {
       header: _(msg`Team Name`),
       accessorKey: 'name',
-      cell: ({ row }) => <span className="block max-w-full truncate">{row.getValue('name')}</span>,
+      cell: ({ row }) => (
+        <Link
+          className="block max-w-full truncate hover:underline"
+          to={`/admin/teams/${row.original.id}`}
+        >
+          {row.getValue('name')}
+        </Link>
+      ),
       size: 240,
     },
     {
@@ -276,12 +283,12 @@ const SummaryCard = ({
   value: number;
   subtitle?: string;
 }) => (
-  <div className="bg-card flex items-start gap-x-2 rounded-lg border px-4 py-3">
-    <Icon className="text-muted-foreground h-4 w-4 items-start" />
+  <div className="flex items-start gap-x-2 rounded-lg border bg-card px-4 py-3">
+    <Icon className="h-4 w-4 items-start text-muted-foreground" />
     <div className="-mt-0.5 space-y-2">
-      <p className="text-muted-foreground text-sm font-medium">{title}</p>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
       <p className="text-2xl font-bold">{value}</p>
-      {subtitle && <p className="text-muted-foreground text-xs">{subtitle}</p>}
+      {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
     </div>
   </div>
 );

apps/remix/app/components/tables/organisation-member-invites-table.tsx

@@ -11,6 +11,7 @@ import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-upda
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { isOrganisationRoleWithinUserHierarchy } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
@@ -108,7 +109,7 @@ export const OrganisationMemberInvitesTable = () => {
               avatarClass="h-12 w-12"
               avatarFallback={row.original.email.slice(0, 1).toUpperCase()}
               primaryText={
-                <span className="text-foreground/80 font-semibold">{row.original.email}</span>
+                <span className="font-semibold text-foreground/80">{row.original.email}</span>
               }
             />
           );
@@ -129,7 +130,7 @@ export const OrganisationMemberInvitesTable = () => {
         cell: ({ row }) => (
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
             </DropdownMenuTrigger>
 
             <DropdownMenuContent className="w-52" align="start" forceMount>
@@ -149,17 +150,22 @@ export const OrganisationMemberInvitesTable = () => {
                 <Trans>Resend</Trans>
               </DropdownMenuItem>
 
-              <DropdownMenuItem
-                onClick={async () =>
-                  deleteOrganisationMemberInvitations({
-                    organisationId: organisation.id,
-                    invitationIds: [row.original.id],
-                  })
-                }
-              >
-                <Trash2 className="mr-2 h-4 w-4" />
-                <Trans>Remove</Trans>
-              </DropdownMenuItem>
+              {isOrganisationRoleWithinUserHierarchy(
+                organisation.currentOrganisationRole,
+                row.original.organisationRole,
+              ) && (
+                <DropdownMenuItem
+                  onClick={async () =>
+                    deleteOrganisationMemberInvitations({
+                      organisationId: organisation.id,
+                      invitationIds: [row.original.id],
+                    })
+                  }
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  <Trans>Remove</Trans>
+                </DropdownMenuItem>
+              )}
             </DropdownMenuContent>
           </DropdownMenu>
         ),

apps/remix/app/components/tables/organisation-teams-table.tsx

@@ -64,7 +64,7 @@ export const OrganisationTeamsTable = () => {
               avatarClass="h-12 w-12"
               avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
               primaryText={
-                <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+                <span className="font-semibold text-foreground/80">{row.original.name}</span>
               }
               secondaryText={`${NEXT_PUBLIC_WEBAPP_URL()}/t/${row.original.url}`}
             />

apps/remix/app/components/tables/settings-public-profile-templates-table.tsx

@@ -74,7 +74,7 @@ export const SettingsPublicProfileTemplatesTable = () => {
 
   return (
     <div>
-      <div className="dark:divide-foreground/30 dark:border-foreground/30 mt-6 divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200">
+      <div className="mt-6 divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
         {/* Loading and error handling states. */}
         {publicDirectTemplates.length === 0 && (
           <>
@@ -84,10 +84,10 @@ export const SettingsPublicProfileTemplatesTable = () => {
                 .map((_, index) => (
                   <div
                     key={index}
-                    className="bg-background flex items-center justify-between gap-x-6 p-4"
+                    className="flex items-center justify-between gap-x-6 bg-background p-4"
                   >
                     <div className="flex gap-x-2">
-                      <FileIcon className="text-muted-foreground/40 h-8 w-8" strokeWidth={1.5} />
+                      <FileIcon className="h-8 w-8 text-muted-foreground/40" strokeWidth={1.5} />
 
                       <div className="space-y-2">
                         <Skeleton className="h-4 w-24" />
@@ -95,12 +95,12 @@ export const SettingsPublicProfileTemplatesTable = () => {
                       </div>
                     </div>
 
-                    <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+                    <MoreHorizontalIcon className="h-5 w-5 text-muted-foreground" />
                   </div>
                 ))}
 
             {isLoadingError && (
-              <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
+              <div className="flex h-32 flex-col items-center justify-center text-sm text-muted-foreground">
                 <Trans>Unable to load your public profile templates at this time</Trans>
                 <button
                   onClick={(e) => {
@@ -114,12 +114,12 @@ export const SettingsPublicProfileTemplatesTable = () => {
             )}
 
             {!isLoading && (
-              <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
+              <div className="flex h-32 flex-col items-center justify-center text-sm text-muted-foreground">
                 <Trans>No public profile templates found</Trans>
                 <ManagePublicTemplateDialog
                   directTemplates={privateDirectTemplates}
                   trigger={
-                    <button className="hover:text-muted-foreground/80 mt-1 text-xs">
+                    <button className="mt-1 text-xs hover:text-muted-foreground/80">
                       <Trans>Click here to get started</Trans>
                     </button>
                   }
@@ -133,23 +133,23 @@ export const SettingsPublicProfileTemplatesTable = () => {
         {publicDirectTemplates.map((template) => (
           <div
             key={template.id}
-            className="bg-background flex items-center justify-between gap-x-6 p-4"
+            className="flex items-center justify-between gap-x-6 bg-background p-4"
           >
             <div className="flex gap-x-2">
               <FileIcon
-                className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
+                className="h-8 w-8 flex-shrink-0 text-muted-foreground/40"
                 strokeWidth={1.5}
               />
 
               <div>
-                <p className="text-sm break-all">{template.publicTitle}</p>
-                <p className="text-xs text-neutral-400 break-all">{template.publicDescription}</p>
+                <p className="break-all text-sm">{template.publicTitle}</p>
+                <p className="break-all text-xs text-neutral-400">{template.publicDescription}</p>
               </div>
             </div>
 
             <DropdownMenu>
               <DropdownMenuTrigger>
-                <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+                <MoreHorizontalIcon className="h-5 w-5 text-muted-foreground" />
               </DropdownMenuTrigger>
 
               <DropdownMenuContent className="w-52" align="center" side="left">

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

@@ -1,10 +1,26 @@
 import { useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import type { Recipient, TemplateDirectLink } from '@prisma/client';
-import { Copy, Edit, FolderIcon, MoreHorizontal, Share2Icon, Trash2, Upload } from 'lucide-react';
+import {
+  DocumentStatus,
+  EnvelopeType,
+  type Recipient,
+  type TemplateDirectLink,
+} from '@prisma/client';
+import {
+  Copy,
+  Edit,
+  FolderIcon,
+  MoreHorizontal,
+  Pencil,
+  Share2Icon,
+  Trash2,
+  Upload,
+} from 'lucide-react';
 import { Link } from 'react-router';
 
+import type { TRecipientLite } from '@documenso/lib/types/recipient';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,10 +29,11 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
+import { EnvelopeDeleteDialog } from '../dialogs/envelope-delete-dialog';
+import { EnvelopeDuplicateDialog } from '../dialogs/envelope-duplicate-dialog';
+import { EnvelopeRenameDialog } from '../dialogs/envelope-rename-dialog';
 import { TemplateBulkSendDialog } from '../dialogs/template-bulk-send-dialog';
-import { TemplateDeleteDialog } from '../dialogs/template-delete-dialog';
 import { TemplateDirectLinkDialog } from '../dialogs/template-direct-link-dialog';
-import { TemplateDuplicateDialog } from '../dialogs/template-duplicate-dialog';
 import { TemplateMoveToFolderDialog } from '../dialogs/template-move-to-folder-dialog';
 
 export type TemplatesTableActionDropdownProps = {
@@ -28,7 +45,7 @@ export type TemplatesTableActionDropdownProps = {
     folderId?: string | null;
     envelopeId: string;
     directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
-    recipients: Recipient[];
+    recipients: TRecipientLite[];
   };
   templateRootPath: string;
   teamId: number;
@@ -41,8 +58,9 @@ export const TemplatesTableActionDropdown = ({
   teamId,
   onDelete,
 }: TemplatesTableActionDropdownProps) => {
-  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+  const trpcUtils = trpcReact.useUtils();
+
+  const [isRenameDialogOpen, setRenameDialogOpen] = useState(false);
   const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
 
   const isTeamTemplate = row.teamId === teamId;
@@ -66,10 +84,27 @@ export const TemplatesTableActionDropdown = ({
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled={!canMutate} onClick={() => setDuplicateDialogOpen(true)}>
-          <Copy className="mr-2 h-4 w-4" />
-          <Trans>Duplicate</Trans>
-        </DropdownMenuItem>
+        {canMutate && (
+          <DropdownMenuItem onClick={() => setRenameDialogOpen(true)}>
+            <Pencil className="mr-2 h-4 w-4" />
+            <Trans>Rename</Trans>
+          </DropdownMenuItem>
+        )}
+
+        {canMutate && (
+          <EnvelopeDuplicateDialog
+            envelopeId={row.envelopeId}
+            envelopeType={EnvelopeType.TEMPLATE}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <Copy className="mr-2 h-4 w-4" />
+                  <Trans>Duplicate</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        )}
 
         {canMutate && (
           <TemplateDirectLinkDialog
@@ -106,25 +141,26 @@ export const TemplatesTableActionDropdown = ({
           />
         )}
 
-        <DropdownMenuItem disabled={!canMutate} onClick={() => setDeleteDialogOpen(true)}>
-          <Trash2 className="mr-2 h-4 w-4" />
-          <Trans>Delete</Trans>
-        </DropdownMenuItem>
+        {canMutate && (
+          <EnvelopeDeleteDialog
+            id={row.envelopeId}
+            type={EnvelopeType.TEMPLATE}
+            status={DocumentStatus.DRAFT}
+            title={row.title}
+            canManageDocument={canMutate}
+            onDelete={onDelete}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  <Trans>Delete</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        )}
       </DropdownMenuContent>
 
-      <TemplateDuplicateDialog
-        id={row.id}
-        open={isDuplicateDialogOpen}
-        onOpenChange={setDuplicateDialogOpen}
-      />
-
-      <TemplateDeleteDialog
-        id={row.id}
-        open={isDeleteDialogOpen}
-        onOpenChange={setDeleteDialogOpen}
-        onDelete={onDelete}
-      />
-
       <TemplateMoveToFolderDialog
         templateId={row.id}
         templateTitle={row.title}
@@ -132,6 +168,17 @@ export const TemplatesTableActionDropdown = ({
         onOpenChange={setMoveToFolderDialogOpen}
         currentFolderId={row.folderId}
       />
+
+      <EnvelopeRenameDialog
+        id={row.envelopeId}
+        initialTitle={row.title}
+        open={isRenameDialogOpen}
+        onOpenChange={setRenameDialogOpen}
+        envelopeType="template"
+        onSuccess={async () => {
+          await trpcUtils.template.findTemplates.invalidate();
+        }}
+      />
     </DropdownMenu>
   );
 };

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

@@ -1,3 +1,4 @@
+import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import {
   AlertTriangleIcon,
@@ -19,9 +20,14 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { AdminLicenseStatusBanner } from '~/components/general/admin-license-status-banner';
+import { appMetaTags } from '~/utils/meta';
 
 import type { Route } from './+types/_layout';
 
+export function meta() {
+  return appMetaTags(msg`Admin`);
+}
+
 export async function loader({ request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 

apps/remix/app/routes/_authenticated+/admin+/organisation-insights.$id.tsx

@@ -54,6 +54,7 @@ export default function OrganisationInsights({ loaderData }: Route.ComponentProp
           </Link>
         </Button>
       </div>
+
       <div className="mt-8">
         <OrganisationInsightsTable
           insights={insights}

apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx

@@ -2,11 +2,12 @@ import { useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { OrganisationMemberRole } from '@prisma/client';
 import { ExternalLinkIcon, InfoIcon, Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
 import type { z } from 'zod';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
@@ -15,9 +16,16 @@ import { AppError } from '@documenso/lib/errors/app-error';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
+import { getHighestOrganisationRoleInGroup } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import type { TGetAdminOrganisationResponse } from '@documenso/trpc/server/admin-router/get-admin-organisation.types';
 import { ZUpdateAdminOrganisationRequestSchema } from '@documenso/trpc/server/admin-router/update-admin-organisation.types';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,6 +45,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { AdminOrganisationMemberUpdateDialog } from '~/components/dialogs/admin-organisation-member-update-dialog';
+import { DetailsCard, DetailsValue } from '~/components/general/admin-details';
+import { AdminGlobalSettingsSection } from '~/components/general/admin-global-settings-section';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { SettingsHeader } from '~/components/general/settings-header';
 
@@ -56,7 +66,7 @@ export default function OrganisationGroupSettingsPage({
 }: Route.ComponentProps) {
   const { licenseFlags } = loaderData;
 
-  const { t, i18n } = useLingui();
+  const { i18n, t } = useLingui();
   const { toast } = useToast();
 
   const navigate = useNavigate();
@@ -92,35 +102,102 @@ export default function OrganisationGroupSettingsPage({
       {
         header: t`Team`,
         accessorKey: 'name',
+        cell: ({ row }) => (
+          <Link className="font-medium hover:underline" to={`/admin/teams/${row.original.id}`}>
+            {row.original.name}
+          </Link>
+        ),
+      },
+      {
+        header: t`Team ID`,
+        accessorKey: 'id',
+        cell: ({ row }) => (
+          <span className="font-mono text-xs text-muted-foreground">{row.original.id}</span>
+        ),
       },
       {
         header: t`Team url`,
         accessorKey: 'url',
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.url}</span>,
+      },
+      {
+        header: t`Created`,
+        accessorKey: 'createdAt',
+        cell: ({ row }) => {
+          return (
+            <span className="whitespace-nowrap font-mono text-xs text-muted-foreground">
+              {i18n.date(row.original.createdAt)}
+            </span>
+          );
+        },
       },
     ] satisfies DataTableColumnDef<TGetAdminOrganisationResponse['teams'][number]>[];
-  }, [t]);
+  }, [i18n, t]);
 
   const organisationMembersColumns = useMemo(() => {
     return [
       {
         header: t`Member`,
         cell: ({ row }) => (
-          <div className="flex items-center gap-2">
-            <Link to={`/admin/users/${row.original.user.id}`}>{row.original.user.name}</Link>
-            {row.original.user.id === organisation?.ownerUserId && (
-              <Badge>
-                <Trans>Owner</Trans>
-              </Badge>
+          <div className="space-y-1">
+            <Link
+              className="font-medium hover:underline"
+              to={`/admin/users/${row.original.user.id}`}
+            >
+              {row.original.user.name ?? row.original.user.email}
+            </Link>
+            {row.original.user.name && (
+              <div className="font-mono text-xs text-muted-foreground">
+                {row.original.user.email}
+              </div>
             )}
           </div>
         ),
       },
       {
-        header: t`Email`,
+        header: t`User ID`,
+        accessorKey: 'userId',
         cell: ({ row }) => (
-          <Link to={`/admin/users/${row.original.user.id}`}>{row.original.user.email}</Link>
+          <span className="font-mono text-xs text-muted-foreground">{row.original.userId}</span>
         ),
       },
+      {
+        header: t`Role`,
+        cell: ({ row }) => {
+          if (!organisation) {
+            return null;
+          }
+
+          const isOwner = row.original.userId === organisation.ownerUserId;
+
+          if (isOwner) {
+            return <Badge>{t`Owner`}</Badge>;
+          }
+
+          const highestRole = getHighestOrganisationRoleInGroup(
+            row.original.organisationGroupMembers.map((ogm) => ogm.group),
+          );
+
+          const roleLabel = match(highestRole)
+            .with(OrganisationMemberRole.ADMIN, () => t`Admin`)
+            .with(OrganisationMemberRole.MANAGER, () => t`Manager`)
+            .with(OrganisationMemberRole.MEMBER, () => t`Member`)
+            .exhaustive();
+
+          return <Badge variant="secondary">{roleLabel}</Badge>;
+        },
+      },
+      {
+        header: t`Joined`,
+        accessorKey: 'createdAt',
+        cell: ({ row }) => {
+          return (
+            <span className="whitespace-nowrap font-mono text-xs text-muted-foreground">
+              {i18n.date(row.original.createdAt)}
+            </span>
+          );
+        },
+      },
       {
         header: t`Actions`,
         cell: ({ row }) => {
@@ -143,7 +220,7 @@ export default function OrganisationGroupSettingsPage({
         },
       },
     ] satisfies DataTableColumnDef<TGetAdminOrganisationResponse['members'][number]>[];
-  }, [organisation, t]);
+  }, [organisation, i18n, t]);
 
   if (isLoadingOrganisation) {
     return (
@@ -191,6 +268,61 @@ export default function OrganisationGroupSettingsPage({
 
       <GenericOrganisationAdminForm organisation={organisation} />
 
+      <div className="mt-6 rounded-lg border p-4">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p className="text-sm font-medium">
+              <Trans>Organisation usage</Trans>
+            </p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              <Trans>Current usage against organisation limits.</Trans>
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
+          <DetailsCard label={<Trans>Members</Trans>}>
+            <DetailsValue>
+              {organisation.members.length} /{' '}
+              {organisation.organisationClaim.memberCount === 0
+                ? t`Unlimited`
+                : organisation.organisationClaim.memberCount}
+            </DetailsValue>
+          </DetailsCard>
+
+          <DetailsCard label={<Trans>Teams</Trans>}>
+            <DetailsValue>
+              {organisation.teams.length} /{' '}
+              {organisation.organisationClaim.teamCount === 0
+                ? t`Unlimited`
+                : organisation.organisationClaim.teamCount}
+            </DetailsValue>
+          </DetailsCard>
+        </div>
+      </div>
+
+      <div className="mt-6 rounded-lg border p-4">
+        <Accordion type="single" collapsible>
+          <AccordionItem value="global-settings" className="border-b-0">
+            <AccordionTrigger className="py-0">
+              <div className="text-left">
+                <p className="text-sm font-medium">
+                  <Trans>Global Settings</Trans>
+                </p>
+                <p className="mt-1 text-sm font-normal text-muted-foreground">
+                  <Trans>Default settings applied to this organisation.</Trans>
+                </p>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="mt-4">
+                <AdminGlobalSettingsSection settings={organisation.organisationGlobalSettings} />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
       <SettingsHeader
         title={t`Manage subscription`}
         subtitle={t`Manage the ${organisation.name} organisation subscription`}

apps/remix/app/routes/_authenticated+/admin+/teams.$id.tsx

@@ -0,0 +1,317 @@
+import { useMemo } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { CopyIcon } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { trpc } from '@documenso/trpc/react';
+import type { TGetAdminTeamResponse } from '@documenso/trpc/server/admin-router/get-admin-team.types';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DetailsCard, DetailsValue } from '~/components/general/admin-details';
+import { AdminGlobalSettingsSection } from '~/components/general/admin-global-settings-section';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { SettingsHeader } from '~/components/general/settings-header';
+
+import type { Route } from './+types/teams.$id';
+
+export default function AdminTeamPage({ params }: Route.ComponentProps) {
+  const { _, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const teamId = Number(params.id);
+
+  const { data: team, isLoading } = trpc.admin.team.get.useQuery(
+    {
+      teamId,
+    },
+    {
+      enabled: Number.isFinite(teamId) && teamId > 0,
+    },
+  );
+
+  const onCopyToClipboard = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+
+    toast({
+      title: _(msg`Copied to clipboard`),
+    });
+  };
+
+  const teamMembersColumns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Member`),
+        cell: ({ row }) => (
+          <div className="space-y-1">
+            <Link
+              className="font-medium hover:underline"
+              to={`/admin/users/${row.original.user.id}`}
+            >
+              {row.original.user.name ?? row.original.user.email}
+            </Link>
+            {row.original.user.name && (
+              <div className="font-mono text-xs text-muted-foreground">
+                {row.original.user.email}
+              </div>
+            )}
+          </div>
+        ),
+      },
+      {
+        header: _(msg`User ID`),
+        accessorKey: 'userId',
+      },
+      {
+        header: _(msg`Team role`),
+        accessorKey: 'teamRole',
+        cell: ({ row }) => (
+          <Badge variant="secondary">{_(TEAM_MEMBER_ROLE_MAP[row.original.teamRole])}</Badge>
+        ),
+      },
+      {
+        header: _(msg`Organisation role`),
+        accessorKey: 'organisationRole',
+        cell: ({ row }) => {
+          const isOwner = row.original.userId === team?.organisation.ownerUserId;
+
+          if (isOwner) {
+            return <Badge>{_(msg`Owner`)}</Badge>;
+          }
+
+          return (
+            <Badge variant="secondary">
+              {_(ORGANISATION_MEMBER_ROLE_MAP[row.original.organisationRole])}
+            </Badge>
+          );
+        },
+      },
+      {
+        header: _(msg`Joined`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+    ] satisfies DataTableColumnDef<TGetAdminTeamResponse['teamMembers'][number]>[];
+  }, [team, _, i18n]);
+
+  const pendingInvitesColumns = useMemo(() => {
+    return [
+      {
+        header: _(msg`Email`),
+        accessorKey: 'email',
+      },
+      {
+        header: _(msg`Role`),
+        accessorKey: 'organisationRole',
+        cell: ({ row }) => _(ORGANISATION_MEMBER_ROLE_MAP[row.original.organisationRole]),
+      },
+      {
+        header: _(msg`Invited`),
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+    ] satisfies DataTableColumnDef<TGetAdminTeamResponse['pendingInvites'][number]>[];
+  }, [_, i18n]);
+
+  if (!Number.isFinite(teamId) || teamId <= 0) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`Team not found`,
+            subHeading: msg`404 Team not found`,
+            message: msg`The team you are looking for may have been removed, renamed or may have never existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/admin/organisations`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return <SpinnerBox className="py-32" />;
+  }
+
+  if (!team) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`Team not found`,
+            subHeading: msg`404 Team not found`,
+            message: msg`The team you are looking for may have been removed, renamed or may have never existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/admin/organisations`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader title={_(msg`Manage team`)} subtitle={_(msg`Manage the ${team.name} team`)}>
+        <Button variant="outline" asChild>
+          <Link to={`/admin/organisations/${team.organisation.id}`}>
+            <Trans>Manage organisation</Trans>
+          </Link>
+        </Button>
+      </SettingsHeader>
+
+      <div className="mt-8 rounded-lg border p-4">
+        <div>
+          <p className="text-sm font-medium">
+            <Trans>Team details</Trans>
+          </p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            <Trans>Key identifiers and relationships for this team.</Trans>
+          </p>
+        </div>
+
+        <div className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
+          <DetailsCard
+            label={<Trans>Team ID</Trans>}
+            action={
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 shrink-0 p-0"
+                onClick={() => void onCopyToClipboard(String(team.id))}
+                title={_(msg`Copy team ID`)}
+              >
+                <CopyIcon className="h-4 w-4" />
+              </Button>
+            }
+          >
+            <DetailsValue isSelectable>{team.id}</DetailsValue>
+          </DetailsCard>
+
+          <DetailsCard label={<Trans>Team URL</Trans>}>
+            <DetailsValue isSelectable>{team.url}</DetailsValue>
+          </DetailsCard>
+
+          <DetailsCard label={<Trans>Created</Trans>}>
+            <DetailsValue>{i18n.date(team.createdAt)}</DetailsValue>
+          </DetailsCard>
+
+          <DetailsCard label={<Trans>Members</Trans>}>
+            <DetailsValue>{team.memberCount}</DetailsValue>
+          </DetailsCard>
+
+          <DetailsCard
+            label={<Trans>Organisation ID</Trans>}
+            action={
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 shrink-0 p-0"
+                onClick={() => void onCopyToClipboard(team.organisation.id)}
+                title={_(msg`Copy organisation ID`)}
+              >
+                <CopyIcon className="h-4 w-4" />
+              </Button>
+            }
+          >
+            <DetailsValue isSelectable>{team.organisation.id}</DetailsValue>
+          </DetailsCard>
+
+          {team.teamEmail && (
+            <>
+              <DetailsCard label={<Trans>Team email</Trans>}>
+                <DetailsValue isSelectable>{team.teamEmail.email}</DetailsValue>
+              </DetailsCard>
+
+              <DetailsCard label={<Trans>Team email name</Trans>}>
+                <DetailsValue>{team.teamEmail.name}</DetailsValue>
+              </DetailsCard>
+            </>
+          )}
+        </div>
+      </div>
+
+      {team.teamGlobalSettings && (
+        <div className="mt-8 rounded-lg border p-4">
+          <Accordion type="single" collapsible>
+            <AccordionItem value="global-settings" className="border-b-0">
+              <AccordionTrigger className="py-0">
+                <div className="text-left">
+                  <p className="text-sm font-medium">
+                    <Trans>Global Settings</Trans>
+                  </p>
+                  <p className="mt-1 text-sm font-normal text-muted-foreground">
+                    <Trans>
+                      Default settings applied to this team. Inherited values come from the
+                      organisation.
+                    </Trans>
+                  </p>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <div className="mt-4">
+                  <AdminGlobalSettingsSection settings={team.teamGlobalSettings} isTeam />
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      )}
+
+      <div className="mt-8">
+        <p className="text-sm font-medium">
+          <Trans>Team Members</Trans>
+        </p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          <Trans>Members that currently belong to this team.</Trans>
+        </p>
+
+        <div className="mt-4">
+          <DataTable columns={teamMembersColumns} data={team.teamMembers} />
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <p className="text-sm font-medium">
+          <Trans>Pending Organisation Invites</Trans>
+        </p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          <Trans>Organisation-level pending invites for this team's parent organisation.</Trans>
+        </p>
+
+        <div className="mt-4">
+          <DataTable columns={pendingInvitesColumns} data={team.pendingInvites} />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/dashboard.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 
+import { msg } from '@lingui/core/macro';
 import { Plural, Trans, useLingui } from '@lingui/react/macro';
 import { Building2Icon, InboxIcon, SettingsIcon, UsersIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
@@ -25,7 +26,7 @@ export function loader() {
 }
 
 export function meta() {
-  return appMetaTags('Dashboard');
+  return appMetaTags(msg`Dashboard`);
 }
 
 export default function DashboardPage() {
@@ -54,7 +55,7 @@ export default function DashboardPage() {
           <h1 className="text-3xl font-bold">
             <Trans>Dashboard</Trans>
           </h1>
-          <p className="text-muted-foreground mt-1">
+          <p className="mt-1 text-muted-foreground">
             <Trans>Welcome back! Here's an overview of your account.</Trans>
           </p>
 
@@ -69,7 +70,7 @@ export default function DashboardPage() {
               <p className="font-semibold">
                 <Trans>No organisations found</Trans>
               </p>
-              <p className="text-muted-foreground text-sm">
+              <p className="text-sm text-muted-foreground">
                 <Trans>Create an organisation to get started.</Trans>
               </p>
             </div>
@@ -87,7 +88,7 @@ export default function DashboardPage() {
           <div className="mb-8">
             <div className="mb-4 flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <Building2Icon className="text-muted-foreground h-5 w-5" />
+                <Building2Icon className="h-5 w-5 text-muted-foreground" />
                 <h2 className="text-xl font-semibold">
                   <Trans>Organisations</Trans>
                 </h2>
@@ -104,7 +105,7 @@ export default function DashboardPage() {
               {organisations.map((org) => (
                 <div key={org.id} className="group relative">
                   <Link to={`/o/${org.url}`}>
-                    <Card className="hover:bg-muted/50 h-full border pr-6 transition-all">
+                    <Card className="h-full border pr-6 transition-all hover:bg-muted/50">
                       <CardContent className="p-4">
                         <div className="flex items-center gap-3">
                           <Avatar className="h-10 w-10 border border-solid">
@@ -118,7 +119,7 @@ export default function DashboardPage() {
 
                           <div className="flex-1">
                             <h3 className="font-medium">{org.name}</h3>
-                            <div className="text-muted-foreground mt-1 flex items-center gap-3 text-xs">
+                            <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                               <div className="flex items-center gap-1">
                                 <UsersIcon className="h-3 w-3" />
                                 <span>
@@ -148,7 +149,7 @@ export default function DashboardPage() {
                     'MANAGE_ORGANISATION',
                     org.currentOrganisationRole,
                   ) && (
-                    <div className="text-muted-foreground absolute right-4 top-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                    <div className="absolute right-4 top-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                       <Link to={`/o/${org.url}/settings`}>
                         <SettingsIcon className="h-4 w-4" />
                       </Link>
@@ -165,7 +166,7 @@ export default function DashboardPage() {
           <div className="mb-8">
             <div className="mb-4 flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <UsersIcon className="text-muted-foreground h-5 w-5" />
+                <UsersIcon className="h-5 w-5 text-muted-foreground" />
                 <h2 className="text-xl font-semibold">
                   <Trans>Teams</Trans>
                 </h2>
@@ -183,7 +184,7 @@ export default function DashboardPage() {
                 {teams.map((team) => (
                   <div key={team.id} className="group relative">
                     <Link to={`/t/${team.url}`}>
-                      <Card className="hover:bg-muted/50 w-[350px] shrink-0 border transition-all">
+                      <Card className="w-[350px] shrink-0 border transition-all hover:bg-muted/50">
                         <CardContent className="p-4">
                           <div className="flex items-center gap-3">
                             <Avatar className="h-10 w-10 border border-solid">
@@ -197,7 +198,7 @@ export default function DashboardPage() {
 
                             <div className="flex-1">
                               <h3 className="font-medium">{team.name}</h3>
-                              <div className="text-muted-foreground mt-1 flex items-center gap-3 text-xs">
+                              <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                                 <div className="flex items-center gap-1">
                                   <UsersIcon className="h-3 w-3" />
                                   {team.organisation.ownerUserId === user.id
@@ -211,7 +212,7 @@ export default function DashboardPage() {
                               </div>
                             </div>
                           </div>
-                          <div className="text-muted-foreground mt-3 text-xs">
+                          <div className="mt-3 text-xs text-muted-foreground">
                             <Trans>
                               Joined{' '}
                               {DateTime.fromJSDate(team.createdAt).toRelative({ style: 'short' })}
@@ -222,7 +223,7 @@ export default function DashboardPage() {
                     </Link>
 
                     {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
-                      <div className="text-muted-foreground absolute right-4 top-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                      <div className="absolute right-4 top-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                         <Link to={`/t/${team.url}/settings`}>
                           <SettingsIcon className="h-4 w-4" />
                         </Link>
@@ -240,7 +241,7 @@ export default function DashboardPage() {
         <div>
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <InboxIcon className="text-muted-foreground h-5 w-5" />
+              <InboxIcon className="h-5 w-5 text-muted-foreground" />
               <h2 className="text-xl font-semibold">
                 <Trans>Personal Inbox</Trans>
               </h2>

apps/remix/app/routes/_authenticated+/inbox.tsx

@@ -1,3 +1,4 @@
+import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { InboxIcon } from 'lucide-react';
 
@@ -6,7 +7,7 @@ import { InboxTable } from '~/components/tables/inbox-table';
 import { appMetaTags } from '~/utils/meta';
 
 export function meta() {
-  return appMetaTags('Personal Inbox');
+  return appMetaTags(msg`Personal Inbox`);
 }
 
 export default function InboxPage() {
@@ -14,11 +15,11 @@ export default function InboxPage() {
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <div className="mb-8">
         <h1 className="flex flex-row items-center gap-2 text-3xl font-bold">
-          <InboxIcon className="text-muted-foreground h-8 w-8" />
+          <InboxIcon className="h-8 w-8 text-muted-foreground" />
 
           <Trans>Personal Inbox</Trans>
         </h1>
-        <p className="text-muted-foreground mt-1">
+        <p className="mt-1 text-muted-foreground">
           <Trans>Any documents that you have been invited to will appear here</Trans>
         </p>