feat: add viewing on completed page for pending documents

Co-authored-by: Adithya Krishna  <aadithya794@gmail.com>

.github/ISSUE_TEMPLATE/improvement.yml

@@ -1,35 +1,39 @@
-name: 'General Improvement'
-description: Suggest a minor enhancement or improvement for this project
+name: 'General Improvement Request'
+description: 'Suggest a minor enhancement or improvement for this project'
+title: '[Title for your improvement suggestion]'
 body:
-  - type: markdown
-    attributes:
-      value: Please provide a clear and concise title for your improvement suggestion
   - type: textarea
     attributes:
-      label: Improvement Description
-      description: Describe the improvement you are suggesting in detail. Explain what specific aspect of the project it addresses or enhances.
+      label: 'Describe the improvement you are suggesting in detail'
+      description: 'Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.'
+    validations:
+      required: true
   - type: textarea
+    id: description
     attributes:
-      label: Rationale
-      description: Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.
-  - type: textarea
+      label: 'Additional Information & Alternatives (optional)'
+      description: 'Are there any additional context or information that might be relevant to the improvement suggestion.'
+    validations:
+      required: false
+  - type: dropdown
+    id: assignee
     attributes:
-      label: Proposed Solution
-      description: If you have a suggestion for how this improvement could be implemented, describe it here. Include any technical details, design suggestions, or other relevant information.
-  - type: textarea
-    attributes:
-      label: Alternatives (optional)
-      description: Are there any alternative approaches to achieve the same improvement? Describe other ways to address the issue or enhance the project.
-  - type: textarea
-    attributes:
-      label: Additional Context
-      description: Add any additional context or information that might be relevant to the improvement suggestion.
+      label: 'Do you want to work on this improvement?'
+      multiple: false
+      options:
+        - 'No'
+        - 'Yes'
+      default: 0
+    validations:
+      required: true
   - type: checkboxes
     attributes:
-      label: Please check the boxes that apply to this improvement suggestion.
+      label: 'Please check the boxes that apply to this improvement suggestion.'
       options:
-        - label: I have searched the existing issues and improvement suggestions to avoid duplication.
-        - label: I have provided a clear description of the improvement being suggested.
-        - label: I have explained the rationale behind this improvement.
-        - label: I have included any relevant technical details or design suggestions.
-        - label: I understand that this is a suggestion and that there is no guarantee of implementation.
+        - label: 'I have searched the existing issues and improvement suggestions to avoid duplication.'
+        - label: 'I have provided a clear description of the improvement being suggested.'
+        - label: 'I have explained the rationale behind this improvement.'
+        - label: 'I have included any relevant technical details or design suggestions.'
+        - label: 'I understand that this is a suggestion and that there is no guarantee of implementation.'
+    validations:
+      required: true

.github/workflows/stale.yml

@@ -15,11 +15,10 @@ jobs:
       - uses: actions/stale@v4
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          days-before-pr-stale: 30
-          days-before-issue-stale: 30
-          stale-issue-message: 'This issue has not seen activity for a while. It will be closed in 30 days unless further activity is detected'
+          days-before-pr-stale: 90
+          days-before-issue-stale: 90
+          days-before-issue-close: 180
           stale-pr-message: 'This PR has not seen activitiy for a while. It will be closed in 30 days unless further activity is detected.'
-          close-issue-message: 'This issue has been closed because of inactivity.'
           close-pr-message: 'This PR has been closed because of inactivity.'
           exempt-pr-labels: 'WIP,on-hold,needs review'
-          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned'
+          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned,needs triage'

README.md

@@ -1,3 +1,5 @@
+>We are nominated for a Product Hunt Gold Kitty 😺✨ and appreciate any support: https://documen.so/kitty
+
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">
@@ -13,9 +15,9 @@
     ·
     <a href="https://github.com/documenso/documenso/issues">Issues</a>
     ·
-    <a href="https://github.com/documenso/documenso/milestones">Roadmap</a>
+    <a href="https://documen.so/live">Upcoming Releases</a>
     ·
-    <a href="https://documen.so/launches">Upcoming Launches</a>
+    <a href="https://documen.so/roadmap">Roadmap</a>
   </p>
 </p>
 
@@ -115,10 +117,12 @@ To run Documenso locally, you will need
 
 Want to get up and running quickly? Follow these steps:
 
-1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+After forking the repository, clone it to your local device by using the following command:
 
 ```sh
-git clone https://github.com/documenso/documenso
+git clone https://github.com/<your-username>/documenso
 ```
 
 2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively, just run `cp .env.example .env` to get started with our handpicked defaults.
@@ -152,10 +156,12 @@ npm run d
 
 Follow these steps to setup Documenso on your local machine:
 
-1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+After forking the repository, clone it to your local device by using the following command:
 
 ```sh
-git clone https://github.com/documenso/documenso
+git clone https://github.com/<your-username>/documenso
 ```
 
 2. Run `npm i` in the root directory
@@ -280,12 +286,16 @@ WantedBy=multi-user.target
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/bG6D4p)
 
 ### Render
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
 
+### Koyeb
+
+[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
+
 ## Troubleshooting
 
 ### I'm not receiving any emails when using the developer quickstart.

apps/marketing/content/blog/email-provider-incident-2024-01-10.mdx

@@ -0,0 +1,28 @@
+---
+title: Jan 10th Email Provider Security Incident
+description: On January 10th, 2022, we were notified by our email provider that they had experienced a security incident.
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2024-01-17
+tags:
+  - Security
+---
+
+On January 10th, 2024 we were notified by our email provider that a security incident had occurred. This security incident which had started on January 7th led to a bad actor obtaining access to their database which contains ours and other customer’s data.
+
+We understand that during this security incident the following has been accessed:
+
+- Email addresses.
+- Metadata on emails sent excluding the email body.
+
+While the incident is unfortunate we are pleased with the remediation and the processes that our email provider has put in place to help avoid this kind of situation in the future. Since the incident, our provider has rectified the issue and has engaged a security company to conduct an exhaustive investigation and to help improve their security posture moving forward.
+
+We remain steadfast in our commitment to our current email provider, and will not be taking any further action with relation to changing providers.
+
+We are now working with our legal counsel to ensure that we provide the appropriate notice to all our customers in each jurisdiction. If you have any further questions on this incident please feel free to contact our support team at [support@documenso.com](mailto:support@documenso.com).
+
+We appreciate your ongoing support in this matter.
+
+You can read more on the incident on our providers blog post below:
+[https://resend.com/blog/incident-report-for-january-10-2024](https://resend.com/blog/incident-report-for-january-10-2024)

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

@@ -0,0 +1,115 @@
+---
+title: Moving from Linear to GitHub & LIVE Roadmap 2.0
+description: We are leaving linear and are going all in on GitHub. Here is how we do it.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-01-10
+Tags:
+  - GitHub
+  - Backlog
+  - Roadmap
+---
+
+# From Linear to GitHub
+
+> TLDR; We are leaving Linear and are using only GitHub going forward. We no longer communicate feature timelines, only what we are working on and what's next.
+
+If you follow us, you know we have been in full-on build mode. We are building, the community is building, it's great. Building is our daily business, so we think a lot about improving our approach to doing it.
+Our most recent approach is to reduce the number of tools and platforms we use. Every tool we use
+
+- Reduces the average time you spend on the tool
+- Reduces your focus
+- Increases mental load to keep all points of interest in mind
+
+We thought about where we spend the most time, and hardly surprising: it's GitHub. Not only do we spend a lot of time there, but we also WANT to spend a lot of time there because:
+
+- It's where the community contributes, and we are all about community
+- It's where we show the world what we are working on
+
+# The old structure
+
+So far, we have been using Linear for our Backlog/ Task Management and synced issues we want to showcase or work on with the community via synclinear.com. Not only did we have our development issues there, but since
+we have our own resident founding designer, we created a proper design backlog to structure our design workflows.
+
+# The new structure
+
+We moved everything to GitHub once we realized our focus was already there. This has a few key benefits:
+
+- Reducing dilution of attention and time: You can hang out on GitHub without risk of missing much
+- Putting different aspects of Documenso close to each other: Development, Design, Community
+- Keep long-term, niche, and very abstract issues out of the main repo so we don't get desensitized by large issue numbers
+
+To achieve this, we created a few GitHub repositories to host issues, with the main repository remaining the central point of interest, especially for the community.
+
+## 1. Main Repository - Day to day Issues and the shorter-term roadmap (LIVE Roadmap 2.0)
+
+> [github.com/documenso/documenso](https://github.com/documenso/documenso)
+
+Apart from the source code of the Documenso app and website, the main repo houses issues raised by the community and issues where we invite the community to participate.
+With the overhauling of our issue management, we are also updating our progress communication. While the software and product development process is highly complex,
+we try to give as much insight into what we do as possible. To that end, we went through 3 phases, three being what we do now.
+
+1. **One extensive roadmap**: Initially we had one roadmap and were (very) slowly checking off boxes there (via a "Roadmap" milestone). While this is easy, it's also pretty imprecise and not practical as the project grows
+2. **Estimated releases per quarter**: To give better guidance, we tried communicating our goals for the quarter; a pretty big window we thought we could roughly "hit". While the idea of not being too detailed was good, it is tough to estimate when some significant things are done if you do a lot of minor/ other things in parallel,
+   like working with the community and tuning things you go. Hitting time targets is tricky because there may be better things to do than sticking to that time target. This is always much easier to grasp for the people closely involved. The fallacy is to assume the thing you plan for exists in a vacuum.
+3. Since we do not want to limit ourselves in choosing the most effective course but still give some insight into what's going on and what's coming up, we updated the live roadmap [https://documen.so/live](https://documen.so/live). It now shows what we are currently working on and what we plan on doing next. We do not provide
+   a specific timeline anymore since we couldn't even if we wanted to. Of course, we set our short-term goals based on what's best for the community. We give updates on the issues being worked on as well as possible.
+
+## 2. Public Backlog - The longer-term roadmap
+
+> [github.com/documenso/backlog](https://github.com/documenso/backlog)
+
+The public backlog houses everything we want to build eventually. We do not provide a specific timeline of when that might happen. If we decide against something, it will be removed from the public backlog, as we consider this our long-term vision for Documenso. If you are interested in something on the roadmap, comment on the issue or post on Discord. This helps us gauge interest in specific features.
+**Issues in the public backlog are not** available to be worked on. For issues to work on, please check the main repository issues. The issues found here are scoped broader since they are not meant for immediate execution but rather give a sense of where Documenso is going and what we consider part of our domain.
+
+## 3. Internal Backlog
+
+> github.com/documenso/backlog-internal
+
+<figure>
+  <MdxNextImage
+    src="/blog/gh1.png"
+    width="1260"
+    height="630"
+    alt="GitHub: Development Board"
+  />
+
+  <figcaption className="text-center">
+    Our internal Kanban for development
+  </figcaption>
+</figure>
+
+This serves as the direct replacement for our Linear backlog. Here, we manage issues that are either too small or short-term for inclusion in the long-term roadmap, yet too specialized or fundamental to be integrated into the main repository. Our development Kanban board is implemented using a GitHub project.
+
+## 4. Internal Design Backlog
+
+> github.com/documenso/design-internal
+
+<figure>
+  <MdxNextImage
+    src="/blog/gh2.png"
+    width="1260"
+    height="630"
+    alt="GitHub: Design Board"
+  />
+
+  <figcaption className="text-center">
+    Our internal Kanban for design
+  </figcaption>
+</figure>
+
+This is the design equivalent of the internal backlog. The internal design backlog houses our design projects that include the exploration of new features, detailed UI designs, and improving the platform overall.
+It's similar to the Kanban board for the development backlog.
+
+## 5. Public Design Repository
+
+> [github.com/documenso/backlog-design](https://github.com/documenso/design)
+
+While the internal design backlog also existed in Linear, the public design repository is new. Since designing in the open is tricky, we opted to publish the detailed design artifacts with the corresponding feature instead.
+We already have design.documenso.com housing our general design system. Here, we will publish the specifics of how we applied this to each feature. We will publish the first artifacts here soon, what may be in the cards can be found on the [LIVE Roadmap](https://documen.so/live).
+
+Feel free to connect with us on  [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here to help and would love to hear from you :)
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/pre-seed.mdx

@@ -1,6 +1,6 @@
 ---
 title: Announcing Pre-Seed and Open Metrics
-description: We are exicited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
+description: We are excited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'

apps/marketing/content/blog/shop.mdx

@@ -30,7 +30,7 @@ We kicked off [Malfunction Mania](https://documenso.com/blog/malfunction-mania)
 
 ## Documenso Merch Shop
 
-The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contrinuting to Documenso.
+The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contributing to Documenso.
 
 <figure>
   <MdxNextImage

apps/marketing/package.json

@@ -36,7 +36,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "0.32.5",
+    "sharp": "0.33.1",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },

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

@@ -39,7 +39,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
   return (
     <div className={cn('border-t py-12', className)} {...props}>
       <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
-        <div>
+        <div className="flex-shrink-0">
           <Link href="/">
             <Image
               src={LogoImage}
@@ -64,13 +64,13 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
+        <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">
           {FOOTER_LINKS.map((link, index) => (
             <Link
               key={index}
               href={link.href}
               target={link.target}
-              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 text-sm"
+              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 break-words text-sm"
             >
               {link.text}
             </Link>

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { HTMLAttributes, KeyboardEvent, useMemo, useState } from 'react';
+import type { HTMLAttributes, KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -90,10 +91,10 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
     }
 
     if (step === STEP.EMAIL) {
-      return 1;
+      return 3;
     }
 
-    return 3;
+    return 1;
   }, [step]);
 
   const onNextStepClick = () => {

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomBytes } from 'crypto';
 import { buffer } from 'micro';
@@ -6,7 +6,8 @@ import { buffer } from 'micro';
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
 import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
 import { redis } from '@documenso/lib/server-only/redis';
-import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import type { Stripe } from '@documenso/lib/server-only/stripe';
+import { stripe } from '@documenso/lib/server-only/stripe';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';

apps/web/package.json

@@ -42,7 +42,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
-    "sharp": "0.32.5",
+    "sharp": "0.33.1",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",
     "uqr": "^0.1.2",

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

@@ -9,7 +9,6 @@ import type { z } from 'zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
   FormControl,
@@ -19,6 +18,7 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multiselect-combobox';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
@@ -117,7 +117,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
                   <fieldset className="flex flex-col gap-2">
                     <FormLabel className="text-muted-foreground">Roles</FormLabel>
                     <FormControl>
-                      <Combobox
+                      <MultiSelectCombobox
                         listValues={roles}
                         onChange={(values: string[]) => onChange(values)}
                       />

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

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -29,6 +29,7 @@ export type EditDocumentFormProps = {
   user: User;
   document: DocumentWithData;
   recipients: Recipient[];
+  documentMeta: DocumentMeta | null;
   fields: Field[];
   documentData: DocumentData;
 };
@@ -41,6 +42,7 @@ export const EditDocumentForm = ({
   document,
   recipients,
   fields,
+  documentMeta,
   user: _user,
   documentData,
 }: EditDocumentFormProps) => {
@@ -56,6 +58,8 @@ export const EditDocumentForm = ({
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
   const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
   const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
+  const { mutateAsync: setPasswordForDocument } =
+    trpc.document.setPasswordForDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     title: {
@@ -145,14 +149,16 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message } = data.email;
+    const { subject, message, timezone, dateFormat } = data.meta;
 
     try {
       await sendDocument({
         documentId: document.id,
-        email: {
+        meta: {
           subject,
           message,
+          timezone,
+          dateFormat,
         },
       });
 
@@ -174,6 +180,13 @@ export const EditDocumentForm = ({
     }
   };
 
+  const onPasswordSubmit = async (password: string) => {
+    await setPasswordForDocument({
+      documentId: document.id,
+      password,
+    });
+  };
+
   const currentDocumentFlow = documentFlow[step];
 
   return (
@@ -183,7 +196,13 @@ export const EditDocumentForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            key={documentData.id}
+            documentData={documentData}
+            document={document}
+            password={documentMeta?.password}
+            onPasswordSubmit={onPasswordSubmit}
+          />
         </CardContent>
       </Card>
 

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

@@ -3,10 +3,12 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
@@ -40,7 +42,24 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     redirect('/documents');
   }
 
-  const { documentData } = document;
+  const { documentData, documentMeta } = document;
+
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
 
   const [recipients, fields] = await Promise.all([
     getRecipientsForDocument({
@@ -83,6 +102,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           className="mt-8"
           document={document}
           user={user}
+          documentMeta={documentMeta}
           recipients={recipients}
           fields={fields}
           documentData={documentData}
@@ -91,7 +111,12 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
 
       {document.status === InternalDocumentStatus.COMPLETED && (
         <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            document={document}
+            key={documentData.id}
+            documentMeta={documentMeta}
+            documentData={documentData}
+          />
         </div>
       )}
     </div>

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

@@ -6,7 +6,7 @@ import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -55,28 +55,14 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       const documentData = document?.documentData;
 
       if (!documentData) {
-        return;
+        throw Error('No document available');
       }
 
-      const documentBytes = await getFile(documentData);
-
-      const blob = new Blob([documentBytes], {
-        type: 'application/pdf',
-      });
-
-      const link = window.document.createElement('a');
-      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
-    } catch (error) {
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
       toast({
         title: 'Something went wrong',
-        description: 'An error occurred while trying to download file.',
+        description: 'An error occurred while downloading your document.',
         variant: 'destructive',
       });
     }

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

@@ -17,7 +17,7 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -30,6 +30,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
@@ -44,6 +45,7 @@ export type DataTableActionDropdownProps = {
 
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -63,39 +65,33 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isDocumentDeletable = isOwner;
 
   const onDownloadClick = async () => {
-    let document: DocumentWithData | null = null;
+    try {
+      let document: DocumentWithData | null = null;
 
-    if (!recipient) {
-      document = await trpcClient.document.getDocumentById.query({
-        id: row.id,
-      });
-    } else {
-      document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
+      if (!recipient) {
+        document = await trpcClient.document.getDocumentById.query({
+          id: row.id,
+        });
+      } else {
+        document = await trpcClient.document.getDocumentByToken.query({
+          token: recipient.token,
+        });
+      }
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
       });
     }
-
-    const documentData = document?.documentData;
-
-    if (!documentData) {
-      return;
-    }
-
-    const documentBytes = await getFile(documentData);
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
   };
 
   const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');

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

@@ -88,7 +88,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                     <DocumentStatus status={value} />
 
                     {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 hidden opacity-50 md:inline-block">
+                      <span className="ml-1 inline-block opacity-50">
                         {Math.min(stats[value], 99)}
                         {stats[value] > 99 && '+'}
                       </span>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -25,6 +25,7 @@ export type UploadDocumentProps = {
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
+
   const { data: session } = useSession();
 
   const { toast } = useToast();
@@ -35,6 +36,16 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
+  const disabledMessage = useMemo(() => {
+    if (remaining.documents === 0) {
+      return 'You have reached your document limit.';
+    }
+
+    if (!session?.user.emailVerified) {
+      return 'Verify your email to upload documents.';
+    }
+  }, [remaining.documents, session?.user.emailVerified]);
+
   const onFileDrop = async (file: File) => {
     try {
       setIsLoading(true);
@@ -90,6 +101,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       <DocumentDropzone
         className="min-h-[40vh]"
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
+        disabledMessage={disabledMessage}
         onDrop={onFileDrop}
       />
 

apps/web/src/app/(signing)/sign/[token]/complete/document-preview-button.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState } from 'react';
+
+import { FileSearch } from 'lucide-react';
+
+import type { DocumentData } from '@documenso/prisma/client';
+import DocumentDialog from '@documenso/ui/components/document/document-dialog';
+import type { ButtonProps } from '@documenso/ui/primitives/button';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DocumentPreviewButtonProps = {
+  className?: string;
+  documentData: DocumentData;
+} & ButtonProps;
+
+export const DocumentPreviewButton = ({
+  className,
+  documentData,
+  ...props
+}: DocumentPreviewButtonProps) => {
+  const [showDialog, setShowDialog] = useState(false);
+
+  return (
+    <>
+      <Button
+        className={className}
+        variant="outline"
+        onClick={() => setShowDialog((visible) => !visible)}
+        {...props}
+      >
+        <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
+        View Document
+      </Button>
+
+      <DocumentDialog documentData={documentData} open={showDialog} onOpenChange={setShowDialog} />
+    </>
+  );
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
+
+export type SigningLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function SigningLayout({ children }: SigningLayoutProps) {
+  return (
+    <div>
+      {children}
+
+      <RefreshOnFocus />
+    </div>
+  );
+}

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

@@ -15,6 +15,10 @@ import { DocumentDownloadButton } from '@documenso/ui/components/document/docume
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
+import { DocumentPreviewButton } from './document-preview-button';
+
 export type CompletedSigningPageProps = {
   params: {
     token?: string;
@@ -36,6 +40,8 @@ export default async function CompletedSigningPage({
     return notFound();
   }
 
+  const truncatedTitle = truncateTitle(document.title);
+
   const { documentData } = document;
 
   const [fields, recipient] = await Promise.all([
@@ -89,7 +95,7 @@ export default async function CompletedSigningPage({
 
         <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
           You have signed
-          <span className="mt-1.5 block">"{document.title}"</span>
+          <span className="mt-1.5 block">"{truncatedTitle}"</span>
         </h2>
 
         {match({ status: document.status, deletedAt: document.deletedAt })
@@ -113,12 +119,20 @@ export default async function CompletedSigningPage({
         <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
           <DocumentShareButton documentId={document.id} token={recipient.token} />
 
-          <DocumentDownloadButton
-            className="flex-1"
-            fileName={document.title}
-            documentData={documentData}
-            disabled={document.status !== DocumentStatus.COMPLETED}
-          />
+          {document.status === DocumentStatus.COMPLETED ? (
+            <DocumentDownloadButton
+              className="flex-1"
+              fileName={document.title}
+              documentData={documentData}
+              disabled={document.status !== DocumentStatus.COMPLETED}
+            />
+          ) : (
+            <DocumentPreviewButton
+              className="flex-1"
+              title="Signatures will appear once the document has been completed"
+              documentData={documentData}
+            />
+          )}
         </div>
 
         {isLoggedIn ? (

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

@@ -6,8 +6,13 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -16,9 +21,16 @@ import { SigningFieldContainer } from './signing-field-container';
 export type DateFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  dateFormat?: string | null;
+  timezone?: string | null;
 };
 
-export const DateField = ({ field, recipient }: DateFieldProps) => {
+export const DateField = ({
+  field,
+  recipient,
+  dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
+  timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+}: DateFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -35,12 +47,18 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
+  const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
+
+  const isDifferentTime = field.inserted && localDateString !== field.customText;
+
+  const tooltipText = `"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`;
+
   const onSign = async () => {
     try {
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: '',
+        value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
       });
 
       startTransition(() => router.refresh());
@@ -75,7 +93,13 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Date"
+      tooltipText={isDifferentTime ? tooltipText : undefined}
+    >
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
@@ -87,7 +111,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
+        <p className="text-muted-foreground text-sm duration-200">{localDateString}</p>
       )}
     </SigningFieldContainer>
   );

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

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -79,7 +79,7 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

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

@@ -34,6 +34,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   const { mutateAsync: completeDocumentWithToken } =
@@ -48,6 +49,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
     return sortFieldsByPosition(fields.filter((field) => !field.inserted));
   }, [fields]);
 
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(fields);
+  };
+
   const onFormSubmit = async () => {
     setValidateUninsertedFields(true);
 
@@ -92,7 +98,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
         disabled={isSubmitting}
         className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}
       >
-        <div className={cn('flex flex-1 flex-col')}>
+        <div
+          className={cn(
+            'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+          )}
+        >
           <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
 
           <p className="text-muted-foreground mt-2 text-sm">
@@ -149,6 +159,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 onSignatureComplete={handleSubmit(onFormSubmit)}
                 document={document}
                 fields={fields}
+                fieldsValidated={fieldsValidated}
               />
             </div>
           </div>

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

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
@@ -98,7 +98,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Name">
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

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

@@ -2,18 +2,25 @@ import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getDocumentMetaByDocumentId } from '@documenso/lib/server-only/document/get-document-meta-by-document-id';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
 import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
@@ -42,10 +49,14 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     viewedDocument({ token }).catch(() => null),
   ]);
 
+  const documentMeta = await getDocumentMetaByDocumentId({ id: document!.id }).catch(() => null);
+
   if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
+  const truncatedTitle = truncateTitle(document.title);
+
   const { documentData } = document;
 
   const { user } = await getServerComponentSession();
@@ -57,6 +68,23 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     redirect(`/sign/${token}/complete`);
   }
 
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
+
   const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
 
   if (document.deletedAt) {
@@ -77,7 +105,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     >
       <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {document.title}
+          {truncatedTitle}
         </h1>
 
         <div className="mt-2.5 flex items-center gap-x-6">
@@ -92,7 +120,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
             gradient
           >
             <CardContent className="p-2">
-              <LazyPDFViewer key={documentData.id} documentData={documentData} />
+              <LazyPDFViewer
+                key={documentData.id}
+                documentData={documentData}
+                document={document}
+                password={documentMeta?.password}
+              />
             </CardContent>
           </Card>
 
@@ -111,7 +144,13 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
                 <NameField key={field.id} field={field} recipient={recipient} />
               ))
               .with(FieldType.DATE, () => (
-                <DateField key={field.id} field={field} recipient={recipient} />
+                <DateField
+                  key={field.id}
+                  field={field}
+                  recipient={recipient}
+                  dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                  timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                />
               ))
               .with(FieldType.EMAIL, () => (
                 <EmailField key={field.id} field={field} recipient={recipient} />

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Document, Field } from '@documenso/prisma/client';
+import type { Document, Field } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -9,10 +9,13 @@ import {
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
 export type SignDialogProps = {
   isSubmitting: boolean;
   document: Document;
   fields: Field[];
+  fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
 };
 
@@ -20,30 +23,31 @@ export const SignDialog = ({
   isSubmitting,
   document,
   fields,
+  fieldsValidated,
   onSignatureComplete,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-
+  const truncatedTitle = truncateTitle(document.title);
   const isComplete = fields.every((field) => field.inserted);
 
   return (
-    <Dialog open={showDialog} onOpenChange={setShowDialog}>
+    <Dialog open={showDialog && isComplete} onOpenChange={setShowDialog}>
       <DialogTrigger asChild>
         <Button
           className="w-full"
           type="button"
           size="lg"
-          disabled={!isComplete}
+          onClick={fieldsValidated}
           loading={isSubmitting}
         >
-          Complete
+          {isComplete ? 'Complete' : 'Next field'}
         </Button>
       </DialogTrigger>
       <DialogContent>
         <div className="text-center">
           <div className="text-xl font-semibold text-neutral-800">Sign Document</div>
           <div className="text-muted-foreground mx-auto w-4/5 py-2 text-center">
-            You are about to finish signing "{document.title}". Are you sure?
+            You are about to finish signing "{truncatedTitle}". Are you sure?
           </div>
         </div>
 

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

@@ -127,7 +127,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Signature">
       {isLoading && (
         <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />

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

@@ -2,8 +2,9 @@
 
 import React from 'react';
 
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 export type SignatureFieldProps = {
   field: FieldWithSignature;
@@ -11,6 +12,8 @@ export type SignatureFieldProps = {
   children: React.ReactNode;
   onSign?: () => Promise<void> | void;
   onRemove?: () => Promise<void> | void;
+  type?: 'Date' | 'Email' | 'Name' | 'Signature';
+  tooltipText?: string | null;
 };
 
 export const SigningFieldContainer = ({
@@ -19,6 +22,8 @@ export const SigningFieldContainer = ({
   onSign,
   onRemove,
   children,
+  type,
+  tooltipText,
 }: SignatureFieldProps) => {
   const onSignFieldClick = async () => {
     if (field.inserted) {
@@ -46,7 +51,22 @@ export const SigningFieldContainer = ({
         />
       )}
 
-      {field.inserted && !loading && (
+      {type === 'Date' && field.inserted && !loading && (
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <button
+              className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
+              onClick={onRemoveSignedFieldClick}
+            >
+              Remove
+            </button>
+          </TooltipTrigger>
+
+          {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+        </Tooltip>
+      )}
+
+      {type !== 'Date' && field.inserted && !loading && (
         <button
           className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
           onClick={onRemoveSignedFieldClick}

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -6,6 +6,7 @@ import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { StackAvatar } from './stack-avatar';
@@ -19,6 +20,10 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
   const { toast } = useToast();
 
   const onRecipientClick = () => {
+    if (!recipient.token) {
+      return;
+    }
+
     void copy(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`).then(() => {
       toast({
         title: 'Copied to clipboard',
@@ -28,19 +33,22 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
   };
 
   return (
-    <div className="my-1 flex cursor-pointer items-center gap-2" onClick={onRecipientClick}>
+    <div
+      className={cn('my-1 flex items-center gap-2', {
+        'cursor-pointer hover:underline': recipient.token,
+      })}
+      role={recipient.token ? 'button' : undefined}
+      title={recipient.token && 'Click to copy signing link for sending to recipient'}
+      onClick={onRecipientClick}
+    >
       <StackAvatar
         first={true}
         key={recipient.id}
         type={getRecipientType(recipient)}
         fallbackText={recipientAbbreviation(recipient)}
       />
-      <span
-        className="text-muted-foreground text-sm hover:underline"
-        title="Click to copy signing link for sending to recipient"
-      >
-        {recipient.email}
-      </span>
+
+      <span className="text-muted-foreground text-sm">{recipient.email}</span>
     </div>
   );
 }

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -5,13 +5,16 @@ import { useCallback, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { Loader, Monitor, Moon, Sun } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import {
   DOCUMENTS_PAGE_SHORTCUT,
   SETTINGS_PAGE_SHORTCUT,
+  TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
+import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   CommandDialog,
@@ -39,6 +42,14 @@ const DOCUMENTS_PAGES = [
   { label: 'Inbox documents', path: '/documents?status=INBOX' },
 ];
 
+const TEMPLATES_PAGES = [
+  {
+    label: 'All templates',
+    path: '/templates',
+    shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
+  },
+];
+
 const SETTINGS_PAGES = [
   {
     label: 'Settings',
@@ -56,6 +67,8 @@ export type CommandMenuProps = {
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { setTheme } = useTheme();
+  const { data: session } = useSession();
+
   const router = useRouter();
 
   const [isOpen, setIsOpen] = useState(() => open ?? false);
@@ -72,6 +85,17 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       },
     );
 
+  const isOwner = useCallback(
+    (document: Document) => document.userId === session?.user.id,
+    [session?.user.id],
+  );
+
+  const getSigningLink = useCallback(
+    (recipients: Recipient[]) =>
+      `/sign/${recipients.find((r) => r.email === session?.user.email)?.token}`,
+    [session?.user.email],
+  );
+
   const searchResults = useMemo(() => {
     if (!searchDocumentsData) {
       return [];
@@ -79,15 +103,14 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
     return searchDocumentsData.map((document) => ({
       label: document.title,
-      path: `/documents/${document.id}`,
+      path: isOwner(document) ? `/documents/${document.id}` : getSigningLink(document.Recipient),
       value: [document.id, document.title, ...document.Recipient.map((r) => r.email)].join(' '),
     }));
-  }, [searchDocumentsData]);
+  }, [searchDocumentsData, isOwner, getSigningLink]);
 
   const currentPage = pages[pages.length - 1];
 
-  const toggleOpen = (e: KeyboardEvent) => {
-    e.preventDefault();
+  const toggleOpen = () => {
     setIsOpen((isOpen) => !isOpen);
     onOpenChange?.(!isOpen);
 
@@ -125,10 +148,12 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
   const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
   const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
+  const goToTemplates = useCallback(() => push(TEMPLATES_PAGES[0].path), [push]);
 
-  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen);
+  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
   useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
   useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
+  useHotkeys(TEMPLATES_PAGE_SHORTCUT, goToTemplates);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Escape goes to previous page
@@ -175,6 +200,9 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
             <CommandGroup heading="Documents">
               <Commands push={push} pages={DOCUMENTS_PAGES} />
             </CommandGroup>
+            <CommandGroup heading="Templates">
+              <Commands push={push} pages={TEMPLATES_PAGES} />
+            </CommandGroup>
             <CommandGroup heading="Settings">
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -33,7 +33,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[1000] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[50] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
         scrollY > 5 && 'border-b-border',
         className,
       )}

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

@@ -1,9 +1,9 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { CheckCircle2, Clock, File } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { cn } from '@documenso/ui/lib/utils';
 

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

@@ -1,8 +1,10 @@
 'use client';
 
-import { HTMLAttributes, useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 
-import { DateTime, DateTimeFormatOptions } from 'luxon';
+import type { DateTimeFormatOptions } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { useLocale } from '@documenso/lib/client-only/providers/locale';
 

apps/web/src/helpers/truncate-title.ts

@@ -0,0 +1,10 @@
+export const truncateTitle = (title: string, maxLength: number = 16) => {
+  if (title.length <= maxLength) {
+    return title;
+  }
+
+  const start = title.slice(0, maxLength / 2);
+  const end = title.slice(-maxLength / 2);
+
+  return `${start}.....${end}`;
+};

apps/web/src/providers/next-auth.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Session } from 'next-auth';
+import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
 
 export type NextAuthProviderProps = {

lint-staged.config.cjs

@@ -1,6 +1,7 @@
+/** @type {import('lint-staged').Config} */
 module.exports = {
-  '**/*.{ts,tsx,cts,mts}': ['eslint --fix'],
-  '**/*.{js,jsx,cjs,mjs}': ['prettier --write'],
-  '**/*.{yml,mdx}': ['prettier --write'],
-  '**/*/package.json': ['npm run precommit'],
+  '**/*.{ts,tsx,cts,mts}': (files) => `eslint --fix ${files.join(' ')}`,
+  '**/*.{js,jsx,cjs,mjs}': (files) => `prettier --write ${files.join(' ')}`,
+  '**/*.{yml,mdx}': (files) => `prettier --write ${files.join(' ')}`,
+  '**/*/package.json': 'npm run precommit',
 };

packages/eslint-config/package.json

@@ -13,7 +13,7 @@
     "eslint-config-next": "13.4.19",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-turbo": "^1.9.3",
-    "eslint-plugin-package-json": "^0.1.4",
+    "eslint-plugin-package-json": "^0.2.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-unused-imports": "^3.0.0",

packages/lib/client-only/download-pdf.ts

@@ -0,0 +1,29 @@
+import type { DocumentData } from '@documenso/prisma/client';
+
+import { getFile } from '../universal/upload/get-file';
+
+type DownloadPDFProps = {
+  documentData: DocumentData;
+  fileName?: string;
+};
+
+export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps) => {
+  const bytes = await getFile(documentData);
+
+  const blob = new Blob([bytes], {
+    type: 'application/pdf',
+  });
+
+  const link = window.document.createElement('a');
+
+  const [baseTitle] = fileName?.includes('.pdf')
+    ? fileName.split('.pdf')
+    : [fileName ?? 'document'];
+
+  link.href = window.URL.createObjectURL(blob);
+  link.download = `${baseTitle}_signed.pdf`;
+
+  link.click();
+
+  window.URL.revokeObjectURL(link.href);
+};

packages/lib/client-only/recipient-type.ts

@@ -1,4 +1,5 @@
-import { ReadStatus, Recipient, SendStatus, SigningStatus } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
+import { ReadStatus, SendStatus, SigningStatus } from '@documenso/prisma/client';
 
 export const getRecipientType = (recipient: Recipient) => {
   if (

packages/lib/constants/date-formats.ts

@@ -0,0 +1,79 @@
+import { DateTime } from 'luxon';
+
+import { DEFAULT_DOCUMENT_TIME_ZONE } from './time-zones';
+
+export const DEFAULT_DOCUMENT_DATE_FORMAT = 'yyyy-MM-dd hh:mm a';
+
+export const DATE_FORMATS = [
+  {
+    key: 'yyyy-MM-dd_hh:mm_a',
+    label: 'YYYY-MM-DD HH:mm a',
+    value: DEFAULT_DOCUMENT_DATE_FORMAT,
+  },
+  {
+    key: 'YYYYMMDD',
+    label: 'YYYY-MM-DD',
+    value: 'YYYY-MM-DD',
+  },
+  {
+    key: 'DDMMYYYY',
+    label: 'DD/MM/YYYY',
+    value: 'dd/MM/yyyy hh:mm a',
+  },
+  {
+    key: 'MMDDYYYY',
+    label: 'MM/DD/YYYY',
+    value: 'MM/dd/yyyy hh:mm a',
+  },
+  {
+    key: 'YYYYMMDDHHmm',
+    label: 'YYYY-MM-DD HH:mm',
+    value: 'yyyy-MM-dd HH:mm',
+  },
+  {
+    key: 'YYMMDD',
+    label: 'YY-MM-DD',
+    value: 'yy-MM-dd hh:mm a',
+  },
+  {
+    key: 'YYYYMMDDhhmmss',
+    label: 'YYYY-MM-DD HH:mm:ss',
+    value: 'yyyy-MM-dd HH:mm:ss',
+  },
+  {
+    key: 'MonthDateYear',
+    label: 'Month Date, Year',
+    value: 'MMMM dd, yyyy hh:mm a',
+  },
+  {
+    key: 'DayMonthYear',
+    label: 'Day, Month Year',
+    value: 'EEEE, MMMM dd, yyyy hh:mm a',
+  },
+  {
+    key: 'ISO8601',
+    label: 'ISO 8601',
+    value: "yyyy-MM-dd'T'HH:mm:ss.SSSXXX",
+  },
+];
+
+export const convertToLocalSystemFormat = (
+  customText: string,
+  dateFormat: string | null = DEFAULT_DOCUMENT_DATE_FORMAT,
+  timeZone: string | null = DEFAULT_DOCUMENT_TIME_ZONE,
+): string => {
+  const coalescedDateFormat = dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT;
+  const coalescedTimeZone = timeZone ?? DEFAULT_DOCUMENT_TIME_ZONE;
+
+  const parsedDate = DateTime.fromFormat(customText, coalescedDateFormat, {
+    zone: coalescedTimeZone,
+  });
+
+  if (!parsedDate.isValid) {
+    return 'Invalid date';
+  }
+
+  const formattedDate = parsedDate.toLocal().toFormat(coalescedDateFormat);
+
+  return formattedDate;
+};

packages/lib/constants/keyboard-shortcuts.ts

@@ -1,2 +1,3 @@
 export const SETTINGS_PAGE_SHORTCUT = 'N+S';
 export const DOCUMENTS_PAGE_SHORTCUT = 'N+D';
+export const TEMPLATES_PAGE_SHORTCUT = 'N+T';

packages/lib/constants/time-zones.ts

@@ -0,0 +1,44 @@
+import { rawTimeZones, timeZonesNames } from '@vvo/tzdb';
+
+export const TIME_ZONE_DATA = rawTimeZones;
+
+export const DEFAULT_DOCUMENT_TIME_ZONE = 'Etc/UTC';
+
+export type TimeZone = {
+  name: string;
+  rawOffsetInMinutes: number;
+};
+
+export const minutesToHours = (minutes: number): string => {
+  const hours = Math.abs(Math.floor(minutes / 60));
+  const min = Math.abs(minutes % 60);
+  const sign = minutes >= 0 ? '+' : '-';
+
+  return `${sign}${String(hours).padStart(2, '0')}:${String(min).padStart(2, '0')}`;
+};
+
+const getGMTOffsets = (timezones: TimeZone[]): string[] => {
+  const gmtOffsets: string[] = [];
+
+  for (const timezone of timezones) {
+    const offsetValue = minutesToHours(timezone.rawOffsetInMinutes);
+    const gmtText = `(${offsetValue})`;
+
+    gmtOffsets.push(`${timezone.name} ${gmtText}`);
+  }
+
+  return gmtOffsets;
+};
+
+export const splitTimeZone = (input: string | null): string => {
+  if (input === null) {
+    return '';
+  }
+  const [timeZone] = input.split('(');
+
+  return timeZone.trim();
+};
+
+export const TIME_ZONES_FULL = getGMTOffsets(TIME_ZONE_DATA);
+
+export const TIME_ZONES = ['Etc/UTC', ...timeZonesNames];

packages/lib/package.json

@@ -31,6 +31,7 @@
     "@scure/base": "^1.1.3",
     "@sindresorhus/slugify": "^2.2.1",
     "@upstash/redis": "^1.20.6",
+    "@vvo/tzdb": "^6.117.0",
     "bcrypt": "^5.1.0",
     "luxon": "^3.4.0",
     "nanoid": "^4.0.2",

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

@@ -4,15 +4,30 @@ import { prisma } from '@documenso/prisma';
 
 export type CreateDocumentMetaOptions = {
   documentId: number;
-  subject: string;
-  message: string;
+  subject?: string;
+  message?: string;
+  timezone?: string;
+  password?: string;
+  dateFormat?: string;
+  userId: number;
 };
 
 export const upsertDocumentMeta = async ({
   subject,
   message,
+  timezone,
+  dateFormat,
   documentId,
+  userId,
+  password,
 }: CreateDocumentMetaOptions) => {
+  await prisma.document.findFirstOrThrow({
+    where: {
+      id: documentId,
+      userId,
+    },
+  });
+
   return await prisma.documentMeta.upsert({
     where: {
       documentId,
@@ -20,11 +35,17 @@ export const upsertDocumentMeta = async ({
     create: {
       subject,
       message,
+      dateFormat,
+      timezone,
+      password,
       documentId,
     },
     update: {
       subject,
       message,
+      dateFormat,
+      password,
+      timezone,
     },
   });
 };

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

@@ -25,6 +25,9 @@ export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByI
         select: {
           message: true,
           subject: true,
+          dateFormat: true,
+          password: true,
+          timezone: true,
         },
       },
     },

packages/lib/server-only/document/find-documents.ts

@@ -7,6 +7,7 @@ import { SigningStatus } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
 import type { FindResultSet } from '../../types/find-result-set';
+import { maskRecipientTokensForDocument } from '../../utils/mask-recipient-tokens-for-document';
 
 export type FindDocumentsOptions = {
   userId: number;
@@ -173,8 +174,15 @@ export const findDocuments = async ({
     }),
   ]);
 
+  const maskedData = data.map((document) =>
+    maskRecipientTokensForDocument({
+      document,
+      user,
+    }),
+  );
+
   return {
-    data,
+    data: maskedData,
     count,
     currentPage: Math.max(page, 1),
     perPage,

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

@@ -1,5 +1,5 @@
 import { prisma } from '@documenso/prisma';
-import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
+import type { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 
 export interface GetDocumentAndSenderByTokenOptions {
   token: string;
@@ -58,7 +58,11 @@ export const getDocumentAndRecipientByToken = async ({
       },
     },
     include: {
-      Recipient: true,
+      Recipient: {
+        where: {
+          token,
+        },
+      },
       documentData: true,
     },
   });

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

@@ -0,0 +1,13 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetDocumentMetaByDocumentIdOptions {
+  id: number;
+}
+
+export const getDocumentMetaByDocumentId = async ({ id }: GetDocumentMetaByDocumentIdOptions) => {
+  return await prisma.documentMeta.findFirstOrThrow({
+    where: {
+      documentId: id,
+    },
+  });
+};

packages/lib/server-only/document/search-documents-with-keyword.ts

@@ -1,6 +1,8 @@
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus } from '@documenso/prisma/client';
 
+import { maskRecipientTokensForDocument } from '../../utils/mask-recipient-tokens-for-document';
+
 export type SearchDocumentsWithKeywordOptions = {
   query: string;
   userId: number;
@@ -77,5 +79,12 @@ export const searchDocumentsWithKeyword = async ({
     take: limit,
   });
 
-  return documents;
+  const maskedDocuments = documents.map((document) =>
+    maskRecipientTokensForDocument({
+      document,
+      user,
+    }),
+  );
+
+  return maskedDocuments;
 };

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

@@ -1,18 +1,20 @@
 'use server';
 
-import { Prisma } from '@prisma/client';
+import type { Prisma } from '@prisma/client';
 
 import { prisma } from '@documenso/prisma';
 
 export type UpdateDocumentOptions = {
-  documentId: number;
   data: Prisma.DocumentUpdateInput;
+  userId: number;
+  documentId: number;
 };
 
-export const updateDocument = async ({ documentId, data }: UpdateDocumentOptions) => {
+export const updateDocument = async ({ documentId, userId, data }: UpdateDocumentOptions) => {
   return await prisma.document.update({
     where: {
       id: documentId,
+      userId,
     },
     data: {
       ...data,

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

@@ -5,6 +5,9 @@ import { DateTime } from 'luxon';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
+
 export type SignFieldWithTokenOptions = {
   token: string;
   fieldId: number;
@@ -58,6 +61,12 @@ export const signFieldWithToken = async ({
     throw new Error(`Field ${fieldId} has no recipientId`);
   }
 
+  const documentMeta = await prisma.documentMeta.findFirst({
+    where: {
+      documentId: document.id,
+    },
+  });
+
   const isSignatureField =
     field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE;
 
@@ -67,7 +76,9 @@ export const signFieldWithToken = async ({
   const typedSignature = isSignatureField && !isBase64 ? value : undefined;
 
   if (field.type === FieldType.DATE) {
-    customText = DateTime.now().toFormat('yyyy-MM-dd hh:mm a');
+    customText = DateTime.now()
+      .setZone(documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+      .toFormat(documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
   }
 
   if (isSignatureField && !signatureImageAsBase64 && !typedSignature) {

packages/lib/utils/mask-recipient-tokens-for-document.ts

@@ -0,0 +1,38 @@
+import type { User } from '@documenso/prisma/client';
+import type { DocumentWithRecipients } from '@documenso/prisma/types/document-with-recipient';
+
+export type MaskRecipientTokensForDocumentOptions<T extends DocumentWithRecipients> = {
+  document: T;
+  user?: User;
+  token?: string;
+};
+
+export const maskRecipientTokensForDocument = <T extends DocumentWithRecipients>({
+  document,
+  user,
+  token,
+}: MaskRecipientTokensForDocumentOptions<T>) => {
+  const maskedRecipients = document.Recipient.map((recipient) => {
+    if (document.userId === user?.id) {
+      return recipient;
+    }
+
+    if (recipient.email === user?.email) {
+      return recipient;
+    }
+
+    if (recipient.token === token) {
+      return recipient;
+    }
+
+    return {
+      ...recipient,
+      token: '',
+    };
+  });
+
+  return {
+    ...document,
+    Recipient: maskedRecipients,
+  };
+};

packages/lib/utils/recipient-formatter.ts

@@ -1,4 +1,4 @@
-import { Recipient } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
 
 export const recipientInitials = (text: string) =>
   text

packages/prisma/migrations/20231207134820_add_document_meta_dateformat_timezone/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "DocumentMeta" ADD COLUMN     "dateFormat" TEXT DEFAULT 'yyyy-MM-dd hh:mm a',
+ADD COLUMN     "timezone" TEXT DEFAULT 'Etc/UTC';

packages/prisma/migrations/20240115031508_add_password_to_document_meta/migration.sql

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

packages/prisma/schema.prisma

@@ -161,6 +161,9 @@ model DocumentMeta {
   id         String   @id @default(cuid())
   subject    String?
   message    String?
+  timezone   String?  @db.Text @default("Etc/UTC")
+  password String?
+  dateFormat String?  @db.Text @default("yyyy-MM-dd hh:mm a")
   documentId Int      @unique
   document   Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
 }

packages/prisma/seed/initial-seed.ts

@@ -18,6 +18,7 @@ export const seedDatabase = async () => {
     create: {
       name: 'Example User',
       email: 'example@documenso.com',
+      emailVerified: new Date(),
       password: hashSync('password'),
       roles: [Role.USER],
     },
@@ -31,6 +32,7 @@ export const seedDatabase = async () => {
     create: {
       name: 'Admin User',
       email: 'admin@documenso.com',
+      emailVerified: new Date(),
       password: hashSync('password'),
       roles: [Role.USER, Role.ADMIN],
     },

packages/prisma/types/document-with-data.ts

@@ -1,4 +1,4 @@
-import { Document, DocumentData, DocumentMeta } from '@documenso/prisma/client';
+import type { Document, DocumentData, DocumentMeta } from '@documenso/prisma/client';
 
 export type DocumentWithData = Document & {
   documentData?: DocumentData | null;

packages/prisma/types/document-with-recipient.ts

@@ -1,4 +1,4 @@
-import { Document, DocumentData, Recipient } from '@documenso/prisma/client';
+import type { Document, DocumentData, Recipient } from '@documenso/prisma/client';
 
 export type DocumentWithRecipients = Document & {
   Recipient: Recipient[];

packages/prisma/types/field-with-signature.ts

@@ -1,4 +1,4 @@
-import { Field, Signature } from '@documenso/prisma/client';
+import type { Field, Signature } from '@documenso/prisma/client';
 
 export type FieldWithSignature = Field & {
   Signature?: Signature | null;

packages/tailwind-config/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.32",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.5"
   },

packages/trpc/server/document-router/router.ts

@@ -1,6 +1,7 @@
 import { TRPCError } from '@trpc/server';
 
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
 import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
@@ -13,6 +14,7 @@ import { sendDocument } from '@documenso/lib/server-only/document/send-document'
 import { updateTitle } from '@documenso/lib/server-only/document/update-title';
 import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
 import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
+import { symmetricEncrypt } from '@documenso/lib/universal/crypto';
 
 import { authenticatedProcedure, procedure, router } from '../trpc';
 import {
@@ -24,6 +26,7 @@ import {
   ZSearchDocumentsMutationSchema,
   ZSendDocumentMutationSchema,
   ZSetFieldsForDocumentMutationSchema,
+  ZSetPasswordForDocumentMutationSchema,
   ZSetRecipientsForDocumentMutationSchema,
   ZSetTitleForDocumentMutationSchema,
 } from './schema';
@@ -175,17 +178,52 @@ export const documentRouter = router({
       }
     }),
 
+  setPasswordForDocument: authenticatedProcedure
+    .input(ZSetPasswordForDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { documentId, password } = input;
+
+        const key = DOCUMENSO_ENCRYPTION_KEY;
+
+        if (!key) {
+          throw new Error('Missing encryption key');
+        }
+
+        const securePassword = symmetricEncrypt({
+          data: password,
+          key,
+        });
+
+        await upsertDocumentMeta({
+          documentId,
+          password: securePassword,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to set the password for this document. Please try again later.',
+        });
+      }
+    }),
+
   sendDocument: authenticatedProcedure
     .input(ZSendDocumentMutationSchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { documentId, email } = input;
+        const { documentId, meta } = input;
 
-        if (email.message || email.subject) {
+        if (meta.message || meta.subject || meta.timezone || meta.dateFormat) {
           await upsertDocumentMeta({
             documentId,
-            subject: email.subject,
-            message: email.message,
+            subject: meta.subject,
+            message: meta.message,
+            dateFormat: meta.dateFormat,
+            timezone: meta.timezone,
+            userId: ctx.user.id,
           });
         }
 

packages/trpc/server/document-router/schema.ts

@@ -65,12 +65,23 @@ export type TSetFieldsForDocumentMutationSchema = z.infer<
 
 export const ZSendDocumentMutationSchema = z.object({
   documentId: z.number(),
-  email: z.object({
+  meta: z.object({
     subject: z.string(),
     message: z.string(),
+    timezone: z.string(),
+    dateFormat: z.string(),
   }),
 });
 
+export const ZSetPasswordForDocumentMutationSchema = z.object({
+  documentId: z.number(),
+  password: z.string(),
+});
+
+export type TSetPasswordForDocumentMutationSchema = z.infer<
+  typeof ZSetPasswordForDocumentMutationSchema
+>;
+
 export const ZResendDocumentMutationSchema = z.object({
   documentId: z.number(),
   recipients: z.array(z.number()).min(1),

packages/trpc/server/trpc.ts

@@ -3,7 +3,7 @@ import SuperJSON from 'superjson';
 
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 
-import { TrpcContext } from './context';
+import type { TrpcContext } from './context';
 
 const t = initTRPC.context<TrpcContext>().create({
   transformer: SuperJSON,

packages/ui/components/document/document-dialog.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
-import { DocumentData } from '@documenso/prisma/client';
+import type { DocumentData } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
 import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';

packages/ui/components/document/document-download-button.tsx

@@ -5,11 +5,11 @@ import { useState } from 'react';
 
 import { Download } from 'lucide-react';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { DocumentData } from '@documenso/prisma/client';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { Button } from '../../primitives/button';
-import { useToast } from '../../primitives/use-toast';
 
 export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
@@ -24,43 +24,29 @@ export const DocumentDownloadButton = ({
   disabled,
   ...props
 }: DownloadButtonProps) => {
-  const { toast } = useToast();
-
   const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
 
   const onDownloadClick = async () => {
     try {
       setIsLoading(true);
 
       if (!documentData) {
+        setIsLoading(false);
         return;
       }
 
-      const bytes = await getFile(documentData);
-
-      const blob = new Blob([bytes], {
-        type: 'application/pdf',
+      await downloadPDF({ documentData, fileName }).then(() => {
+        setIsLoading(false);
       });
-
-      const link = window.document.createElement('a');
-      const baseTitle = fileName?.includes('.pdf') ? fileName.split('.pdf')[0] : fileName;
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
     } catch (err) {
-      console.error(err);
+      setIsLoading(false);
 
       toast({
-        title: 'Error',
+        title: 'Something went wrong',
         description: 'An error occurred while downloading your document.',
         variant: 'destructive',
       });
-    } finally {
-      setIsLoading(false);
     }
   };
 

packages/ui/lib/utils.ts

@@ -1,4 +1,5 @@
-import { ClassValue, clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {

packages/ui/package.json

@@ -70,6 +70,7 @@
     "react-rnd": "^10.4.1",
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
-    "ts-pattern": "^5.0.5"
+    "ts-pattern": "^5.0.5",
+    "zod": "^3.22.4"
   }
 }

packages/ui/primitives/combobox.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 
-import { Check, ChevronsUpDown } from 'lucide-react';
-
-import { Role } from '@documenso/prisma/client';
+import { Check, ChevronDown } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 import { Button } from './button';
@@ -10,34 +8,31 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 type ComboboxProps = {
-  listValues: string[];
-  onChange: (_values: string[]) => void;
+  className?: string;
+  options: string[];
+  value: string | null;
+  onChange: (_value: string | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
 };
 
-const Combobox = ({ listValues, onChange }: ComboboxProps) => {
+const Combobox = ({
+  className,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+}: ComboboxProps) => {
   const [open, setOpen] = React.useState(false);
-  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
-  const dbRoles = Object.values(Role);
 
-  React.useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
+  const onOptionSelected = (newValue: string) => {
+    onChange(newValue === value ? null : newValue);
     setOpen(false);
   };
 
+  const placeholderValue = placeholder ?? 'Select an option';
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -45,26 +40,28 @@ const Combobox = ({ listValues, onChange }: ComboboxProps) => {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-[200px] justify-between"
+          className={cn('my-2 w-full justify-between', className)}
+          disabled={disabled}
         >
-          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          {value ? value : placeholderValue}
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+
+      <PopoverContent className="p-0" side="bottom" align="start">
         <Command>
-          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandInput placeholder={value || placeholderValue} />
+
           <CommandEmpty>No value found.</CommandEmpty>
-          <CommandGroup>
-            {allRoles.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+
+          <CommandGroup className="max-h-[250px] overflow-y-auto">
+            {options.map((option, index) => (
+              <CommandItem key={index} onSelect={() => onOptionSelected(option)}>
                 <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
+                  className={cn('mr-2 h-4 w-4', option === value ? 'opacity-100' : 'opacity-0')}
                 />
-                {value}
+
+                {option}
               </CommandItem>
             ))}
           </CommandGroup>

packages/ui/primitives/command.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { DialogProps } from '@radix-ui/react-dialog';
+import type { DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 

packages/ui/primitives/dialog.tsx

@@ -20,7 +20,7 @@ const DialogPortal = ({
 }: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' | 'center' }) => (
   <DialogPrimitive.Portal {...props}>
     <div
-      className={cn('fixed inset-0 z-[9999] flex justify-center sm:items-center', {
+      className={cn('fixed inset-0 z-[1000] flex justify-center sm:items-center', {
         'items-start': position === 'start',
         'items-end': position === 'end',
         'items-center': position === 'center',

packages/ui/primitives/document-dropzone.tsx

@@ -87,6 +87,7 @@ const DocumentDescription = {
 export type DocumentDropzoneProps = {
   className?: string;
   disabled?: boolean;
+  disabledMessage?: string;
   onDrop?: (_file: File) => void | Promise<void>;
   type?: 'document' | 'template';
   [key: string]: unknown;
@@ -96,6 +97,7 @@ export const DocumentDropzone = ({
   className,
   onDrop,
   disabled,
+  disabledMessage = 'You cannot upload documents at this time.',
   type = 'document',
   ...props
 }: DocumentDropzoneProps) => {
@@ -115,11 +117,12 @@ export const DocumentDropzone = ({
 
   return (
     <motion.div
-      className={cn('flex', className)}
+      className={cn('flex aria-disabled:cursor-not-allowed', className)}
       variants={DocumentDropzoneContainerVariants}
       initial="initial"
       animate="animate"
       whileHover="hover"
+      aria-disabled={disabled}
     >
       <Card
         role="button"
@@ -137,8 +140,8 @@ export const DocumentDropzone = ({
           {/* <FilePlus strokeWidth="1px" className="h-16 w-16"/> */}
           <div className="flex">
             <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={DocumentDropzoneCardLeftVariants}
+              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+              variants={!disabled ? DocumentDropzoneCardLeftVariants : undefined}
             >
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
@@ -147,7 +150,7 @@ export const DocumentDropzone = ({
 
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={DocumentDropzoneCardCenterVariants}
+              variants={!disabled ? DocumentDropzoneCardCenterVariants : undefined}
             >
               <Plus
                 strokeWidth="2px"
@@ -157,7 +160,7 @@ export const DocumentDropzone = ({
 
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={DocumentDropzoneCardRightVariants}
+              variants={!disabled ? DocumentDropzoneCardRightVariants : undefined}
             >
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
@@ -171,7 +174,9 @@ export const DocumentDropzone = ({
             {DocumentDescription[type].headline}
           </p>
 
-          <p className="text-muted-foreground/80 mt-1 text-sm ">Drag & drop your document here.</p>
+          <p className="text-muted-foreground/80 mt-1 text-sm">
+            {disabled ? disabledMessage : 'Drag & drop your document here.'}
+          </p>
         </CardContent>
       </Card>
     </motion.div>

packages/ui/primitives/document-flow/add-signature.tsx

@@ -7,11 +7,13 @@ import { DateTime } from 'luxon';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { Field } from '@documenso/prisma/client';
 import { FieldType } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 
 import { FieldToolTip } from '../../components/field/field-tooltip';
 import { cn } from '../../lib/utils';
@@ -34,7 +36,6 @@ import {
   SinglePlayerModeCustomTextField,
   SinglePlayerModeSignatureField,
 } from './single-player-mode-fields';
-import type { DocumentFlowStep } from './types';
 
 export type AddSignatureFormProps = {
   defaultValues?: TAddSignatureFormSchema;
@@ -140,7 +141,7 @@ export const AddSignatureFormPartial = ({
     return match(field.type)
       .with(FieldType.DATE, () => ({
         ...field,
-        customText: DateTime.now().toFormat('yyyy-MM-dd hh:mm a'),
+        customText: DateTime.now().toFormat(DEFAULT_DOCUMENT_DATE_FORMAT),
         inserted: true,
       }))
       .with(FieldType.EMAIL, () => ({

packages/ui/primitives/document-flow/add-subject.tsx

@@ -1,11 +1,30 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useEffect } from 'react';
 
+import { Controller, useForm } from 'react-hook-form';
+
+import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
+import { SendStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
+import { Combobox } from '../combobox';
 import { FormErrorMessage } from '../form/form-error-message';
 import { Input } from '../input';
 import { Label } from '../label';
@@ -31,20 +50,25 @@ export type AddSubjectFormProps = {
 
 export const AddSubjectFormPartial = ({
   documentFlow,
-  recipients: _recipients,
-  fields: _fields,
+  recipients: recipients,
+  fields: fields,
   document,
   onSubmit,
 }: AddSubjectFormProps) => {
   const {
+    control,
     register,
     handleSubmit,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, touchedFields },
+    getValues,
+    setValue,
   } = useForm<TAddSubjectFormSchema>({
     defaultValues: {
-      email: {
+      meta: {
         subject: document.documentMeta?.subject ?? '',
         message: document.documentMeta?.message ?? '',
+        timezone: document.documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+        dateFormat: document.documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
       },
     },
   });
@@ -52,6 +76,20 @@ export const AddSubjectFormPartial = ({
   const onFormSubmit = handleSubmit(onSubmit);
   const { currentStep, totalSteps, previousStep } = useStep();
 
+  const hasDateField = fields.find((field) => field.type === 'DATE');
+
+  const documentHasBeenSent = recipients.some(
+    (recipient) => recipient.sendStatus === SendStatus.SENT,
+  );
+
+  // We almost always want to set the timezone to the user's local timezone to avoid confusion
+  // when the document is signed.
+  useEffect(() => {
+    if (!touchedFields.meta?.timezone && !documentHasBeenSent) {
+      setValue('meta.timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+  }, [documentHasBeenSent, setValue, touchedFields.meta?.timezone]);
+
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -71,10 +109,10 @@ export const AddSubjectFormPartial = ({
                 // placeholder="Subject"
                 className="bg-background mt-2"
                 disabled={isSubmitting}
-                {...register('email.subject')}
+                {...register('meta.subject')}
               />
 
-              <FormErrorMessage className="mt-2" error={errors.email?.subject} />
+              <FormErrorMessage className="mt-2" error={errors.meta?.subject} />
             </div>
 
             <div>
@@ -86,14 +124,12 @@ export const AddSubjectFormPartial = ({
                 id="message"
                 className="bg-background mt-2 h-32 resize-none"
                 disabled={isSubmitting}
-                {...register('email.message')}
+                {...register('meta.message')}
               />
 
               <FormErrorMessage
                 className="mt-2"
-                error={
-                  typeof errors.email?.message !== 'string' ? errors.email?.message : undefined
-                }
+                error={typeof errors.meta?.message !== 'string' ? errors.meta?.message : undefined}
               />
             </div>
 
@@ -123,6 +159,65 @@ export const AddSubjectFormPartial = ({
                 </li>
               </ul>
             </div>
+
+            {hasDateField && (
+              <Accordion type="multiple" className="mt-8 border-none">
+                <AccordionItem value="advanced-options" className="border-none">
+                  <AccordionTrigger className="mb-2 border-b text-left hover:no-underline">
+                    Advanced Options
+                  </AccordionTrigger>
+
+                  <AccordionContent className="text-muted-foreground -mx-1 flex max-w-prose flex-col px-1 text-sm leading-relaxed">
+                    <div className="mt-2 flex flex-col">
+                      <Label htmlFor="date-format">
+                        Date Format <span className="text-muted-foreground">(Optional)</span>
+                      </Label>
+
+                      <Controller
+                        control={control}
+                        name={`meta.dateFormat`}
+                        disabled={documentHasBeenSent}
+                        render={({ field: { value, onChange, disabled } }) => (
+                          <Select value={value} onValueChange={onChange} disabled={disabled}>
+                            <SelectTrigger className="bg-background mt-2">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent>
+                              {DATE_FORMATS.map((format) => (
+                                <SelectItem key={format.key} value={format.value}>
+                                  {format.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        )}
+                      />
+                    </div>
+
+                    <div className="mt-4 flex flex-col">
+                      <Label htmlFor="time-zone">
+                        Time Zone <span className="text-muted-foreground">(Optional)</span>
+                      </Label>
+
+                      <Controller
+                        control={control}
+                        name={`meta.timezone`}
+                        render={({ field: { value, onChange } }) => (
+                          <Combobox
+                            className="bg-background"
+                            options={TIME_ZONES}
+                            value={value}
+                            onChange={(value) => value && onChange(value)}
+                            disabled={documentHasBeenSent}
+                          />
+                        )}
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            )}
           </div>
         </div>
       </DocumentFlowFormContainerContent>

packages/ui/primitives/document-flow/add-subject.types.ts

@@ -1,9 +1,14 @@
 import { z } from 'zod';
 
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+
 export const ZAddSubjectFormSchema = z.object({
-  email: z.object({
+  meta: z.object({
     subject: z.string(),
     message: z.string(),
+    timezone: z.string().optional().default(DEFAULT_DOCUMENT_TIME_ZONE),
+    dateFormat: z.string().optional().default(DEFAULT_DOCUMENT_DATE_FORMAT),
   }),
 });
 

packages/ui/primitives/document-flow/add-title.tsx

@@ -64,7 +64,7 @@ export const AddTitleFormPartial = ({
 
               <Input
                 id="title"
-                className="bg-background mt-2"
+                className="bg-background my-2"
                 disabled={isSubmitting}
                 {...register('title', { required: "Title can't be empty" })}
               />

packages/ui/primitives/document-flow/field-item.tsx

@@ -121,6 +121,7 @@ export const FieldItem = ({
         <button
           className="text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border"
           onClick={() => onRemove?.()}
+          onTouchEnd={() => onRemove?.()}
         >
           <Trash className="h-4 w-4" />
         </button>

packages/ui/primitives/document-password-dialog.tsx

@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button } from './button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
+import { Form, FormControl, FormField, FormItem, FormMessage } from './form/form';
+import { Input } from './input';
+
+const ZPasswordDialogFormSchema = z.object({
+  password: z.string(),
+});
+
+type TPasswordDialogFormSchema = z.infer<typeof ZPasswordDialogFormSchema>;
+
+type PasswordDialogProps = {
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  defaultPassword?: string;
+  onPasswordSubmit?: (password: string) => void;
+  isError?: boolean;
+};
+
+export const PasswordDialog = ({
+  open,
+  onOpenChange,
+  defaultPassword,
+  onPasswordSubmit,
+  isError,
+}: PasswordDialogProps) => {
+  const form = useForm<TPasswordDialogFormSchema>({
+    defaultValues: {
+      password: defaultPassword ?? '',
+    },
+    resolver: zodResolver(ZPasswordDialogFormSchema),
+  });
+
+  const onFormSubmit = ({ password }: TPasswordDialogFormSchema) => {
+    onPasswordSubmit?.(password);
+  };
+
+  useEffect(() => {
+    if (isError) {
+      form.setError('password', {
+        type: 'manual',
+        message: 'The password you have entered is incorrect. Please try again.',
+      });
+    }
+  }, [form, isError]);
+
+  return (
+    <Dialog open={open}>
+      <DialogContent className="w-full max-w-md">
+        <DialogHeader>
+          <DialogTitle>Password Required</DialogTitle>
+
+          <DialogDescription className="text-muted-foreground">
+            This document is password protected. Please enter the password to view the document.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex flex-wrap items-start justify-between gap-4">
+              <FormField
+                name="password"
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem className="relative flex-1">
+                    <FormControl>
+                      <Input
+                        type="password"
+                        className="bg-background"
+                        placeholder="Enter password"
+                        autoComplete="off"
+                        {...field}
+                      />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div>
+                <Button>Submit</Button>
+              </div>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/ui/primitives/multiselect-combobox.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { Role } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+type ComboboxProps = {
+  listValues: string[];
+  onChange: (_values: string[]) => void;
+};
+
+const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
+  const [open, setOpen] = React.useState(false);
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
+  const dbRoles = Object.values(Role);
+
+  React.useEffect(() => {
+    setSelectedValues(listValues);
+  }, [listValues]);
+
+  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
+
+  const handleSelect = (currentValue: string) => {
+    let newSelectedValues;
+    if (selectedValues.includes(currentValue)) {
+      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
+    } else {
+      newSelectedValues = [...selectedValues, currentValue];
+    }
+
+    setSelectedValues(newSelectedValues);
+    onChange(newSelectedValues);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={selectedValues.join(', ')} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {allRoles.map((value: string, i: number) => (
+              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {value}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { MultiSelectCombobox };

packages/ui/primitives/pdf-viewer.tsx

@@ -3,16 +3,19 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Loader } from 'lucide-react';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { type PDFDocumentProxy, PasswordResponses } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
+import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import type { DocumentData } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 
 import { cn } from '../lib/utils';
+import { PasswordDialog } from './document-password-dialog';
 import { useToast } from './use-toast';
 
 export type LoadedPDFDocument = PDFDocumentProxy;
@@ -43,6 +46,9 @@ const PDFLoader = () => (
 export type PDFViewerProps = {
   className?: string;
   documentData: DocumentData;
+  document?: DocumentWithData;
+  password?: string | null;
+  onPasswordSubmit?: (password: string) => void | Promise<void>;
   onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
   onPageClick?: OnPDFViewerPageClick;
   [key: string]: unknown;
@@ -51,6 +57,8 @@ export type PDFViewerProps = {
 export const PDFViewer = ({
   className,
   documentData,
+  password: defaultPassword,
+  onPasswordSubmit,
   onDocumentLoad,
   onPageClick,
   ...props
@@ -59,7 +67,11 @@ export const PDFViewer = ({
 
   const $el = useRef<HTMLDivElement>(null);
 
+  const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
+
   const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
+  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
+  const [isPasswordError, setIsPasswordError] = useState(false);
   const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);
 
   const [width, setWidth] = useState(0);
@@ -169,57 +181,87 @@ export const PDFViewer = ({
           <PDFLoader />
         </div>
       ) : (
-        <PDFDocument
-          file={documentBytes.buffer}
-          className={cn('w-full overflow-hidden rounded', {
-            'h-[80vh] max-h-[60rem]': numPages === 0,
-          })}
-          onLoadSuccess={(d) => onDocumentLoaded(d)}
-          // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
-          // Therefore we add some additional custom error handling.
-          onSourceError={() => {
-            setPdfError(true);
-          }}
-          externalLinkTarget="_blank"
-          loading={
-            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-              {pdfError ? (
+        <>
+          <PDFDocument
+            file={documentBytes.buffer}
+            className={cn('w-full overflow-hidden rounded', {
+              'h-[80vh] max-h-[60rem]': numPages === 0,
+            })}
+            onPassword={(callback, reason) => {
+              // If the document already has a password, we don't need to ask for it again.
+              if (defaultPassword && reason !== PasswordResponses.INCORRECT_PASSWORD) {
+                callback(defaultPassword);
+                return;
+              }
+
+              setIsPasswordModalOpen(true);
+
+              passwordCallbackRef.current = callback;
+
+              match(reason)
+                .with(PasswordResponses.NEED_PASSWORD, () => setIsPasswordError(false))
+                .with(PasswordResponses.INCORRECT_PASSWORD, () => setIsPasswordError(true));
+            }}
+            onLoadSuccess={(d) => onDocumentLoaded(d)}
+            // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
+            // Therefore we add some additional custom error handling.
+            onSourceError={() => {
+              setPdfError(true);
+            }}
+            externalLinkTarget="_blank"
+            loading={
+              <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
+                {pdfError ? (
+                  <div className="text-muted-foreground text-center">
+                    <p>Something went wrong while loading the document.</p>
+                    <p className="mt-1 text-sm">Please try again or contact our support.</p>
+                  </div>
+                ) : (
+                  <PDFLoader />
+                )}
+              </div>
+            }
+            error={
+              <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
                 <div className="text-muted-foreground text-center">
                   <p>Something went wrong while loading the document.</p>
                   <p className="mt-1 text-sm">Please try again or contact our support.</p>
                 </div>
-              ) : (
-                <PDFLoader />
-              )}
-            </div>
-          }
-          error={
-            <div className="dark:bg-background flex h-[80vh] max-h-[60rem] flex-col items-center justify-center bg-white/50">
-              <div className="text-muted-foreground text-center">
-                <p>Something went wrong while loading the document.</p>
-                <p className="mt-1 text-sm">Please try again or contact our support.</p>
               </div>
-            </div>
-          }
-        >
-          {Array(numPages)
-            .fill(null)
-            .map((_, i) => (
-              <div
-                key={i}
-                className="border-border my-8 overflow-hidden rounded border will-change-transform first:mt-0 last:mb-0"
-              >
-                <PDFPage
-                  pageNumber={i + 1}
-                  width={width}
-                  renderAnnotationLayer={false}
-                  renderTextLayer={false}
-                  loading={() => ''}
-                  onClick={(e) => onDocumentPageClick(e, i + 1)}
-                />
-              </div>
-            ))}
-        </PDFDocument>
+            }
+          >
+            {Array(numPages)
+              .fill(null)
+              .map((_, i) => (
+                <div
+                  key={i}
+                  className="border-border my-8 overflow-hidden rounded border will-change-transform first:mt-0 last:mb-0"
+                >
+                  <PDFPage
+                    pageNumber={i + 1}
+                    width={width}
+                    renderAnnotationLayer={false}
+                    renderTextLayer={false}
+                    loading={() => ''}
+                    onClick={(e) => onDocumentPageClick(e, i + 1)}
+                  />
+                </div>
+              ))}
+          </PDFDocument>
+
+          <PasswordDialog
+            open={isPasswordModalOpen}
+            onOpenChange={setIsPasswordModalOpen}
+            onPasswordSubmit={(password) => {
+              passwordCallbackRef.current?.(password);
+
+              setIsPasswordModalOpen(false);
+
+              void onPasswordSubmit?.(password);
+            }}
+            isError={isPasswordError}
+          />
+        </>
       )}
     </div>
   );

packages/ui/primitives/select.tsx

@@ -42,7 +42,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-popover text-popover-foreground animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        'bg-popover text-popover-foreground animate-in fade-in-80 relative z-[1001] min-w-[8rem] overflow-hidden rounded-md border shadow-md',
         position === 'popper' && 'translate-y-1',
         className,
       )}

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -3,6 +3,7 @@
 import type { HTMLAttributes, MouseEvent, PointerEvent, TouchEvent } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { Undo2 } from 'lucide-react';
 import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
@@ -27,7 +28,8 @@ export const SignaturePad = ({
   const $el = useRef<HTMLCanvasElement>(null);
 
   const [isPressed, setIsPressed] = useState(false);
-  const [points, setPoints] = useState<Point[]>([]);
+  const [lines, setLines] = useState<Point[][]>([]);
+  const [currentLine, setCurrentLine] = useState<Point[]>([]);
 
   const perfectFreehandOptions = useMemo(() => {
     const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@@ -52,26 +54,7 @@ export const SignaturePad = ({
 
     const point = Point.fromEvent(event, DPI, $el.current);
 
-    const newPoints = [...points, point];
-
-    setPoints(newPoints);
-
-    if ($el.current) {
-      const ctx = $el.current.getContext('2d');
-
-      if (ctx) {
-        ctx.save();
-
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = 'high';
-
-        const pathData = new Path2D(
-          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
-        );
-
-        ctx.fill(pathData);
-      }
-    }
+    setCurrentLine([point]);
   };
 
   const onMouseMove = (event: MouseEvent | PointerEvent | TouchEvent) => {
@@ -85,31 +68,36 @@ export const SignaturePad = ({
 
     const point = Point.fromEvent(event, DPI, $el.current);
 
-    if (point.distanceTo(points[points.length - 1]) > 5) {
-      const newPoints = [...points, point];
-
-      setPoints(newPoints);
+    if (point.distanceTo(currentLine[currentLine.length - 1]) > 5) {
+      setCurrentLine([...currentLine, point]);
 
+      // Update the canvas here to draw the lines
       if ($el.current) {
         const ctx = $el.current.getContext('2d');
 
         if (ctx) {
           ctx.restore();
-
           ctx.imageSmoothingEnabled = true;
           ctx.imageSmoothingQuality = 'high';
 
-          const pathData = new Path2D(
-            getSvgPathFromStroke(getStroke(points, perfectFreehandOptions)),
-          );
+          lines.forEach((line) => {
+            const pathData = new Path2D(
+              getSvgPathFromStroke(getStroke(line, perfectFreehandOptions)),
+            );
 
+            ctx.fill(pathData);
+          });
+
+          const pathData = new Path2D(
+            getSvgPathFromStroke(getStroke([...currentLine, point], perfectFreehandOptions)),
+          );
           ctx.fill(pathData);
         }
       }
     }
   };
 
-  const onMouseUp = (event: MouseEvent | PointerEvent | TouchEvent, addPoint = true) => {
+  const onMouseUp = (event: MouseEvent | PointerEvent | TouchEvent, addLine = true) => {
     if (event.cancelable) {
       event.preventDefault();
     }
@@ -118,15 +106,16 @@ export const SignaturePad = ({
 
     const point = Point.fromEvent(event, DPI, $el.current);
 
-    const newPoints = [...points];
+    const newLines = [...lines];
 
-    if (addPoint) {
-      newPoints.push(point);
-
-      setPoints(newPoints);
+    if (addLine && currentLine.length > 0) {
+      newLines.push([...currentLine, point]);
+      setCurrentLine([]);
     }
 
-    if ($el.current && newPoints.length > 0) {
+    setLines(newLines);
+
+    if ($el.current && newLines.length > 0) {
       const ctx = $el.current.getContext('2d');
 
       if (ctx) {
@@ -135,19 +124,18 @@ export const SignaturePad = ({
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
 
-        const pathData = new Path2D(
-          getSvgPathFromStroke(getStroke(newPoints, perfectFreehandOptions)),
-        );
+        newLines.forEach((line) => {
+          const pathData = new Path2D(
+            getSvgPathFromStroke(getStroke(line, perfectFreehandOptions)),
+          );
+          ctx.fill(pathData);
+        });
 
-        ctx.fill(pathData);
+        onChange?.($el.current.toDataURL());
 
         ctx.save();
       }
-
-      onChange?.($el.current.toDataURL());
     }
-
-    setPoints([]);
   };
 
   const onMouseEnter = (event: MouseEvent | PointerEvent | TouchEvent) => {
@@ -177,7 +165,29 @@ export const SignaturePad = ({
 
     onChange?.(null);
 
-    setPoints([]);
+    setLines([]);
+    setCurrentLine([]);
+  };
+
+  const onUndoClick = () => {
+    if (lines.length === 0) {
+      return;
+    }
+
+    const newLines = [...lines];
+    newLines.pop(); // Remove the last line
+    setLines(newLines);
+
+    // Clear the canvas
+    if ($el.current) {
+      const ctx = $el.current.getContext('2d');
+      ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+
+      newLines.forEach((line) => {
+        const pathData = new Path2D(getSvgPathFromStroke(getStroke(line, perfectFreehandOptions)));
+        ctx?.fill(pathData);
+      });
+    }
   };
 
   useEffect(() => {
@@ -217,15 +227,29 @@ export const SignaturePad = ({
         {...props}
       />
 
-      <div className="absolute bottom-4 right-4">
+      <div className="absolute bottom-4 right-4 flex gap-2">
         <button
           type="button"
-          className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+          className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
           onClick={() => onClearClick()}
         >
           Clear Signature
         </button>
       </div>
+
+      {lines.length > 0 && (
+        <div className="absolute bottom-4 left-4 flex gap-2">
+          <button
+            type="button"
+            title="undo"
+            className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+            onClick={() => onUndoClick()}
+          >
+            <Undo2 className="h-4 w-4" />
+            <span className="sr-only">Undo</span>
+          </button>
+        </div>
+      )}
     </div>
   );
 };

packages/ui/primitives/theme-switcher.tsx

@@ -18,7 +18,7 @@ export const ThemeSwitcher = () => {
       >
         {isMounted && theme === THEMES_TYPE.LIGHT && (
           <motion.div
-            className="bg-background absolute inset-0 rounded-full mix-blend-exclusion"
+            className="bg-background absolute inset-0 rounded-full mix-blend-color-burn"
             layoutId="selected-theme"
           />
         )}

packages/ui/primitives/toast.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import * as ToastPrimitives from '@radix-ui/react-toast';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 
 import { cn } from '../lib/utils';
@@ -15,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[9999] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-[1001] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
       className,
     )}
     {...props}

packages/ui/primitives/use-toast.ts

@@ -1,7 +1,7 @@
 // Inspired by react-hot-toast library
 import * as React from 'react';
 
-import { ToastActionElement, type ToastProps } from './toast';
+import type { ToastActionElement, ToastProps } from './toast';
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;

railway.toml

@@ -0,0 +1,4 @@
+[build]
+
+builder = "DOCKERFILE"
+dockerfilePath = "/docker/Dockerfile"