Merge branch 'feat/refresh' into feat/admin-ui-manage-instance

fix: add cascade delete for share links

.devcontainer/on-create.sh

@@ -9,10 +9,5 @@ npm install
 # Copy the env file
 cp .env.example .env
 
-# Source the env file, export the variables
-set -a
-source .env
-set +a
-
 # Run the migrations
-npm run -w @documenso/prisma prisma:migrate-dev
+npm run prisma:migrate-dev

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,50 @@
+---
+name: Bug Report
+about: Create a bug report to help us improve
+---
+
+<!--- Please provide a general summary of the issue in the Title above -->
+
+## Issue Description
+
+<!--- Please provide a clear and concise description of the problem. -->
+
+## Steps to Reproduce
+
+<!--- Please provide step-by-step instructions to reproduce the issue. -->
+<!--- Include code snippets, error messages, and any other relevant information. -->
+
+1. Step 1
+2. Step 2
+3. ...
+
+## Expected Behavior
+
+<!--- Describe what you expected to happen. -->
+
+## Current Behavior
+
+<!--- Describe what is currently happening. -->
+
+## Screenshots (optional)
+
+<!--- If applicable, add screenshots to help explain the issue. -->
+
+## Environment
+
+<!--- Please provide information about your environment, such as operating system, browser, version, etc. -->
+
+- OS: [e.g., Windows 10]
+- Browser: [e.g., Chrome, Firefox]
+- Version: [e.g., 2.0.1]
+
+## Checklist
+
+<!--- Please check the boxes that apply to this issue report. -->
+<!--- You can add or remove items as needed. -->
+
+- [ ] I have searched the existing issues to make sure this is not a duplicate.
+- [ ] I have provided steps to reproduce the issue.
+- [ ] I have included relevant environment information.
+- [ ] I have included any relevant screenshots.
+- [ ] I understand that this is a voluntary contribution and that there is no guarantee of resolution.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,41 @@
+---
+name: Feature Request
+about: Suggest a new idea or enhancement for this project
+---
+
+<!--- Please provide a clear and concise title for your feature request -->
+
+## Feature Description
+
+<!--- Describe the feature you are requesting in detail. -->
+<!--- Explain what problem it solves or what value it adds to the project. -->
+
+## Use Case
+
+<!--- Provide a scenario or use case where this feature would be beneficial. -->
+<!--- Explain how users would interact with this feature and why it's important. -->
+
+## Proposed Solution
+
+<!--- If you have an idea of how this feature could be implemented, describe it here. -->
+<!--- Include any technical details, UI/UX considerations, or design suggestions. -->
+
+## Alternatives (optional)
+
+<!--- Are there any alternative ways to achieve the same goal? -->
+<!--- Describe other approaches that could be considered if this feature is not implemented. -->
+
+## Additional Context
+
+<!--- Add any additional context or information that might be relevant to the feature request. -->
+
+## Checklist
+
+<!--- Please check the boxes that apply to this feature request. -->
+<!--- You can add or remove items as needed. -->
+
+- [ ] I have searched the existing feature requests to make sure this is not a duplicate.
+- [ ] I have provided a detailed description of the requested feature.
+- [ ] I have explained the use case or scenario for this feature.
+- [ ] I have included any relevant technical details or design suggestions.
+- [ ] I understand that this is a suggestion and that there is no guarantee of implementation.

.github/ISSUE_TEMPLATE/improvement.md

@@ -0,0 +1,41 @@
+---
+name: General Improvement
+about: Suggest a minor enhancement or improvement for this project
+---
+
+<!--- Please provide a clear and concise title for your improvement suggestion -->
+
+## Improvement Description
+
+<!--- Describe the improvement you are suggesting in detail. -->
+<!--- Explain what specific aspect of the project it addresses or enhances. -->
+
+## Rationale
+
+<!--- Explain why this improvement would be beneficial. -->
+<!--- Share any context, pain points, or reasons for suggesting this change. -->
+
+## Proposed Solution
+
+<!--- 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. -->
+
+## Alternatives (optional)
+
+<!--- Are there any alternative approaches to achieve the same improvement? -->
+<!--- Describe other ways to address the issue or enhance the project. -->
+
+## Additional Context
+
+<!--- Add any additional context or information that might be relevant to the improvement suggestion. -->
+
+## Checklist
+
+<!--- Please check the boxes that apply to this improvement suggestion. -->
+<!--- You can add or remove items as needed. -->
+
+- [ ] I have searched the existing issues and improvement suggestions to avoid duplication.
+- [ ] I have provided a clear description of the improvement being suggested.
+- [ ] I have explained the rationale behind this improvement.
+- [ ] I have included any relevant technical details or design suggestions.
+- [ ] I understand that this is a suggestion and that there is no guarantee of implementation.

.github/PULL_REQUEST_TEMPLATE/generic.md

@@ -0,0 +1,49 @@
+---
+name: Pull Request
+about: Submit changes to the project for review and inclusion
+---
+
+## Description
+
+<!--- Describe the changes introduced by this pull request. -->
+<!--- Explain what problem it solves or what feature/fix it adds. -->
+
+## Related Issue
+
+<!--- If this pull request is related to a specific issue, reference it here using #issue_number. -->
+<!--- For example, "Fixes #123" or "Addresses #456". -->
+
+## Changes Made
+
+<!--- Provide a summary of the changes made in this pull request. -->
+<!--- Include any relevant technical details or architecture changes. -->
+
+- Change 1
+- Change 2
+- ...
+
+## Testing Performed
+
+<!--- Describe the testing that you have performed to validate these changes. -->
+<!--- Include information about test cases, testing environments, and results. -->
+
+- Tested feature X in scenario Y.
+- Ran unit tests for component Z.
+- Tested on browsers A, B, and C.
+- ...
+
+## Checklist
+
+<!--- Please check the boxes that apply to this pull request. -->
+<!--- You can add or remove items as needed. -->
+
+- [ ] I have tested these changes locally and they work as expected.
+- [ ] I have added/updated tests that prove the effectiveness of these changes.
+- [ ] I have updated the documentation to reflect these changes, if applicable.
+- [ ] I have followed the project's coding style guidelines.
+- [ ] I have addressed the code review feedback from the previous submission, if applicable.
+
+## Additional Notes
+
+<!--- Provide any additional context or notes for the reviewers. -->
+<!--- This might include details about design decisions, potential concerns, or anything else relevant. -->

.github/PULL_REQUEST_TEMPLATE/test-addition.md

@@ -0,0 +1,40 @@
+---
+name: Test Addition
+about: Submit a new test, either unit or end-to-end (E2E), for review and inclusion
+---
+
+## Description
+
+<!--- Provide a clear and concise description of the new test you are adding. -->
+<!--- Explain the purpose of the test and what it aims to validate. -->
+
+## Related Issue
+
+<!--- If this test addition is related to a specific issue, reference it here using #issue_number. -->
+<!--- For example, "Fixes #123" or "Addresses #456". -->
+
+## Test Details
+
+<!--- Describe the details of the test you're adding. -->
+<!--- Include information about inputs, expected outputs, and any specific scenarios. -->
+
+- Test Name: Name of the test
+- Type: [Unit / E2E]
+- Description: Brief description of what the test checks
+- Inputs: What inputs the test uses (if applicable)
+- Expected Output: What output or behavior the test expects
+
+## Checklist
+
+<!--- Please check the boxes that apply to this pull request. -->
+<!--- You can add or remove items as needed. -->
+
+- [ ] I have written the new test and ensured it works as intended.
+- [ ] I have added necessary documentation to explain the purpose of the test.
+- [ ] I have followed the project's testing guidelines and coding style.
+- [ ] I have addressed any review feedback from previous submissions, if applicable.
+
+## Additional Notes
+
+<!--- Provide any additional context or notes for the reviewers. -->
+<!--- This might include explanations about the testing approach or any potential concerns. -->

.github/dependabot.yml

@@ -9,7 +9,7 @@ updates:
     labels:
       - "ci dependencies"
       - "ci"
-    open-pull-requests-limit: 2
+    open-pull-requests-limit: 0
 
   - package-ecosystem: "npm"
     directory: "/apps/marketing"
@@ -19,7 +19,7 @@ updates:
     labels:
       - "npm dependencies"
       - "frontend"
-    open-pull-requests-limit: 2
+    open-pull-requests-limit: 0
 
   - package-ecosystem: "npm"
     directory: "/apps/web"
@@ -29,4 +29,4 @@ updates:
     labels:
       - "npm dependencies"
       - "frontend"
-    open-pull-requests-limit: 2
+    open-pull-requests-limit: 0

.gitpod.yml

@@ -0,0 +1,55 @@
+tasks:
+  - init: |
+      npm i &&
+      npm run dx:up &&
+      cp .env.example .env &&
+      set -a; source .env &&
+      export NEXTAUTH_URL="$(gp url 3000)" &&
+      export NEXT_PUBLIC_WEBAPP_URL="$(gp url 3000)" &&
+      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)" 
+    command: npm run d
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-preview
+  - port: 3001
+    visibility: public
+    onOpen: open-preview
+  - port: 9000
+    visibility: public
+    onOpen: ignore
+  - port: 1100
+    visibility: private
+    onOpen: ignore
+  - port: 2500
+    visibility: private
+    onOpen: ignore
+  - port: 54320 
+    visibility: private 
+    onOpen: ignore
+
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: true
+
+vscode:
+  extensions:
+    - aaron-bond.better-comments
+    - bradlc.vscode-tailwindcss
+    - dbaeumer.vscode-eslint
+    - esbenp.prettier-vscode
+    - mikestead.dotenv
+    - unifiedjs.vscode-mdx
+    - GitHub.copilot-chat
+    - GitHub.copilot-labs
+    - GitHub.copilot
+    - GitHub.vscode-pull-request-github
+    - Prisma.prisma
+    - VisualStudioExptTeam.vscodeintellicode

CONTRIBUTING.md

@@ -5,8 +5,8 @@ If you plan to contribute to Documenso, please take a moment to feel awesome ✨
 ## Before getting started
 
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/documenso/documenso/pulls) or [issues](https://github.com/documenso/documenso/issues) for an open or closed item that relates to your submission.
-- Select and issue from [here](https://github.com/documenso/documenso/issues) or create a new one
-- Consider the results from the discussion in the issue
+- Select an issue from [here](https://github.com/documenso/documenso/issues) or create a new one
+- Consider the results from the discussion on the issue
 - Accept the [Contributor License Agreement](https://documen.so/cla) to ensure we can accept your contributions.
 
 ## Taking issues
@@ -27,14 +27,14 @@ Always feel free to ask questions or seek clarification on the issue.
 
 ## Developing
 
-The development branch is <code>main</code>. All pull request should be made against this branch. If you need help getting started, [join us on Discord](https://documen.so/discord).
+The development branch is <code>main</code>. All pull requests should be made against this branch. If you need help getting started, [join us on Discord](https://documen.so/discord).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
    own GitHub account and then
    [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 2. Create a new branch:
 
-- Create a new branch (include the issue id and somthing readable):
+- Create a new branch (include the issue id and something readable):
 
   ```sh
   git checkout -b doc-999-my-feature-or-fix
@@ -45,7 +45,7 @@ The development branch is <code>main</code>. All pull request should be made aga
 ## Building
 
 > **Note**
-> Please be sure that you can make a full production build before pushing code or creating PRs.
+> Please ensure you can make a full production build before pushing code or creating PRs.
 
 You can build the project with:
 

README.md

@@ -179,7 +179,7 @@ git clone https://github.com/documenso/documenso
    - NEXT_PRIVATE_SMTP_FROM_NAME
    - NEXT_PRIVATE_SMTP_FROM_ADDRESS
 
-5. Create the database schema by running `npm run prisma:migrate-dev -w @documenso/prisma`
+5. Create the database schema by running `npm run prisma:migrate-dev`
 
 6. Run `npm run dev` root directory to start
 
@@ -254,6 +254,22 @@ containers:
       - '::'
 ```
 
+### I can't see environment variables in my package scripts
+
+Wrap your package script with the `with:env` script like such:
+
+```
+npm run with:env -- npm run myscript
+```
+
+The same can be done when using `npx` for one of bin scripts:
+
+```
+npm run with:env -- npx myscript
+```
+
+This will load environment variables from your `.env` and `.env.local` files.
+
 ## Repo Activity
 
 ![Repository Activity](https://repobeats.axiom.co/api/embed/622a2e9aa709696f7226304b5b7178a5741b3868.svg)

apps/marketing/package.json

@@ -31,7 +31,7 @@
     "react-confetti": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
     "sharp": "0.32.5",
     "typescript": "5.1.6",

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

@@ -2,6 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 
+import { usePathname } from 'next/navigation';
+
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Footer } from '~/components/(marketing)/footer';
@@ -13,6 +15,7 @@ export type MarketingLayoutProps = {
 
 export default function MarketingLayout({ children }: MarketingLayoutProps) {
   const [scrollY, setScrollY] = useState(0);
+  const pathname = usePathname();
 
   useEffect(() => {
     const onScroll = () => {
@@ -25,7 +28,11 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   }, []);
 
   return (
-    <div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
+    <div
+      className={cn('relative max-w-[100vw] pt-20 md:pt-28', {
+        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
+      })}
+    >
       <div
         className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
           'bg-background/50 backdrop-blur-md': scrollY > 5,

apps/marketing/src/app/(marketing)/open/data.ts

@@ -31,6 +31,22 @@ export const TEAM_MEMBERS = [
     engagement: 'Full-Time',
     joinDate: 'July 26th, 2023',
   },
+  {
+    name: 'Catalin-Marinel Pit',
+    role: 'Software Engineer - II',
+    salary: 80_000,
+    location: 'Romania',
+    engagement: 'Full-Time',
+    joinDate: 'September 4th, 2023',
+  },
+  {
+    name: 'Gowdhama Rajan B',
+    role: 'Designer - III',
+    salary: 100_000,
+    location: 'India',
+    engagement: 'Full-Time',
+    joinDate: 'October 9th, 2023',
+  },
 ];
 
 export const FUNDING_RAISED = [

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

@@ -130,7 +130,7 @@ export default function SinglePlayerModePage() {
         signer: data.email,
       });
 
-      router.push(`/single-player-mode/${documentToken}/success`);
+      router.push(`/singleplayer/${documentToken}/success`);
     } catch {
       toast({
         title: 'Something went wrong',

apps/marketing/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Caveat, Inter } from 'next/font/google';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
+import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 
@@ -63,7 +64,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       <body>
         <FeatureFlagProvider initialFlags={flags}>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <PlausibleProvider>{children}</PlausibleProvider>
+            <PlausibleProvider>
+              <TrpcProvider>{children}</TrpcProvider>
+            </PlausibleProvider>
           </ThemeProvider>
         </FeatureFlagProvider>
 

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

@@ -2,8 +2,8 @@
 
 import Link from 'next/link';
 
-import { Github } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { LuGithub } from 'react-icons/lu';
 
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -52,7 +52,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
         onClick={() => event('view-github')}
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
-          <Github className="mr-2 h-5 w-5" />
+          <LuGithub className="mr-2 h-5 w-5" />
           Star on Github
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
@@ -55,8 +55,8 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
+    reset,
   } = useForm<TClaimPlanDialogFormSchema>({
-    mode: 'onBlur',
     defaultValues: {
       name: params?.get('name') ?? '',
       email: params?.get('email') ?? '',
@@ -91,6 +91,12 @@ export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialog
     }
   };
 
+  useEffect(() => {
+    if (!isSubmitting && !open) {
+      reset();
+    }
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={(value) => !isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>{children}</DialogTrigger>

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

@@ -5,22 +5,25 @@ import { HTMLAttributes } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Github, MessagesSquare, Moon, Sun, Twitter } from 'lucide-react';
+import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
+import { FaXTwitter } from 'react-icons/fa6';
+import { LiaDiscord } from 'react-icons/lia';
+import { LuGithub } from 'react-icons/lu';
 
 import { cn } from '@documenso/ui/lib/utils';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
 const SOCIAL_LINKS = [
-  { href: 'https://twitter.com/documenso', icon: <Twitter className="h-6 w-6" /> },
-  { href: 'https://github.com/documenso/documenso', icon: <Github className="h-6 w-6" /> },
-  { href: 'https://documen.so/discord', icon: <MessagesSquare className="h-6 w-6" /> },
+  { href: 'https://twitter.com/documenso', icon: <FaXTwitter className="h-6 w-6" /> },
+  { href: 'https://github.com/documenso/documenso', icon: <LuGithub className="h-6 w-6" /> },
+  { href: 'https://documen.so/discord', icon: <LiaDiscord className="h-7 w-7" /> },
 ];
 
 const FOOTER_LINKS = [
   { href: '/pricing', text: 'Pricing' },
-  { href: '/single-player-mode', text: 'Single Player Mode' },
+  { href: '/singleplayer', text: 'Singleplayer' },
   { href: '/blog', text: 'Blog' },
   { href: '/open', text: 'Open' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },

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

@@ -35,7 +35,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
 
         {isSinglePlayerModeMarketingEnabled && (
           <Link
-            href="/single-player-mode"
+            href="/singleplayer"
             className="bg-primary dark:text-background rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
           >
             Try now!

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

@@ -4,8 +4,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import { Variants, motion } from 'framer-motion';
-import { Github } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
@@ -122,7 +122,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
 
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
-              <Github className="mr-2 h-5 w-5" />
+              <LuGithub className="mr-2 h-5 w-5" />
               Star on Github
             </Button>
           </Link>
@@ -134,9 +134,9 @@ export const Hero = ({ className, ...props }: HeroProps) => {
               variants={HeroTitleVariants}
               initial="initial"
               animate="animate"
-              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition duration-300"
+              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition-colors duration-300"
             >
-              <Link href="/single-player-mode" className="block px-4 py-2 text-center">
+              <Link href="/singleplayer" className="block px-4 py-2 text-center">
                 <h2 className="text-muted-foreground text-xs font-semibold">
                   Introducing Single Player Mode
                 </h2>

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -4,7 +4,9 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import { motion, useReducedMotion } from 'framer-motion';
-import { Github, MessagesSquare, Twitter } from 'lucide-react';
+import { FaXTwitter } from 'react-icons/fa6';
+import { LiaDiscord } from 'react-icons/lia';
+import { LuGithub } from 'react-icons/lu';
 
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 
@@ -15,8 +17,8 @@ export type MobileNavigationProps = {
 
 export const MENU_NAVIGATION_LINKS = [
   {
-    href: '/single-player-mode',
-    text: 'Single Player Mode',
+    href: '/singleplayer',
+    text: 'Singleplayer',
   },
   {
     href: '/blog',
@@ -111,7 +113,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
             target="_blank"
             className="text-foreground hover:text-foreground/80"
           >
-            <Twitter className="h-6 w-6" />
+            <FaXTwitter className="h-6 w-6" />
           </Link>
 
           <Link
@@ -119,7 +121,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
             target="_blank"
             className="text-foreground hover:text-foreground/80"
           >
-            <Github className="h-6 w-6" />
+            <LuGithub className="h-6 w-6" />
           </Link>
 
           <Link
@@ -127,7 +129,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
             target="_blank"
             className="text-foreground hover:text-foreground/80"
           >
-            <MessagesSquare className="h-6 w-6" />
+            <LiaDiscord className="h-7 w-7" />
           </Link>
         </div>
       </SheetContent>

apps/marketing/src/components/(marketing)/password-reveal.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
-
 export type PasswordRevealProps = {
   password: string;
 };

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -4,14 +4,13 @@ import { useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
-import { Share } from 'lucide-react';
-
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { base64 } from '@documenso/lib/universal/base64';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -87,11 +86,11 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
       <div className="relative mt-8 w-full">
         <div className={cn('flex flex-col items-center', className)}>
           <div className="grid w-full max-w-sm grid-cols-2 gap-4">
-            {/* TODO: Hook this up */}
-            <Button variant="outline" className="flex-1 bg-transparent backdrop-blur-sm" disabled>
-              <Share className="mr-2 h-5 w-5" />
-              Share
-            </Button>
+            <DocumentShareButton
+              documentId={document.id}
+              token={document.Recipient.token}
+              className="flex-1 bg-transparent backdrop-blur-sm"
+            />
 
             <DocumentDownloadButton
               className="flex-1 bg-transparent backdrop-blur-sm"
@@ -103,7 +102,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
             <Button
               onClick={async () => onShowDocumentClick()}
               loading={isFetchingDocumentFile}
-              className="col-span-2"
+              className="z-10 col-span-2"
             >
               Show document
             </Button>

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

@@ -377,7 +377,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
       </Card>
 
       <Dialog open={showSigningDialog} onOpenChange={setShowSigningDialog}>
-        <DialogContent>
+        <DialogContent position="center">
           <DialogHeader>
             <DialogTitle>Add your signature</DialogTitle>
           </DialogHeader>
@@ -391,6 +391,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
 
           <SignaturePad
             className="aspect-video w-full rounded-md border"
+            defaultValue={signatureDataUrl || ''}
             onChange={setDraftSignatureDataUrl}
           />
 

apps/marketing/src/pages/api/trpc/[trpc].ts

@@ -0,0 +1,8 @@
+import * as trpcNext from '@documenso/trpc/server/adapters/next';
+import { createTrpcContext } from '@documenso/trpc/server/context';
+import { appRouter } from '@documenso/trpc/server/router';
+
+export default trpcNext.createNextApiHandler({
+  router: appRouter,
+  createContext: async ({ req, res }) => createTrpcContext({ req, res }),
+});

apps/web/package.json

@@ -36,7 +36,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
     "sharp": "0.32.5",
     "ts-pattern": "^5.0.5",

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import Link from 'next/link';
+
+import { Loader } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { Document, User } from '@documenso/prisma/client';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type DocumentsDataTableProps = {
+  results: FindResultSet<
+    Document & {
+      User: Pick<User, 'id' | 'name' | 'email'>;
+    }
+  >;
+};
+
+export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+  const [isPending, startTransition] = useTransition();
+
+  const updateSearchParams = useUpdateSearchParams();
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={[
+          {
+            header: 'Created',
+            accessorKey: 'createdAt',
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+          },
+          {
+            header: 'Title',
+            accessorKey: 'title',
+            cell: ({ row }) => {
+              return <div>{row.original.title}</div>;
+            },
+          },
+          {
+            header: 'Owner',
+            accessorKey: 'owner',
+            cell: ({ row }) => {
+              return (
+                <Link href={`/admin/users/${row.original.User.id}`}>
+                  <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                    <AvatarFallback className="text-gray-400">
+                      <span className="text-xs">{row.original.User.name}</span>
+                    </AvatarFallback>
+                  </Avatar>
+                </Link>
+              );
+            },
+          },
+          {
+            header: 'Last updated',
+            accessorKey: 'updatedAt',
+            cell: ({ row }) => <LocaleDate date={row.original.updatedAt} />,
+          },
+          {
+            header: 'Status',
+            accessorKey: 'status',
+            cell: ({ row }) => <DocumentStatus status={row.original.status} />,
+          },
+        ]}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        onPaginationChange={onPaginationChange}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      {isPending && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { findDocuments } from '@documenso/lib/server-only/admin/get-all-documents';
+
+import { DocumentsDataTable } from './data-table';
+
+export type DocumentsPageProps = {
+  searchParams?: {
+    page?: string;
+    perPage?: string;
+  };
+};
+
+export default async function Documents({ searchParams = {} }: DocumentsPageProps) {
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 20;
+
+  const results = await findDocuments({
+    page,
+    perPage,
+  });
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Manage documents</h2>
+      <div className="mt-8">
+        <DocumentsDataTable results={results} />
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BarChart3, User2 } from 'lucide-react';
+import { BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -37,10 +37,40 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
           'justify-start md:w-full',
           pathname?.startsWith('/admin/users') && 'bg-secondary',
         )}
-        disabled
+        asChild
       >
-        <User2 className="mr-2 h-5 w-5" />
-        Users (Coming Soon)
+        <Link href="/admin/users">
+          <User2 className="mr-2 h-5 w-5" />
+          Users
+        </Link>
+      </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/documents') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/documents">
+          <FileStack className="mr-2 h-5 w-5" />
+          Documents
+        </Link>
+      </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/subscriptions') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/subscriptions">
+          <Wallet2 className="mr-2 h-5 w-5" />
+          Subscriptions
+        </Link>
       </Button>
     </div>
   );

apps/web/src/app/(dashboard)/admin/subscriptions/page.tsx

@@ -0,0 +1,65 @@
+import Link from 'next/link';
+
+import { findSubscriptions } from '@documenso/lib/server-only/admin/get-all-subscriptions';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+export default async function Subscriptions() {
+  const subscriptions = await findSubscriptions();
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Manage subscriptions</h2>
+      <div className="mt-8">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Created At</TableHead>
+              <TableHead>Ends On</TableHead>
+              <TableHead>User ID</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {subscriptions.map((subscription, index) => (
+              <TableRow key={index}>
+                <TableCell>{subscription.id}</TableCell>
+                <TableCell>{subscription.status}</TableCell>
+                <TableCell>
+                  {subscription.createdAt
+                    ? new Date(subscription.createdAt).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })
+                    : 'N/A'}
+                </TableCell>
+                <TableCell>
+                  {subscription.periodEnd
+                    ? new Date(subscription.periodEnd).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                      })
+                    : 'N/A'}
+                </TableCell>
+                <TableCell>
+                  <Link href={`/admin/users/${subscription.userId}`}>{subscription.userId}</Link>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Combobox } from '@documenso/ui/primitives/combobox';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { TUserFormSchema, ZUserFormSchema } from '~/providers/admin-user-profile-update.types';
+
+export default function UserPage({ params }: { params: { id: number } }) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { data: user } = trpc.profile.getUser.useQuery(
+    {
+      id: Number(params.id),
+    },
+    {
+      enabled: !!params.id,
+    },
+  );
+
+  const roles = user?.roles ?? [];
+
+  const { mutateAsync: updateUserMutation } = trpc.admin.updateUser.useMutation();
+
+  const form = useForm<TUserFormSchema>({
+    resolver: zodResolver(ZUserFormSchema),
+    values: {
+      name: user?.name ?? '',
+      email: user?.email ?? '',
+      roles: user?.roles ?? [],
+    },
+  });
+
+  const onSubmit = async ({ name, email, roles }: TUserFormSchema) => {
+    try {
+      await updateUserMutation({
+        id: Number(user?.id),
+        name,
+        email,
+        roles,
+      });
+
+      router.refresh();
+
+      toast({
+        title: 'Profile updated',
+        description: 'Your profile has been updated.',
+        duration: 5000,
+      });
+    } catch (e) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating your profile.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-muted-foreground">Name</FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-muted-foreground">Email</FormLabel>
+                  <FormControl>
+                    <Input type="text" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="roles"
+              render={({ field: { onChange } }) => (
+                <FormItem>
+                  <fieldset className="flex flex-col gap-2">
+                    <FormLabel className="text-muted-foreground">Roles</FormLabel>
+                    <FormControl>
+                      <Combobox
+                        listValues={roles}
+                        onChange={(values: string[]) => onChange(values)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </fieldset>
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                Update user
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+}

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

@@ -0,0 +1,155 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+
+import Link from 'next/link';
+
+import { Edit, Loader } from 'lucide-react';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { Document, Role, Subscription } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+
+interface User {
+  id: number;
+  name: string | null;
+  email: string;
+  roles: Role[];
+  Subscription: SubscriptionLite[];
+  Document: DocumentLite[];
+}
+
+type SubscriptionLite = Pick<
+  Subscription,
+  'id' | 'status' | 'planId' | 'priceId' | 'createdAt' | 'periodEnd'
+>;
+
+type DocumentLite = Pick<Document, 'id'>;
+
+type UsersDataTableProps = {
+  users: User[];
+  totalPages: number;
+  perPage: number;
+  page: number;
+};
+
+export const UsersDataTable = ({ users, totalPages, perPage, page }: UsersDataTableProps) => {
+  const [isPending, startTransition] = useTransition();
+  const updateSearchParams = useUpdateSearchParams();
+  const [searchString, setSearchString] = useState('');
+  const debouncedSearchString = useDebouncedValue(searchString, 1000);
+
+  useEffect(() => {
+    startTransition(() => {
+      updateSearchParams({
+        search: debouncedSearchString,
+        page: 1,
+        perPage,
+      });
+    });
+  }, [debouncedSearchString]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(e.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        className="my-6 flex flex-row gap-4"
+        type="text"
+        placeholder="Search by name or email"
+        value={searchString}
+        onChange={handleChange}
+      />
+      <DataTable
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+            cell: ({ row }) => <div>{row.original.id}</div>,
+          },
+          {
+            header: 'Name',
+            accessorKey: 'name',
+            cell: ({ row }) => <div>{row.original.name}</div>,
+          },
+          {
+            header: 'Email',
+            accessorKey: 'email',
+            cell: ({ row }) => <div>{row.original.email}</div>,
+          },
+          {
+            header: 'Roles',
+            accessorKey: 'roles',
+            cell: ({ row }) => row.original.roles.join(', '),
+          },
+          {
+            header: 'Subscription',
+            accessorKey: 'subscription',
+            cell: ({ row }) => {
+              if (row.original.Subscription && row.original.Subscription.length > 0) {
+                return (
+                  <>
+                    {row.original.Subscription.map((subscription: SubscriptionLite, i: number) => {
+                      return <span key={i}>{subscription.status}</span>;
+                    })}
+                  </>
+                );
+              } else {
+                return <span>NONE</span>;
+              }
+            },
+          },
+          {
+            header: 'Documents',
+            accessorKey: 'documents',
+            cell: ({ row }) => {
+              return <div>{row.original.Document.length}</div>;
+            },
+          },
+          {
+            header: '',
+            accessorKey: 'edit',
+            cell: ({ row }) => {
+              return (
+                <Button className="w-24" asChild>
+                  <Link href={`/admin/users/${row.original.id}`}>
+                    <Edit className="-ml-1 mr-2 h-4 w-4" />
+                    Edit
+                  </Link>
+                </Button>
+              );
+            },
+          },
+        ]}
+        data={users}
+        perPage={perPage}
+        currentPage={page}
+        totalPages={totalPages}
+        onPaginationChange={onPaginationChange}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      {isPending && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/admin/users/fetch-users.actions.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { findUsers } from '@documenso/lib/server-only/user/get-all-users';
+
+export async function search(search: string, page: number, perPage: number) {
+  const results = await findUsers({ username: search, email: search, page, perPage });
+
+  return results;
+}

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

@@ -0,0 +1,25 @@
+import { UsersDataTable } from './data-table-users';
+import { search } from './fetch-users.actions';
+
+type AdminManageUsersProps = {
+  searchParams?: {
+    search?: string;
+    page?: number;
+    perPage?: number;
+  };
+};
+
+export default async function AdminManageUsers({ searchParams = {} }: AdminManageUsersProps) {
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+  const searchString = searchParams.search || '';
+
+  const { users, totalPages } = await search(searchString, page, perPage);
+
+  return (
+    <div>
+      <h2 className="text-4xl font-semibold">Manage users</h2>
+      <UsersDataTable users={users} totalPages={totalPages} page={page} perPage={perPage} />
+    </div>
+  );
+}

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

@@ -6,13 +6,12 @@ import { Edit, Pencil, Share } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
-
 export type DataTableActionButtonProps = {
   row: Document & {
     User: Pick<User, 'id' | 'name' | 'email'>;
@@ -47,7 +46,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       documentId: row.id,
     });
 
-    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
 
     toast({
       title: 'Copied to clipboard',

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { useState } from 'react';
+
 import Link from 'next/link';
 
 import {
@@ -16,6 +18,7 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -30,7 +33,7 @@ import {
 } from '@documenso/ui/primitives/dropdown-menu';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
@@ -44,6 +47,8 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const { toast } = useToast();
   const [, copyToClipboard] = useCopyToClipboard();
 
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
   if (!session) {
     return null;
   }
@@ -55,10 +60,11 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
   const isOwner = row.User.id === session.user.id;
   // const isRecipient = !!recipient;
-  // const isDraft = row.status === DocumentStatus.DRAFT;
+  const isDraft = row.status === DocumentStatus.DRAFT;
   // const isPending = row.status === DocumentStatus.PENDING;
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
+  const isDocumentDeletable = isOwner && row.status === DocumentStatus.DRAFT;
 
   const onShareClick = async () => {
     const { slug } = await createOrGetShareLink({
@@ -66,7 +72,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       documentId: row.id,
     });
 
-    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
 
     toast({
       title: 'Copied to clipboard',
@@ -147,7 +153,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Void
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)} disabled={!isDocumentDeletable}>
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -159,7 +165,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Resend
         </DropdownMenuItem>
 
-        <DropdownMenuItem onClick={onShareClick}>
+        <DropdownMenuItem disabled={isDraft} onClick={onShareClick}>
           {isCreatingShareLink ? (
             <Loader className="mr-2 h-4 w-4" />
           ) : (
@@ -168,6 +174,14 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Share
         </DropdownMenuItem>
       </DropdownMenuContent>
+
+      {isDocumentDeletable && (
+        <DeleteDraftDocumentDialog
+          id={row.id}
+          open={isDeleteDialogOpen}
+          onOpenChange={setDeleteDialogOpen}
+        />
+      )}
     </DropdownMenu>
   );
 };

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

@@ -0,0 +1,89 @@
+import { useRouter } from 'next/navigation';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DeleteDraftDocumentDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DeleteDraftDocumentDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: DeleteDraftDocumentDialogProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteDocument, isLoading } =
+    trpcReact.document.deleteDraftDocument.useMutation({
+      onSuccess: () => {
+        router.refresh();
+
+        toast({
+          title: 'Document deleted',
+          description: 'Your document has been successfully deleted.',
+          duration: 5000,
+        });
+
+        onOpenChange(false);
+      },
+    });
+
+  const onDraftDelete = async () => {
+    try {
+      await deleteDocument({ id });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'This document could not be deleted at this time. Please try again.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Do you want to delete this document?</DialogTitle>
+
+          <DialogDescription>
+            Please note that this action is irreversible. Once confirmed, your document will be
+            permanently deleted.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+
+            <Button type="button" loading={isLoading} onClick={onDraftDelete} className="flex-1">
+              Delete
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -66,7 +66,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
       <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
         <h1 className="text-4xl font-semibold">Documents</h1>
 
-        <div className="flex flex-wrap gap-x-4 gap-y-6 overflow-hidden">
+        <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
           <Tabs defaultValue={status} className="overflow-x-auto">
             <TabsList>
               {[

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

@@ -9,12 +9,11 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
+import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
 import signingCelebration from '~/assets/signing-celebration.png';
 
-import { ShareButton } from './share-button';
-
 export type CompletedSigningPageProps = {
   params: {
     token?: string;
@@ -89,7 +88,7 @@ export default async function CompletedSigningPage({
           ))}
 
         <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-          <ShareButton documentId={document.id} token={recipient.token} />
+          <DocumentShareButton documentId={document.id} token={recipient.token} />
 
           <DocumentDownloadButton
             className="flex-1"

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState, useTransition } from 'react';
+import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -48,6 +48,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
   const [showSignatureModal, setShowSignatureModal] = useState(false);
   const [localSignature, setLocalSignature] = useState<string | null>(null);
+  const [isLocalSignatureSet, setIsLocalSignatureSet] = useState(false);
 
   const state = useMemo<SignatureFieldState>(() => {
     if (!field.inserted) {
@@ -61,9 +62,16 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
     return 'signed-text';
   }, [field.inserted, signature?.signatureImageAsBase64]);
 
+  useEffect(() => {
+    if (!showSignatureModal && !isLocalSignatureSet) {
+      setLocalSignature(null);
+    }
+  }, [showSignatureModal, isLocalSignatureSet]);
+
   const onSign = async (source: 'local' | 'provider' = 'provider') => {
     try {
       if (!providedSignature && !localSignature) {
+        setIsLocalSignatureSet(false);
         setShowSignatureModal(true);
         return;
       }
@@ -178,6 +186,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
                 disabled={!localSignature}
                 onClick={() => {
                   setShowSignatureModal(false);
+                  setIsLocalSignatureSet(true);
                   void onSign('local');
                 }}
               >

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -4,7 +4,6 @@ import Link from 'next/link';
 
 import {
   CreditCard,
-  Github,
   Key,
   LogOut,
   User as LucideUser,
@@ -16,6 +15,7 @@ import {
 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 import { useTheme } from 'next-themes';
+import { LuGithub } from 'react-icons/lu';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
@@ -130,7 +130,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
           <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
-            <Github className="mr-2 h-4 w-4" />
+            <LuGithub className="mr-2 h-4 w-4" />
             Star on Github
           </Link>
         </DropdownMenuItem>

apps/web/src/components/forms/password.tsx

@@ -20,6 +20,7 @@ import { FormErrorMessage } from '../form/form-error-message';
 
 export const ZPasswordFormSchema = z
   .object({
+    currentPassword: z.string().min(6).max(72),
     password: z.string().min(6).max(72),
     repeatedPassword: z.string().min(6).max(72),
   })
@@ -40,6 +41,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
 
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
 
   const {
     register,
@@ -48,6 +50,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
     formState: { errors, isSubmitting },
   } = useForm<TPasswordFormSchema>({
     values: {
+      currentPassword: '',
       password: '',
       repeatedPassword: '',
     },
@@ -56,9 +59,10 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
 
   const { mutateAsync: updatePassword } = trpc.profile.updatePassword.useMutation();
 
-  const onFormSubmit = async ({ password }: TPasswordFormSchema) => {
+  const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
     try {
       await updatePassword({
+        currentPassword,
         password,
       });
 
@@ -92,6 +96,39 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       className={cn('flex w-full flex-col gap-y-4', className)}
       onSubmit={handleSubmit(onFormSubmit)}
     >
+      <div>
+        <Label htmlFor="current-password" className="text-muted-foreground">
+          Current Password
+        </Label>
+
+        <div className="relative">
+          <Input
+            id="current-password"
+            type={showCurrentPassword ? 'text' : 'password'}
+            minLength={6}
+            maxLength={72}
+            autoComplete="current-password"
+            className="bg-background mt-2 pr-10"
+            {...register('currentPassword')}
+          />
+
+          <Button
+            variant="link"
+            type="button"
+            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+            aria-label={showCurrentPassword ? 'Mask password' : 'Reveal password'}
+            onClick={() => setShowCurrentPassword((show) => !show)}
+          >
+            {showCurrentPassword ? (
+              <EyeOff className="text-muted-foreground h-5 w-5" />
+            ) : (
+              <Eye className="text-muted-foreground h-5 w-5" />
+            )}
+          </Button>
+        </div>
+
+        <FormErrorMessage className="mt-1.5" error={errors.currentPassword} />
+      </div>
       <div>
         <Label htmlFor="password" className="text-muted-foreground">
           Password

apps/web/src/components/forms/profile.tsx

@@ -117,7 +117,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
             name="signature"
             render={({ field: { onChange } }) => (
               <SignaturePad
-                className="h-44 w-full rounded-lg border bg-white backdrop-blur-sm dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
+                className="h-44 w-full"
+                containerClassName="rounded-lg border bg-background"
                 defaultValue={user.signature ?? undefined}
                 onChange={(v) => onChange(v ?? '')}
               />

apps/web/src/components/forms/signup.tsx

@@ -147,7 +147,8 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
             name="signature"
             render={({ field: { onChange } }) => (
               <SignaturePad
-                className="mt-2 h-36 w-full rounded-lg border bg-white dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
+                className="h-36 w-full"
+                containerClassName="mt-2 rounded-lg border bg-background"
                 onChange={(v) => onChange(v ?? '')}
               />
             )}

apps/web/src/hooks/use-copy-to-clipboard.ts

@@ -1,28 +0,0 @@
-import { useState } from 'react';
-
-export type CopiedValue = string | null;
-export type CopyFn = (_text: string) => Promise<boolean>;
-
-export function useCopyToClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
-
-  const copy: CopyFn = async (text) => {
-    if (!navigator?.clipboard) {
-      console.warn('Clipboard not supported');
-      return false;
-    }
-
-    // Try to save to clipboard then save it in the state if worked
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedText(text);
-      return true;
-    } catch (error) {
-      console.warn('Copy failed', error);
-      setCopiedText(null);
-      return false;
-    }
-  };
-
-  return [copiedText, copy];
-}

apps/web/src/providers/admin-user-profile-update.types.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';
+
+export const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
+export type TUserFormSchema = z.infer<typeof ZUserFormSchema>;

package-lock.json

@@ -15,8 +15,8 @@
       "devDependencies": {
         "@commitlint/cli": "^17.7.1",
         "@commitlint/config-conventional": "^17.7.0",
-        "dotenv": "^16.0.3",
-        "dotenv-cli": "^7.2.1",
+        "dotenv": "^16.3.1",
+        "dotenv-cli": "^7.3.0",
         "eslint": "^8.40.0",
         "eslint-config-custom": "*",
         "husky": "^8.0.0",
@@ -54,7 +54,7 @@
         "react-confetti": "^6.1.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.43.9",
-        "react-icons": "^4.8.0",
+        "react-icons": "^4.11.0",
         "recharts": "^2.7.2",
         "sharp": "0.32.5",
         "typescript": "5.1.6",
@@ -95,7 +95,7 @@
         "react-dom": "18.2.0",
         "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.43.9",
-        "react-icons": "^4.8.0",
+        "react-icons": "^4.11.0",
         "react-rnd": "^10.4.1",
         "sharp": "0.32.5",
         "ts-pattern": "^5.0.5",
@@ -9103,7 +9103,6 @@
       "version": "16.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
       "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -9112,13 +9111,12 @@
       }
     },
     "node_modules/dotenv-cli": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-7.2.1.tgz",
-      "integrity": "sha512-ODHbGTskqRtXAzZapDPvgNuDVQApu4oKX8lZW7Y0+9hKA6le1ZJlyRS687oU9FXjOVEDU/VFV6zI125HzhM1UQ==",
-      "dev": true,
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-7.3.0.tgz",
+      "integrity": "sha512-314CA4TyK34YEJ6ntBf80eUY+t1XaFLyem1k9P0sX1gn30qThZ5qZr/ZwE318gEnzyYP9yj9HJk6SqwE0upkfw==",
       "dependencies": {
         "cross-spawn": "^7.0.3",
-        "dotenv": "^16.0.0",
+        "dotenv": "^16.3.0",
         "dotenv-expand": "^10.0.0",
         "minimist": "^1.2.6"
       },
@@ -9130,7 +9128,6 @@
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
       "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -16359,9 +16356,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
-      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
       "peerDependencies": {
         "react": "*"
       }
@@ -19889,6 +19886,8 @@
       "license": "MIT",
       "dependencies": {
         "@prisma/client": "5.3.1",
+        "dotenv": "^16.3.1",
+        "dotenv-cli": "^7.3.0",
         "prisma": "5.3.1"
       },
       "devDependencies": {

package.json

@@ -2,6 +2,7 @@
   "private": true,
   "scripts": {
     "build": "turbo run build",
+    "build:web": "turbo run build --filter=@documenso/web",
     "dev": "turbo run dev --filter=@documenso/web --filter=@documenso/marketing",
     "start": "cd apps && cd web && next start",
     "lint": "turbo run lint",
@@ -10,9 +11,12 @@
     "commitlint": "commitlint --edit",
     "clean": "turbo run clean && rimraf node_modules",
     "d": "npm run dx && npm run dev",
-    "dx": "npm i && npm run dx:up && npm run prisma:migrate-dev -w @documenso/prisma",
+    "dx": "npm i && npm run dx:up && npm run prisma:migrate-dev",
     "dx:up": "docker compose -f docker/compose-services.yml up -d",
-    "dx:down": "docker compose -f docker/compose-services.yml down"
+    "dx:down": "docker compose -f docker/compose-services.yml down",
+    "prisma:migrate-dev": "npm run with:env -- npm run prisma:migrate-dev -w @documenso/prisma",
+    "prisma:migrate-deploy": "npm run with:env -- npm run prisma:migrate-deploy -w @documenso/prisma",
+    "with:env": "dotenv -e .env -e .env.local --"
   },
   "engines": {
     "npm": ">=8.6.0",
@@ -21,8 +25,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "dotenv": "^16.0.3",
-    "dotenv-cli": "^7.2.1",
+    "dotenv": "^16.3.1",
+    "dotenv-cli": "^7.3.0",
     "eslint": "^8.40.0",
     "eslint-config-custom": "*",
     "husky": "^8.0.0",

packages/lib/client-only/hooks/use-element-scale-size.ts

@@ -60,26 +60,17 @@ export const calculateTextScaleSize = (
  */
 export function useElementScaleSize(
   container: { width: number; height: number },
-  child: RefObject<HTMLElement | null>,
+  text: string,
   fontSize: number,
   fontFamily: string,
 ) {
   const [scalingFactor, setScalingFactor] = useState(1);
 
   useEffect(() => {
-    if (!child.current) {
-      return;
-    }
-
-    const scaleSize = calculateTextScaleSize(
-      container,
-      child.current.innerText,
-      `${fontSize}px`,
-      fontFamily,
-    );
+    const scaleSize = calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);
 
     setScalingFactor(scaleSize);
-  }, [child, container, fontFamily, fontSize]);
+  }, [text, container, fontFamily, fontSize]);
 
   return scalingFactor;
 }

packages/lib/server-only/admin/get-all-documents.ts

@@ -0,0 +1,55 @@
+import { prisma } from '@documenso/prisma';
+import { Prisma } from '@documenso/prisma/client';
+
+export interface FindDocumentsOptions {
+  term?: string;
+  page?: number;
+  perPage?: number;
+}
+
+export const findDocuments = async ({ term, page = 1, perPage = 10 }: FindDocumentsOptions) => {
+  const termFilters: Prisma.DocumentWhereInput | undefined = !term
+    ? undefined
+    : {
+        title: {
+          contains: term,
+          mode: 'insensitive',
+        },
+      };
+
+  const [data, count] = await Promise.all([
+    prisma.document.findMany({
+      where: {
+        ...termFilters,
+      },
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        createdAt: 'desc',
+      },
+      include: {
+        User: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+        Recipient: true,
+      },
+    }),
+    prisma.document.count({
+      where: {
+        ...termFilters,
+      },
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  };
+};

packages/lib/server-only/admin/get-all-subscriptions.ts

@@ -0,0 +1,13 @@
+import { prisma } from '@documenso/prisma';
+
+export const findSubscriptions = async () => {
+  return prisma.subscription.findMany({
+    select: {
+      id: true,
+      status: true,
+      createdAt: true,
+      periodEnd: true,
+      userId: true,
+    },
+  });
+};

packages/lib/server-only/admin/update-user.ts

@@ -0,0 +1,28 @@
+import { prisma } from '@documenso/prisma';
+import { Role } from '@documenso/prisma/client';
+
+export type UpdateUserOptions = {
+  id: number;
+  name: string | null | undefined;
+  email: string | undefined;
+  roles: Role[] | undefined;
+};
+
+export const updateUser = async ({ id, name, email, roles }: UpdateUserOptions) => {
+  await prisma.user.findFirstOrThrow({
+    where: {
+      id,
+    },
+  });
+
+  return await prisma.user.update({
+    where: {
+      id,
+    },
+    data: {
+      name,
+      email,
+      roles,
+    },
+  });
+};

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

@@ -0,0 +1,13 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+import { DocumentStatus } from '@documenso/prisma/client';
+
+export type DeleteDraftDocumentOptions = {
+  id: number;
+  userId: number;
+};
+
+export const deleteDraftDocument = async ({ id, userId }: DeleteDraftDocumentOptions) => {
+  return await prisma.document.delete({ where: { id, userId, status: DocumentStatus.DRAFT } });
+};

packages/lib/server-only/user/get-all-users.ts

@@ -0,0 +1,57 @@
+import { prisma } from '@documenso/prisma';
+import { Prisma } from '@documenso/prisma/client';
+
+type GetAllUsersProps = {
+  username: string;
+  email: string;
+  page: number;
+  perPage: number;
+};
+
+export const findUsers = async ({
+  username = '',
+  email = '',
+  page = 1,
+  perPage = 10,
+}: GetAllUsersProps) => {
+  const whereClause = Prisma.validator<Prisma.UserWhereInput>()({
+    OR: [
+      {
+        name: {
+          contains: username,
+          mode: 'insensitive',
+        },
+      },
+      {
+        email: {
+          contains: email,
+          mode: 'insensitive',
+        },
+      },
+    ],
+  });
+
+  const [users, count] = await Promise.all([
+    await prisma.user.findMany({
+      include: {
+        Subscription: true,
+        Document: {
+          select: {
+            id: true,
+          },
+        },
+      },
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+    }),
+    await prisma.user.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    users,
+    totalPages: Math.ceil(count / perPage),
+  };
+};

packages/lib/server-only/user/update-password.ts

@@ -7,9 +7,14 @@ import { SALT_ROUNDS } from '../../constants/auth';
 export type UpdatePasswordOptions = {
   userId: number;
   password: string;
+  currentPassword: string;
 };
 
-export const updatePassword = async ({ userId, password }: UpdatePasswordOptions) => {
+export const updatePassword = async ({
+  userId,
+  password,
+  currentPassword,
+}: UpdatePasswordOptions) => {
   // Existence check
   const user = await prisma.user.findFirstOrThrow({
     where: {
@@ -17,23 +22,29 @@ export const updatePassword = async ({ userId, password }: UpdatePasswordOptions
     },
   });
 
-  const hashedPassword = await hash(password, SALT_ROUNDS);
-
-  if (user.password) {
-    // Compare the new password with the old password
-    const isSamePassword = await compare(password, user.password);
-
-    if (isSamePassword) {
-      throw new Error('Your new password cannot be the same as your old password.');
-    }
+  if (!user.password) {
+    throw new Error('User has no password');
   }
 
+  const isCurrentPasswordValid = await compare(currentPassword, user.password);
+  if (!isCurrentPasswordValid) {
+    throw new Error('Current password is incorrect.');
+  }
+
+  // Compare the new password with the old password
+  const isSamePassword = await compare(password, user.password);
+  if (isSamePassword) {
+    throw new Error('Your new password cannot be the same as your old password.');
+  }
+
+  const hashedNewPassword = await hash(password, SALT_ROUNDS);
+
   const updatedUser = await prisma.user.update({
     where: {
       id: userId,
     },
     data: {
-      password: hashedPassword,
+      password: hashedNewPassword,
     },
   });
 

packages/prisma/migrations/20231013012902_add_document_share_link_delete_cascade/migration.sql

@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "DocumentShareLink" DROP CONSTRAINT "DocumentShareLink_documentId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "DocumentShareLink" ADD CONSTRAINT "DocumentShareLink_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/package.json

@@ -18,6 +18,8 @@
   },
   "dependencies": {
     "@prisma/client": "5.3.1",
+    "dotenv": "^16.3.1",
+    "dotenv-cli": "^7.3.0",
     "prisma": "5.3.1"
   },
   "devDependencies": {

packages/prisma/schema.prisma

@@ -219,7 +219,7 @@ model DocumentShareLink {
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
 
-  document Document @relation(fields: [documentId], references: [id])
+  document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
 
   @@unique([documentId, email])
 }

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

@@ -0,0 +1,23 @@
+import { TRPCError } from '@trpc/server';
+
+import { updateUser } from '@documenso/lib/server-only/admin/update-user';
+
+import { adminProcedure, router } from '../trpc';
+import { ZUpdateProfileMutationByAdminSchema } from './schema';
+
+export const adminRouter = router({
+  updateUser: adminProcedure
+    .input(ZUpdateProfileMutationByAdminSchema)
+    .mutation(async ({ input }) => {
+      const { id, name, email, roles } = input;
+
+      try {
+        return await updateUser({ id, name, email, roles });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to retrieve the specified account. Please try again.',
+        });
+      }
+    }),
+});

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

@@ -0,0 +1,13 @@
+import { Role } from '@prisma/client';
+import z from 'zod';
+
+export const ZUpdateProfileMutationByAdminSchema = z.object({
+  id: z.number().min(1),
+  name: z.string().nullish(),
+  email: z.string().email().optional(),
+  roles: z.array(z.nativeEnum(Role)).optional(),
+});
+
+export type TUpdateProfileMutationByAdminSchema = z.infer<
+  typeof ZUpdateProfileMutationByAdminSchema
+>;

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

@@ -12,12 +12,16 @@ export const authRouter = router({
 
       return await createUser({ name, email, password, signature });
     } catch (err) {
-      console.error(err);
+      let message =
+        'We were unable to create your account. Please review the information you provided and try again.';
+
+      if (err instanceof Error && err.message === 'User already exists') {
+        message = 'User with this email already exists. Please use a different email address.';
+      }
 
       throw new TRPCError({
         code: 'BAD_REQUEST',
-        message:
-          'We were unable to create your account. Please review the information you provided and try again.',
+        message,
       });
     }
   }),

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

@@ -1,6 +1,7 @@
 import { TRPCError } from '@trpc/server';
 
 import { createDocument } from '@documenso/lib/server-only/document/create-document';
+import { deleteDraftDocument } from '@documenso/lib/server-only/document/delete-draft-document';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
@@ -10,6 +11,7 @@ import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/s
 import { authenticatedProcedure, procedure, router } from '../trpc';
 import {
   ZCreateDocumentMutationSchema,
+  ZDeleteDraftDocumentMutationSchema,
   ZGetDocumentByIdQuerySchema,
   ZGetDocumentByTokenQuerySchema,
   ZSendDocumentMutationSchema,
@@ -76,6 +78,25 @@ export const documentRouter = router({
       }
     }),
 
+  deleteDraftDocument: authenticatedProcedure
+    .input(ZDeleteDraftDocumentMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        const userId = ctx.user.id;
+
+        return await deleteDraftDocument({ id, userId });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to delete this document. Please try again later.',
+        });
+      }
+    }),
+
   setRecipientsForDocument: authenticatedProcedure
     .input(ZSetRecipientsForDocumentMutationSchema)
     .mutation(async ({ input, ctx }) => {

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

@@ -61,3 +61,9 @@ export const ZSendDocumentMutationSchema = z.object({
 });
 
 export type TSendDocumentMutationSchema = z.infer<typeof ZSendDocumentMutationSchema>;
+
+export const ZDeleteDraftDocumentMutationSchema = z.object({
+  id: z.number().min(1),
+});
+
+export type TDeleteDraftDocumentMutationSchema = z.infer<typeof ZDeleteDraftDocumentMutationSchema>;

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

@@ -1,19 +1,34 @@
 import { TRPCError } from '@trpc/server';
 
 import { forgotPassword } from '@documenso/lib/server-only/user/forgot-password';
+import { getUserById } from '@documenso/lib/server-only/user/get-user-by-id';
 import { resetPassword } from '@documenso/lib/server-only/user/reset-password';
 import { updatePassword } from '@documenso/lib/server-only/user/update-password';
 import { updateProfile } from '@documenso/lib/server-only/user/update-profile';
 
-import { authenticatedProcedure, procedure, router } from '../trpc';
+import { adminProcedure, authenticatedProcedure, procedure, router } from '../trpc';
 import {
   ZForgotPasswordFormSchema,
   ZResetPasswordFormSchema,
+  ZRetrieveUserByIdQuerySchema,
   ZUpdatePasswordMutationSchema,
   ZUpdateProfileMutationSchema,
 } from './schema';
 
 export const profileRouter = router({
+  getUser: adminProcedure.input(ZRetrieveUserByIdQuerySchema).query(async ({ input }) => {
+    try {
+      const { id } = input;
+
+      return await getUserById({ id });
+    } catch (err) {
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to retrieve the specified account. Please try again.',
+      });
+    }
+  }),
+
   updateProfile: authenticatedProcedure
     .input(ZUpdateProfileMutationSchema)
     .mutation(async ({ input, ctx }) => {
@@ -40,11 +55,12 @@ export const profileRouter = router({
     .input(ZUpdatePasswordMutationSchema)
     .mutation(async ({ input, ctx }) => {
       try {
-        const { password } = input;
+        const { password, currentPassword } = input;
 
         return await updatePassword({
           userId: ctx.user.id,
           password,
+          currentPassword,
         });
       } catch (err) {
         let message =

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

@@ -1,11 +1,16 @@
 import { z } from 'zod';
 
+export const ZRetrieveUserByIdQuerySchema = z.object({
+  id: z.number().min(1),
+});
+
 export const ZUpdateProfileMutationSchema = z.object({
   name: z.string().min(1),
   signature: z.string(),
 });
 
 export const ZUpdatePasswordMutationSchema = z.object({
+  currentPassword: z.string().min(6),
   password: z.string().min(6),
 });
 
@@ -18,6 +23,7 @@ export const ZResetPasswordFormSchema = z.object({
   token: z.string().min(1),
 });
 
+export type TRetrieveUserByIdQuerySchema = z.infer<typeof ZRetrieveUserByIdQuerySchema>;
 export type TUpdateProfileMutationSchema = z.infer<typeof ZUpdateProfileMutationSchema>;
 export type TUpdatePasswordMutationSchema = z.infer<typeof ZUpdatePasswordMutationSchema>;
 export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;

packages/trpc/server/router.ts

@@ -1,3 +1,4 @@
+import { adminRouter } from './admin-router/router';
 import { authRouter } from './auth-router/router';
 import { documentRouter } from './document-router/router';
 import { fieldRouter } from './field-router/router';
@@ -6,11 +7,14 @@ import { shareLinkRouter } from './share-link-router/router';
 import { procedure, router } from './trpc';
 
 export const appRouter = router({
-  hello: procedure.query(() => 'Hello, world!'),
+  health: procedure.query(() => {
+    return { status: 'ok' };
+  }),
   auth: authRouter,
   profile: profileRouter,
   document: documentRouter,
   field: fieldRouter,
+  admin: adminRouter,
   shareLink: shareLinkRouter,
 });
 

packages/trpc/server/trpc.ts

@@ -1,6 +1,8 @@
 import { TRPCError, initTRPC } from '@trpc/server';
 import SuperJSON from 'superjson';
 
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+
 import { TrpcContext } from './context';
 
 const t = initTRPC.context<TrpcContext>().create({
@@ -28,9 +30,37 @@ export const authenticatedMiddleware = t.middleware(async ({ ctx, next }) => {
   });
 });
 
+export const adminMiddleware = t.middleware(async ({ ctx, next }) => {
+  if (!ctx.session || !ctx.user) {
+    throw new TRPCError({
+      code: 'UNAUTHORIZED',
+      message: 'You must be logged in to perform this action.',
+    });
+  }
+
+  const isUserAdmin = isAdmin(ctx.user);
+
+  if (!isUserAdmin) {
+    throw new TRPCError({
+      code: 'UNAUTHORIZED',
+      message: 'Not authorized to perform this action.',
+    });
+  }
+
+  return await next({
+    ctx: {
+      ...ctx,
+
+      user: ctx.user,
+      session: ctx.session,
+    },
+  });
+});
+
 /**
  * Routers and Procedures
  */
 export const router = t.router;
 export const procedure = t.procedure;
 export const authenticatedProcedure = t.procedure.use(authenticatedMiddleware);
+export const adminProcedure = t.procedure.use(adminMiddleware);

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

@@ -2,10 +2,13 @@
 
 import { HTMLAttributes, useState } from 'react';
 
-import { Copy, Share, Twitter } from 'lucide-react';
+import { Copy, Share } from 'lucide-react';
+import { FaXTwitter } from 'react-icons/fa6';
 
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
 import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -17,14 +20,12 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
-
-export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
+export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
   token: string;
   documentId: number;
 };
 
-export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
+export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => {
   const { toast } = useToast();
   const [, copyToClipboard] = useCopyToClipboard();
 
@@ -59,7 +60,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
       slug = result.slug;
     }
 
-    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
 
     toast({
       title: 'Copied to clipboard',
@@ -84,7 +85,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
     window.open(
       generateTwitterIntent(
         `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
-        `${window.location.origin}/share/${slug}`,
+        `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
       ),
       '_blank',
     );
@@ -98,7 +99,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
         <Button
           variant="outline"
           disabled={!token || !documentId}
-          className="flex-1"
+          className={cn('flex-1', className)}
           loading={isLoading}
         >
           {!isLoading && <Share className="mr-2 h-5 w-5" />}
@@ -119,13 +120,17 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
             <span className="font-medium text-blue-400">@documenso</span>
             . Check it out!
             <span className="mt-2 block" />
-            <span className="break-all font-medium text-blue-400">
-              {window.location.origin}/share/{shareLink?.slug || '...'}
+            <span
+              className={cn('break-all font-medium text-blue-400', {
+                'animate-pulse': !shareLink?.slug,
+              })}
+            >
+              {process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
             </span>
           </div>
 
           <Button variant="outline" className="mt-4" onClick={onTweetClick}>
-            <Twitter className="mr-2 h-4 w-4" />
+            <FaXTwitter className="mr-2 h-4 w-4" />
             Tweet
           </Button>
 

packages/ui/components/signing-card.tsx

@@ -56,7 +56,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
   const sheenGradient = useMotionTemplate`linear-gradient(
     30deg,
     transparent,
-    rgba(var(--sheen-color) / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
+    rgba(var(--sheen-color) / ${sheenOpacity}) ${sheenPosition}%,
     transparent)`;
 
   const cardRef = useRef<HTMLDivElement>(null);
@@ -98,10 +98,12 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
         void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
         void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
 
+        void animate(sheenOpacity, 0, { duration: 2, ease: 'backInOut' });
+
         setTrackMouse(false);
       }, 1000);
     },
-    [cardX, cardY, cardCenterPosition, trackMouse],
+    [cardX, cardY, cardCenterPosition, trackMouse, sheenOpacity],
   );
 
   useEffect(() => {
@@ -126,7 +128,6 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
           transformStyle: 'preserve-3d',
           rotateX,
           rotateY,
-          // willChange: 'transform background-image',
         }}
       >
         <SigningCardContent className="bg-transparent" name={name} />

packages/ui/primitives/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 Combobox = ({ 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 { Combobox };

packages/ui/primitives/dialog.tsx

@@ -16,12 +16,13 @@ const DialogPortal = ({
   children,
   position = 'start',
   ...props
-}: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' }) => (
+}: DialogPrimitive.DialogPortalProps & { position?: 'start' | 'end' | 'center' }) => (
   <DialogPrimitive.Portal className={cn(className)} {...props}>
     <div
       className={cn('fixed inset-0 z-50 flex justify-center sm:items-center', {
         'items-start': position === 'start',
         'items-end': position === 'end',
+        'items-center': position === 'center',
       })}
     >
       {children}
@@ -49,7 +50,9 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { position?: 'start' | 'end' }
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    position?: 'start' | 'end' | 'center';
+  }
 >(({ className, children, position = 'start', ...props }, ref) => (
   <DialogPortal position={position}>
     <DialogOverlay />

packages/ui/primitives/document-flow/document-flow-root.tsx

@@ -97,10 +97,7 @@ export const DocumentFlowFormContainerStep = ({
   return (
     <div>
       <p className="text-muted-foreground text-sm">
-        {title}{' '}
-        <span>
-          ({step}/{maxStep})
-        </span>
+        Step <span>{`${step} of ${maxStep}`}</span>
       </p>
 
       <div className="bg-muted relative mt-4 h-[2px] rounded-md">

packages/ui/primitives/document-flow/single-player-mode-fields.tsx

@@ -70,25 +70,23 @@ export function SinglePlayerModeSignatureField({
     throw new Error('Invalid field type');
   }
 
-  const $paragraphEl = useRef<HTMLParagraphElement>(null);
-
   const { height, width } = useFieldPageCoords(field);
 
+  const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
+  const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
+
   const scalingFactor = useElementScaleSize(
     {
       height,
       width,
     },
-    $paragraphEl,
+    insertedTypeSignature || '',
     maxFontSize,
     fontVariableValue,
   );
 
   const fontSize = maxFontSize * scalingFactor;
 
-  const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
-  const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
-
   return (
     <SinglePlayerModeFieldCardContainer field={field}>
       {insertedBase64Signature ? (
@@ -99,7 +97,6 @@ export function SinglePlayerModeSignatureField({
         />
       ) : insertedTypeSignature ? (
         <p
-          ref={$paragraphEl}
           style={{
             fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
             fontFamily: `var(${fontVariable})`,
@@ -145,7 +142,7 @@ export function SinglePlayerModeCustomTextField({
       height,
       width,
     },
-    $paragraphEl,
+    field.customText,
     maxFontSize,
     fontVariableValue,
   );

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

@@ -22,10 +22,12 @@ const DPI = 2;
 
 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
   onChange?: (_signatureDataUrl: string | null) => void;
+  containerClassName?: string;
 };
 
 export const SignaturePad = ({
   className,
+  containerClassName,
   defaultValue,
   onChange,
   ...props
@@ -210,7 +212,7 @@ export const SignaturePad = ({
   }, [defaultValue]);
 
   return (
-    <div className="relative block">
+    <div className={cn('relative block', containerClassName)}>
       <canvas
         ref={$el}
         className={cn('relative block dark:invert', className)}
@@ -226,7 +228,7 @@ export const SignaturePad = ({
       <div className="absolute bottom-4 right-4">
         <button
           type="button"
-          className="focus-visible:ring-ring ring-offset-background rounded-full p-0 text-xs text-slate-500 focus-visible:outline-none focus-visible:ring-2"
+          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"
           onClick={() => onClearClick()}
         >
           Clear Signature

render.yaml

@@ -0,0 +1,103 @@
+services:
+  - type: web
+    name: documenso-app
+    env: node
+    plan: free
+    buildCommand: npm i && npm run build:web
+    startCommand: npx prisma migrate deploy --schema packages/prisma/schema.prisma && npm run start
+    healthCheckPath: /api/trpc/health
+
+    envVars:
+      # Node Version
+      - key: NODE_VERSION
+        value: 18.17.0
+
+      - key: PORT
+        value: 10000
+
+      # Auth
+      - key: NEXTAUTH_URL
+        fromService:
+          name: documenso-app
+          type: web
+          envVarKey: RENDER_EXTERNAL_URL
+      - key: NEXTAUTH_SECRET
+        generateValue: true
+
+      # Database
+      - key: NEXT_PRIVATE_DATABASE_URL
+        fromDatabase:
+          name: documenso-db
+          property: connectionString
+
+      - key: NEXT_PRIVATE_DIRECT_DATABASE_URL
+        fromDatabase:
+          name: documenso-db
+          property: connectionString
+
+      # URLs
+      - key: NEXT_PUBLIC_WEBAPP_URL
+        fromService:
+          name: documenso-app
+          type: web
+          envVarKey: RENDER_EXTERNAL_URL
+      - key: NEXT_PUBLIC_MARKETING_URL
+        value: 'http://localhost:3001'
+
+      # SMTP
+      - key: NEXT_PRIVATE_SMTP_TRANSPORT
+        value: 'smtp-auth'
+      - key: NEXT_PRIVATE_SMTP_HOST
+        sync: false
+      - key: NEXT_PRIVATE_SMTP_PORT
+        sync: false
+      - key: NEXT_PRIVATE_SMTP_USERNAME
+        sync: false
+      - key: NEXT_PRIVATE_SMTP_PASSWORD
+        sync: false
+      - key: NEXT_PRIVATE_SMTP_FROM_NAME
+        sync: false
+      - key: NEXT_PRIVATE_SMTP_FROM_ADDRESS
+        sync: false
+
+      # Stripe
+      - key: NEXT_PRIVATE_STRIPE_API_KEY
+        sync: false
+      - key: NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET
+        sync: false
+      - key: NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
+        sync: false
+      - key: NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID
+        sync: false
+
+      # Features
+      - key: NEXT_PUBLIC_POSTHOG_KEY
+        sync: false
+      - key: NEXT_PUBLIC_POSTHOG_HOST
+        value: 'https://eu.posthog.com'
+      - key: NEXT_PUBLIC_FEATURE_BILLING_ENABLED
+        sync: false
+
+      # Redis (Only required for marketing site, but added for completeness)
+      - key: NEXT_PRIVATE_REDIS_URL
+        sync: false
+      - key: NEXT_PRIVATE_REDIS_TOKEN
+        sync: false
+
+      # Storage
+      - key: NEXT_PUBLIC_UPLOAD_TRANSPORT
+        value: 'database'
+      - key: NEXT_PRIVATE_UPLOAD_ENDPOINT
+        sync: false
+      - key: NEXT_PRIVATE_UPLOAD_REGION
+        sync: false
+      - key: NEXT_PRIVATE_UPLOAD_BUCKET
+        sync: false
+      - key: NEXT_PRIVATE_UPLOAD_ACCESS_KEY_ID
+        sync: false
+      - key: NEXT_PRIVATE_UPLOAD_SECRET_ACCESS_KEY
+        sync: false
+
+databases:
+  - name: documenso-db
+    plan: free